/*
Theme Name: Swiggers
Theme URI: https://example.com/swiggers
Author: Swiggers Theme
Author URI: https://example.com
Description: A golf club WordPress theme called Swiggers.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: swiggers
Tags: custom-background, custom-logo, custom-menu, featured-images


.adamina-regular {
  font-family: "Adamina", serif;
  font-weight: 400;
  font-style: normal;
}

.inter-<uniquifier> {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


*/

/* Site-wide content width. Outer wrappers cap at this; padded inner content
   boxes use calc(--content-max-width - 40px) so their outer edge still lands
   on the same line. Change this one value to re-scale the whole layout. */
:root {
    --content-max-width: 1440px;

    /* Shared hero height. The home hero, the competitions hero and the event
       page's image + green band stack all measure this tall on desktop, so the
       three pages line up. Derived from a fully filled-in event stack (Woking:
       420px image + 224px band). Applies above the 900px breakpoint only —
       below that each hero reverts to its natural proportions. */
    --hero-height: 644px;

    /* Green buttons carry the same vertical gradient as the event hero band
       (.event-hero-band), per the Figma design. Declared as background-image so
       the flat colour underneath stays as a fallback. */
    --btn-gradient: linear-gradient(to bottom, #01503B 0%, #06936B 100%);
    --btn-gradient-hover: linear-gradient(to bottom, #013C2C 0%, #056E50 100%);

    /* Elevation, read from the Figma file: the design uses the Tailwind shadow
       scale. Cards and panels are shadow-lg, their raised/hover state shadow-xl,
       and the nav bar the plain default. Previously everything sat on a much
       flatter 0 2px 4px rgba(0,0,0,0.05), which the client rightly called
       understated. The Roll of Honour boards carry their own heavier shadow,
       also straight from the design. */
    --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --bar-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --board-shadow: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);

    /* Shared gutter for the home page's 2-up grids (calendar + quick-nav tiles)
       so they stay in step. Tightens on phones, where the grids are single
       column and the gap reads as vertical spacing between stacked cards. */
    --home-grid-gap: 2.5rem;

    /* One size for every page-section <h2> ("2026 Calendar", "Who's Playing?",
       "Top Gun", the member-type headings…). These had drifted to 1.5 / 1.6 /
       1.7 / 2rem across the templates. Page titles (h1) and the "Next up"
       feature title are deliberately larger and don't use this. */
    --section-heading-size: 1.7rem;
}

@media (max-width: 640px) {
    :root { --home-grid-gap: 1.5rem; }
}

/* BASE STYLES */
html, body {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    line-height: 1.8;
    color: #4a4a4a;
    background: #fafafa;
}

body {
    background-color: #fafafa;
}

a {
    color: #8b7355;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #d4a574;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Adamina", serif;
    font-weight: 400;
    font-style: normal;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    line-height: 1.3;
    color: #2c2c2c;
}

h1 {
    font-size: 3rem;
    margin-top: 0;
}

h2 {
    font-size: 2rem;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 0.5em;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 1.2em;
}

button {
    font-family: inherit;
}



/* HEADER & NAVIGATION */
.site-header {
    /* Bar depth is set explicitly rather than derived from the logo, so the
       logo can grow and bleed downwards without deepening the bar. 89px is the
       depth the bar already had (7px padding + the old 140px logo). */
    --header-bar-height: 89px;
    --logo-width: 200px;

    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: var(--bar-shadow);
}

.site-header-inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 2rem;
    min-height: var(--header-bar-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* The logo is lifted out of flow so it can overhang the bar. Branding keeps the
   logo's width as a flex item so the nav still lays out around it. */
.site-branding {
    position: relative;
    align-self: stretch;
    flex: 0 0 auto;
    width: var(--logo-width);
}

/* The link stays inside the bar, so the overhanging trail doesn't swallow
   clicks meant for the page beneath it. */
.site-branding > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* The artwork is 339.59 x 196.32 (h = 0.5781w) and the green "Sw1gs" wordmark
   occupies the top 65.7% of it, the gold ball trail running on alone below.
   Centring the WORDMARK on the bar therefore means offsetting the logo's top
   edge by half the wordmark band: 50% - (0.3283 x 0.5781 x width), i.e.
   50% - 0.1898 x width. The remaining ~33px of trail bleeds onto the page.
   Written against --logo-width so the overhang stays correct if it changes. */
.swigslogo {
    position: absolute;
    left: 0;
    top: calc(50% - var(--logo-width) * 0.1898);
    width: var(--logo-width);
    height: auto;
    display: block;
    pointer-events: none;
}

.site-branding .site-title {
    font-size: 2.2rem;
    font-family: "Adamina", serif;
    font-weight: 600;
    font-style: normal;
    color: #2c2c2c;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform:uppercase;
}

.site-branding .site-title:hover {
    text-decoration: none;
    color: #8b7355;
}

.site-branding-description {
    font-size: 0.75rem;
    color: #999;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 0.3rem;
}

.site-navigation {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: 0.95rem;
}

.nav-menu a {
    color: #4a4a4a;
    font-weight: 500;
    padding: 0.5rem 0;
    transition: color 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
}

.nav-menu a:hover {
    color: #8b7355;
    text-decoration: none;
}

/* "My SW1GS" keeps its exact casing; the rest of the nav is uppercased. */
.nav-menu .swiggers-account-link a {
    text-transform: none;
}

.menu-item-has-children {
    position: relative;
}

.sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 220px;
    display: none;
    box-shadow: var(--card-shadow);
    z-index: 1000;
    border-top: 3px solid #8b7355;
}

.menu-item-has-children:hover .sub-menu {
    display: block;
}

.sub-menu li {
    display: block;
    border-bottom: 1px solid #f0f0f0;
}

.sub-menu li:last-child {
    border-bottom: none;
}

.sub-menu a {
    display: block;
    padding: 0.9rem 1.5rem;
    color: #4a4a4a;
    text-transform: none;
    letter-spacing: 0;
    font-weight: normal;
}

.sub-menu a:hover {
    background: #f9f9f9;
    color: #8b7355;
}

.loginout {padding:2px 15px; background-color:#007A55; background-image:var(--btn-gradient); color:#ffffff; border-radius:25px;}
.loginout a {color:#ffffff;}
.loginout a:hover {color:yellow;}

/* MOBILE MAIN MENU (burger + slide-down panel)
   Built to the Figma "nav NEW" / "nav NEW 2" mobile frames. Above the
   breakpoint the panel is an inert wrapper and the burger is hidden, so the
   desktop nav and its hover dropdowns behave exactly as before. */

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

.menu-toggle {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #0F5132;
}
/* Three bars from one element: the middle bar is the element itself. */
.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
    position: absolute;
    left: 50%;
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: translateX(-50%);
    transition: transform 0.22s ease, opacity 0.15s ease;
}
.menu-toggle-bars {
    top: 50%;
    margin-top: -1px;
}
.menu-toggle-bars::before,
.menu-toggle-bars::after {
    content: "";
    left: 0;
    transform: none;
}
.menu-toggle-bars::before { top: -7px; }
.menu-toggle-bars::after  { top: 7px; }

/* Open state: the bars collapse into an X. */
.menu-toggle.is-active .menu-toggle-bars { background: transparent; }
.menu-toggle.is-active .menu-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active .menu-toggle-bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* Sub-menu chevrons belong to the mobile sheet only — they're injected into the
   DOM at every width, so they have to be hidden here or they show up beside the
   desktop dropdown parents. */
.nav-submenu-toggle { display: none; }

@media only screen and (max-width: 900px) {
    /* Smaller bar and logo on phones; the overhang scales with --logo-width. */
    .site-header {
        --header-bar-height: 74px;
        --logo-width: 155px;
    }

    .menu-toggle { display: block; }

    /* Anchored to .site-header (sticky, so it's the containing block). */
    .nav-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #E2E8F0;
        box-shadow: var(--card-shadow);
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height 0.28s ease, visibility 0s linear 0.28s;
    }
    .nav-panel.is-open {
        max-height: calc(100vh - var(--header-bar-height));
        overflow-y: auto;
        visibility: visible;
        transition: max-height 0.28s ease, visibility 0s;
    }

    /* Stacked rows */
    .nav-menu {
        display: block;
        gap: 0;
    }
    .nav-menu > li {
        position: relative;
        border-bottom: 1px solid #E2E8F0;
    }
    .nav-menu > li:last-child { border-bottom: none; }
    .nav-menu > li > a {
        display: block;
        padding: 0.75rem 3.5rem 0.75rem 1.9rem;
        font-family: "Inter", sans-serif;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0;
        text-transform: none;
        color: #0F172B;
    }
    .nav-menu > li > a:hover { color: #007A55; }

    /* The account item is a green pill in the desktop bar; in the sheet it's
       just a green row, per the Figma "Login" row. */
    .nav-panel .loginout {
        background: none;
        padding: 0;
        border-radius: 0;
    }
    .nav-panel .loginout > a,
    .nav-panel .swiggers-account-link > a {
        color: #007A55;
        font-weight: 600;
    }

    /* Chevron toggle (injected by nav-mobile.js) */
    .nav-submenu-toggle {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 48px;
        padding: 0;
        background: none;
        border: none;
        color: #0F172B;
        cursor: pointer;
    }
    .nav-submenu-toggle svg {
        width: 20px;
        height: 20px;
        transition: transform 0.2s ease;
    }
    .menu-item-has-children.is-expanded > .nav-submenu-toggle svg {
        transform: rotate(180deg);
    }

    /* Sub-menus drop inline instead of hovering; the :hover rule above would
       otherwise still fire on touch, so this has to out-specify it. */
    .nav-panel .menu-item-has-children > .sub-menu {
        position: static;
        display: none;
        min-width: 0;
        border-top: none;
        box-shadow: none;
        background: #ECFDF5;
    }
    .nav-panel .menu-item-has-children.is-expanded > .sub-menu { display: block; }
    .nav-panel .sub-menu li { border-bottom: none; }
    .nav-panel .sub-menu a {
        padding: 0.6rem 1.9rem 0.6rem 2.6rem;
        font-size: 0.95rem;
        color: #334155;
    }
    .nav-panel .sub-menu a:hover { background: none; color: #007A55; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-panel,
    .nav-submenu-toggle svg,
    .menu-toggle-bars,
    .menu-toggle-bars::before,
    .menu-toggle-bars::after { transition: none; }
}

/* MAIN CONTENT */

.hero {max-width:var(--content-max-width);height:auto;display: block;overflow: hidden;margin:0 auto;margin-bottom: -10px;}
.hero img {width:100%; height:auto;}

#main { padding-top:20px; padding-bottom:20px;background-color:#fafafa;}
#main .content {padding:20px;background-color: #ffffff;display: block; overflow: hidden; border-radius:5px;max-width:calc(var(--content-max-width) - 40px); margin:0 auto;box-shadow: var(--card-shadow);}



/* MEMBERS LIST */
.page-title { margin-bottom: 0.5em; }

.members-gate { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.button {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background-color: #007A55;
    background-image: var(--btn-gradient);
    color: #fff;
    /* <button> elements otherwise keep the browser's 3D border, which reads as a
       dark bottom-right edge next to an identically-classed <a>. */
    border: 0;
    border-radius: 5px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.button:hover { color: #fff; background-color: #006044; background-image: var(--btn-gradient-hover); }

.members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.members-table thead th {
    text-align: left;
    background: #f1f5f3;
    color: #2c2c2c;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-family: "Adamina", serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #007A55;
}
.members-table tbody td {
    text-align: left;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.members-table tbody tr:nth-child(even) { background: #f7f9f8; }
.members-table tbody tr:hover { background: #eef4f1; }
.members-table .col-joined { white-space: nowrap; font-variant-numeric: tabular-nums; }
.members-table .col-hcp { white-space: nowrap; font-variant-numeric: tabular-nums; color: #007A55; font-weight: 600; }
.win-asterisks { color: #c0392b; font-weight: 700; margin-left: 2px; cursor: help; }
.runnerup-asterisks { color: #2563eb; font-weight: 700; margin-left: 1px; cursor: help; }

/* Members page: centered titles + grouped layout (matches Figma) */
.members-title {
    text-align: center;
    margin-bottom: 0.4em;
}
.members-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #007A55;
    margin: 0.4rem auto 0;
    border-radius: 2px;
}
.members-section-title {
    text-align: center;
    border-bottom: none;
    font-size: var(--section-heading-size);
    margin: 2rem 0 1rem;
}
.members-empty, .members-gate { text-align: center; }

/* Committee cards */
.committee-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 1000px;
    margin: 0 auto 1rem;
}
.committee-card {
    border: 1px solid #e3eae7;
    background: #f7faf9;
    border-radius: 6px;
    padding: 0.9rem 1.2rem;
    text-align: center;
}
.committee-role {
    display: block;
    color: #007A55;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}
.committee-name { display: block; font-size: 1.05rem; color: #2c2c2c; }

/* Each member-type table sits in a centered card */
.members-table-wrap {
    max-width: 1000px;
    margin: 0 auto 1.5rem;
    border: 1px solid #ececec;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}
.members-table-wrap .members-table { margin: 0; }

/* Stack the table into cards on mobile (members are mostly on phones). */
@media only screen and (max-width: 768px) {
    .committee-grid { grid-template-columns: 1fr; }
    .members-table thead { display: none; }
    .members-table, .members-table tbody, .members-table tr, .members-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .members-table tr {
        margin-bottom: 1rem;
        border: 1px solid #e8e8e8;
        border-radius: 5px;
        overflow: hidden;
    }
    .members-table tbody tr:nth-child(even) { background: #fff; }
    .members-table td {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.25rem 1rem;
        border-bottom: 1px solid #f0f0f0;
        padding: 0.6rem 1rem;
        text-align: right;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .members-table td:last-child { border-bottom: none; }
    .members-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        text-align: left;
        font-weight: 600;
        color: #007A55;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }
    /* Let long values (e.g. emails) break instead of overflowing. */
    .members-table td a { word-break: break-word; }
}

/* ACCOUNT / AUTH FORMS */
.notice {
    padding: 0.75rem 1rem;
    border-radius: 5px;
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
}
.notice-success { background: #e6f4ee; color: #006044; border: 1px solid #b8e0cd; }
.notice-error   { background: #fdecea; color: #a02622; border: 1px solid #f5c6c2; }

.swiggers-form .form-row { margin: 0 0 1rem; }
.swiggers-form label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #2c2c2c;
}
.swiggers-form input[type="text"],
.swiggers-form input[type="email"],
.swiggers-form input[type="password"],
.swiggers-form input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1rem;
}
.swiggers-form input:focus {
    outline: none;
    border-color: #007A55;
    box-shadow: 0 0 0 2px rgba(0,122,85,0.15);
}
.swiggers-form .form-row-inline label { display: inline-flex; align-items: center; gap: 0.4rem; text-transform: none; font-weight: 400; }
.swiggers-form .checkbox-label input { width: auto; }
.swiggers-form .form-helper { font-size: 0.9rem; }

/* Outline variant: has to clear the gradient it inherits from .button, then
   fill with it on hover. */
.button-secondary {
    background-color: #fff;
    background-image: none;
    color: #007A55;
    border: 1px solid #007A55;
}
.button-secondary:hover { background-color: #007A55; background-image: var(--btn-gradient); color: #fff; }

/* Login */
/* The login box. Shared by My SW1GS and the four gated pages (2026-08-17), so
   it needs its own breathing room rather than relying on the account page's
   layout — on a gated page it's the only thing in the content column. */
.account-login { max-width: 420px; margin: 0 auto; padding: 2.5rem 0 3rem; text-align: left; }
.account-login-title { margin: 0 0 0.5rem; font-size: 1.6rem; color: #01503B; }
.account-login-lead { margin: 0 0 1.5rem; color: #555; }
.account-help { font-size: 0.85rem; color: #777; margin-top: 1rem; }

/* Dashboard */
.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.account-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}
.account-card {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    background: #fff;
}
.account-card h2 {
    font-size: 1.25rem;
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
}
.account-card-wide { grid-column: 1 / -1; }

.account-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; margin: 0; }
.account-dl dt { font-weight: 600; color: #555; }
.account-dl dd { margin: 0; }
.account-note { color: #c0392b; font-size: 0.85rem; margin-left: 0.25rem; }
.account-empty { color: #777; font-style: italic; }

/* Account event lists (Phase 3.11b/c) */
.account-event-list { list-style: none; margin: 0; padding: 0; }
.account-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.account-event:last-child { border-bottom: 0; }
.account-event-main { display: flex; flex-direction: column; gap: 0.15rem; }
.account-event-title { font-weight: 600; color: #007A55; }
.account-event-date { font-size: 0.85rem; color: #777; }
.account-event-guests { font-size: 0.8rem; color: #999; }
.account-event-pay { flex-shrink: 0; }

/* Results history: year tabs + table (Phase 3.11c) */
.results-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 2px solid #eee; }
.results-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.45rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #888;
    cursor: pointer;
}
.results-tab:hover { color: #007A55; }
.results-tab.is-active { color: #007A55; border-bottom-color: #007A55; }

/* Only the active year shows; with JS off the most-recent year (pre-marked
   .is-active) stays visible, so results never disappear. */
.results-year { display: none; }
.results-year.is-active { display: block; }

.account-results-table { width: 100%; border-collapse: collapse; }
.account-results-table th,
.account-results-table td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.account-results-table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #999;
    font-weight: 600;
}
.account-results-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.account-results-table .account-event-date { display: block; }
.account-partners { color: #666; font-size: 0.9rem; }
.result-pos { font-weight: 700; color: #333; }
.result-pos-1 { color: #b8860b; }
.result-pos-2 { color: #8a8a8a; }
.result-pos-3 { color: #b5713b; }
.result-comp { color: #777; font-size: 0.85rem; }
.result-prize {
    display: inline-block;
    background: #fbf1d2;
    color: #8a6400;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    margin-top: 0.2rem;
}
.result-pending { color: #999; font-style: italic; font-size: 0.85rem; }

@media only screen and (max-width: 600px) {
    .account-results-table thead { display: none; }
    .account-results-table tr { display: block; border-bottom: 2px solid #eee; padding: 0.5rem 0; }
    .account-results-table td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: 0.2rem 0; }
    .account-results-table td.num { justify-content: flex-start; }
    .account-results-table td::before { content: attr(data-label); color: #999; font-size: 0.75rem; text-transform: uppercase; }
}

.pill {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.pill-paid { background: #e6f4ee; color: #006044; }
.pill-due  { background: #fdecea; color: #a02622; }

@media only screen and (max-width: 768px) {
    .account-grid { grid-template-columns: 1fr; }
}

/* SINGLE EVENT PAGE */
/* Scroll target for post-action reloads (offset for the sticky header). */
.event-anchor { position: relative; scroll-margin-top: 90px; }

/* Image + band are one stack whose TOTAL height matches the home and
   competitions heroes. The band is content-sized (it grows a line at a time with
   the defending champions, and tours add a type label and a location), so the
   image flexes to absorb that variance — every event and tour lands on
   --hero-height whatever its content. min-height rather than height so that
   pathological content (a course name wrapping to three lines) pushes the stack
   taller instead of collapsing the image. */
.event-hero-stack {
    display: flex;
    flex-direction: column;
    min-height: var(--hero-height);
    max-width: var(--content-max-width);
    margin: 0 auto;
}
.event-hero {
    flex: 1 1 auto;
    min-height: 260px; /* floor, so the image never becomes a sliver */
    background-size: cover;
    background-position: center;
}
/* Details band sits below the image with a vertical dark-green (top) to
   light-green (bottom) gradient, per the Figma design. */
.event-hero-band {
    flex: 0 0 auto;
    background: linear-gradient(to bottom, #01503B 0%, #06936B 100%);
    padding: 2rem;
    box-sizing: border-box;
}
.event-hero-inner { max-width: calc(var(--content-max-width) - 40px); margin: 0 auto; color: #fff; }
.event-title { color: #fff; margin: 0 0 0.3rem; font-size: 2.6rem; }
.event-date { color: #eafff5; margin: 0 0 0.6rem; font-size: 1.05rem; }
.event-champ { color: #fff; margin: 0.2rem 0; font-size: 0.95rem; opacity: 0.97; }
.event-champ strong { color: #fff; }
.event-champ-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    color: #ffd54a;
    vertical-align: -3px;
    margin-right: 6px;
}

.event-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
    align-items: stretch;
}
/* Event Details is its own card, matching the venue card beside it. */
.event-main {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 1.75rem 2rem 2rem;
    box-shadow: var(--card-shadow);
}
.event-section-heading {
    font-size: var(--section-heading-size);
    padding-bottom: 0.4rem;
    margin-top: 0;
}
.event-section-heading.no-divider { border-bottom: none; }
.event-section-heading.centered {
    text-align: center;
    border-bottom: none;
    margin-top: 2.5rem;
}
.event-section-heading.centered::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #007A55;
    margin: 0.4rem auto 0;
    border-radius: 2px;
}

.event-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.event-detail {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.event-detail-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: #007A55;
    margin-top: 2px;
}
.event-detail-text { display: flex; flex-direction: column; }
.event-detail-label {
    color: #2c2c2c;
    font-weight: 700;
    font-size: 1rem;
}
.event-detail-value { color: #666; }
.event-detail-sub { display: block; color: #9a9a9a; font-size: 0.85rem; }

.event-intro {
    color: #444;
    background: #f7f7f7;
    border-radius: 6px;
    padding: 1rem 1.25rem;
}
.event-intro p:last-child { margin-bottom: 0; }

/* The Course: slope chart + scorecard (Phase 3.5) */
.course-card {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}
.course-slope {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5rem;
}
.course-slope-stat { text-align: center; }
.course-slope-num {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #007A55;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.course-slope-label {
    display: block;
    font-size: 0.85rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.course-slope-note {
    text-align: center;
    color: #9a9a9a;
    font-size: 0.85rem;
    margin: 0.75rem 0 0;
}
.course-scorecard-wrap {
    overflow-x: auto;
    margin-top: 1.25rem;
    -webkit-overflow-scrolling: touch;
}
.course-scorecard {
    border-collapse: collapse;
    width: 100%;
    min-width: 640px;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}
.course-scorecard th,
.course-scorecard td {
    border: 1px solid #ececec;
    padding: 0.4rem 0.5rem;
    text-align: center;
}
.course-scorecard thead th {
    background: #007A55;
    color: #fff;
    font-weight: 600;
}
.course-scorecard tbody th {
    background: #f7f7f7;
    text-align: left;
    white-space: nowrap;
    font-weight: 700;
    color: #2c2c2c;
}
.course-scorecard .course-sc-sub { background: #f0f6f3; font-weight: 600; }
.course-scorecard thead .course-sc-sub { background: #00684a; }
.course-scorecard .course-sc-tot { background: #e7f0ec; font-weight: 700; }
.course-scorecard thead .course-sc-tot { background: #005a40; }

/* The sidebar stretches to the main card's height and the venue card flexes to
   fill it, so the actions row sits at the bottom of the column — which is what
   makes the client's design hold its proportions at any content length. */
.event-sidebar { display: flex; flex-direction: column; gap: 1.25rem; align-self: stretch; }
.event-sidebar .event-venue-card { flex: 1 1 auto; }
/* A tour stacks one venue card per round BELOW the actions, so they keep their
   natural height — the grow above exists only to pin a single event's actions
   row to the bottom of the column, and would stretch these apart. */
.tour-single .event-sidebar .event-venue-card { flex: 0 0 auto; }
.event-venue-card {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 1.25rem;
    background: #fff;
}
/* Sans, not the site's serif h3 — per the client's design. */
.event-venue-card h3 {
    margin-top: 0;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
}
.event-venue-about { font-size: 0.95rem; color: #555; }
.event-venue-link { font-weight: 600; color: #007A55; }
.event-venue-link:hover { color: #01503B; }

/* Actions row: price tile beside the button stack (~35/65 in the design). The
   tile drops out once entries close and the buttons take the full width. */
.event-actions {
    display: grid;
    grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
    gap: 0.9rem;
    align-items: stretch;
}
.event-actions.is-no-price { grid-template-columns: minmax(0, 1fr); }

.event-price-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    background: #F1FDF5;
    border: 1px solid #d9f0e4;
    border-radius: 8px;
    padding: 1rem 0.75rem;
    text-align: center;
}
.event-price-amount {
    font-family: "Adamina", serif;
    font-size: 2rem;
    line-height: 1.1;
    color: #2c2c2c;
}
.event-price-unit { font-size: 0.8rem; color: #6b7280; }

.event-action-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
}
.event-action-buttons form { margin: 0; }
/* Buttons carry an icon, so they centre their own content rather than relying
   on the .button block/text-align rules. */
.event-action-buttons .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1.2rem;
    margin: 0;
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: 0;
    border: none;
    cursor: pointer;
}
.event-action-buttons .button-secondary { border: 1px solid #007A55; }
.event-action-buttons .button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.event-action-icon { width: 18px; height: 18px; flex: none; }

/* Detail behind the actions — payment, guests, the guest form, withdraw. E2/E3
   lift this into the booking overlay; it renders inline until then (and stays
   inline when JavaScript is unavailable). */
.event-booking-panel {
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
}
.event-guest-form-title { font-weight: 600; margin: 0 0 0.5rem; text-align: left; }
.event-booking-lead { font-size: 0.95rem; color: #555; margin: 0 0 1rem; }

/* With JS the panel is moved into the overlay, so hide it where it sits. The
   `js` class is set in <head>, so it never flashes; without JS this rule never
   applies and the panel stays inline and fully functional. */
.js .event-sidebar .event-booking-panel { display: none; }

/* BOOKING OVERLAY */
.booking-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}
.booking-modal[hidden] { display: none; }
.booking-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
}
.booking-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--card-shadow-hover);
    animation: booking-modal-in 0.18s ease;
}
@keyframes booking-modal-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.booking-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid #ececec;
}
.booking-modal-title {
    margin: 0;
    font-size: 1.25rem;
    border-bottom: none;
    padding-bottom: 0;
}
.booking-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: -6px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
}
.booking-modal-close:hover { background: #f3f4f6; color: #2c2c2c; }
.booking-modal-close svg { width: 20px; height: 20px; }

/* Inside the overlay the panel is the body, so it drops its own box chrome. */
.booking-modal-body .event-booking-panel {
    display: block;
    border: none;
    border-radius: 0;
    padding: 1.35rem;
}
.booking-modal-body .event-booking-panel .button { width: 100%; box-sizing: border-box; }

body.booking-modal-open { overflow: hidden; }

.booking-notice { margin: 0 0 1rem; }

/* Two-step withdraw (no browser confirm()) */
.event-withdraw { margin-top: 0.75rem; }
.event-withdraw summary { list-style: none; cursor: pointer; }
.event-withdraw summary::-webkit-details-marker { display: none; }
.event-withdraw-confirm {
    margin-top: 0.6rem;
    padding: 0.85rem;
    background: #fdf3f2;
    border: 1px solid #f3d6d3;
    border-radius: 6px;
}
.event-withdraw-confirm p { margin: 0 0 0.7rem; font-size: 0.9rem; color: #7c1d19; }
.button-danger {
    background-color: #a02622;
    background-image: none;
}
.button-danger:hover { background-color: #7c1d19; background-image: none; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .booking-modal-dialog { animation: none; }
}
.button:disabled { opacity: 0.55; cursor: not-allowed; }
.event-signup-note { font-size: 0.8rem; color: #999; margin: 0.5rem 0 0; }
.event-empty { text-align: center; color: #777; font-style: italic; }
.event-signedup { color: #006044; font-weight: 700; margin: 0 0 0.75rem; }
.event-full { color: #a02622; font-weight: 700; }
.event-entries-closed { color: #8a6d00; font-weight: 700; margin: 0 0 0.75rem; }

/* My guests (in the sign-up card) */
.event-my-guests { list-style: none; margin: 0 0 0.75rem; padding: 0; text-align: left; }
.event-my-guests li { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0; border-bottom: 1px solid #ececec; font-size: 0.9rem; }
.inline-form { display: inline; margin: 0; }
.link-remove { background: none; border: none; color: #a02622; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; }

/* Guest toggle */
.event-guest-form { margin-top: 0.6rem; }
.event-guest-form input { width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem; border: 1px solid #d6d6d6; border-radius: 5px; font-family: inherit; }
.event-guest-form p { margin: 0 0 0.5rem; }

/* Who's playing */
.event-playing-count { text-align: center; color: #777; margin-top: -0.4rem; }
.players-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 0 auto 1rem;
}
.player-card {
    position: relative;
    border: 1px solid #ececec;
    background: #f9faf9;
    border-radius: 6px;
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
}
.player-name { font-weight: 700; color: #2c2c2c; }
.player-host { font-size: 0.75rem; color: #999; }
.player-hpc { font-size: 0.85rem; color: #007A55; }
.players-guests-title { text-align: center; font-size: 1.15rem; margin: 1.5rem 0 0.75rem; }
.player-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff3cd;
    color: #b8860b;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width: 1100px) {
    .players-grid { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 820px) {
    .players-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 520px) {
    .players-grid { grid-template-columns: 1fr; }
}

/* Tee sheet (Phase 3.5) */
.tee-sheet {
    --tee-sheet-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tee-sheet-gap);
    max-width: 1000px;
    margin: 0 auto 1rem;
}
/* A tee card left alone on its row centres rather than sitting ranged left
   against an empty half (2026-08-17, client request). It spans both columns so
   it has the full width to centre within, then takes a single column's width
   back so it still matches the cards above it — hence the gap being a variable,
   so the two can't drift.

   `is-orphan` is set in PHP (swiggers_flag_orphan_tee_cards). This began as a
   CSS-only :last-child:nth-child(odd) rule, but splitting a tall tee across the
   full width breaks that parity: a split card can strand the single card before
   it, which is not :last-child. Only PHP knows the real row layout. */
.tee-sheet > .tee-card.is-orphan {
    grid-column: 1 / -1;
    justify-self: center;
    /* The theme has no global border-box reset, so without this the card's 1px
       border lands outside the width and the centred card measures 2px wider
       than the ones above it. Scoped here rather than fixed globally. */
    box-sizing: border-box;
    width: calc((100% - var(--tee-sheet-gap)) / 2);
}

/* A single tee with more players than the split threshold runs as two tables
   side by side instead of one very long one. The card takes the full width so
   each half is still a normal column's width — a split inside a half-width
   card would leave two ~240px tables, worse than the problem. */
.tee-sheet > .tee-card.is-split {
    grid-column: 1 / -1;
}
.tee-card-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
/* Table layout is fixed so the two halves agree on their column positions —
   left to themselves, a long name in one half would shift its Players/HPC
   boundary out of line with the other. */
.tee-card-split .tee-table {
    table-layout: fixed;
}
.tee-card-split .tee-table:first-child {
    border-right: 1px solid #ececec;
}
.tee-card {
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.tee-card-head {
    background: #f5f6f7;
    padding: 0.7rem 1.1rem;
    font-weight: 700;
    color: #2c2c2c;
    border-bottom: 1px solid #e6e6e6;
}
.tee-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.tee-table thead th {
    text-align: left;
    font-weight: 700;
    color: #2c2c2c;
    padding: 0.55rem 1.1rem;
    border-bottom: 1px solid #ececec;
}
.tee-table th.tee-col-hpc,
.tee-table td.tee-hpc { text-align: right; }
.tee-table th.tee-col-time,
.tee-table td.tee-time { width: 4.5rem; white-space: nowrap; }
.tee-table td {
    padding: 0.32rem 1.1rem;
    color: #555;
    vertical-align: middle;
}
.tee-table tr.flight-start td { border-top: 1px solid #f0f0f0; }
.tee-table tbody tr.flight-start:first-child td { border-top: none; }
.tee-time { font-weight: 700; color: #2c2c2c; }
.tee-pname { color: #333; }
.tee-hpc { color: #007A55; }
.tee-guest-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #f0c040;
    margin-left: 0.35rem;
    vertical-align: middle;
}

@media only screen and (max-width: 768px) {
    .tee-sheet { grid-template-columns: 1fr; }
    /* Single column, so every card is already the full width — centring an
       orphan at half width would shrink it. justify-self must go back to
       stretch as well: on its own, `width: auto` under `justify-self: center`
       shrink-wraps the card to its content, leaving it narrower than the
       full-width cards above it. */
    .tee-sheet > .tee-card.is-orphan {
        width: auto;
        justify-self: stretch;
    }
    /* Two ~145px tables would be unreadable, so a split stacks instead. Flight
       order is preserved, so it still reads chronologically top to bottom. */
    .tee-card-split { grid-template-columns: 1fr; }
    .tee-card-split .tee-table { table-layout: auto; }
    .tee-card-split .tee-table:first-child {
        border-right: 0;
        border-bottom: 1px solid #ececec;
    }
}

.event-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}
.event-nav-next { text-align: right; margin-left: auto; }
.event-nav a { font-weight: 600; }

@media only screen and (max-width: 900px) {
    .event-layout { grid-template-columns: 1fr; }
    .event-details-grid { grid-template-columns: 1fr; }
    .event-title { font-size: 2rem; }
    /* Below the breakpoint the stack stops being height-matched — a fixed 644px
       would leave the image a sliver above the band once the text wraps. */
    .event-hero-stack { min-height: 0; }
    .event-hero { min-height: 300px; }
}

/* FOOTER CONTENT */
#footer { box-shadow: var(--card-shadow);background-color:#ffffff;}
#footer .content {padding:10px 15px; font-size:14px; color:#007A55;}



@media only screen and (max-width: 1440px) {

    #main .content {margin-left:20px;margin-right:20px;}

}

/* ---------------------------------------------------------------------------
   EVENT GALLERY (Phase 3.9)
   --------------------------------------------------------------------------- */
.gallery-upload {
    text-align: center;
    margin: 0 0 1.5rem;
}
/* The file input is hidden; the <label> is styled as the green Upload button. */
.gallery-upload-btn {
    display: inline-block;
    cursor: pointer;
}
.gallery-upload-btn input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.event-gallery {
    display: grid;
    /* auto-fit + capped max (not 1fr) so short rows centre instead of
       left-aligning; justify-content centres the whole grid. */
    grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.gallery-item {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    background: #f1f1f1;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #777;
    padding: 1.5rem 0;
}

@media only screen and (max-width: 768px) {
    .event-gallery { grid-template-columns: repeat(auto-fit, minmax(100px, 160px)); }
}

/* Lightbox (progressive enhancement) */
.glb-noscroll { overflow: hidden; }
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    padding: env(safe-area-inset-top) 1rem env(safe-area-inset-bottom);
}
.gallery-lightbox.is-open { display: flex; }
.glb-stage {
    margin: 0;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.glb-stage img {
    max-width: 90vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}
.glb-counter {
    color: #fff;
    font-size: 0.85rem;
    margin-top: 0.75rem;
    opacity: 0.85;
}
.glb-close,
.glb-nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    cursor: pointer;
    line-height: 1;
    border-radius: 50%;
    transition: background 0.2s ease;
}
.glb-close:hover,
.glb-nav:hover { background: rgba(255, 255, 255, 0.28); }
.glb-close {
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
}
.glb-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 2rem;
}
.glb-prev { left: 1rem; }
.glb-next { right: 1rem; }
.gallery-lightbox.glb-single .glb-nav { display: none; }

@media only screen and (max-width: 768px) {
    .glb-nav { width: 44px; height: 44px; font-size: 1.6rem; }
    .glb-prev { left: 0.4rem; }
    .glb-next { right: 0.4rem; }
}

/* ---------------------------------------------------------------------------
   EVENT RESULTS (Phase 3.8)
   --------------------------------------------------------------------------- */
.results-comps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.results-lower {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.results-table-card {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--card-shadow);
}
.results-table-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: #f4faf7;
    border-bottom: 2px solid #007A55;
}
.results-comp-title { margin: 0; font-size: 1.05rem; color: #007A55; }
.results-champ {
    font-size: 0.75rem;
    color: #555;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
}
.results-empty { padding: 1rem; color: #888; margin: 0; }

.results-table { width: 100%; border-collapse: collapse; }
.results-table th,
.results-table td {
    padding: 0.6rem 1rem;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}
.results-table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #999;
    font-weight: 600;
}
.results-table tbody tr:last-child td { border-bottom: 0; }
.results-col-pos, .results-pos { width: 2.5rem; text-align: center; }
.results-col-hpc, .results-hpc,
.results-col-score, .results-score {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.results-score { font-weight: 700; color: #007A55; }
.results-name { font-weight: 600; }

.results-pos-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #eee;
    color: #555;
    font-size: 0.8rem;
    font-weight: 700;
}
.results-pos-badge.results-pos-1 { background: #f0c040; color: #5a4500; }
.results-pos-badge.results-pos-2 { background: #cfd4d8; color: #3c4348; }
.results-pos-badge.results-pos-3 { background: #e3b48c; color: #5a3a1e; }

/* Special-prize cards */
.results-prizes-title { margin: 0 0 0.85rem; font-size: 1.05rem; color: #007A55; }
.prize-cards { display: flex; flex-direction: column; gap: 0.85rem; }
/* Inline award cards (tour daily prizes): equal-width columns — 3 → thirds,
   4 → quarters — wrapping to stacked when there isn't room. */
.prize-cards-inline { flex-direction: row; flex-wrap: wrap; }
.prize-cards-inline .prize-card { flex: 1 1 0; min-width: 190px; }
.prize-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border-radius: 8px;
    background: #f4f6f8;
}
.prize-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
}
.prize-svg { width: 24px; height: 24px; }
.prize-text { display: flex; flex-direction: column; line-height: 1.3; }
.prize-label { font-weight: 700; }
.prize-hole { font-size: 0.78rem; color: #777; }
.prize-winner { font-size: 0.95rem; margin-top: 0.15rem; }

.prize-ntp   { background: #fbf1d2; }
.prize-ntp   .prize-icon { color: #b8860b; }
.prize-ntp   .prize-label { color: #8a6400; }
.prize-drive { background: #e2edf9; }
.prize-drive .prize-icon { color: #2f6db5; }
.prize-drive .prize-label { color: #245a98; }
.prize-golf  { background: #ddefe4; }
.prize-golf  .prize-icon { color: #007A55; }
.prize-golf  .prize-label { color: #006045; }

@media only screen and (max-width: 900px) {
    .results-comps,
    .results-lower { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   CAPTAIN'S REPORT (Phase 3.10)
   --------------------------------------------------------------------------- */
.captains-report { margin-top: 1rem; }
.captains-report-text {
    max-width: 760px;
    margin: 0 auto 2rem;
    color: #444;
    line-height: 1.7;
}
.captains-report-text p { margin: 0 0 1rem; }
.captains-report-text p:last-child { margin-bottom: 0; }

.winner-grid {
    display: grid;
    /* auto-fit + capped max (not 1fr) so short rows centre instead of
       left-aligning; justify-content centres the whole grid (matches gallery). */
    grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
    justify-content: center;
    gap: 1.5rem;
}
.winner-card { margin: 0; }
.winner-photo {
    display: block;
    aspect-ratio: 4 / 3; /* matches the admin 4:3 crop; object-fit still centres older uncropped photos */
    overflow: hidden;
    border-radius: 6px;
    background: #f1f1f1;
}
.winner-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.winner-caption {
    display: flex;
    flex-direction: column;
    margin-top: 0.6rem;
    line-height: 1.35;
}
.winner-prize {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #007A55;
    font-weight: 700;
}
.winner-name { font-size: 1rem; color: #333; }

@media only screen and (max-width: 768px) {
    .winner-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 200px)); gap: 1rem; }
}

/* ---------------------------------------------------------------------------
   EVENTS LISTING PAGE (Upcoming Events) — "Events Page" template
   --------------------------------------------------------------------------- */
.events-page-title {
    text-align: center;
    font-size: 2.2rem;
    margin: 0.5rem 0 0.4rem;
}
.events-page-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #007A55;
    margin: 0.5rem auto 0;
    border-radius: 2px;
}
.events-page-intro {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 2rem;
    color: #555;
}
.events-empty {
    text-align: center;
    color: #777;
    padding: 3rem 1rem;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Whole card is the link. */
.events-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e9e7;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.events-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-3px);
}

.events-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: #eef2f0;
}
.events-card-pill {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    font-family: "Adamina", serif;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    background: #007A55;
}
.events-card-pill.is-full { background: #a02622; }
.events-card-pill.is-open { background: #007A55; }
.events-card-pill.is-confirmed { background: #1a6fb5; }
.events-card-pill.is-done { background: #6b7280; }

.events-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.35rem 1.4rem;
}
.events-card-title {
    font-size: 1.7rem;
    margin: 0 0 0.6rem;
    color: #2c2c2c;
}
.events-card-date {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.7rem;
    color: #444;
    font-size: 0.95rem;
}
.events-card-icon {
    width: 16px;
    height: 16px;
    color: #007A55;
    flex: none;
}
.events-card-comps {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
}
.events-card-comps li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    color: #555;
}
.events-card-icon-trophy { color: #c79a3a; }

.events-card-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.4rem;
}
.events-card-price {
    font-family: "Adamina", serif;
    font-size: 1.3rem;
    color: #2c2c2c;
}
.events-card-price small {
    font-size: 0.8rem;
    color: #888;
    font-family: "Inter", sans-serif;
}
.events-card-count {
    font-size: 0.85rem;
    color: #777;
}

.events-card-cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 1rem;
    text-align: center;
}
/* Fill the CTA on card hover to echo the .button-secondary hover state. */
.events-card:hover .events-card-cta {
    background-color: #007A55;
    background-image: var(--btn-gradient);
    color: #fff;
}

@media only screen and (max-width: 1000px) {
    .events-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 640px) {
    .events-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Tours (Phase 4) — base layout. The tour page reuses the .event-* styles;
 * these cover the tour-specific bits (type label, itinerary, logistics).
 * Full visual polish lands in Phase 4.7.
 * ------------------------------------------------------------------------- */
.tour-type-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.85;
    margin: 0 0 0.25rem;
}
.tour-location {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
    opacity: 0.95;
}

/* ---------------------------------------------------------------------------
   TOUR DAY TABS — one panel per day (course, itinerary, tee times, results).
   Progressive enhancement: panels render stacked; tour-tabs.js adds .is-tabbed
   to the wrapper to switch to a tabbed view.
   --------------------------------------------------------------------------- */
.tour-days { margin: 1.5rem 0 2rem; }

/* Tab buttons: hidden until JS enables the switcher. */
.tour-day-nav {
    display: none;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #eee;
}
.tour-days.is-tabbed .tour-day-nav { display: flex; }
.tour-day-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 0.6rem 1.1rem;
    font-size: 1rem;
    font-weight: 700;
    color: #888;
    cursor: pointer;
}
.tour-day-tab:hover { color: #007A55; }
.tour-day-tab.is-active { color: #01503B; border-bottom-color: #06936B; }

/* Panels: all visible when stacked; only the active one once tabbed. */
.tour-day-panel {
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    padding: 1.5rem;
    background: #fafafa;
}
.tour-day-panel + .tour-day-panel { margin-top: 1.5rem; }
.tour-days.is-tabbed .tour-day-panel { display: none; margin-top: 0; }
.tour-days.is-tabbed .tour-day-panel.is-active { display: block; }

/* Day panel heading: badge + course name + date. */
.tour-day-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e3e3e3;
}
.tour-day-badge {
    font-weight: 700;
    color: #fff;
    background: #01503B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 12px;
}
.tour-day-course { margin: 0; font-size: 1.35rem; font-weight: 600; }
.tour-day-date {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    opacity: 0.75;
    font-size: 0.95rem;
}
.tour-day-subhead { margin: 1.5rem 0 0.75rem; font-size: 1.05rem; color: #01503B; }
.tour-day-panel .course-card { margin-top: 0.5rem; }
.tour-day-panel .prize-cards { margin-top: 1rem; }

.tour-round-line { margin: 0.25rem 0; font-size: 0.95rem; }
.tour-round-arrangements { margin: 0.5rem 0 1rem; }
.tour-round-empty { color: #9a9a9a; font-style: italic; }

/* Travel & Hotel: sits below the captain's intro, so give it breathing room. */
.tour-travel-section { margin-top: 2.5rem; }

.tour-logistics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.tour-logistics-block h3 {
    margin-top: 0;
}
@media only screen and (max-width: 700px) {
    .tour-logistics { grid-template-columns: 1fr; }
    .tour-day-date { margin-left: 0; }
    .tour-day-panel { padding: 1.15rem; }
}

/* Tour results: overall table day columns + "most golf" last place. */
/* Overall standings sits alone (no second comp), so centre it on the page. */
.tour-overall-standings {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.tour-overall-standings .results-table-card {
    width: 100%;
    max-width: 720px;
}

.tour-overall-table .tour-col-day {
    text-align: center;
    width: 3.5em;
    color: #555;
}
.tour-row-most-golf {
    background: #fff8e6;
}
.tour-most-golf-tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 1px 8px;
    border-radius: 12px;
    background: #b8860b;
    color: #fff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
/* Tour-type pill on a tour listing card (sits top-left, opposite the status pill). */
.events-card-pill.is-tour-type {
    left: 0.75rem;
    right: auto;
    background: #01503B;
    color: #fff;
}

/* "Tour" tag beside event titles in the member account. */
.account-tour-tag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 1px 7px;
    border-radius: 10px;
    background: #01503B;
    color: #fff;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* ===========================================================================
   COMPETITIONS PAGE — Knockout / Top Gun / Associate / Three Ws (Phase 5.5)
   Brand green #01503B→#06936B, accent #007A55, gold #b8860b.
   =========================================================================== */
/* Smooth animated scroll for in-page anchor jumps (Competitions nav dropdown). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* NB: no negative bottom margin here (the legacy .hero rule still carries one).
   #main's opaque #fafafa background sits directly beneath, so a -10px pull
   painted over the bottom 10px of the hero — the box measured 644px but only
   634px was ever visible, leaving this hero looking shallower than the other
   two. Height and painted height must stay equal for the three to match. */
.comp-hero {
    max-width: var(--content-max-width);
    height: var(--hero-height); /* level with the home + event heroes */
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    border-radius: 5px 5px 0 0;
}
@media only screen and (max-width: 900px) {
    /* Back to the Figma hero band proportion once the heights stop matching. */
    .comp-hero { height: auto; aspect-ratio: 1423 / 659; }
}
.comp-page-intro { text-align: center; max-width: 680px; margin: 0.5rem auto 2rem; color: #555; }

.comp-section { margin: 2.75rem 0; scroll-margin-top: 100px; } /* clears the ~75px sticky header + padding on nav-anchor jumps */

/* Top Gun and the Three Ws side by side, Associate of the Year centred beneath
   (client's layout, 2026-08-10). Vertical margins live on the container rather
   than the two columns: grid items' margins don't collapse, so leaving them on
   would double the gap above and below the pair. */
.comp-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto; /* heading / subheading / standings */
    gap: 0 2rem; /* row-gap MUST stay 0 — subgrid inherits it between the three rows */
    align-items: start; /* each column keeps its natural height */
    margin: 2.75rem 0;
}
/* Both columns opt into the container's rows, so the headings, the subheadings
   and the two lists each start on the same line — Top Gun's subheading wraps to
   two lines where the Three Ws' fits on one, which would otherwise leave the
   lists starting at different heights. Degrades to the natural stack if subgrid
   is unavailable. */
.comp-columns > .comp-section {
    margin: 0;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
}
/* The lists are rarely the same length (one entrant can be in one table and not
   the other), so let each hug its content rather than stretching the shorter
   one's border down to match — that reads as an empty band inside the card. */
.comp-columns > .comp-section > :last-child { align-self: start; }

/* Same width as one of the columns above — (100% - 2rem gap) / 2 — so the three
   blocks read as a set rather than the odd one out. */
.comp-section-centred {
    max-width: calc(50% - 1rem);
    margin-left: auto;
    margin-right: auto;
}

/* Top Gun and the Three Ws now start at the same height, so a dropdown jump to
   either scrolls to the same place. Briefly tint whichever was actually
   targeted, so the two are still tellable apart. box-shadow rather than padding
   for the halo: it extends the tint past the box without moving anything.
   Knockout is excluded: it's far taller than the other three, so tinting the
   whole bracket looks heavy-handed, and being the only full-width section on the
   page there's no ambiguity about having landed on it. */
.comp-section:target:not(.comp-knockout) {
    border-radius: 10px;
    animation: comp-target-flash 1.6s ease-out 1;
}
@keyframes comp-target-flash {
    0%, 35% { background-color: #eaf5ef; box-shadow: 0 0 0 12px #eaf5ef; }
    100%    { background-color: transparent; box-shadow: 0 0 0 12px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .comp-section:target { animation: none; }
}

@media only screen and (max-width: 900px) {
    /* Stack at the site-wide breakpoint, matching the nav and event layout.
       Subgrid comes off with it: there's no second column left to align to, and
       the row-gap that separates the stacked sections would otherwise be
       inherited between each section's own heading, subheading and list. */
    .comp-columns {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 2.75rem 0;
    }
    .comp-columns > .comp-section { display: block; grid-row: auto; }
    .comp-section-centred { max-width: none; }
}
.comp-heading { text-align: center; font-size: var(--section-heading-size); margin: 0 0 0.3em; }
.comp-heading::after {
    content: ""; display: block; width: 60px; height: 3px;
    background: #007A55; margin: 0.5rem auto 0; border-radius: 2px;
}
.comp-subheading { text-align: center; color: #666; margin: 0 0 1.4rem; font-size: 0.95rem; }
.comp-empty { text-align: center; color: #888; padding: 1.5rem 0; }

/* --- Preliminary round --- */
.ko-prelim { margin: 1.25rem 0 2.5rem; }
.ko-prelim-title { text-align: center; font-size: 1.2rem; margin: 0 0 0.2em; }
.ko-prelim-by { text-align: center; color: #888; font-size: 0.85rem; margin: 0 0 1.2rem; }
.ko-prelim-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
    max-width: 900px; margin: 0 auto;
}
.ko-prelim-card { border: 1px solid #e3e6e3; border-radius: 8px; padding: 0.9rem 1.1rem; background: #fbfcfb; }
.ko-prelim-num { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #9aa39c; margin-bottom: 0.4rem; }
.ko-prelim-vs { display: block; text-align: center; font-size: 0.75rem; color: #b3b9b3; font-style: italic; margin: 0.15rem 0; }

/* --- Player row (shared: prelim + bracket) --- */
.ko-player { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; padding: 0.25rem 0; }
.ko-player-name { font-size: 0.9rem; color: #2b2f2c; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ko-player.is-winner .ko-player-name { font-weight: 700; color: #01503B; }
.ko-player.is-placeholder .ko-player-name { font-style: italic; color: #9aa39c; }
.ko-idx {
    flex: none; font-size: 0.72rem; color: #7d857e; font-variant-numeric: tabular-nums;
    background: #eef2ef; border-radius: 10px; padding: 1px 7px; white-space: nowrap;
}
.ko-player.is-winner .ko-idx { background: #dff0e8; color: #01503B; }
.ko-score { font-size: 0.78rem; color: #007A55; font-weight: 600; text-align: right; margin-top: 0.2rem; }

/* --- Bracket --- */
.ko-bracket-wrap { margin: 1rem 0 2rem; }
.ko-bracket-viewport { overflow-x: auto; }
.ko-bracket { display: flex; align-items: stretch; gap: 0.5rem; width: 100%; }
.ko-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.ko-col-head { text-align: center; margin-bottom: 0.6rem; }
.ko-col-title { display: block; font-size: 0.8rem; font-weight: 700; color: #01503B; }
.ko-col-by, .ko-col-venue { display: block; font-size: 0.68rem; color: #9aa39c; }
.ko-col-matches { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 0.4rem; }
.ko-match { border: 1px solid #e3e6e3; border-radius: 6px; padding: 0.4rem 0.5rem; background: #fff; }
.ko-col-final .ko-match { border-color: #06936B; box-shadow: 0 0 0 1px rgba(6, 147, 107, 0.2); }
/* Slightly smaller type inside bracket cells only (prelim cards keep their size). */
.ko-match .ko-player { padding: 0.15rem 0; }
.ko-match .ko-player-name { font-size: 0.8rem; line-height: 1.2; cursor: default; }
.ko-match .ko-idx { font-size: 0.66rem; padding: 1px 6px; }
.ko-match .ko-score { font-size: 0.72rem; line-height: 1.2; }

/* mobile bracket nav — hidden on desktop */
.ko-bracket-nav { display: none; }

/* --- Champion / Runner-Up banners --- */
.ko-banners { max-width: 900px; margin: 1.75rem auto 0; display: flex; flex-direction: column; gap: 0.6rem; }
.ko-banner { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1.2rem; border-radius: 8px; font-size: 1.05rem; }
.ko-banner-icon { width: 22px; height: 22px; flex: none; }
.ko-banner-label { font-weight: 700; }
.ko-banner-name { margin-left: auto; font-weight: 600; }
.ko-banner-champion { background: linear-gradient(90deg, #e6f4ee, #d3ead9); color: #01503B; }
.ko-banner-runner-up { background: linear-gradient(90deg, #f7efd9, #f0e4c2); color: #8a6d1f; }

.ko-rules-link { text-align: center; margin-top: 1.25rem; }
.ko-rules-link a { color: #007A55; font-weight: 600; }

/* --- Standings lists (Top Gun / Associate / 3Ws) --- */
.comp-standings {
    list-style: none; margin: 0 auto; padding: 0; max-width: 760px;
    border: 1px solid #e3e6e3; border-radius: 10px; overflow: hidden;
}
.comp-standing { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1.2rem; border-top: 1px solid #eef1ee; }
.comp-standing:first-child { border-top: none; }
.comp-standing.is-leader { background: #eaf5ef; }
.comp-rank { flex: none; width: 28px; text-align: center; font-weight: 700; color: #6b736c; font-variant-numeric: tabular-nums; }
.comp-rank-trophy { width: 20px; height: 20px; color: #01503B; vertical-align: middle; }
.comp-standing-main { display: flex; flex-direction: column; min-width: 0; }
.comp-standing-name { font-weight: 600; color: #2b2f2c; }
.comp-standing.is-leader .comp-standing-name { color: #01503B; }
.comp-standing-sub { font-size: 0.78rem; color: #8a908a; margin-top: 1px; }

/* Switch the bracket to the swipeable single-column slider early: the
   fit-to-width 9-column layout gets too cramped to read below ~1150px. */
@media (max-width: 1150px) {
    .ko-bracket-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.8rem; }
    .ko-bracket-nav button {
        border: 1px solid #cdd4ce; background: #fff; color: #01503B; width: 38px; height: 38px;
        border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer;
    }
    .ko-bracket-nav button:disabled { opacity: 0.35; cursor: default; }
    .ko-bracket-nav-label { font-weight: 700; color: #01503B; min-width: 130px; text-align: center; }

    .ko-bracket-viewport { scroll-snap-type: x mandatory; }
    .ko-col { flex: 0 0 100%; scroll-snap-align: start; }

    /* Per-slide height fit — START (revertable: remove this block + the JS
       height-fit block in competitions-bracket.js to restore equal-height slides). */
    .ko-bracket { align-items: flex-start; }          /* don't stretch short rounds to R1's height */
    .ko-col-matches { justify-content: flex-start; }  /* pack matches to the top, not spaced-out */
    .ko-bracket-viewport { overflow-y: hidden; transition: height 0.2s ease; } /* JS sizes to the active round */
    /* Per-slide height fit — END */
}

@media (max-width: 800px) {
    .ko-prelim-grid { grid-template-columns: 1fr; }
    .ko-banner { font-size: 0.95rem; }
}

/* --- My Competitions (account page) + footer Knockout Rules link (Phase 5.6) --- */
.account-comps { list-style: none; margin: 0; padding: 0; }
.account-comp {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 0.75rem 0; border-top: 1px solid #eef1ee;
}
.account-comp:first-child { border-top: none; }
.account-comp-label { font-weight: 600; color: #2b2f2c; }
.account-comp-label a { color: inherit; text-decoration: none; }
.account-comp-label a:hover { color: #007A55; }
.account-comp-status { font-size: 0.9rem; color: #555; text-align: right; }
.account-comp.comp-accent-champion .account-comp-status { color: #01503B; font-weight: 700; }
.account-comp.comp-accent-runner_up .account-comp-status { color: #8a6d1f; font-weight: 700; }
.account-comp.comp-accent-out .account-comp-status { color: #999; }

#footer .footer-links { text-align: center; margin: 0 0 0.4rem; }
#footer .footer-links a { color: #01503B; font-weight: 600; }

/* ---------------------------------------------------------------------------
   ROLL OF HONOUR (Phase 6)
   One wood-grain board per cup, stacked and closed by default: just the cup
   title on the wood, with a chevron on the right. The title row is a toggle
   (js/honour-boards.js) that slides open a 4-up grid of winner cards.
   --------------------------------------------------------------------------- */
.roh-page { padding-top: 2rem; }
.roh-intro { margin-bottom: 1.5rem; }
.roh-empty { color: #777; }

.roh-board + .roh-board { margin-top: 1.25rem; }
.roh-board {
    /* Real wood texture (greyscale photo) warmed to the Figma brown via a
       brown base colour + multiply blend, so the grain shows through. */
    background-color: #a67c47;
    background-image: url('assets/images/woodgrain.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    border: 2px solid #c8a24a;
    border-radius: 12px;
    padding: 0 2rem;
    box-shadow: var(--board-shadow);
    color: #fff;
}
.roh-board-title { margin: 0; padding: 0; border: 0; font-size: 2rem; }  /* reset the global h2 rule */
.roh-board-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 1.25rem 0;
    background: none;
    border: 0;
    color: #e6b93e;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.roh-board-toggle:focus-visible { outline: 2px solid #e6b93e; outline-offset: 4px; border-radius: 4px; }
.roh-board-icon { width: 30px; height: 30px; color: #e6b93e; flex: 0 0 auto; }
.roh-board-name { flex: 1 1 auto; }
/* Optional subtitle (e.g. venue) — small and paler beside the gold cup name,
   in the same (inherited) heading font. */
.roh-board-sub {
    margin-left: 0.5rem;
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.roh-board-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 2px solid #c8a24a;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    transition: background 0.15s ease;
}
.roh-board-toggle:hover .roh-board-chevron { background: rgba(0, 0, 0, 0.45); }
.roh-board-chevron-icon {
    width: 22px;
    height: 22px;
    color: #e6b93e;
    transform: rotate(90deg);              /* the icon points right: turn it down */
    transition: transform 0.3s ease;
}
.roh-board.is-open .roh-board-chevron-icon { transform: rotate(-90deg); }

/* Height is animated by JS; .is-sliding clips the content while it moves. */
.roh-board-inner { padding: 1.4rem 0 2rem; border-top: 1px solid #e8e8e8; }  /* the h2's rule, moved so it slides with the winners */
.roh-board-body.is-sliding { overflow: hidden; transition: height 0.35s ease; }

.roh-board-empty { color: rgba(255, 255, 255, 0.75); margin: 0; }
.roh-winners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.roh-winner {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(200, 162, 74, 0.45);
    border-radius: 8px;
    padding: 0.85rem 1rem;
}
.roh-winner-date { display: block; color: #e6b93e; font-weight: 700; }
.roh-winner-name { display: block; color: #fff; margin-top: 0.15rem; }

@media (prefers-reduced-motion: reduce) {
    .roh-board-chevron-icon,
    .roh-board-body.is-sliding { transition: none; }
}
@media only screen and (max-width: 1000px) {
    .roh-winners { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 560px) {
    .roh-winners { grid-template-columns: 1fr; }
    .roh-board { padding: 0 1.25rem; }
    .roh-board-title { font-size: 1.4rem; }
    .roh-board-sub { display: block; margin: 0.2rem 0 0; font-size: 0.85rem; white-space: normal; }
    .roh-board-icon { width: 24px; height: 24px; }
    .roh-board-chevron { width: 34px; height: 34px; }
    .roh-board-inner { padding-bottom: 1.25rem; }
}

/* ---------------------------------------------------------------------------
   EVENTS ARCHIVE (Phase 7)
   Past events + tours grouped by year. A row of year pills switches between
   per-year panels (reusing the .events-grid card layout). Progressive
   enhancement mirrors My Results: the most recent year is is-active
   server-side, so it still shows with JS off.
   --------------------------------------------------------------------------- */
.archive-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
.archive-tab {
    background: #f0f0f0;
    border: none;
    border-radius: 25px;
    padding: 0.5rem 1.3rem;
    font-weight: 700;
    font-size: 1rem;
    color: #01503B;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.archive-tab:hover { background: #e0efe8; }
.archive-tab.is-active { background: #01503B; color: #fff; }

.archive-year { display: none; }
.archive-year.is-active { display: block; }

/* ============================================================
   HOME PAGE (Phase Home)
   ============================================================ */

/* H.1 — Hero band. A fixed height + object-fit:cover keep the band a controlled
   shape whatever the client uploads (portrait, odd crop, etc.) and hold it level
   with the competitions hero and the event page's image + band stack. */
.home-hero {
    max-width: var(--content-max-width);
    margin: 0 auto 28px;
    overflow: hidden;
}
.home-hero .home-hero-img {
    display: block;
    width: 100%;
    height: var(--hero-height);
    object-fit: cover;
}
@media only screen and (max-width: 900px) {
    /* Below the breakpoint the heroes go back to their natural proportions. */
    .home-hero .home-hero-img { height: auto; }
}

/* ---- Hero carousel (2026-08-17) -------------------------------------------
   Two transitions from one markup tree, switched by .is-fade / .is-slide from
   the client's admin choice. Everything here is scoped to .home-hero--carousel,
   so a single-photo hero renders through the rules above untouched.

   .is-ready is added by the JS. Without it (no JS, or a script error) the first
   slide shows, the rest and the controls are hidden, and the band is a still
   photo exactly as before. */
.home-hero--carousel {
    position: relative;
}
.home-hero--carousel .home-hero-track {
    display: flex;
    width: 100%;
}
.home-hero--carousel .home-hero-slide {
    flex: 0 0 100%;
    min-width: 100%;
}
.home-hero--carousel:not(.is-ready) .home-hero-slide:not(.is-active),
.home-hero--carousel:not(.is-ready) .home-hero-arrow,
.home-hero--carousel:not(.is-ready) .home-hero-controls {
    display: none;
}

/* Slide: one row translated sideways. The track is the moving part, so the
   images themselves never animate. */
.home-hero--carousel.is-slide.is-ready .home-hero-track {
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Fade: the same slides stacked. The first stays in flow to give the band its
   height (so the fixed height and the mobile aspect-ratio keep working for
   both modes); the rest are lifted out and cross-faded over it. */
.home-hero--carousel.is-fade.is-ready .home-hero-track {
    display: block;
    position: relative;
}
.home-hero--carousel.is-fade.is-ready .home-hero-slide {
    opacity: 0;
    transition: opacity 700ms ease;
}
.home-hero--carousel.is-fade.is-ready .home-hero-slide:not(:first-child) {
    position: absolute;
    inset: 0;
}
.home-hero--carousel.is-fade.is-ready .home-hero-slide.is-active {
    opacity: 1;
}

/* Arrows. Desktop only — swipe covers touch, and they'd sit over the photo on
   the narrow widths where it's least affordable. */
.home-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 200ms ease, background-color 200ms ease;
}
.home-hero-arrow svg { width: 22px; height: 22px; }
.home-hero-arrow--prev { left: 16px; }
.home-hero-arrow--next { right: 16px; }
.home-hero--carousel:hover .home-hero-arrow,
.home-hero-arrow:focus-visible {
    opacity: 1;
}
.home-hero-arrow:hover { background: rgba(0, 0, 0, 0.55); }
.home-hero-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Dots + pause, bottom-centre on a soft scrim so they stay legible over a
   light photo without a hard bar across the image. */
.home-hero-controls {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
}
.home-hero-dots {
    display: flex;
    align-items: center;
    gap: 9px;
}
.home-hero-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background-color 200ms ease, transform 200ms ease;
}
.home-hero-dot:hover { background: rgba(255, 255, 255, 0.75); }
.home-hero-dot.is-active {
    background: #fff;
    transform: scale(1.25);
}
.home-hero-dot:focus-visible,
.home-hero-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.home-hero-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}
.home-hero-play:hover { color: #fff; }
.home-hero-play svg { width: 100%; height: 100%; fill: currentColor; }
/* One button, two glyphs — whichever matches what the click will do. */
.home-hero-play[data-playing="true"]  .home-hero-play-play,
.home-hero-play[data-playing="false"] .home-hero-play-pause { display: none; }

@media only screen and (max-width: 900px) {
    /* Photos of differing shapes would resize the band on every slide change
       once the height goes auto, so the carousel keeps a fixed shape instead —
       the desktop ratio, --content-max-width / --hero-height. */
    .home-hero--carousel .home-hero-img {
        height: 100%;
        aspect-ratio: 1440 / 644;
    }
    .home-hero--carousel .home-hero-slide { aspect-ratio: 1440 / 644; }
    .home-hero-arrow { display: none; }
    .home-hero-controls { bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    /* Autoplay is switched off in the JS; these kill the movement on a slide
       the visitor asks for themselves. */
    .home-hero--carousel .home-hero-track,
    .home-hero--carousel .home-hero-slide { transition: none; }
}

/* Home content column — sections stack with even spacing. */
#main.home {
    background: transparent;
}
.home-wrap {
    max-width: calc(var(--content-max-width) - 40px);
    margin: 0 auto;
    padding: 0 20px 48px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

@media (max-width: 640px) {
    .home-wrap { padding-bottom: 32px; }
}

/* H.2 — "Next up" feature card */
.home-nextup {
    display: grid;
    /* Even 50/50 split: the image was capped at 460px while the text took all
       the remaining width, leaving the picture small and the copy stranded. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 22px;
    box-shadow: var(--card-shadow);
}
.home-nextup-media {
    display: block;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
}
.home-nextup-body {
    padding: 4px 8px;
}
.home-nextup-eyebrow {
    margin: 0 0 2px;
    color: #007A55;
    font-weight: 600;
    font-size: 0.95rem;
}
.home-nextup-title {
    margin: 0 0 14px;
    font-size: 2.4rem;
    line-height: 1.1;
}
.home-nextup-title a { color: inherit; }
.home-nextup-title a:hover { color: #007A55; }
.home-nextup-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 20px;
    color: #444;
    font-size: 0.95rem;
}
.home-nextup-date {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.home-nextup-icon {
    width: 16px;
    height: 16px;
    color: #007A55;
    flex: none;
}
.home-nextup-price {
    display: inline-block;
    background: #e6f4ee;
    color: #01503B;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .home-nextup { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
    .home-nextup-title { font-size: 1.9rem; }
}

/* H.3 — Latest match-results summary card */
.home-results {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 26px 28px;
    box-shadow: var(--card-shadow);
}
.home-results-title {
    margin: 0 0 18px;
    font-size: var(--section-heading-size);
}
.home-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 28px;
}
.home-results-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
}
.home-results-label {
    margin: 0 0 2px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #2c2c2c;
}
.home-results-winner {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.9rem;
    color: #555;
}
.home-results-icon {
    width: 16px;
    height: 16px;
    color: #007A55;
    flex: none;
}
.home-results-icon-trophy { color: #c79a3a; }
.home-results-cta-wrap {
    text-align: center;
    margin-top: 22px;
}

@media (max-width: 900px) {
    .home-results-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .home-results-grid { grid-template-columns: 1fr; }
    .home-results { padding: 20px; }
}

/* H.4 — "{year} Calendar" grid */
.home-calendar {
    margin-top: 8px;
}
/* Matches .home-results-title — the home page's section-heading size, rather
   than the 2rem h2 default. The "Next up" title is deliberately larger. */
.home-calendar-title {
    text-align: center;
    font-size: var(--section-heading-size);
    margin: 0 0 24px;
    padding-bottom: 10px;
    position: relative;
}
.home-calendar-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: #007A55;
}
.home-calendar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Roomier guttering than the Events page grid — the client wants these two
       fixtures to breathe. A lone remaining fixture stays in its column rather
       than stretching, so the layout doesn't jump about as the season empties. */
    gap: var(--home-grid-gap);
}

/* Trimmed-down card variant used only here (see swiggers_render_listing_card):
   no lozenges, no "N playing", cups on one line, price on the date row. */
.events-card.is-home-card .events-card-body {
    padding: 1.4rem 1.5rem 1.6rem;
}
/* Pushes the price pill to the right-hand end of the date row. Keyed off the
   inline-price layout rather than the home card, so any listing using
   price_inline gets it — the Events page does too. */
.events-card-date.has-inline-price {
    justify-content: space-between;
    gap: 0.75rem;
}
.events-card-date-text {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}
/* Echoes the price pill on the "Next up" card above. */
.events-card-price-pill {
    flex: none;
    background: #e6f4ee;
    color: #01503B;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
}
.events-card-comps.is-inline {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.9rem;
    padding: 0;
    font-size: 0.9rem;
    color: #555;
}
/* Sized to its text and centred, rather than filling the card width. The auto
   top margin pins it to the bottom of the card — the meta row that used to do
   that job isn't rendered in this variant — so the CTAs line up across cards
   even when one fixture has no price or cups to show. */
.events-card-cta.is-auto {
    display: inline-block;
    width: auto;
    align-self: center;
    margin-top: auto;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}

.home-calendar-cta-wrap {
    margin-top: 2rem;
    text-align: center;
}

@media (max-width: 640px) {
    .home-calendar-grid { grid-template-columns: 1fr; }
}

/* H.5 — Quick-nav tiles */
.home-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--home-grid-gap);
    margin-top: 8px;
}
.home-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 18px 22px;
    box-shadow: var(--card-shadow);
    color: #2c2c2c;
    text-decoration: none;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.home-tile:hover {
    color: #2c2c2c;
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}
/* The glyph sits at half the square's size and the radius scales with it, so
   the coloured tile keeps its proportions at any size. */
.home-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 12px;
    flex: none;
    color: #fff;
}
.home-tile-svg {
    width: 31px;
    height: 31px;
}
.home-tile-label {
    font-weight: 600;
    font-size: 1.1rem;
    flex: 1 1 auto;
}
.home-tile-chevron {
    display: inline-flex;
    color: #b8b8b8;
    flex: none;
}
.home-tile-chevron-svg {
    width: 20px;
    height: 20px;
}

/* Per-tile icon-square colours. */
.home-tile.is-knockout .home-tile-icon { background: #b23b2e; }
.home-tile.is-honour   .home-tile-icon { background: #d9a441; }
.home-tile.is-archive  .home-tile-icon { background: #2f6fb0; }
.home-tile.is-members  .home-tile-icon { background: #2e8b57; }

@media (max-width: 640px) {
    .home-tiles { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   SHOP PAGE — "Shop Page" template
   A signpost to the third-party Glenmuir store: a grid of product photos that
   each link out. Heading/intro follow the Events listing page so the two match;
   the panel, card and gutter measurements come from the Figma Shop frame
   (748:519), which has no mobile counterpart — the breakpoints are derived.
   --------------------------------------------------------------------------- */
.shop-page-title {
    text-align: center;
    font-size: 2.2rem;
    margin: 0.5rem 0 0.4rem;
}
.shop-page-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #007A55;
    margin: 0.5rem auto 0;
    border-radius: 2px;
}
.shop-page-intro {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 1.5rem;
    color: #555;
}

.shop-cta-row {
    text-align: center;
    margin: 0 0 2rem;
}
.shop-cta-row-bottom {
    margin: 2rem 0 0;
}
/* The design's CTAs are far chunkier than the site's default .button, so this
   is a size modifier only — colour, gradient and hover all still come from
   .button, keeping the Shop page's buttons the same green as everywhere else. */
.shop-cta {
    min-width: 240px;
    padding: 0.85rem 1.6rem;
    font-size: 1rem;
    border-radius: 8px;
    box-shadow: var(--card-shadow);
}

/* Deliberately not a card. The Figma draws the grid on its own white panel, but
   the theme already wraps every page in one (#main .content), so styling this as
   a second panel stacked two cards up. It's a layout wrapper only — the products
   sit directly on the page's single card. */
.shop-panel {
    padding: 0 0 0.5rem;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-card {
    background: #fff;
    border-radius: 16px;
    /* Lighter than --card-shadow: in the design the cards sit *inside* the panel,
       so they lift off it rather than off the page. */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.shop-card:hover,
.shop-card:focus-within {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

.shop-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.shop-card-media {
    display: block;
    aspect-ratio: 4 / 3;
    padding: 0.75rem;
    /* Flex items default to min-height:auto, which lets this box grow to the
       photo's intrinsic height (the sources are 800x1200) and ignore the ratio
       entirely. Pinning both keeps every card the same height. */
    flex: none;
    min-height: 0;
}
.shop-card-img {
    display: block;
    width: 100%;
    height: 100%;
    /* Product shots are cut out on white and vary in proportion — contain keeps
       a tall gilet and a wide cap both whole, where cover would crop them. */
    object-fit: contain;
}

.shop-card-title {
    display: block;
    padding: 0 1rem 1rem;
    text-align: center;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #0F172B;
}

.shop-empty {
    text-align: center;
    color: #777;
    padding: 3rem 1rem;
}

@media (max-width: 900px) {
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .shop-grid { grid-template-columns: 1fr; }
    .shop-page-title { font-size: 1.8rem; }
    .shop-cta { display: block; min-width: 0; }
}