/* cms2 public base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--cms2-font, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    color: #111;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
/* form controls take their font from the UA stylesheet (Chrome pins buttons to
   Arial), and that beats inheritance — so every <button> silently escaped the
   site's typography unless its own rule spelled out font-family */
/* `color` as well as `font-family`. A <button> inherits neither by default, and
   the UA's own colour differs by platform: desktop Chrome and Firefox resolve
   `buttontext` to black, which is why every button here has looked right, while
   iOS Safari uses its system blue. The board page's STANDARD DIMENSIONS toggle
   is a button with text and no colour of its own, and on an iPhone it rendered
   bright blue. Every button that sets its own colour is unaffected; the rest now
   take the colour their designer assumed they already had. */
button, input, select, textarea { font-family: inherit; }
button { color: inherit; }
img { max-width: 100%; }
a { color: inherit; }

.cms2-wrap {
    max-width: var(--cms2-max-width, none);
    margin: 0 auto;
}

.cms2-section { position: relative; }

/* Body scroll lock for any full-screen overlay. Lived only in shoplist's
   module.css, which is loaded on shop pages and nowhere else — the search
   overlay opens from the header on every page, so the rule belongs here. */
body.cms2-scroll-lock { overflow: hidden; }

/* lightbox (driven by site.js; markup injected on demand; used by gallery + team detail) */
.cms2-gallery-lb .cms2-gallery-item { cursor: zoom-in; border: 0; padding: 0; background: #eee; overflow: hidden; display: block; width: 100%; }
.cms2-gallery-lb .cms2-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.cms2-gallery-lb .cms2-gallery-item:hover img { transform: scale(1.04); }
.cms2-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cms2-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.88); }
.cms2-lightbox img { position: relative; max-width: 92vw; max-height: 86vh; object-fit: contain; z-index: 2; border-radius: 4px; }
.cms2-lightbox-caption { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.85); font-size: 14px; z-index: 2; }
.cms2-lightbox button {
    position: absolute; z-index: 3;
    background: rgba(255,255,255,.12); color: #fff;
    border: 0; border-radius: 999px;
    width: 48px; height: 48px; font-size: 26px; line-height: 1; cursor: pointer;
}
.cms2-lightbox button:hover { background: rgba(255,255,255,.3); }
.cms2-lightbox-close { top: 18px; right: 18px; }
.cms2-lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.cms2-lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* development stubs (until modules ship their render.php) */
.cms2-stub {
    border: 2px dashed #c3cbd6;
    border-radius: 10px;
    margin: 14px;
    padding: 14px;
    font-size: 13px;
    color: #333;
}
.cms2-stub-head { font-weight: 700; margin-bottom: 8px; }
.cms2-stub-head code { background: #eef2f7; padding: 1px 6px; border-radius: 4px; font-size: 11px; }
.cms2-stub-row { padding: 6px 0; border-top: 1px solid #e8ecf1; display: flex; flex-wrap: wrap; gap: 12px; }
.cms2-stub-cell em { color: #7a8698; font-style: normal; font-size: 11px; }
.cms2-stub-empty { color: #98a2b3; }

/* footer newsletter + socials (menu settings) */
.cms2-footer-newsletter .cms2-newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.cms2-footer-newsletter input[type=email] {
    flex: 1 1 160px; padding: 10px 14px; border: 1px solid rgba(128,128,128,.45);
    border-radius: 6px; background: transparent; color: inherit; font: inherit;
}
.cms2-footer-newsletter button { padding: 10px 18px; cursor: pointer; font: inherit; }
.cms2-footer-newsletter .cms2-newsletter-msg { font-size: 13px; margin: 6px 0 0; }
.cms2-nl-hp { position: absolute !important; left: -9999px; }
.cms2-footer-desc { font-size: 13px; line-height: 1.5; margin: 0; }
.cms2-footer-nl-text { font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.cms2-footer-nl-note { font-size: 12px; line-height: 1.5; margin: 12px 0 0; opacity: .5; }
.cms2-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cms2-footer-legal { display: inline-flex; gap: 24px; }
.cms2-footer-legal a { text-decoration: underline; }
.cms2-footer-socials { display: inline-flex; gap: 14px; }
.cms2-footer-social { display: inline-flex; align-items: center; justify-content: center; }
.cms2-footer-social svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- cart drawer
   Built by site.js, so these rules are the only thing the server contributes.
   Lives in site.css, not in a module stylesheet: the drawer is opened from the
   header cart icon on EVERY page, while module CSS is only emitted for pages that
   actually carry that module's section (same reason the lightbox lives here). */
.cms2-cartdrawer[hidden] { display: none; }
.cms2-cartdrawer { position: fixed; inset: 0; z-index: 500; }
.cms2-cartdrawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.cms2-cartdrawer-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
    background: #fff; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.12);
}
.cms2-cartdrawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #eee; }
.cms2-cartdrawer-head h2 { margin: 0; font-size: 18px; text-transform: uppercase; letter-spacing: .05em; }
.cms2-cartdrawer-close { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; }
.cms2-cartdrawer-body { flex: 1; overflow-y: auto; padding: 8px 20px; }
.cms2-cartdrawer-empty { color: #777; padding: 32px 0; text-align: center; }
.cms2-cartlines { list-style: none; margin: 0; padding: 0; }
.cms2-cartline { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid #f0f0f0; }
.cms2-cartline-img { width: 64px; height: 80px; object-fit: contain; background: #f5f5f5; flex: none; }
.cms2-cartline-main { flex: 1; min-width: 0; }
.cms2-cartline-main p { margin: 0 0 3px; }
.cms2-cartline-brand { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #888; }
.cms2-cartline-name { font-weight: 700; font-size: 14px; }
.cms2-cartline-variant { font-size: 12px; color: #666; }
.cms2-cartline-qty { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; border: 1px solid #ddd; border-radius: 999px; padding: 2px 10px; }
.cms2-cartline-qty button { border: 0; background: none; font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.cms2-cartline-right { text-align: right; flex: none; }
.cms2-cartline-price { margin: 0; font-weight: 700; font-size: 14px; }
.cms2-cartline-remove { border: 0; background: none; padding: 6px 0 0; font-size: 12px; color: #888; text-decoration: underline; cursor: pointer; }
.cms2-cartdrawer-foot { padding: 16px 20px 22px; border-top: 1px solid #eee; }
.cms2-cartdrawer-totalrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.cms2-cartdrawer-totalrow strong { font-size: 20px; }
.cms2-cartdrawer-note { margin: 6px 0 0; font-size: 12px; color: #888; }
.cms2-cartdrawer-cta {
    display: block; margin-top: 12px; text-align: center; background: #111; color: #fff;
    text-decoration: none; border-radius: 999px; padding: 11px 24px; font-size: 13px; font-weight: 600;
}
.cms2-cartdrawer-cta:hover { opacity: .85; }
/* surfboards are one-offs upstream, so their line shows a quantity it cannot change */
.cms2-cartline-qtyfixed { margin-top: 8px; font-size: 12px; color: #888; }

/* Visible to screen readers and crawlers, not to the eye.
 *
 * NOT display:none and not visibility:hidden -- both remove the element from the
 * accessibility tree, so the heading would stop existing for exactly the readers
 * it is there for. This is the standard clip technique: the element still has a
 * box, is still focusable if it needs to be, and is still announced; it simply
 * occupies a 1px square nobody can see.
 *
 * Used where a page needs a heading it does not want to draw -- a shop listing
 * whose design has no title, for instance. Legitimate because the text describes
 * the page it is on; hidden text is only a problem when it says something the
 * page does not. */
.cms2-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Navigation progress bar (public_assets/site.js).
 *
 * The gap it fills: every AJAX path on the site already says something while it
 * works -- the shop's preloader, the shoplist's infinite-scroll state, the cart
 * page's loading line -- but an ordinary link click said nothing at all. On a
 * cold page cache a cms2 render can take seconds, and in that window the screen
 * is simply the old page with nothing moving on it.
 *
 * z-index 1200 puts it over everything this project pins: the menu (200), the
 * shoplist drawer (400), the cookie banner (900) and the full-screen image
 * viewer (1000). That is deliberate rather than greedy -- once a navigation has
 * started, it outranks whatever is still on screen, including a modal that is
 * about to be replaced along with the page.
 *
 * pointer-events: none, because it is 3px of news, never a control.
 */
.cms2-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 1200;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}
.cms2-progress.is-active { opacity: 1; }
.cms2-progress > span {
    display: block;
    height: 100%;
    width: 0;
    /* Its own variable, falling back to the accent.
     *
     * The accent ALONE is wrong here, and measurably so: the top 3px of the
     * viewport is exactly where a theme puts its announcement strip, and on SFH
     * that strip is the accent. Measured: the bar painted rgb(190,32,46) over a
     * .cms2-announce painted rgb(190,32,46) -- rendering perfectly, completely
     * invisible. A site whose strip is its accent sets --cms2-progress-color to
     * something that reads against it. */
    background: var(--cms2-progress-color, var(--cms2-accent, #121212));
    /* And because no single colour can be right over an unknown background, the
       bar carries its own edges: a light hairline below it separates it from a
       strip of its own colour, and the soft shadow does the same over a pale
       one. Together they make the band legible without knowing what it is on. */
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 2px 5px rgba(0, 0, 0, .35);
    transition: width .2s ease;
}
/* The bar still reports; it just stops sliding. A progress indicator is
   information, not decoration, so it is not removed here -- only its motion. */
@media (prefers-reduced-motion: reduce) {
    .cms2-progress,
    .cms2-progress > span { transition: none; }
}

/* Wide tables scroll inside their own box, never the page.
 *
 * A table pasted into a rich-text field carries whatever width its content
 * needs, and on a phone that is wider than the screen -- so the DOCUMENT
 * overflowed and every other element went sideways with it. On SFH's Shipping &
 * Returns the shipping-rate table dragged the whole article off to the left, so
 * the body copy above it was cut off mid-word before the visitor ever reached
 * the table. Wrapper injected by site.js.
 */
.cms2-tablewrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* !important is load-bearing here and used nowhere else in this file: TinyMCE
   writes `style="width: 100%"` onto the table itself, and an inline declaration
   outranks any selector. Left alone, the table would obediently squeeze back
   into the scroll box -- which is the squeezed, one-word-per-line layout this
   is meant to undo, only now with a scrollbar that never scrolls.
   `min-width: 100%` keeps a narrow table spanning its column as before. */
.cms2-tablewrap > table {
    width: auto !important;
    min-width: 100%;
}

/* "No longer available" block a detail module shows when its item is gone
   (cms2_not_found_block() in includes/helpers.php). Deliberately plain and
   token-driven, so every theme gets something usable; a theme restyles it in
   its custom CSS like anything else. */
.cms2-notfound {
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(56px, 10vw, 120px) 20px;
    text-align: center;
}
.cms2-notfound-heading {
    margin: 0 0 16px;
    font-size: clamp(26px, 4vw, 40px);
    line-height: 1.15;
}
.cms2-notfound-text {
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
}
.cms2-notfound-link {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 999px;
    background: var(--cms2-accent, #121212);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.cms2-notfound-link:hover,
.cms2-notfound-link:focus-visible { filter: brightness(.9); }