/*
Theme Name: Red October Games
Theme URI: https://redoctober.games
Author: Red October Games
Author URI: https://redoctober.games
Description: A dark, immersive WooCommerce theme for Red October Games — a tabletop gaming retailer featuring custom stock management, table booking, and a bold red-and-black aesthetic.
Version: 3.13.2
Tested up to: 7.1
Requires at least: 6.4
Requires PHP: 8.1
WC requires at least: 8.4
WC tested up to: 10.8
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: redoctober-games
Tags: dark, woocommerce, gaming, custom-colors, custom-logo, featured-images, full-width-template
*/

/* ==========================================================================
   CSS Custom Properties — all colors/fonts are soft-coded here and
   overridden dynamically via wp_add_inline_style in functions.php
   from Customizer settings.
   ========================================================================== */

:root {
    /* Brand colours */
    --rog-bg: #2e2e2e;
    --rog-bg-light: #383838;
    --rog-bg-lighter: #434343;
    --rog-primary: #b50505;
    --rog-primary-dark: #8a0404;
    --rog-accent: #ee780a;
    --rog-gold: #c8a415;
    --rog-text: #f0f0f0;
    --rog-text-muted: #a0a0a0;
    --rog-border: #4a4a4a;
    --rog-success: #28a745;
    --rog-danger: #dc3545;

    /* Typography */
    --rog-font-heading: 'DM Serif Display', Georgia, serif;
    --rog-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Layout */
    --rog-container: 1320px;
    --rog-radius: 6px;
    --rog-transition: 0.25s ease;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--rog-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--rog-text);
    background-color: var(--rog-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--rog-accent);
    text-decoration: none;
    transition: color var(--rog-transition);
}

a:hover,
a:focus {
    color: var(--rog-gold);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--rog-font-heading);
    color: var(--rog-text);
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p { margin-bottom: 1em; }

ul, ol { padding-left: 1.25em; }

/* ==========================================================================
   Utility
   ========================================================================== */

.rog-container {
    width: 100%;
    max-width: var(--rog-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.rog-section {
    padding: 60px 0;
}

.rog-section-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
    position: relative;
}

.rog-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--rog-primary);
    margin: 12px auto 0;
}

.rog-btn {
    display: inline-block;
    padding: 12px 28px;
    font-family: var(--rog-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: var(--rog-radius);
    cursor: pointer;
    transition: all var(--rog-transition);
    text-align: center;
    text-decoration: none;
    line-height: 1.4;
}

.rog-btn-primary {
    background: var(--rog-primary);
    color: #fff;
}

.rog-btn-primary:hover {
    background: var(--rog-primary-dark);
    color: #fff;
}

.rog-btn-accent {
    background: var(--rog-accent);
    color: #fff;
}

.rog-btn-accent:hover {
    background: #d56a08;
    color: #fff;
}

.rog-btn-outline {
    background: transparent;
    color: var(--rog-text);
    border: 2px solid var(--rog-primary);
}

.rog-btn-outline:hover {
    background: var(--rog-primary);
    color: #fff;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

/* ==========================================================================
   Top Bar
   ========================================================================== */

.rog-topbar {
    background: #111;
    padding: 6px 0;
    font-size: 0.82rem;
    color: var(--rog-text-muted);
    border-bottom: 1px solid var(--rog-border);
}

.rog-topbar .rog-container {
    display: flex;
    /* Community links left, socials right. */
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.rog-topbar a {
    color: var(--rog-text-muted);
}

.rog-topbar a:hover {
    color: var(--rog-accent);
}

.rog-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Community/service links - the primary menu's non-category items, sliced
   out by rog_render_topbar_nav(). Small caps, quiet; the current page and
   hover pick up the accent. */
.rog-topbar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 26px;
}

.rog-topbar-menu a {
    display: inline-block;
    padding: 4px 0;
    color: #cfcfcf;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rog-topbar-menu a:hover,
.rog-topbar-menu .current-menu-item > a,
.rog-topbar-menu .current-menu-parent > a {
    color: var(--rog-accent);
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.rog-header {
    background: var(--rog-bg);
    border-bottom: 2px solid var(--rog-primary);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.rog-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    gap: 20px;
}

.rog-logo img {
    max-height: 55px;
    width: auto;
}

.rog-logo-text {
    font-family: var(--rog-font-heading);
    font-size: 1.6rem;
    color: var(--rog-primary);
    text-decoration: none;
}

/* Search */
.rog-search {
    flex: 1;
    max-width: 420px;
    position: relative; /* anchor for the live-search suggestions panel */
}

.rog-search form {
    display: flex;
    border-radius: var(--rog-radius);
    overflow: hidden;
    border: 1px solid var(--rog-border);
}

.rog-search input[type="search"] {
    flex: 1;
    padding: 10px 14px;
    background: var(--rog-bg-light);
    border: none;
    color: var(--rog-text);
    font-size: 0.9rem;
    outline: none;
}

.rog-search input[type="search"]::placeholder {
    color: var(--rog-text-muted);
}

.rog-search button {
    padding: 10px 16px;
    background: var(--rog-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background var(--rog-transition);
}

.rog-search button:hover {
    background: var(--rog-primary-dark);
}

/* Live-search suggestions dropdown */
.rog-search-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    overflow-y: auto;
    max-height: min(70vh, 460px);
}

.rog-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--rog-text);
    border-bottom: 1px solid var(--rog-border);
}

.rog-search-item:last-of-type {
    border-bottom: 0;
}

.rog-search-item.is-active,
.rog-search-item:hover {
    background: var(--rog-bg-lighter);
}

.rog-search-item__thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--rog-bg);
}

.rog-search-item__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.rog-search-item__title {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rog-search-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rog-search-item__price {
    font-size: 0.85rem;
    color: var(--rog-text-muted);
}

.rog-search-item__price ins {
    text-decoration: none;
    color: var(--rog-text);
}

.rog-search-item__price del {
    opacity: 0.6;
    font-size: 0.8em;
    margin-left: 4px;
}

.rog-search-badge {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

.rog-search-badge--in-stock {
    background: rgba(40, 167, 69, 0.18);
    color: #5fd17e;
}

.rog-search-badge--order-now {
    background: rgba(200, 164, 21, 0.18);
    color: var(--rog-gold);
}

.rog-search-badge--backorder {
    background: rgba(160, 160, 160, 0.18);
    color: var(--rog-text-muted);
}

.rog-search-badge--unavailable {
    background: rgba(220, 53, 69, 0.18);
    color: #f1707b;
}

.rog-search-all {
    display: block;
    padding: 11px 14px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
    background: var(--rog-primary);
}

.rog-search-all:hover {
    background: var(--rog-primary-dark);
}

.rog-search-empty {
    padding: 16px 14px;
    text-align: center;
    color: var(--rog-text-muted);
    font-size: 0.9rem;
}

/* Header actions */
.rog-header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.rog-cart-link {
    position: relative;
    color: var(--rog-text);
    font-size: 1.3rem;
    text-decoration: none;
}

.rog-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--rog-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Primary Navigation */
.rog-nav {
    background: var(--rog-bg-light);
    border-bottom: 1px solid var(--rog-border);
}

.rog-nav ul {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}

.rog-nav > ul > li {
    position: relative;
}

.rog-nav > ul > li > a {
    display: block;
    padding: 14px 20px;
    color: var(--rog-text);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all var(--rog-transition);
    border-bottom: 3px solid transparent;
}

.rog-nav > ul > li > a:hover,
.rog-nav > ul > li.current-menu-item > a,
.rog-nav > ul > li.current-menu-parent > a {
    color: var(--rog-accent);
    border-bottom-color: var(--rog-primary);
}

/* Dropdown / Mega Menu */
.rog-nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--rog-bg-lighter);
    min-width: 220px;
    border: 1px solid var(--rog-border);
    border-radius: 0 0 var(--rog-radius) var(--rog-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 999;
    flex-direction: column;
}

.rog-nav > ul > li:hover > ul,
.rog-nav > ul > li.rog-mega-open > ul {
    display: flex;
}

.rog-nav ul ul li a {
    padding: 10px 18px;
    color: var(--rog-text-muted);
    font-size: 0.9rem;
    display: block;
    border-left: 3px solid transparent;
    transition: all var(--rog-transition);
}

.rog-nav ul ul li a:hover {
    color: var(--rog-text);
    background: var(--rog-bg-light);
    border-left-color: var(--rog-primary);
}

/* Third-level dropdown */
.rog-nav ul ul ul {
    top: 0;
    left: 100%;
}

/* Mega menu container */
.rog-mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--rog-bg-lighter);
    border: 1px solid var(--rog-border);
    border-radius: 0 0 var(--rog-radius) var(--rog-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 24px;
    z-index: 999;
}

.rog-nav > ul > li:hover > .rog-mega-menu,
.rog-nav > ul > li.rog-mega-open > .rog-mega-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.rog-mega-col h4 {
    color: var(--rog-accent);
    font-size: 0.95rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rog-border);
}

.rog-mega-col ul {
    list-style: none;
    padding: 0;
}

.rog-mega-col ul li a {
    display: block;
    padding: 5px 0;
    color: var(--rog-text-muted);
    font-size: 0.88rem;
}

.rog-mega-col ul li a:hover {
    color: var(--rog-accent);
}

/* Mobile menu toggle */
.rog-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}

.rog-hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--rog-text);
    transition: all var(--rog-transition);
}

.rog-hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.rog-hamburger.active span:nth-child(2) {
    opacity: 0;
}

.rog-hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ==========================================================================
   Hero Banner
   ========================================================================== */

.rog-hero {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.rog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(26, 26, 26, 0.5) 100%);
}

.rog-hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.rog-hero-content h1 {
    font-size: 3rem;
    margin-bottom: 16px;
    color: #fff;
}

.rog-hero-content p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 24px;
}

/* ==========================================================================
   Homepage Sections
   ========================================================================== */

/* Featured / New Arrivals product carousel */
.rog-product-carousel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.rog-product-card {
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    overflow: hidden;
    transition: transform var(--rog-transition), box-shadow var(--rog-transition);
}

.rog-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.rog-product-card-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--rog-bg-lighter);
    position: relative;
}

.rog-product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--rog-transition);
}

.rog-product-card:hover .rog-product-card-img img {
    transform: scale(1.05);
}

.rog-product-card-body {
    padding: 16px;
}

.rog-product-card-title {
    font-size: 1rem;
    margin-bottom: 8px;
    font-family: var(--rog-font-body);
    font-weight: 600;
}

.rog-product-card-title a {
    color: var(--rog-text);
}

.rog-product-card-title a:hover {
    color: var(--rog-accent);
}

.rog-product-card-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rog-gold);
    margin-bottom: 12px;
}

/* ─── Product ribbons ─────────────────────────────────────────────
   Two stacked groups overlay each product image:
     .rog-product-badges--tags   top-left    (Pre-order / Limited Run / Online Only)
     .rog-product-badges--stock  bottom-right (In Stock / Available to Order / Back Order / Unavailable)
   Each group is absolutely positioned against the nearest position:relative
   ancestor, which differs per context:
     - shop loop / carousel : .rog-product-card-img
     - quick-view modal     : .rog-qv-image-wrap
     - single product page  : .woocommerce-product-gallery (see product-image.php)
*/
.rog-product-badges {
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}
.rog-product-badges--tags {
    top: 8px;
    left: 8px;
    align-items: flex-start;
}
.rog-product-badges--stock {
    bottom: 8px;
    right: 8px;
    align-items: flex-end;
}
/* Single-product page: the badges carry .rog-product-badges--single and are
   rendered as a sibling of the flexslider figure (see
   woocommerce/single-product/product-image.php), so they overlay the gallery
   image like the cards do instead of sliding with it. Their corner placement
   and absolute positioning come from --tags / --stock above; the anchor is
   .woocommerce-product-gallery (position:relative). */
.rog-product-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    background: #555;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    line-height: 1.3;
}
/* Stock-status ribbons (bottom-right) */
.rog-product-badge--in-stock     { background: #2e7d32; }
.rog-product-badge--order-now    { background: var(--rog-gold); color: #1a1a1a; }
.rog-product-badge--backorder    { background: #111; color: #fff; }
.rog-product-badge--unavailable  { background: #a02525; }
/* Tag ribbons (top-left) */
.rog-product-badge--preorder     { background: var(--rog-gold); color: #1a1a1a; }
.rog-product-badge--limited      { background: #111; color: #fff; }
.rog-product-badge--online-only  { background: #1565c0; }

/* ─── "Register Your Interest" banner ─────────────────────────────
   A diagonal corner ribbon across the BOTTOM RIGHT of the image for
   pre-order items in their interest phase (see ROG_Register_Interest) —
   owner 2026-07-23: the old full-width centre band hid the product art,
   so the ribbon is corner-pinned and more see-through (0.72 vs 0.92).
   The outer div is a clipped square pinned to the corner; the strip
   inside runs at 45 degrees through it, so the ribbon never overflows
   the image whatever its size. Anchored to the same position:relative
   image containers the stock ribbons use. */
.rog-interest-banner {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 140px;
    height: 140px;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
}
.rog-interest-banner span {
    position: absolute;
    display: block;
    width: 200px;
    right: -52px;
    bottom: 34px;
    transform: rotate(-45deg);
    text-align: center;
    background: rgba(181, 5, 5, 0.72); /* --rog-primary, see-through */
    color: #fff;
    font-weight: 800;
    font-size: 0.62rem;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
/* Larger image contexts get a bigger corner. */
.rog-interest-banner.rog-product-badges--single {
    width: 210px;
    height: 210px;
}
.rog-interest-banner.rog-product-badges--single span {
    width: 300px;
    right: -78px;
    bottom: 52px;
    font-size: 0.9rem;
    padding: 8px 0;
}
/* Tighter hero carousel card. */
.rog-interest-banner.rog-product-badges--hero {
    width: 104px;
    height: 104px;
}
.rog-interest-banner.rog-product-badges--hero span {
    width: 150px;
    right: -39px;
    bottom: 25px;
    font-size: 0.5rem;
    padding: 4px 0;
}

/* ─── Release date line (pre-order campaign products) ───────────── */
.rog-release-date {
    margin: 0 0 8px;
    font-size: 0.8rem;
    color: var(--rog-text-muted);
}
.rog-release-date strong {
    color: var(--rog-gold);
    font-weight: 700;
}
.rog-release-date--card {
    font-size: 0.72rem;
    margin: 0 0 6px;
}

/* ─── Delivery / restock estimate ────────────────────────────────── */
.rog-delivery-estimate {
    font-size: 0.8rem;
    line-height: 1.3;
    margin: 0 0 12px;
    padding: 6px 10px;
    border-radius: 4px;
    border-left: 3px solid var(--rog-border);
    background: var(--rog-bg-light);
    color: var(--rog-text-muted);
}
.rog-delivery-estimate--instock {
    border-left-color: #4caf50;
    color: var(--rog-text);
}
.rog-delivery-estimate--restock {
    border-left-color: var(--rog-accent);
    color: var(--rog-text);
}
.rog-delivery-estimate--backorder {
    border-left-color: #111;
    color: var(--rog-text);
}
/* Variant tweaks per context */
.rog-delivery-estimate--card {
    font-size: 0.75rem;
    padding: 5px 8px;
}
.rog-delivery-estimate--single,
.rog-delivery-estimate--qv {
    font-size: 0.9rem;
    margin: 10px 0 14px;
    padding: 8px 12px;
}

/* ─── Product price (native WooCommerce markup) ───────────────────────
   Single price by default; when a genuine sale is set WooCommerce renders
   the old price in <del> and the sale price in <ins>. */
.price {
    line-height: 1.3;
}

.price del {
    font-size: 0.82em;
    color: var(--rog-text-muted, #888);
    text-decoration: line-through;
    text-decoration-color: var(--rog-text-muted, #888);
}

.price ins {
    font-weight: 700;
    text-decoration: none;
    color: inherit;
}

/* ─── Product card / single product overrides ────────────────────── */
.rog-product-card .price,
.rog-product-card .price ins {
    color: var(--rog-gold);
    font-weight: 700;
}

.rog-product-card .rog-btn,
.rog-product-card .button {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 0.85rem;
    background: var(--rog-primary);
    color: #fff;
    text-align: center;
    border-radius: var(--rog-radius);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background var(--rog-transition);
}

.rog-product-card .rog-btn:hover,
.rog-product-card .button:hover {
    background: var(--rog-primary-dark);
    color: #fff;
}

/* Category grid */
.rog-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.rog-category-card {
    position: relative;
    border-radius: var(--rog-radius);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: flex-end;
    background: var(--rog-bg-lighter);
    border: 1px solid var(--rog-border);
    transition: transform var(--rog-transition);
}

.rog-category-card:hover {
    transform: translateY(-3px);
}

.rog-category-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--rog-transition);
}

.rog-category-card:hover img {
    transform: scale(1.08);
}

.rog-category-card-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}

.rog-category-card-overlay h3 {
    font-size: 1rem;
    margin: 0;
    color: #fff;
}

/* CTA Section */
.rog-cta {
    background: linear-gradient(135deg, var(--rog-primary-dark), var(--rog-primary));
    text-align: center;
    padding: 60px 20px;
}

.rog-cta h2 {
    color: #fff;
    margin-bottom: 12px;
}

.rog-cta p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 auto 24px;
}

/* Events section */
.rog-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.rog-event-card {
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    padding: 24px;
    transition: border-color var(--rog-transition);
}

.rog-event-card:hover {
    border-color: var(--rog-primary);
}

.rog-event-date {
    font-size: 0.82rem;
    color: var(--rog-accent);
    font-weight: 600;
    margin-bottom: 8px;
}

.rog-event-card h3 {
    margin-bottom: 8px;
}

.rog-event-card p {
    color: var(--rog-text-muted);
    font-size: 0.92rem;
}

/* ==========================================================================
   WooCommerce — Shop / Archive
   ========================================================================== */

/* Mobile filter toggle — hidden on desktop, shown on mobile */
.rog-filter-toggle {
    display: none;
}

/* Sidebar overlay — fixed full-screen backdrop, hidden until sidebar opens */
.rog-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 998;
}

.rog-sidebar-overlay--active {
    display: block;
}

/* Close button inside sidebar — only needed on mobile slide-out */
.rog-sidebar-close {
    display: none;
}

.rog-shop-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.rog-shop-sidebar {
    flex: 0 0 240px;
    width: 240px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 12px 0 0;
}

.rog-shop-main {
    flex: 1;
    min-width: 0;
}

.rog-shop-sidebar h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--rog-primary);
    color: var(--rog-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rog-shop-sidebar ul,
.rog-shop-sidebar ol,
.rog-cat-tree ul {
    list-style: none !important;
    padding: 0;
}

.rog-shop-sidebar li::marker,
.rog-cat-tree li::marker {
    content: none;
    display: none;
}

.rog-shop-sidebar ul li {
    margin-bottom: 6px;
}

.rog-shop-sidebar ul li a {
    color: var(--rog-text-muted);
    font-size: 0.9rem;
    display: block;
    padding: 4px 0;
}

.rog-shop-sidebar ul li a:hover,
.rog-shop-sidebar ul li.current-cat a {
    color: var(--rog-accent);
}

/* ── Sidebar: "All Products" link ──────────────────────────────── */
.rog-cat-all {
    display: block;
    padding: 8px 4px 8px 12px;
    margin-bottom: 2px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rog-text-muted);
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0;
    background: none;
    transition: color var(--rog-transition), border-color var(--rog-transition);
}

.rog-cat-all:hover,
.rog-cat-all.current {
    color: var(--rog-accent);
    border-left-color: var(--rog-accent);
    background: none;
}

/* ── Sidebar: nested category tree ─────────────────────────────── */
.rog-cat-tree {
    margin-top: 4px;
}

.rog-cat-tree ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rog-cat-tree li {
    margin-bottom: 4px;
}

/* Leaf items: plain text link with left-border accent */
.rog-cat-tree li:not(.has-children) > a {
    display: block;
    padding: 7px 4px 7px 12px;
    font-size: 0.875rem;
    color: var(--rog-text-muted);
    line-height: 1.4;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0;
    background: none;
    transition: color var(--rog-transition), border-color var(--rog-transition);
}

.rog-cat-tree li:not(.has-children) > a:hover {
    color: var(--rog-accent);
    border-left-color: rgba(238, 120, 10, 0.5);
    background: none;
}

/* Parent items: plain left-border row */
.rog-cat-row {
    display: flex;
    align-items: stretch;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0;
    overflow: visible;
    transition: border-color var(--rog-transition);
}

.rog-cat-row:hover {
    border-left-color: rgba(238, 120, 10, 0.5);
    background: none;
}

/* Link inside a parent row */
.rog-cat-row > a {
    flex: 1;
    display: block;
    padding: 7px 4px 7px 10px;
    font-size: 0.875rem;
    color: var(--rog-text-muted);
    line-height: 1.4;
    transition: color var(--rog-transition);
}

.rog-cat-row > a:hover {
    color: var(--rog-accent);
}

/* Top-level items slightly bolder */
.rog-cat-tree > ul > li > a,
.rog-cat-tree > ul > li > .rog-cat-row > a {
    font-weight: 500;
}

/* Current-category states */
.rog-cat-tree li.current-cat:not(.has-children) > a {
    color: var(--rog-accent);
    font-weight: 600;
    border-left-color: var(--rog-accent);
    background: none;
}

.rog-cat-tree li.current-cat.has-children > .rog-cat-row {
    border-left-color: var(--rog-accent);
    background: none;
}

.rog-cat-tree li.current-cat > .rog-cat-row > a,
.rog-cat-tree li.current-cat-ancestor > .rog-cat-row > a {
    color: var(--rog-accent);
    font-weight: 600;
}

/* Indented sub-list */
.rog-cat-children {
    padding-left: 8px;
    margin: 4px 0 0 12px;
    border-left: 2px solid var(--rog-border);
}

.rog-cat-children li {
    margin-bottom: 3px;
}

.rog-cat-children li:not(.has-children) > a {
    font-size: 0.825rem;
    padding: 7px 10px;
}

.rog-cat-children .rog-cat-row > a {
    font-size: 0.825rem;
    padding: 7px 10px;
}

/* Toggle arrow — no border box, inline with text */
.rog-cat-toggle {
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 8px;
    color: var(--rog-text-muted);
    transition: color var(--rog-transition);
}

.rog-cat-toggle:hover {
    color: var(--rog-accent);
    background: none;
}

/* CSS triangle — identical to top-nav .rog-toggle-icon */
.rog-cat-toggle .rog-toggle-icon {
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform var(--rog-transition);
}

.rog-cat-toggle.open .rog-toggle-icon {
    transform: rotate(180deg);
}

/* Hide product count badge on WooCommerce main-shop category tiles */
.woocommerce-loop-category__title .count {
    display: none;
}

.rog-shop-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.rog-shop-controls .woocommerce-result-count {
    color: var(--rog-text-muted);
    font-size: 0.9rem;
}

.rog-shop-controls .woocommerce-ordering select {
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    color: var(--rog-text);
    padding: 8px 12px;
    border-radius: var(--rog-radius);
    font-size: 0.9rem;
}

/* ── Sidebar: section divider ──────────────────────────────────── */
.rog-sidebar-divider {
    height: 1px;
    background: var(--rog-border);
    margin: 16px 0 14px;
}

/* ── Sidebar: collapsible filter sections ──────────────────────── */
.rog-filter-section {
    margin-bottom: 4px;
}

.rog-filter-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--rog-border);
    padding: 10px 0;
    cursor: pointer;
    color: var(--rog-text);
    font-size: 0.875rem;
    font-weight: 700;
    font-family: var(--rog-font-body);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    margin-bottom: 10px;
    transition: color var(--rog-transition);
}

.rog-filter-section-toggle:hover {
    color: var(--rog-accent);
}

.rog-filter-section-toggle .rog-toggle-icon {
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    flex-shrink: 0;
    transition: transform var(--rog-transition);
}

.rog-filter-section-toggle.open .rog-toggle-icon {
    transform: rotate(180deg);
}

/* ── Sidebar: filter option links (brand / availability) ──────── */
.rog-filter-section-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.rog-filter-option {
    display: block;
    padding: 8px 12px;
    font-size: 0.875rem;
    color: var(--rog-text-muted);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    line-height: 1.3;
    transition: color var(--rog-transition), border-color var(--rog-transition), background var(--rog-transition);
}

.rog-filter-option:hover {
    color: var(--rog-text);
    border-color: rgba(238, 120, 10, 0.4);
    background: rgba(238, 120, 10, 0.04);
}

.rog-filter-option.active {
    color: var(--rog-accent);
    font-weight: 600;
    border-color: var(--rog-accent);
    background: rgba(238, 120, 10, 0.08);
}

/* ── Sidebar: availability checkboxes ──────────────────────────── */
.rog-checkbox-label {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 4px;
    font-size: 0.875rem;
    color: var(--rog-text-muted);
    cursor: pointer;
    transition: color var(--rog-transition);
}

.rog-checkbox-label:hover {
    color: var(--rog-text);
}

.rog-checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1px solid var(--rog-border);
    border-radius: 3px;
    background: var(--rog-bg-light);
    cursor: pointer;
    position: relative;
    transition: border-color var(--rog-transition), background var(--rog-transition);
}

.rog-checkbox-label input[type="checkbox"]:checked {
    background: var(--rog-accent);
    border-color: var(--rog-accent);
}

.rog-checkbox-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
}

.rog-checkbox-label input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--rog-accent);
    outline-offset: 2px;
}

/* ── Sidebar: price range filter ───────────────────────────────── */
.rog-price-range {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 8px;
}

.rog-price-input {
    width: 80px;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    color: var(--rog-text);
    font-family: var(--rog-font-body);
    font-size: 0.85rem;
    padding: 7px 10px;
    transition: border-color var(--rog-transition);
    -moz-appearance: textfield;
}

.rog-price-input::-webkit-outer-spin-button,
.rog-price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.rog-price-input:focus {
    outline: none;
    border-color: var(--rog-accent);
}

.rog-price-sep {
    color: var(--rog-text-muted);
    font-size: 0.875rem;
}

.rog-price-apply {
    background: var(--rog-primary);
    color: var(--rog-text);
    border: none;
    border-radius: var(--rog-radius);
    font-family: var(--rog-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 7px 14px;
    cursor: pointer;
    transition: background var(--rog-transition), color var(--rog-transition);
}

.rog-price-apply:hover {
    background: var(--rog-accent);
}

/* ── Shop: sub-category chip strip ─────────────────────────────── */
.rog-subcategory-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.rog-subcategory-tile {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color var(--rog-transition), background var(--rog-transition);
}

.rog-subcategory-tile:hover {
    border-color: var(--rog-accent);
    background: rgba(238, 120, 10, 0.06);
}

.rog-subcategory-tile img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Hide placeholder — tiles without images show text only */
.rog-subcategory-tile__placeholder {
    display: none;
}

.rog-subcategory-tile span {
    display: block;
    padding: 7px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rog-text-muted);
    line-height: 1.3;
    white-space: nowrap;
}

.rog-subcategory-tile:hover span {
    color: var(--rog-accent);
}

/* Product grid */
ul.products,
.rog-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
}

ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    overflow: hidden;
    transition: transform var(--rog-transition), box-shadow var(--rog-transition);
    margin: 0;
    padding: 0;
}

ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

ul.products li.product a img,
ul.products li.product > a > img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0;
}

ul.products li.product .woocommerce-loop-product__title {
    padding: 12px 16px 4px;
    font-size: 0.95rem;
    font-family: var(--rog-font-body);
    font-weight: 600;
    color: var(--rog-text);
}

ul.products li.product .price {
    padding: 0 16px 8px;
    color: var(--rog-gold);
    font-weight: 700;
    font-size: 1.05rem;
}

ul.products li.product .price del {
    color: var(--rog-text-muted);
    font-weight: 400;
}

ul.products li.product .price ins {
    text-decoration: none;
    color: var(--rog-primary);
}

ul.products li.product .button,
ul.products li.product .add_to_cart_button {
    display: block;
    margin: 0;
    width: 100%;
    padding: 10px;
    background: var(--rog-primary);
    color: #fff;
    text-align: center;
    border-radius: var(--rog-radius);
    font-size: 0.85rem;
    font-weight: 600;
    transition: background var(--rog-transition);
    border: none;
    cursor: pointer;
}

ul.products li.product .button:hover,
ul.products li.product .add_to_cart_button:hover {
    background: var(--rog-primary-dark);
    color: #fff;
}

/* Sale / out of stock badges */
ul.products li.product .onsale,
.single-product .onsale {
    background: var(--rog-accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--rog-radius);
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
}

.rog-badge-limited {
    background: var(--rog-gold);
    color: #111;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--rog-radius);
    display: inline-block;
    margin: 8px 16px 0;
}

/* Star rating */
.star-rating {
    color: var(--rog-gold);
    font-size: 0.85rem;
    padding: 0 16px;
}

/* Pagination */
.woocommerce-pagination {
    margin-top: 40px;
    text-align: center;
}

.woocommerce-pagination ul {
    display: inline-flex;
    gap: 6px;
    list-style: none;
    padding: 0;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    color: var(--rog-text);
    font-size: 0.9rem;
    transition: all var(--rog-transition);
}

.woocommerce-pagination ul li a:hover {
    background: var(--rog-primary);
    border-color: var(--rog-primary);
    color: #fff;
}

.woocommerce-pagination ul li span.current {
    background: var(--rog-primary);
    border-color: var(--rog-primary);
    color: #fff;
}

/* ==========================================================================
   WooCommerce — Single Product
   ========================================================================== */

.rog-single-product {
    padding: 40px 0;
}

.rog-single-product__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Breadcrumbs */
.woocommerce-breadcrumb {
    padding: 16px 0;
    font-size: 0.85rem;
    color: var(--rog-text-muted);
}

.woocommerce-breadcrumb a {
    color: var(--rog-text-muted);
}

.woocommerce-breadcrumb a:hover {
    color: var(--rog-accent);
}

/* Gallery */
.woocommerce-product-gallery {
    position: relative; /* anchors the on-image badges (.rog-product-badges--single) */
    background: var(--rog-bg-light);
    border-radius: var(--rog-radius);
    overflow: hidden;
    border: 1px solid var(--rog-border);
}

/* Zoom / lightbox trigger. WooCommerce's own gallery CSS is dequeued (see the
   woocommerce_enqueue_styles filter in functions.php), so its 🔍 trigger would
   otherwise sit unstyled in the top-left — exactly where the tag ribbons now
   go. Pin it to the top-right, clear of both ribbon groups, with a backdrop so
   it stays visible over light or dark product images. */
.woocommerce-product-gallery__trigger {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    text-decoration: none;
    line-height: 1;
    font-size: 0.95rem;
    transition: background var(--rog-transition);
}
.woocommerce-product-gallery__trigger:hover {
    background: rgba(0, 0, 0, 0.78);
}

.woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
}

.woocommerce-product-gallery .flex-control-thumbs {
    display: flex;
    gap: 8px;
    padding: 12px;
    list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li {
    flex: 0 0 70px;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--rog-transition);
}

.woocommerce-product-gallery .flex-control-thumbs li img:hover,
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
    border-color: var(--rog-primary);
}

/* Product summary */
.summary.entry-summary {
    padding: 0;
}

.summary.entry-summary .product_title {
    font-size: 2rem;
    margin-bottom: 10px;
}

.summary.entry-summary .price {
    font-size: 1.5rem;
    color: var(--rog-gold);
    font-weight: 700;
    margin-bottom: 20px;
}

.summary.entry-summary .woocommerce-product-details__short-description {
    color: var(--rog-text-muted);
    margin-bottom: 20px;
    line-height: 1.7;
}

/* Add to cart */
.summary .cart {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.summary .cart .quantity input {
    width: 70px;
    padding: 10px;
    text-align: center;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    color: var(--rog-text);
    border-radius: var(--rog-radius);
    font-size: 1rem;
}

.summary .cart .single_add_to_cart_button {
    flex: 1;
    padding: 14px 24px;
    background: var(--rog-primary);
    color: #fff;
    border: none;
    border-radius: var(--rog-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--rog-transition);
}

.summary .cart .single_add_to_cart_button:hover {
    background: var(--rog-primary-dark);
}

/* Product meta */
.product_meta {
    font-size: 0.88rem;
    color: var(--rog-text-muted);
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--rog-border);
}

.product_meta span {
    display: block;
    margin-bottom: 6px;
}

.product_meta a {
    color: var(--rog-accent);
}

/* Tabs */
.woocommerce-tabs {
    grid-column: 1 / -1;
    margin-top: 20px;
}

.woocommerce-tabs ul.tabs {
    list-style: none;
    display: flex;
    gap: 0;
    padding: 0;
    border-bottom: 2px solid var(--rog-border);
    margin-bottom: 24px;
}

.woocommerce-tabs ul.tabs li {
    margin: 0;
}

.woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 24px;
    color: var(--rog-text-muted);
    font-weight: 500;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all var(--rog-transition);
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--rog-text);
    border-bottom-color: var(--rog-primary);
}

.woocommerce-tabs .panel {
    color: var(--rog-text-muted);
    line-height: 1.7;
}

/* Related products */
.related.products {
    grid-column: 1 / -1;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--rog-border);
}

.related.products h2 {
    margin-bottom: 24px;
}

/* ==========================================================================
   WooCommerce — Cart
   ========================================================================== */

.rog-cart-page {
    padding: 40px 0;
}

.woocommerce-cart-form table {
    width: 100%;
    border-collapse: collapse;
    background: var(--rog-bg-light);
    border-radius: var(--rog-radius);
    overflow: hidden;
}

.woocommerce-cart-form table th {
    background: var(--rog-bg-lighter);
    padding: 14px 18px;
    text-align: left;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--rog-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.woocommerce-cart-form table td {
    padding: 18px;
    border-bottom: 1px solid var(--rog-border);
    vertical-align: middle;
}

.woocommerce-cart-form table th.product-thumbnail,
.woocommerce-cart-form table td.product-thumbnail {
    width: 120px;
}

.woocommerce-cart-form table td.product-thumbnail img {
    display: block;
    width: 110px;
    height: 110px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
}

.woocommerce-cart-form table td.product-name a {
    color: var(--rog-text);
    font-weight: 500;
}

.woocommerce-cart-form table td.product-name a:hover {
    color: var(--rog-accent);
}

.woocommerce-cart-form table td.product-price,
.woocommerce-cart-form table td.product-subtotal {
    color: var(--rog-gold);
    font-weight: 600;
}

.woocommerce-cart-form table td.product-quantity input {
    width: 60px;
    padding: 8px;
    text-align: center;
    background: var(--rog-bg);
    border: 1px solid var(--rog-border);
    color: var(--rog-text);
    border-radius: var(--rog-radius);
}

.woocommerce-cart-form table td.product-remove a {
    color: var(--rog-danger);
    font-size: 1.2rem;
    font-weight: 700;
}

.woocommerce-cart-form .actions {
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.woocommerce-cart-form .actions .coupon {
    display: flex;
    gap: 8px;
}

.woocommerce-cart-form .actions .coupon input {
    padding: 10px 14px;
    background: var(--rog-bg);
    border: 1px solid var(--rog-border);
    color: var(--rog-text);
    border-radius: var(--rog-radius);
    font-size: 0.9rem;
}

.woocommerce-cart-form .actions button,
.woocommerce-cart-form .actions input[type="submit"] {
    padding: 10px 20px;
    background: var(--rog-primary);
    color: #fff;
    border: none;
    border-radius: var(--rog-radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background var(--rog-transition);
}

.woocommerce-cart-form .actions button:hover,
.woocommerce-cart-form .actions input[type="submit"]:hover {
    background: var(--rog-primary-dark);
}

/* Cart totals */
.cart_totals {
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    padding: 24px;
    margin-top: 30px;
    max-width: 480px;
    margin-left: auto;
}

.cart_totals h2 {
    margin-bottom: 16px;
    font-size: 1.3rem;
}

.cart_totals table {
    width: 100%;
}

.cart_totals table th,
.cart_totals table td {
    padding: 10px 0;
    border-bottom: 1px solid var(--rog-border);
}

.cart_totals table th {
    color: var(--rog-text-muted);
    font-weight: 500;
    text-align: left;
}

.cart_totals table td {
    text-align: right;
    color: var(--rog-gold);
    font-weight: 600;
}

.cart_totals .order-total td {
    font-size: 1.2rem;
    color: var(--rog-accent);
}

.cart_totals .wc-proceed-to-checkout .checkout-button {
    display: block;
    width: 100%;
    padding: 14px;
    margin-top: 16px;
    background: var(--rog-accent);
    color: #fff;
    text-align: center;
    border-radius: var(--rog-radius);
    font-weight: 700;
    font-size: 1rem;
    transition: background var(--rog-transition);
}

.cart_totals .wc-proceed-to-checkout .checkout-button:hover {
    background: #d56a08;
    color: #fff;
}

/* ==========================================================================
   WooCommerce — Checkout
   ========================================================================== */

.woocommerce-checkout {
    padding: 40px 0;
}

/* Delivery method picker (Pickup / Delivery) */
.rog-delivery-method-toggle {
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    padding: 24px;
    margin: 0 0 30px;
}

.rog-delivery-method-toggle__title {
    margin: 0 0 16px;
    font-size: 1.4rem;
}

.rog-delivery-method-toggle__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.rog-delivery-method-toggle__option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 2px solid var(--rog-border);
    border-radius: var(--rog-radius);
    cursor: pointer;
    transition: border-color var(--rog-transition), background var(--rog-transition);
}

.rog-delivery-method-toggle__option:hover {
    border-color: var(--rog-accent);
}

.rog-delivery-method-toggle__option.is-active {
    border-color: var(--rog-primary);
    background: rgba(181, 5, 5, 0.08);
}

.rog-delivery-method-toggle__option input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
}

.rog-delivery-method-toggle__label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rog-delivery-method-toggle__label strong {
    color: var(--rog-text);
    font-size: 1rem;
}

.rog-delivery-method-toggle__label small {
    color: var(--rog-text-muted);
    font-size: 0.85rem;
}

/* Pickup mode — hide the delivery address fields. The customer still sees
   email/name/phone (and any other contact fields) so we can reach them. */
.rog-checkout-pickup #billing_address_1_field,
.rog-checkout-pickup #billing_address_2_field,
.rog-checkout-pickup #billing_city_field,
.rog-checkout-pickup #billing_state_field,
.rog-checkout-pickup #billing_postcode_field,
.rog-checkout-pickup #billing_country_field,
.rog-checkout-pickup .woocommerce-shipping-fields,
.rog-checkout-pickup #ship-to-different-address {
    display: none !important;
}

/* In pickup mode, show the required asterisk on the phone field. */
.rog-checkout-pickup #billing_phone_field label .optional {
    display: none;
}

.rog-checkout-pickup #billing_phone_field label::after {
    content: ' *';
    color: var(--rog-primary);
    font-weight: 700;
}

/* Square hosted card field: its .sq-card-iframe-container is content-box with a
   fixed width plus ~26px horizontal padding, so it renders ~24px wider than the
   payment box and, because a <fieldset> doesn't clip, spills past the right edge.
   border-box absorbs the padding; max-width keeps it responsive. */
#wc-square-credit-card-credit-card-form .sq-card-iframe-container {
    box-sizing: border-box;
    max-width: 100%;
}

@media (max-width: 600px) {
    .rog-delivery-method-toggle__options {
        grid-template-columns: 1fr;
    }
}

.woocommerce form.checkout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 30px;
    align-items: start;
}

.woocommerce form.checkout .col2-set,
.woocommerce form.checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.woocommerce form.checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    margin-bottom: 16px;
}

.woocommerce form.checkout #order_review {
    grid-column: 2;
    grid-row: 2;
}

.woocommerce form .form-row label {
    display: block;
    color: var(--rog-text-muted);
    font-size: 0.88rem;
    margin-bottom: 6px;
    font-weight: 500;
}

.woocommerce form .form-row input,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    color: var(--rog-text);
    border-radius: var(--rog-radius);
    font-size: 0.95rem;
    transition: border-color var(--rog-transition);
}

.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--rog-primary);
    outline: none;
}

#order_review {
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    padding: 24px;
}

#order_review table {
    width: 100%;
}

#order_review table th,
#order_review table td {
    padding: 10px 0;
    border-bottom: 1px solid var(--rog-border);
}

#place_order {
    width: 100%;
    padding: 14px;
    background: var(--rog-accent);
    color: #fff;
    border: none;
    border-radius: var(--rog-radius);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--rog-transition);
    margin-top: 16px;
}

#place_order:hover {
    background: #d56a08;
}

/* ==========================================================================
   WooCommerce — Payment methods & Square card fields
   The Square card inputs (number / expiry / CVV) render inside a cross-origin
   iframe served by squarecdn.com, so only the wrappers Square injects into our
   page (.sq-card-*) are styleable — not the text inside. The field surface is
   therefore kept light so Square's (un-restyleable) dark input text stays
   readable; everything around it is themed to match the dark checkout.
   ========================================================================== */

/* Payment method list */
.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    border: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--rog-border);
    line-height: 1.5;
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
    border-bottom: none;
}

/* Radio + gateway title */
.woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] {
    margin-right: 10px;
    accent-color: var(--rog-primary);
    vertical-align: middle;
}

.woocommerce-checkout #payment ul.payment_methods li > label {
    display: inline;
    color: var(--rog-text);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

/* Card-brand icons — the base `img { display:block }` rule stacks them
   vertically; lay them out in a neat horizontal row instead. */
.woocommerce-checkout #payment ul.payment_methods li label img,
.woocommerce-checkout #payment div.payment_box img {
    display: inline-block !important;
    width: auto;
    height: 26px;
    margin: 0 6px 6px 0;
    vertical-align: middle;
}

/* Payment box (the panel revealed beneath the selected method) */
.woocommerce-checkout #payment div.payment_box {
    background: var(--rog-bg);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    color: var(--rog-text-muted);
    padding: 18px;
    margin: 14px 0 0;
    font-size: 0.9rem;
    box-shadow: none;
}

/* Remove WooCommerce's default light up-arrow on the payment box */
.woocommerce-checkout #payment div.payment_box::before {
    display: none;
}

/* Square hosted card field — keep the surface light & readable, but frame it
   as a deliberate, rounded "secure entry" panel that pops on the dark bg. */
.sq-card-wrapper {
    margin-top: 6px;
}

.sq-card-iframe-container {
    background: #ffffff !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: var(--rog-radius) !important;
    padding: 2px 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: border-color var(--rog-transition), box-shadow var(--rog-transition);
}

/* Focus ring in brand red when a field inside the iframe is active.
   :focus-within fires when the iframe takes focus; Square also toggles its own
   --focus class, so cover both. */
.sq-card-wrapper:focus-within .sq-card-iframe-container,
.sq-card-iframe-container.sq-card-iframe-container--focus {
    border-color: var(--rog-primary) !important;
    box-shadow: 0 0 0 3px rgba(181, 5, 5, 0.25);
}

/* Square invalid-field state */
.sq-card-iframe-container.sq-card-iframe-container--error {
    border-color: var(--rog-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

/* "Securely Save to Account" checkbox row inside the payment box */
.woocommerce-checkout #payment div.payment_box p,
.woocommerce-checkout #payment div.payment_box .form-row {
    margin: 12px 0 0;
}

.woocommerce-checkout #payment div.payment_box input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    accent-color: var(--rog-primary);
    vertical-align: middle;
}

.woocommerce-checkout #payment div.payment_box label {
    display: inline;
    color: var(--rog-text);
    font-size: 0.9rem;
    cursor: pointer;
}

/* Square gift-card redemption field ("Have a Square Gift Card?"). Scoped to the
   checkout and to square-gift-card* classes so it can't bleed onto the ROG
   e-giftcard product (which uses the rss-* prefix). */
.woocommerce-checkout [class*="square-gift-card"] input[type="text"],
.woocommerce-checkout [class*="gift-card-application"] input[type="text"] {
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #d9d9d9;
    border-radius: var(--rog-radius);
}

.woocommerce-checkout [class*="square-gift-card"] button,
.woocommerce-checkout [class*="square-gift-card"] .button,
.woocommerce-checkout [class*="gift-card-application"] button {
    background: var(--rog-accent);
    color: #fff;
    border: none;
    border-radius: var(--rog-radius);
    padding: 12px 22px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--rog-transition);
}

.woocommerce-checkout [class*="square-gift-card"] button:hover,
.woocommerce-checkout [class*="square-gift-card"] .button:hover,
.woocommerce-checkout [class*="gift-card-application"] button:hover {
    background: #d56a08;
}

/* ==========================================================================
   WooCommerce — Notices
   ========================================================================== */

.woocommerce-message,
.woocommerce-info {
    background: var(--rog-bg-light);
    border-left: 4px solid var(--rog-accent);
    color: var(--rog-text);
    padding: 14px 18px;
    border-radius: var(--rog-radius);
    margin-bottom: 20px;
}

.woocommerce-error {
    background: var(--rog-bg-light);
    border-left: 4px solid var(--rog-danger);
    color: var(--rog-text);
    padding: 14px 18px;
    border-radius: var(--rog-radius);
    margin-bottom: 20px;
}

.woocommerce-message a,
.woocommerce-info a {
    color: var(--rog-accent);
    font-weight: 600;
}

/* ==========================================================================
   WooCommerce — Order received (Thank you) page
   ========================================================================== */

.rog-order-received {
    max-width: 820px;
    margin: 0 auto;
    padding: 20px 0 50px;
}

/* Confirmation hero */
.rog-order-received__hero {
    text-align: center;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    padding: 40px 28px 34px;
    margin-bottom: 28px;
}

.rog-order-received__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(40, 167, 69, 0.12);
    color: var(--rog-success);
    margin-bottom: 18px;
}

.rog-order-received__hero--failed .rog-order-received__icon {
    background: rgba(220, 53, 69, 0.12);
    color: var(--rog-danger);
}

.rog-order-received__title {
    font-size: 2.2rem;
    margin-bottom: 8px;
}

/* Neutralise the default WC notice chrome when shown inside the hero */
.rog-order-received__hero .woocommerce-notice {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--rog-text-muted);
    font-size: 1.05rem;
}

.rog-order-received__hero--failed .woocommerce-notice--error {
    color: var(--rog-text);
}

/* Collection / pickup note */
.rog-order-received__collection {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(238, 120, 10, 0.08);
    border: 1px solid var(--rog-accent);
    border-radius: var(--rog-radius);
    padding: 18px 20px;
    margin-bottom: 28px;
}

.rog-order-received__collection-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--rog-accent);
}

.rog-order-received__collection-body strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1.05rem;
    color: var(--rog-text);
}

.rog-order-received__collection-body p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--rog-text-muted);
}

/* Order overview — card grid */
.rog-order-received .woocommerce-order-overview {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.rog-order-received .woocommerce-order-overview li {
    padding: 14px 16px;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-left: 3px solid var(--rog-primary);
    border-radius: var(--rog-radius);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rog-text-muted);
}

.rog-order-received .woocommerce-order-overview li strong {
    display: block;
    margin-top: 6px;
    font-family: var(--rog-font-body);
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--rog-text);
    word-break: break-word;
}

/* Actions */
.rog-order-received__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 36px;
}

/* Order details + customer address tables (rendered by woocommerce_thankyou) */
.rog-order-received .woocommerce-order-details,
.rog-order-received .woocommerce-customer-details {
    margin-top: 36px;
}

.rog-order-received .woocommerce-order-details__title,
.rog-order-received .woocommerce-column__title {
    margin-bottom: 16px;
    padding-bottom: 10px;
    font-size: 1.4rem;
    border-bottom: 2px solid var(--rog-primary);
}

.rog-order-received table.shop_table {
    width: 100%;
    border-collapse: collapse;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    overflow: hidden;
}

.rog-order-received table.shop_table th,
.rog-order-received table.shop_table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--rog-border);
}

.rog-order-received table.shop_table thead th {
    background: var(--rog-bg-lighter);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rog-text-muted);
}

.rog-order-received table.shop_table tfoot th,
.rog-order-received table.shop_table tfoot td {
    background: var(--rog-bg);
    font-weight: 600;
}

.rog-order-received table.shop_table tfoot tr:last-child th,
.rog-order-received table.shop_table tfoot tr:last-child td {
    font-size: 1.05rem;
    color: var(--rog-gold);
}

.rog-order-received table.shop_table .product-total,
.rog-order-received table.shop_table td.woocommerce-table__product-total {
    font-weight: 600;
    color: var(--rog-gold);
    white-space: nowrap;
}

.rog-order-received table.shop_table a {
    color: var(--rog-text);
}

.rog-order-received table.shop_table a:hover {
    color: var(--rog-accent);
}

/* Customer / billing + shipping address columns */
.rog-order-received .woocommerce-customer-details .col2-set,
.rog-order-received .woocommerce-customer-details .woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 0;
}

.rog-order-received .woocommerce-customer-details address {
    padding: 18px 20px;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    font-style: normal;
    line-height: 1.7;
    color: var(--rog-text);
}

.rog-order-received .woocommerce-customer-details address p {
    margin: 6px 0 0;
    color: var(--rog-text-muted);
}

@media (max-width: 600px) {
    .rog-order-received__title {
        font-size: 1.7rem;
    }
    .rog-order-received__hero {
        padding: 32px 20px 28px;
    }
    .rog-order-received__actions .rog-btn {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Booking Page
   ========================================================================== */

.rog-booking-page {
    padding: 40px 0;
}

.rog-booking-form {
    max-width: 680px;
    margin: 0 auto;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    padding: 32px;
}

.rog-booking-form h2 {
    margin-bottom: 24px;
    text-align: center;
}

.rog-form-group {
    margin-bottom: 20px;
}

.rog-form-group label {
    display: block;
    color: var(--rog-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 6px;
}

.rog-form-group select,
.rog-form-group input[type="text"],
.rog-form-group input[type="email"],
.rog-form-group input[type="tel"],
.rog-form-group input[type="date"],
.rog-form-group input[type="number"] {
    width: 100%;
    padding: 10px 14px;
    background: var(--rog-bg);
    border: 1px solid var(--rog-border);
    color: var(--rog-text);
    border-radius: var(--rog-radius);
    font-size: 0.95rem;
}

.rog-form-group select:focus,
.rog-form-group input:focus {
    border-color: var(--rog-primary);
    outline: none;
}

.rog-time-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rog-time-slot {
    padding: 8px 16px;
    background: var(--rog-bg);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    color: var(--rog-text-muted);
    cursor: pointer;
    font-size: 0.88rem;
    transition: all var(--rog-transition);
}

.rog-time-slot:hover {
    border-color: var(--rog-primary);
    color: var(--rog-text);
}

.rog-time-slot.selected {
    background: var(--rog-primary);
    border-color: var(--rog-primary);
    color: #fff;
}

.rog-time-slot.unavailable {
    opacity: 0.4;
    cursor: not-allowed;
}

.rog-table-warning {
    background: var(--rog-bg);
    border: 1px solid var(--rog-accent);
    border-radius: var(--rog-radius);
    padding: 14px;
    margin-top: 10px;
    color: var(--rog-accent);
    font-size: 0.9rem;
    display: none;
}

.rog-booking-confirmation {
    text-align: center;
    padding: 40px;
    display: none;
}

.rog-booking-confirmation h3 {
    color: var(--rog-success);
    margin-bottom: 12px;
}

/* ==========================================================================
   Booking Modal
   ========================================================================== */

.rog-booking-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}

.rog-booking-modal {
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    width: 100%;
    max-width: 680px;
    position: relative;
    margin: auto;
}

.rog-booking-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    color: var(--rog-text-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    z-index: 1;
}

.rog-booking-modal-close:hover {
    color: var(--rog-text);
}

.rog-booking-modal-inner {
    padding: 32px;
}

.rog-booking-modal-inner h2 {
    text-align: center;
    margin-bottom: 24px;
    padding-right: 32px;
}

.rog-slot-btn {
    padding: 8px 16px;
    background: var(--rog-bg);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    color: var(--rog-text-muted);
    cursor: pointer;
    font-size: 0.88rem;
    transition: all var(--rog-transition);
}

.rog-slot-btn:hover {
    border-color: var(--rog-primary);
    color: var(--rog-text);
}

.rog-slot-btn--active {
    background: var(--rog-primary);
    border-color: var(--rog-primary);
    color: #fff;
}

/* ==========================================================================
   Blog / Index
   ========================================================================== */

.rog-blog {
    padding: 40px 0;
}

.rog-blog-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
}

.rog-post-card {
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    overflow: hidden;
    margin-bottom: 24px;
}

.rog-post-card-img img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.rog-post-card-body {
    padding: 20px;
}

.rog-post-meta {
    font-size: 0.82rem;
    color: var(--rog-text-muted);
    margin-bottom: 8px;
}

.rog-post-card-body h2 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.rog-post-card-body h2 a {
    color: var(--rog-text);
}

.rog-post-card-body h2 a:hover {
    color: var(--rog-accent);
}

/* Sidebar widgets */
.rog-sidebar .widget {
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.rog-sidebar .widget h3,
.rog-sidebar .widget-title {
    font-size: 1.05rem;
    margin-bottom: 14px;
    color: var(--rog-accent);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rog-border);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.rog-footer {
    background: #111;
    border-top: 3px solid var(--rog-primary);
    padding-top: 50px;
}

.rog-footer-widgets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--rog-border);
}

.rog-footer-col h4 {
    font-size: 1.05rem;
    color: var(--rog-accent);
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 10px;
}

.rog-footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--rog-primary);
}

.rog-footer-col p {
    color: var(--rog-text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

.rog-footer-col ul {
    list-style: none;
    padding: 0;
}

.rog-footer-col ul li {
    margin-bottom: 8px;
}

.rog-footer-col ul li a {
    color: var(--rog-text-muted);
    font-size: 0.9rem;
}

.rog-footer-col ul li a:hover {
    color: var(--rog-accent);
}

.rog-footer-contact li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.rog-footer-contact li .rog-icon {
    color: var(--rog-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

/* "Message us" — the primary way to reach the shop now the email address is
   no longer published. Sits above the address and phone in the Contact column. */
.rog-footer-message-us {
    margin-bottom: 18px;
}

.rog-footer-message-us .rog-btn {
    padding: 10px 22px;
    font-size: 0.9rem;
}

.rog-footer-message-hint {
    margin-top: 8px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--rog-text-muted);
}

/* Newsletter */
.rog-newsletter-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.rog-newsletter-form input[type="email"] {
    flex: 1;
    padding: 10px 14px;
    background: var(--rog-bg);
    border: 1px solid var(--rog-border);
    color: var(--rog-text);
    border-radius: var(--rog-radius);
    font-size: 0.9rem;
}

.rog-newsletter-form button {
    padding: 10px 18px;
    background: var(--rog-primary);
    color: #fff;
    border: none;
    border-radius: var(--rog-radius);
    cursor: pointer;
    font-weight: 600;
    transition: background var(--rog-transition);
}

.rog-newsletter-form button:hover {
    background: var(--rog-primary-dark);
}

/* Social links */
.rog-social-links {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.rog-social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--rog-bg-lighter);
    border-radius: 50%;
    color: var(--rog-text-muted);
    transition: all var(--rog-transition);
}

.rog-social-links a:hover {
    background: var(--rog-primary);
    color: #fff;
}

/* Footer bottom */
.rog-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    flex-wrap: wrap;
    gap: 10px;
}

.rog-footer-bottom p {
    color: var(--rog-text-muted);
    font-size: 0.82rem;
    margin: 0;
}

.rog-footer-bottom .rog-vat {
    font-size: 0.78rem;
    color: var(--rog-text-muted);
}

/* ==========================================================================
   Scroll to top
   ========================================================================== */

.rog-scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    background: var(--rog-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: all var(--rog-transition);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.rog-scroll-top.visible {
    display: flex;
}

.rog-scroll-top:hover {
    background: var(--rog-primary-dark);
    transform: translateY(-3px);
}

/* ==========================================================================
   Forms (general)
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
    font-family: var(--rog-font-body);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --rog-container: 960px;
    }

    .rog-product-carousel,
    ul.products {
        grid-template-columns: repeat(2, 1fr);
    }

    .rog-shop-layout {
        gap: 20px;
    }

    .rog-shop-sidebar {
        flex: 0 0 220px;
        width: 220px;
    }

    .rog-footer-widgets {
        grid-template-columns: repeat(2, 1fr);
    }

    .rog-hero-content h1 {
        font-size: 2.2rem;
    }

    .rog-single-product__layout {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .rog-nav > ul > li:hover > .rog-mega-menu,
    .rog-nav > ul > li.rog-mega-open > .rog-mega-menu {
        grid-template-columns: repeat(2, 1fr);
    }

    .woocommerce form.checkout {
        grid-template-columns: 1fr;
    }

    .woocommerce form.checkout .col2-set,
    .woocommerce form.checkout #customer_details {
        grid-column: 1;
        grid-row: auto;
    }

    .woocommerce form.checkout #order_review_heading,
    .woocommerce form.checkout #order_review {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Mobile landscape / small tablet */
@media (max-width: 768px) {
    /* The socials were already hidden here, and the contact details that used
       to fill the left have gone, so the whole strip would render as an empty
       sliver above the header. Hide it outright. */
    .rog-topbar {
        display: none;
    }

    .rog-header-inner {
        flex-wrap: wrap;
    }

    .rog-search {
        order: 3;
        max-width: 100%;
        flex-basis: 100%;
    }

    .rog-hamburger {
        display: flex;
    }

    .rog-nav {
        display: none;
    }

    .rog-nav--open {
        display: block;
    }

    .rog-nav ul {
        flex-direction: column;
    }

    .rog-nav ul ul {
        position: static;
        box-shadow: none;
        border: none;
        background: var(--rog-bg);
        padding-left: 16px;
    }

    .rog-nav > ul > li:hover > .rog-mega-menu,
    .rog-nav > ul > li.rog-mega-open > .rog-mega-menu {
        display: grid;
        grid-template-columns: 1fr;
        position: static;
        box-shadow: none;
    }

    .rog-filter-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--rog-bg-lighter);
        border: 1px solid var(--rog-border);
        color: var(--rog-text);
        padding: 10px 16px;
        border-radius: var(--rog-radius);
        cursor: pointer;
        font-size: 0.9rem;
        font-weight: 600;
        font-family: var(--rog-font-body);
        width: 100%;
        margin-bottom: 16px;
    }

    .rog-shop-layout {
        display: block;
    }

    .rog-shop-sidebar {
        position: fixed;
        top: 0;
        left: -300px;
        width: 280px;
        height: 100vh;
        overflow-y: auto;
        z-index: 999;
        border-radius: 0;
        transition: left 0.3s ease;
        background: var(--rog-bg-lighter);
        padding: 20px;
    }

    .rog-shop-sidebar--open {
        left: 0;
    }

    .rog-sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: var(--rog-text-muted);
        cursor: pointer;
        padding: 4px;
    }

    .rog-sidebar-close:hover {
        color: var(--rog-text);
    }

    .rog-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .rog-single-product__layout {
        grid-template-columns: 1fr;
    }

    .rog-blog-grid {
        grid-template-columns: 1fr;
    }

    .rog-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rog-events-grid {
        grid-template-columns: 1fr;
    }

    .cart_totals {
        max-width: 100%;
    }

    .rog-footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* Mobile portrait */
@media (max-width: 480px) {
    .rog-product-carousel,
    ul.products {
        grid-template-columns: 1fr;
    }

    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }

    .rog-hero {
        min-height: 360px;
    }

    .rog-hero-content h1 {
        font-size: 1.8rem;
    }

    .rog-footer-widgets {
        grid-template-columns: 1fr;
    }

    .rog-booking-form {
        padding: 20px;
    }

    .rog-category-grid {
        grid-template-columns: 1fr;
    }

    .woocommerce-cart-form table,
    .woocommerce-cart-form table thead,
    .woocommerce-cart-form table tbody,
    .woocommerce-cart-form table tr,
    .woocommerce-cart-form table td {
        display: block;
    }

    .woocommerce-cart-form table thead {
        display: none;
    }

    .woocommerce-cart-form table tr {
        border-bottom: 2px solid var(--rog-border);
        padding: 12px 0;
    }

    .woocommerce-cart-form table td {
        padding: 6px 12px;
        border: none;
        text-align: right;
    }

    .woocommerce-cart-form table td::before {
        content: attr(data-title);
        float: left;
        font-weight: 600;
        color: var(--rog-text-muted);
        text-transform: uppercase;
        font-size: 0.8rem;
    }
}

/* =============================================================================
   DROPDOWN FIX — third-level sub-menus (fly-out on hover)
   The existing CSS positions .rog-nav ul ul ul but never shows it.
   ============================================================================= */

.rog-nav ul ul li:hover > ul,
.rog-nav ul ul li:focus-within > ul {
    display: flex;
}

/* =============================================================================
   DYNAMIC CATEGORY NAV (.rog-cat-nav)
   Sits below the primary nav. Re-uses .rog-nav styles; these rules handle
   differences: a slightly lighter background so the two bars are visually
   distinct, and a caret indicator on items that have children.
   ============================================================================= */

.rog-cat-nav {
    background: var(--rog-bg);
    border-bottom: 2px solid var(--rog-primary);
}

/* Caret on parent items */
.rog-cat-nav .menu-item-has-children > a::after {
    content: " \25BE"; /* ▾ */
    font-size: 0.75em;
    opacity: 0.6;
}

/* Mobile: category nav hidden with the hamburger, same as primary nav */
@media (max-width: 768px) {
    .rog-cat-nav {
        display: none;
    }

    .rog-cat-nav.rog-nav--open {
        display: block;
    }

    .rog-cat-nav ul ul {
        position: static;
        box-shadow: none;
        border: none;
        background: var(--rog-bg-light);
        padding-left: 16px;
    }
}

/* =============================================================================
   MAIN NAVIGATION (.rog-main-nav)
   Unified nav bar with specific top-level items. Sub-categories load
   dynamically from WooCommerce. Supports hover (desktop) and
   click-to-toggle (mobile) for nested dropdowns.
   ============================================================================= */

.rog-main-nav {
    background: var(--rog-bg-light);
    border-bottom: 2px solid var(--rog-primary);
}

/* ── Top-level items: flex so link + toggle sit side-by-side ────── */
.rog-main-nav .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    position: relative;
}

.rog-main-nav .menu-item-has-children > a {
    flex: 1;
}


/* ── Sub-menu items: also flex for link + toggle ───────────────── */
.rog-main-nav .sub-menu .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.rog-main-nav .sub-menu .menu-item-has-children > a {
    flex: 1;
}

/* ── Toggle button (the arrow next to items with children) ──────── */
.rog-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-left: 1px solid var(--rog-border);
    cursor: pointer;
    padding: 0 14px;
    color: var(--rog-text-muted);
    transition: color var(--rog-transition), background var(--rog-transition);
}

.rog-submenu-toggle:hover {
    color: var(--rog-accent);
    background: rgba(255, 255, 255, 0.05);
}

/* ── Arrow icon (CSS triangle) ──────────────────────────────────── */

/* Top-level: arrow points DOWN */
.rog-main-nav > .rog-container > .rog-menu > li > .rog-submenu-toggle .rog-toggle-icon {
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform var(--rog-transition);
}

/* Sub-menu: arrow points RIGHT */
.rog-main-nav .sub-menu .rog-submenu-toggle .rog-toggle-icon {
    display: block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;
    border-right: none;
    transition: transform var(--rog-transition);
}

/* Rotate arrow when the sub-menu is open (via JS click) */
.rog-main-nav > .rog-container > .rog-menu > li.rog-submenu-open > .rog-submenu-toggle .rog-toggle-icon {
    transform: rotate(180deg);
}

.rog-main-nav .sub-menu li.rog-submenu-open > .rog-submenu-toggle .rog-toggle-icon {
    transform: rotate(90deg);
}

/* ── Show sub-menu on hover (desktop) OR on JS toggle ───────────── */
.rog-main-nav li.rog-submenu-open > .sub-menu {
    display: flex;
}

/* ── Desktop hover: correct selectors accounting for .rog-container wrapper ─ */
/*    The legacy .rog-nav > ul > li rules don't match because ul is not a      */
/*    direct child of nav — there is a .rog-container div in between.          */
.rog-main-nav > .rog-container > .rog-menu > li:hover > .sub-menu {
    display: flex;
}

/* Second-level and deeper fly-outs on hover */
.rog-main-nav .sub-menu li:hover > .sub-menu {
    display: flex;
}

/* ── Dropdown entry animation ───────────────────────────────────── */
@keyframes rog-dd-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rog-main-nav > .rog-container > .rog-menu > li:hover > .sub-menu,
.rog-main-nav .sub-menu li:hover > .sub-menu,
.rog-main-nav li.rog-submenu-open > .sub-menu {
    animation: rog-dd-in 0.18s ease both;
}

/* ── Right-pointing chevron on dropdown items that have children ─── */
/*    Signals a fly-out sub-menu exists, matching the reference site. */
.rog-main-nav .sub-menu .menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rog-main-nav .sub-menu .menu-item-has-children > a::after {
    content: "\203A"; /* › */
    flex-shrink: 0;
    margin-left: 8px;
    font-size: 1.1em;
    line-height: 1;
    opacity: 0.55;
    transition: opacity var(--rog-transition), transform var(--rog-transition);
}

.rog-main-nav .sub-menu .menu-item-has-children:hover > a::after {
    opacity: 1;
    transform: translateX(2px);
}

/* ── Brighter dropdown text + subtle item separators ─────────────── */
.rog-main-nav .sub-menu li a {
    color: var(--rog-text); /* brighter than the default --rog-text-muted */
}

.rog-main-nav .sub-menu li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ── Position the sub-menu (absolute, pulled out of flex flow) ──── */
.rog-main-nav .menu-item-has-children > .sub-menu {
    /* Already position: absolute from .rog-nav ul ul rules */
}

/* ── Responsive / Mobile ────────────────────────────────────────── */
@media (max-width: 768px) {

    .rog-main-nav {
        display: none;
    }

    .rog-main-nav.rog-nav--open {
        display: block;
    }

    .rog-main-nav .rog-menu {
        flex-direction: column;
    }

    /* Disable hover-to-show on touch devices — use click toggle only */
    .rog-main-nav > .rog-container > .rog-menu > li:hover > .sub-menu,
    .rog-main-nav .sub-menu li:hover > .sub-menu {
        display: none;
    }

    /* Override: still show when JS toggle is active */
    .rog-main-nav li.rog-submenu-open > .sub-menu {
        display: flex !important;
    }

    /* Stack sub-menus vertically (not absolute) on mobile */
    .rog-main-nav ul ul {
        position: static;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--rog-primary);
        background: var(--rog-bg);
        padding-left: 12px;
        margin-left: 8px;
        flex-basis: 100%;
    }

    .rog-main-nav ul ul ul {
        background: var(--rog-bg-light);
    }

    /* Toggle button border changes for stacked layout */
    .rog-main-nav .rog-submenu-toggle {
        border-left: 1px solid var(--rog-border);
        padding: 10px 16px;
    }

    /* All arrows point DOWN on mobile (rotate when open) */
    .rog-main-nav .sub-menu .rog-submenu-toggle .rog-toggle-icon {
        border-top: 5px solid currentColor;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: none;
    }

    .rog-main-nav .sub-menu li.rog-submenu-open > .rog-submenu-toggle .rog-toggle-icon {
        transform: rotate(180deg);
    }
}

/* =============================================================================
   MAIN NAVIGATION — modern polish (v1.3)
   Tightens spacing, adds gradient, smooth hover underline, rounded dropdowns.
   ============================================================================= */

.rog-main-nav {
    background: linear-gradient(180deg, var(--rog-bg-light) 0%, var(--rog-bg) 100%);
    border-bottom: 2px solid var(--rog-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.rog-main-nav .rog-menu {
    /* Horizontal padding of each top-level link. Kept in a custom property so the
       hover underline (::before) and the narrow-desktop compression query stay in sync. */
    --rog-nav-pad-x: 18px;
    list-style: none;
    display: flex;
    /* Centred inside the 1320px container like the header and banners.
       Six shop categories at 18px padding / 0.95rem come to ~1160px, inside
       the ~1280px inner width with room for a wider fallback font. (The community links sit in the top strip.) */
    justify-content: center;
    /* wrap: if the menu ever gains more items than fit on one line, the
       overflow drops to a second, equally centred row instead of spilling
       out of the container. (The mobile block at <=768px stacks it instead.) */
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    gap: 0;
}

.rog-main-nav .rog-menu > li {
    position: relative;
}

/* Narrow-desktop compression: below the container width the row used to
   clip "Calendar" / "Register Interest" off the right edge and give the page
   a sideways scroll. Squeeze once more, then wrap. */
@media (max-width: 1360px) {
    .rog-main-nav .rog-menu {
        --rog-nav-pad-x: 14px;
    }
    .rog-main-nav .rog-menu > li > a {
        font-size: 0.875rem;
        letter-spacing: 0.2px;
    }
}


.rog-main-nav .rog-menu > li > a {
    display: inline-block;
    padding: 16px var(--rog-nav-pad-x);
    color: var(--rog-text);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
}

/* Animated underline on hover (modern look) */
.rog-main-nav .rog-menu > li > a::before {
    content: "";
    position: absolute;
    left: var(--rog-nav-pad-x);
    right: var(--rog-nav-pad-x);
    bottom: 8px;
    height: 2px;
    background: var(--rog-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.rog-main-nav .rog-menu > li:hover > a,
.rog-main-nav .rog-menu > li.current-menu-item > a,
.rog-main-nav .rog-menu > li.current-menu-parent > a,
.rog-main-nav .rog-menu > li.rog-submenu-open > a {
    color: var(--rog-accent);
    background: rgba(255, 255, 255, 0.03);
}

.rog-main-nav .rog-menu > li:hover > a::before,
.rog-main-nav .rog-menu > li.current-menu-item > a::before,
.rog-main-nav .rog-menu > li.current-menu-parent > a::before,
.rog-main-nav .rog-menu > li.rog-submenu-open > a::before {
    transform: scaleX(1);
}

/* Dropdown (sub-menu) — rounded + elevated */
.rog-main-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    list-style: none;
    padding: 6px 0;
    margin: 0;
    flex-direction: column;
    background: var(--rog-bg-lighter);
    border: 1px solid var(--rog-border);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
    z-index: 999;
}

.rog-main-nav .sub-menu li a {
    padding: 10px 18px;
    color: var(--rog-text);
    font-size: 0.92rem;
    display: block;
    border-left: 3px solid transparent;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.rog-main-nav .sub-menu li a:hover {
    color: var(--rog-accent);
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--rog-primary);
}

.rog-main-nav .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    border-radius: 8px;
    margin-left: 2px;
}

/* ── Narrow-desktop: compress, don't wrap ───────────────────────────
   Between the mobile hamburger breakpoint (<=768px) and full width, the
   container narrows (to 960px at <=1024px). Tighten the bar so every
   top-level item stays on ONE line as the window shrinks, instead of
   dropping the last item(s) onto a second row. */
@media (min-width: 769px) and (max-width: 1267px) {
    .rog-main-nav .rog-menu {
        --rog-nav-pad-x: 10px;
        gap: 0;
    }

    .rog-main-nav .rog-menu > li > a {
        font-size: 0.86rem;
        letter-spacing: 0.2px;
    }

    .rog-main-nav > .rog-container > .rog-menu > li > .rog-submenu-toggle {
        padding: 0 9px;
    }
}

/* Desktop (placed AFTER every other main-nav rule so the chevron and toggle
   overrides win the cascade): the community links (tagged rog-nav-utility) live in the top
   strip, so the bar shows shop categories only. Each item is label + inline
   chevron, with a hairline divider between items. Mobile (<=768px) keeps the
   stacked look, arrows on the right, and shows the utility items again. */
@media (min-width: 769px) {
    .rog-main-nav > .rog-container > .rog-menu > li.rog-nav-utility {
        display: none;
    }

    .rog-main-nav > .rog-container > .rog-menu > li {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .rog-main-nav > .rog-container > .rog-menu > li + li::before {
        content: "";
        width: 1px;
        height: 18px;
        background: #3a3a3a;
        flex: none;
    }

    .rog-main-nav > .rog-container > .rog-menu > li.menu-item-has-children > a {
        padding-right: 6px;
    }

    .rog-main-nav > .rog-container > .rog-menu > li > .rog-submenu-toggle {
        border-left: none;
        padding: 0 var(--rog-nav-pad-x) 0 0;
        color: inherit;
    }

    .rog-main-nav > .rog-container > .rog-menu > li > .rog-submenu-toggle:hover {
        background: none;
    }

    .rog-main-nav > .rog-container > .rog-menu > li > .rog-submenu-toggle .rog-toggle-icon {
        width: 7px;
        height: 7px;
        border: 0;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        opacity: 0.7;
    }

    .rog-main-nav > .rog-container > .rog-menu > li:hover > .rog-submenu-toggle .rog-toggle-icon,
    .rog-main-nav > .rog-container > .rog-menu > li.rog-submenu-open > .rog-submenu-toggle .rog-toggle-icon {
        opacity: 1;
        color: var(--rog-accent);
    }
}

/* =============================================================================
   PRODUCT CAROUSEL (auto-scrolling)
   Used by [rog_product_carousel] shortcode and homepage carousel.
   ============================================================================= */

.rog-carousel-wrap {
    margin: 32px 0;
}

.rog-carousel {
    position: relative;
    overflow: hidden;
    padding: 8px 44px;
}

/* The track lays slides out HORIZONTALLY, never wrapping.
   scroll-behavior: auto (default) so the rAF marquee loop can nudge
   scrollLeft per frame without CSS smoothing fighting it. The prev/next
   buttons toggle smooth scrolling on themselves when needed. */
.rog-carousel .rog-carousel-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: auto;
    padding: 4px 4px 16px;
    width: 100%;
    /* Hide scrollbar across browsers */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rog-carousel .rog-carousel-track::-webkit-scrollbar {
    display: none;
}

/* Each slide is a fixed-width flex item. Width is set inline per-instance
   based on the carousel's "items per view" setting. */
.rog-carousel .rog-carousel-slide {
    flex: 0 0 auto;
    min-width: 0;
}

.rog-carousel .rog-carousel-slide .rog-product-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
}

.rog-carousel .rog-carousel-slide .rog-product-card-img {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    position: relative;
}

.rog-carousel .rog-carousel-slide .rog-product-card-img img {
    border-radius: 0; /* radius lives on the wrapper so hover scale doesn't bleed */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Prev/next arrow buttons */
.rog-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 1px solid var(--rog-border);
    border-radius: 50%;
    background: rgba(30, 30, 30, 0.85);
    color: var(--rog-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.rog-carousel-nav:hover {
    background: var(--rog-primary);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}

.rog-carousel-prev { left: 4px; }
.rog-carousel-next { right: 4px; }

/* Fade edges to hint at horizontal overflow */
.rog-carousel::before,
.rog-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 2;
}
.rog-carousel::before {
    left: 0;
    background: linear-gradient(90deg, var(--rog-bg) 0%, rgba(0,0,0,0) 100%);
}
.rog-carousel::after {
    right: 0;
    background: linear-gradient(-90deg, var(--rog-bg) 0%, rgba(0,0,0,0) 100%);
}

@media (max-width: 600px) {
    .rog-carousel { padding: 8px 34px; }
}

/* ==========================================================================
   League Rankings Page
   ========================================================================== */

.rog-rankings-page {
    padding: 40px 0;
}

/* ── Collapsible section card ──────────────────────────────────────────── */

.rog-rankings-section {
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    margin-bottom: 20px;
    overflow: hidden;
}

.rog-rankings-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: var(--rog-bg-lighter);
    border-bottom: 1px solid var(--rog-border);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background var(--rog-transition);
}

/* Remove default browser marker in all browsers */
.rog-rankings-section-header::-webkit-details-marker { display: none; }
.rog-rankings-section-header::marker { display: none; }

.rog-rankings-section-header:hover {
    background: var(--rog-bg-light);
}

.rog-rankings-section-title {
    font-family: var(--rog-font-heading);
    font-size: 1.25rem;
    color: var(--rog-text);
    line-height: 1.2;
}

/* +/− chevron indicator */
.rog-rankings-section-toggle {
    width: 28px;
    height: 28px;
    border: 1px solid var(--rog-border);
    border-radius: 50%;
    background: var(--rog-bg);
    flex-shrink: 0;
    position: relative;
    transition: background var(--rog-transition), border-color var(--rog-transition);
}

.rog-rankings-section-toggle::before,
.rog-rankings-section-toggle::after {
    content: '';
    position: absolute;
    background: var(--rog-primary);
    border-radius: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Horizontal bar (always visible) */
.rog-rankings-section-toggle::before {
    width: 12px;
    height: 2px;
}

/* Vertical bar (hidden when open → becomes − sign) */
.rog-rankings-section-toggle::after {
    width: 2px;
    height: 12px;
    transition: opacity var(--rog-transition), transform var(--rog-transition);
}

.rog-rankings-section[open] .rog-rankings-section-toggle::after {
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(0);
}

.rog-rankings-section[open] .rog-rankings-section-header {
    border-bottom-color: var(--rog-border);
}

.rog-rankings-section-body {
    padding: 24px;
}

/* ── Meta / legend ─────────────────────────────────────────────────────── */

.rog-rankings-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.rog-rankings-subtitle {
    color: var(--rog-text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.rog-rankings-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--rog-text-muted);
}

.rog-rankings-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rog-rankings-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}

.rog-swatch-gold   { background: rgba(255, 215,   0, 0.35); }
.rog-swatch-silver { background: rgba(192, 192, 192, 0.30); }
.rog-swatch-bronze { background: rgba(205, 127,  50, 0.30); }

.rog-rankings-cut-swatch {
    display: inline-block;
    width: 18px;
    height: 2px;
    background: var(--rog-primary);
    border-radius: 1px;
    flex-shrink: 0;
}

/* ── Table ─────────────────────────────────────────────────────────────── */

.rog-rankings-table-wrap {
    border-radius: var(--rog-radius);
    overflow: hidden;
    border: 1px solid var(--rog-border);
}

.rog-rankings-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;   /* columns respect <col> widths; fills full container */
    font-size: 0.88rem;
    background: var(--rog-bg-light);
}

/* Column widths — fixed columns first, Player fills remaining space */
.rog-rankings-table col.rog-col-rank { width: 56px; }
.rog-rankings-table col.rog-col-name { width: auto; }   /* fills remaining space */
.rog-rankings-table col.rog-col-team { width: 22%; }
.rog-rankings-table col.rog-col-pts  { width: 110px; }
.rog-rankings-table col.rog-col-ev   { width: 76px; }

/* Header */
.rog-rankings-table thead th {
    background: var(--rog-bg-lighter);
    color: var(--rog-text-muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--rog-border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rog-rankings-table thead th.rog-col-rank { text-align: center; }
.rog-rankings-table thead th.rog-col-pts  { text-align: right; }
.rog-rankings-table thead th.rog-col-ev   { text-align: center; }

/* Body rows */
.rog-rankings-table tbody tr {
    border-bottom: 1px solid var(--rog-border);
    transition: background var(--rog-transition);
}

.rog-rankings-table tbody tr:last-child { border-bottom: none; }

.rog-rankings-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Podium row highlights */
.rog-rankings-table tbody tr.gold   td { background: rgba(255, 215,   0, 0.08); }
.rog-rankings-table tbody tr.silver td { background: rgba(192, 192, 192, 0.06); }
.rog-rankings-table tbody tr.bronze td { background: rgba(205, 127,  50, 0.06); }

/* Top-24 cut line */
.rog-rankings-table tbody tr.cut-row {
    border-bottom: 2px solid var(--rog-primary);
}

/* Cells */
.rog-rankings-table td {
    padding: 10px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rog-rankings-table td.rog-col-name {
    white-space: normal;   /* allow player names to wrap if needed */
}

.rog-rankings-table .rog-col-rank {
    text-align: center;
    font-weight: 700;
    color: var(--rog-text-muted);
    font-size: 0.8rem;
}

.rog-rankings-table .rog-medal {
    font-size: 1.15rem;
    line-height: 1;
}

.rog-rankings-table .rog-col-name {
    font-weight: 500;
    color: var(--rog-text);
}

.rog-rankings-table .rog-col-pts {
    text-align: right;
    font-weight: 700;
    color: var(--rog-accent);
    font-variant-numeric: tabular-nums;
}

.rog-rankings-table .rog-col-ev {
    text-align: center;
    color: var(--rog-text-muted);
    font-size: 0.78rem;
}

/* Team badge — base styles; colour comes from inline styles set by the scraper */
.rog-team-badge {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rog-rankings-no-team {
    color: var(--rog-border);
}

/* Footer attribution */
.rog-rankings-footer {
    margin-top: 14px;
    font-size: 0.8rem;
    color: var(--rog-text-muted);
}

.rog-rankings-footer a {
    color: var(--rog-primary);
}

.rog-rankings-footer a:hover {
    color: var(--rog-accent);
}

/* Error / unavailable state */
.rog-rankings-error {
    text-align: center;
    padding: 40px 20px;
    color: var(--rog-text-muted);
}

.rog-rankings-error p {
    margin-bottom: 20px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .rog-rankings-section-body {
        padding: 16px;
    }

    .rog-rankings-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    /* Horizontal scroll so the table never squashes below readable width */
    .rog-rankings-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .rog-rankings-table {
        min-width: 460px;
    }
}

/* ==========================================================================
   Front-page (Mockup 5: Community Hub + Calendar)
   Hero + week calendar, scrolling pre-orders, category strip, booking band,
   league snapshot, just-landed grid, visit-the-shop block.
   ========================================================================== */

/* Hero */
.rog-hero-c {
    position: relative;
    min-height: 440px;
    display: flex;
    align-items: center;
    background:
        radial-gradient(ellipse at 70% 40%, rgba(238, 120, 10, 0.16) 0%, transparent 60%),
        linear-gradient(135deg, #0a0a0a 0%, #1a0505 35%, #2a0808 65%, #1a1a1a 100%);
    overflow: hidden;
    padding: 50px 0;
}

.rog-hero-c::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,0.012) 14px 28px);
    pointer-events: none;
}

/* Optional hero background image (set via Customizer → Homepage Hero → Hero
   Image). A dark gradient overlay sits on top so the copy + calendar stay
   readable; the orange glow is preserved above the image. */
.rog-hero-c.has-bg-image {
    background-image:
        radial-gradient(ellipse at 70% 40%, rgba(238, 120, 10, 0.16) 0%, transparent 60%),
        linear-gradient(135deg, rgba(10, 10, 10, 0.92) 0%, rgba(26, 5, 5, 0.86) 45%, rgba(26, 26, 26, 0.90) 100%),
        var(--rog-hero-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.rog-hero-c .rog-container { max-width: 1180px; }

.rog-hero-c .rog-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
}

.rog-hero-c .rog-eyebrow {
    color: var(--rog-accent);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 14px;
}

.rog-hero-c h1 {
    font-size: 2.8rem;
    line-height: 1.05;
    margin-bottom: 16px;
    color: #fff;
}

.rog-hero-c h1 em {
    font-style: normal;
    color: var(--rog-accent);
}

.rog-hero-c p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 22px;
    max-width: 520px;
}

.rog-hero-cta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Hero featured product — lower-left of the hero, shown only when enabled.
   In feature mode the grid top-aligns (so the copy snaps to the top) and the
   product box flows below the copy with a fixed gap. The calendar keeps its
   natural height alongside. */
.rog-hero-c .rog-hero-grid.has-hero-feature { align-items: start; }

.rog-hero-feature {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 460px;
    margin-top: 28px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.rog-hero-feature:hover,
.rog-hero-feature:focus-visible {
    transform: translateY(-2px);
    border-color: var(--rog-primary);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.rog-hero-feature-tag {
    position: absolute;
    top: -10px;
    left: 14px;
    background: var(--rog-primary);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 9px;
    border-radius: 3px;
    z-index: 3;
}
.rog-hero-feature-img {
    position: relative;
    flex: 0 0 132px;
    width: 132px;
    height: 132px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--rog-bg-lighter);
    display: block;
}
.rog-hero-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rog-hero-feature-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rog-hero-feature-title {
    font-family: var(--rog-font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    color: #fff;
}
.rog-hero-feature-title a { color: inherit; text-decoration: none; }
.rog-hero-feature-title a:hover { color: var(--rog-accent); }
.rog-hero-feature-price { color: var(--rog-gold); font-weight: 700; }
.rog-hero-feature .rog-btn { align-self: flex-start; padding: 8px 18px; font-size: 0.85rem; }

/* Shrink the matrix badges so they fit the small hero-feature thumbnail */
.rog-product-badges--hero.rog-product-badges--tags { top: 6px; left: 6px; }
.rog-product-badges--hero.rog-product-badges--stock { bottom: 6px; right: 6px; }
.rog-product-badges--hero .rog-product-badge {
    font-size: 0.54rem;
    padding: 2px 5px;
    letter-spacing: 0.01em;
}

/* Week calendar widget */
.rog-week-cal {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    overflow: hidden;
}

.rog-week-cal-head {
    padding: 14px 22px;
    background: rgba(0,0,0,0.35);
    border-bottom: 1px solid var(--rog-border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.rog-week-cal-head h3 {
    color: var(--rog-accent);
    font-size: 1.05rem;
    margin: 0;
    font-family: var(--rog-font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.rog-week-cal-head span {
    color: var(--rog-text-muted);
    font-size: 0.82rem;
}

.rog-week-cal ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Two columns for every day: WHEN on the left (the day, and underneath it the
   hours), WHAT on the right (logos while closed, the events once open). The
   rule between them runs the full height of each row, so it joins up into one
   continuous line down the panel. */
.rog-week-cal .rog-day {
    position: relative;
    border-bottom: 1px solid var(--rog-border);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.rog-week-cal .rog-day:last-child { border-bottom: none; }
.rog-week-cal .rog-day::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 168px;
    width: 1px;
    background: var(--rog-border);
    pointer-events: none;
}
.rog-week-cal .rog-day.is-shut { background: rgba(0, 0, 0, 0.18); }
.rog-week-cal .rog-day.is-today { background: rgba(181, 5, 5, 0.10); box-shadow: inset 3px 0 0 var(--rog-primary); }

.rog-day-head {
    display: grid;
    grid-template-columns: 152px 1fr;
    align-items: center;
    gap: 16px;
    padding: 8px 20px;
    min-height: 50px;
}

summary.rog-day-head { cursor: pointer; list-style: none; }
summary.rog-day-head::-webkit-details-marker { display: none; }
summary.rog-day-head::marker { content: ""; }
summary.rog-day-head:hover .rog-day-name strong { color: var(--rog-accent); }
summary.rog-day-head:focus-visible { outline: 2px solid var(--rog-accent); outline-offset: -2px; }

.rog-day-fold[open] { background: rgba(238, 120, 10, 0.06); box-shadow: inset 3px 0 0 var(--rog-accent); }

/* Left column ------------------------------------------------------------ */
.rog-day-when {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}
.rog-day-name {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.rog-day-name strong {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.15s ease;
}
.rog-day.is-shut .rog-day-name strong { color: var(--rog-text-muted); }
.rog-day-num {
    font-family: var(--rog-font-heading);
    font-size: 1rem;
    line-height: 1;
    color: var(--rog-text-muted);
}

.rog-day-caret {
    width: 6px;
    height: 6px;
    flex: none;
    border-right: 2px solid var(--rog-text-muted);
    border-bottom: 2px solid var(--rog-text-muted);
    transform: rotate(-45deg);
    transition: transform 0.22s ease, border-color 0.22s ease;
}
.rog-day-fold[open] .rog-day-caret { transform: rotate(45deg); border-color: var(--rog-accent); }

/* Right column ----------------------------------------------------------- */
/* Fades rather than vanishing: display:none here made the logos teleport. It
   keeps its space too, so the row never changes height as it goes. */
.rog-day-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
}
.rog-day-fold[open] .rog-day-preview { pointer-events: none; }

/* Each logo carries its own transition rather than the strip fading as a
   block, which is what lets them leave and return one after another. A plain
   opacity switch on the container read as a blink; drifting and staggering
   reads as the row changing its mind. */
.rog-day-logo {
    height: 20px;
    width: auto;
    max-width: 52px;
    object-fit: contain;
    flex: none;
    transform-origin: center left;
    transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rog-day-fold[open] .rog-day-logo {
    opacity: 0;
    transform: translateY(-7px) scale(0.9);
}

/* Leaving together, returning in order. */
.rog-day-logo:nth-of-type(2) { transition-delay: 0.05s; }
.rog-day-logo:nth-of-type(3) { transition-delay: 0.10s; }
.rog-day-fold[open] .rog-day-logo:nth-of-type(2),
.rog-day-fold[open] .rog-day-logo:nth-of-type(3) { transition-delay: 0s; }

.rog-day-fold[open] .rog-day-more { opacity: 0; transition: opacity 0.2s ease; }
.rog-day-more { font-size: 0.68rem; color: var(--rog-text-muted); font-weight: 600; }

.rog-day-body {
    overflow: hidden;
    padding: 0 20px 12px 188px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rog-day-event {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #fff;
    text-decoration: none;
    opacity: 0;
    transform: translateY(7px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Arriving as the panel opens, so the list assembles instead of appearing.
   Safe with no JavaScript: a closed <details> hides these outright, and an
   open one matches the rule below. */
.rog-day-fold[open] .rog-day-event { opacity: 1; transform: none; }
.rog-day-fold[open] .rog-day-event:nth-child(2) { transition-delay: 0.07s; }
.rog-day-fold[open] .rog-day-event:nth-child(3) { transition-delay: 0.14s; }
.rog-day-fold[open] .rog-day-event:nth-child(4) { transition-delay: 0.21s; }
.rog-day-event:hover .rog-day-event-title { color: var(--rog-accent); }
.rog-day-event-time {
    color: var(--rog-gold);
    font-weight: 600;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}
.rog-day-event-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
    transition: color 0.15s ease;
}
.rog-day-event-icon { height: 22px; width: auto; max-width: 62px; object-fit: contain; flex: none; }

/* What a quiet day says once it is opened. Arrives the same way an event row
   does, so opening a shut Tuesday does not feel different from opening a busy
   Saturday. */
.rog-day-note {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--rog-text-muted);
    opacity: 0;
    transform: translateY(7px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rog-day-fold[open] .rog-day-note { opacity: 1; transform: none; }

/* Open Play — the standing invitation, quieter than a booked event so it
   never competes with the night's actual draw, but always there. */
.rog-day-openplay {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    opacity: 0;
    transform: translateY(7px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rog-day-fold[open] .rog-day-openplay { opacity: 1; transform: none; }
.rog-day-fold[open] .rog-day-openplay.after-events { transition-delay: 0.12s; }

/* A rule only when it follows the day's events, so it reads as an aside
   rather than another thing on the bill. */
.rog-day-openplay.after-events {
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--rog-border);
}

.rog-day-openplay-badge {
    display: inline-flex;
    align-items: center;
    flex: none;
    text-decoration: none;
    border-radius: 3px;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.rog-day-openplay-badge:hover { opacity: 0.85; transform: translateY(-1px); }
.rog-day-openplay-badge:focus-visible { outline: 2px solid var(--rog-accent); outline-offset: 3px; }

.rog-day-openplay-logo {
    height: 30px;
    width: auto;
    max-width: 116px;
    object-fit: contain;
    flex: none;
    display: block;
}
.rog-day-openplay-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rog-accent);
    flex: none;
}
.rog-day-openplay-text {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--rog-text-muted);
    min-width: 0;
}
.rog-day-openplay-book {
    color: var(--rog-accent);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.rog-day-openplay-book:hover { text-decoration: underline; }



.rog-cal-today-pill {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    background: var(--rog-primary);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-left: 8px;
    vertical-align: 2px;
}

.rog-week-cal-foot {
    padding: 14px 22px;
    background: rgba(0,0,0,0.25);
    border-top: 1px solid var(--rog-border);
    display: flex;
    justify-content: flex-end;
}

.rog-week-cal-foot .rog-btn { padding: 9px 18px; font-size: 0.85rem; }

/* Section heading row (title left, action right) */
.rog-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.rog-section-head h2 { margin: 0; font-size: 2rem; }
.rog-section-head p { color: var(--rog-text-muted); margin: 4px 0 0; font-size: 0.95rem; }

/* Horizontally scrolling product carousel */
.rog-scroll-frame { position: relative; }

.rog-scroll-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 22px;
    margin: 0 -4px;
    -webkit-overflow-scrolling: touch;
}

.rog-scroll-track::-webkit-scrollbar { height: 8px; }
.rog-scroll-track::-webkit-scrollbar-track { background: var(--rog-bg-light); border-radius: 4px; }
.rog-scroll-track::-webkit-scrollbar-thumb { background: var(--rog-border); border-radius: 4px; }
.rog-scroll-track::-webkit-scrollbar-thumb:hover { background: var(--rog-accent); }

.rog-scroll-track .rog-product-card {
    flex: 0 0 260px;
    scroll-snap-align: start;
}

.rog-scroll-arrow {
    position: absolute;
    top: 40%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rog-bg-light);
    color: var(--rog-text);
    border: 1px solid var(--rog-border);
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: all 0.25s ease;
}

.rog-scroll-arrow:hover { background: var(--rog-primary); color: #fff; border-color: var(--rog-primary); }
.rog-scroll-arrow.is-prev { left: -22px; }
.rog-scroll-arrow.is-next { right: -22px; }

.rog-scroll-arrow:disabled {
    opacity: 0.3;
    cursor: default;
    background: var(--rog-bg-light);
    color: var(--rog-text-muted);
}

/* Product card (re-used by carousel + Just Landed) */
.rog-hero-c ~ section .rog-product-card,
#rog-homepage .rog-product-card {
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    overflow: hidden;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#rog-homepage .rog-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* "New" flag on Just Landed cards — top-right so it never overlaps the matrix
   tag badges (top-left) or the stock ribbon (bottom-right). */
#rog-homepage .rog-product-card .rog-flag {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--rog-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 3px;
    z-index: 2;
}

#rog-homepage .rog-product-card-img {
    aspect-ratio: 1/1;
    background: var(--rog-bg-lighter);
    display: block;
    overflow: hidden;
    position: relative;
}

#rog-homepage .rog-product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

#rog-homepage .rog-product-card:hover .rog-product-card-img img {
    transform: scale(1.04);
}

#rog-homepage .rog-product-card-body { padding: 14px; }

#rog-homepage .rog-product-card-title {
    font-family: var(--rog-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 6px;
    color: var(--rog-text);
    min-height: 2.6em;
}

#rog-homepage .rog-product-card-title a {
    color: var(--rog-text);
    text-decoration: none;
}

#rog-homepage .rog-product-card-title a:hover { color: var(--rog-accent); }

#rog-homepage .rog-product-card-price {
    color: var(--rog-gold);
    font-weight: 700;
    margin-bottom: 10px;
}

#rog-homepage .rog-product-card .rog-btn { width: 100%; padding: 9px; font-size: 0.85rem; }

/* Homepage feature boxes (sits directly below the nav menu) */
.rog-feature-boxes-section {
    padding: 6px 0 2px;
    background: var(--rog-bg);
}

.rog-feature-boxes {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    max-width: 1600px;
    margin: 0 auto;
}

.rog-feature-box {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--rog-radius);
    overflow: hidden;
    background: var(--rog-bg-lighter);
    border: 1px solid var(--rog-border);
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    color: #fff;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

a.rog-feature-box:hover,
a.rog-feature-box:focus-visible {
    transform: translateY(-3px);
    border-color: var(--rog-primary);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.rog-feature-box-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.rog-feature-box-label {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 10px 10px 9px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    color: #fff;
    font-family: var(--rog-font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: center;
}

@media (max-width: 600px) {
    .rog-feature-boxes {
        flex-wrap: wrap;
        gap: 8px;
    }
    .rog-feature-box {
        flex: 1 1 calc(50% - 4px);
    }
    .rog-feature-box-label {
        font-size: 0.85rem;
        padding: 8px 8px 7px;
    }
}

/* Category strip */
.rog-cat-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.rog-cat-tile {
    position: relative;
    aspect-ratio: 1/1.1;
    border-radius: var(--rog-radius);
    overflow: hidden;
    background: var(--rog-bg-lighter);
    border: 1px solid var(--rog-border);
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.rog-cat-tile:hover { transform: translateY(-2px); border-color: var(--rog-accent); }

.rog-cat-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.rog-cat-tile span {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 10px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
}

/* Booking band */
.rog-booking-band {
    background:
        linear-gradient(135deg, rgba(181,5,5,0.85) 0%, rgba(138,4,4,0.92) 100%),
        repeating-linear-gradient(45deg, #2a0808 0 6px, #1a0505 6px 12px);
}

.rog-booking-band .rog-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
}

.rog-booking-band h2 {
    color: #fff;
    font-size: 2.2rem;
    margin-bottom: 12px;
}

.rog-booking-band p {
    color: rgba(255,255,255,0.92);
    margin-bottom: 22px;
    max-width: 540px;
}

.rog-booking-band ul {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 18px;
}

.rog-booking-band ul li {
    color: #fff;
    font-size: 0.92rem;
    padding-left: 22px;
    position: relative;
}

.rog-booking-band ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--rog-gold);
    font-weight: 700;
}

/* Booking band image (right column).
   When no image is set, .rog-booking-band--solo collapses to a single column
   so the copy isn't stranded on the left with an empty gap beside it. */
.rog-booking-band--solo .rog-container {
    grid-template-columns: 1fr;
    max-width: 720px;
}

.rog-booking-image {
    border-radius: var(--rog-radius);
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 0;
}

.rog-booking-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 360px;
    object-fit: cover;
}

/* League snapshot */
#rog-homepage .rog-league {
    background: linear-gradient(135deg, #1a1a1a 0%, #221111 100%);
}

#rog-homepage .rog-league .rog-container {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 40px;
    align-items: center;
}

#rog-homepage .rog-league h2 { font-size: 2rem; margin-bottom: 12px; }
#rog-homepage .rog-league p { color: var(--rog-text-muted); margin-bottom: 8px; }

#rog-homepage .rog-league-table {
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    overflow: hidden;
}

#rog-homepage .rog-league-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

#rog-homepage .rog-league-table th,
#rog-homepage .rog-league-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--rog-border);
}

#rog-homepage .rog-league-table th {
    background: var(--rog-bg-lighter);
    color: var(--rog-accent);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#rog-homepage .rog-league-table td:first-child {
    color: var(--rog-gold);
    font-weight: 700;
    width: 50px;
}

#rog-homepage .rog-team-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

#rog-homepage .rog-league-empty {
    padding: 24px;
    text-align: center;
    color: var(--rog-text-muted);
    font-size: 0.92rem;
}

/* Homepage Upcoming Events */
.rog-homepage-events {
    background: var(--rog-bg);
}

.rog-homepage-events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.rog-homepage-event-card {
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.rog-homepage-event-card:hover,
.rog-homepage-event-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--rog-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.rog-homepage-event-card-img {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--rog-bg-lighter);
    overflow: hidden;
}

.rog-homepage-event-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.rog-homepage-event-card:hover .rog-homepage-event-card-img img {
    transform: scale(1.04);
}

.rog-homepage-event-date-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.78);
    border: 1px solid var(--rog-border);
    border-radius: 6px;
    padding: 6px 10px 5px;
    text-align: center;
    line-height: 1.05;
    color: #fff;
    min-width: 48px;
}

.rog-homepage-event-date-day {
    display: block;
    font-family: var(--rog-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
}

.rog-homepage-event-date-month {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--rog-accent);
    margin-top: 2px;
}

.rog-homepage-event-sold-out {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--rog-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 9px;
    border-radius: 3px;
}

.rog-homepage-event-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.rog-homepage-event-title {
    font-family: var(--rog-font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rog-text);
    margin: 0 0 4px;
    line-height: 1.25;
}

.rog-homepage-event-card:hover .rog-homepage-event-title {
    color: var(--rog-accent);
}

.rog-homepage-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: var(--rog-text-muted);
    font-size: 0.88rem;
}

.rog-homepage-event-next {
    margin-left: 4px;
    color: var(--rog-text-muted);
    font-style: italic;
}

.rog-homepage-event-price {
    margin-top: auto;
    padding-top: 6px;
    color: var(--rog-gold);
    font-weight: 700;
    font-size: 1rem;
}

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

@media (max-width: 560px) {
    .rog-homepage-events-grid {
        grid-template-columns: 1fr;
    }
}

/* Visit the shop */
.rog-visit { background: var(--rog-bg-light); }

.rog-visit .rog-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.rog-visit-map {
    aspect-ratio: 4/3;
    border-radius: var(--rog-radius);
    overflow: hidden;
    background: var(--rog-bg-lighter);
    border: 1px solid var(--rog-border);
    /* Soften the bright Google Maps tiles into the dark theme */
    filter: brightness(0.85) contrast(1.05) saturate(0.85);
    transition: filter 0.3s ease;
}

.rog-visit-map:hover {
    filter: brightness(1) contrast(1) saturate(1);
}

.rog-visit-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.rog-visit h2 { font-size: 1.4rem; margin-bottom: 14px; }

/* Right-hand panel: two text columns (address | hours) above an actions row */
.rog-visit-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rog-visit-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

/* Address column */
.rog-visit-address {
    font-style: normal;
    color: var(--rog-text);
    font-size: 0.95rem;
    line-height: 1.7;
}

.rog-visit-phone {
    margin: 14px 0 0;
    font-size: 0.92rem;
    color: var(--rog-text);
}

.rog-visit-phone .rog-visit-label {
    display: block;
    color: var(--rog-accent);
    font-weight: 600;
    font-size: 0.9rem;
}

.rog-visit-phone a { color: var(--rog-text); text-decoration: none; }
.rog-visit-phone a:hover { color: var(--rog-accent); }

/* Opening-hours column */
.rog-visit-hours {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
}

.rog-visit-hours dt {
    color: var(--rog-accent);
    font-weight: 600;
    font-size: 0.9rem;
}

.rog-visit-hours dd {
    color: var(--rog-text);
    font-size: 0.92rem;
    margin: 0;
}

.rog-visit-hours dd.rog-hours-closed { color: var(--rog-text-muted); }

.rog-visit-hours-note {
    margin: 14px 0 0;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--rog-text-muted);
    line-height: 1.5;
}

/* Actions row */
.rog-visit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.rog-no-products {
    text-align: center;
    color: var(--rog-text-muted);
    font-style: italic;
    padding: 40px 0;
}

/* Responsive — homepage sections */
@media (max-width: 1024px) {
    .rog-hero-c h1 { font-size: 2.2rem; }
    .rog-cat-strip { grid-template-columns: repeat(3, 1fr); }
    .rog-scroll-arrow { display: none; }
}

@media (max-width: 768px) {
    .rog-hero-c .rog-hero-grid { grid-template-columns: 1fr; }
    .rog-hero-c h1 { font-size: 1.9rem; }
    .rog-hero-c { min-height: auto; padding: 40px 0; }
    .rog-booking-band .rog-container,
    .rog-visit .rog-container,
    #rog-homepage .rog-league .rog-container { grid-template-columns: 1fr; }
    .rog-booking-band ul { grid-template-columns: 1fr; }
    .rog-week-cal .rog-day::before { left: 132px; }
    .rog-day-head { padding: 10px 14px; gap: 10px; min-height: 50px; grid-template-columns: 118px 1fr; }
    .rog-day-name { gap: 6px; }
    .rog-day-name strong { font-size: 0.7rem; letter-spacing: 0.05em; }
    .rog-day-num { font-size: 0.9rem; }
    .rog-day-logo { height: 16px; max-width: 38px; }
    .rog-day-logo:nth-of-type(n+3) { display: none; }
    .rog-day-body { padding: 0 14px 12px 142px; }
    .rog-day-event { grid-template-columns: 46px 1fr auto; gap: 9px; }
    .rog-day-event-icon { height: 20px; max-width: 60px; }
    .rog-day-openplay { flex-direction: column; align-items: flex-start; gap: 6px; }
    .rog-day-openplay-logo { height: 24px; max-width: 92px; }
    .rog-day-openplay-text { font-size: 0.76rem; }
}

@media (max-width: 480px) {
    .rog-cat-strip { grid-template-columns: repeat(2, 1fr); }
    .rog-hero-feature-img { flex: 0 0 104px; width: 104px; height: 104px; }
    .rog-visit-cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   Topbar social icons (right side of the top utility bar)
   ========================================================================== */

.rog-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rog-topbar-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--rog-text-muted);
    transition: color 0.25s ease, transform 0.25s ease;
}

.rog-topbar-social:hover,
.rog-topbar-social:focus {
    color: var(--rog-accent);
    transform: translateY(-1px);
}

.rog-topbar-social svg {
    width: 100%;
    height: 100%;
    display: block;
}

.rog-topbar-social .rog-social-icon-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: grayscale(0.4) brightness(0.95);
    transition: filter 0.25s ease;
}

.rog-topbar-social:hover .rog-social-icon-img {
    filter: none;
}

/* ==========================================================================
   Footer social icons — size SVGs / custom uploads to fit the existing chip
   ========================================================================== */

.rog-social-links a svg,
.rog-social-links a .rog-social-icon-img {
    width: 18px;
    height: 18px;
    display: block;
}

.rog-social-links a .rog-social-icon-img {
    object-fit: contain;
}

/* ==========================================================================
   What3Words chip — sits under "Get Directions" in the Visit the Shop block
   ========================================================================== */

.rog-w3w {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--rog-text);
    text-decoration: none;
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--rog-border);
    background: rgba(0, 0, 0, 0.25);
    transition: all 0.25s ease;
    margin-top: 12px;
}

.rog-w3w:hover,
.rog-w3w:focus {
    color: #fff;
    border-color: var(--rog-accent);
    background: rgba(238, 120, 10, 0.12);
}

.rog-w3w-prefix {
    color: #e11f26; /* What3Words brand red */
    font-weight: 700;
    letter-spacing: -0.04em;
    margin-right: 2px;
}

.rog-w3w-words {
    font-family: var(--rog-font-body);
    letter-spacing: 0.01em;
}

/* Get Directions button + W3W chip share the .rog-visit-actions flex row,
   which handles both spacing (gap) and wrapping; neutralise the chip's own
   stacked-layout top margin so it stays aligned with the button. */
.rog-visit-actions .rog-w3w { margin-top: 0; }

/* ──────────────────────────────────────────────────────────────────────
   Product card → Quick View Modal
   Whole tile is a click target; the Add to Basket button stops bubbling.
   ────────────────────────────────────────────────────────────────────── */
.rog-qv-trigger {
    cursor: pointer;
}
.rog-qv-trigger:focus-visible {
    outline: 2px solid var(--rog-accent);
    outline-offset: 2px;
}
.rog-qv-trigger .rog-add-to-basket {
    cursor: pointer; /* override pointer:pointer on the trigger so the button feels distinct */
}

/* Modal overlay */
.rog-qv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.rog-qv-overlay--visible {
    opacity: 1;
}
.rog-qv-overlay[hidden] {
    display: none;
}
body.rog-qv-open {
    overflow: hidden;
}

/* Modal frame */
.rog-qv-modal {
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: 8px;
    width: 100%;
    max-width: 980px;
    position: relative;
    margin: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.rog-qv-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: var(--rog-text-muted);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    z-index: 2;
}
.rog-qv-close:hover,
.rog-qv-close:focus-visible {
    color: var(--rog-text);
    outline: none;
}

.rog-qv-content {
    padding: 32px;
}

.rog-qv-loading,
.rog-qv-error {
    text-align: center;
    color: var(--rog-text-muted);
    padding: 48px 16px;
}
.rog-qv-error {
    color: #dc3545;
}

/* Two-column layout: gallery left, summary right */
.rog-qv-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.rog-qv-gallery img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

.rog-qv-image-wrap {
    position: relative;
}

.rog-qv-summary .price {
    color: var(--rog-gold);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 8px 0 14px;
}
.rog-qv-summary .product_title {
    font-size: 1.4rem;
    margin: 0 0 6px;
    color: var(--rog-text);
}
.rog-qv-summary .woocommerce-product-details__short-description {
    color: var(--rog-text-muted);
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.rog-qv-summary .quantity input.qty {
    width: 70px;
    padding: 8px;
    background: var(--rog-bg);
    border: 1px solid var(--rog-border);
    color: var(--rog-text);
    border-radius: 4px;
    margin-right: 8px;
}

.rog-qv-summary button.single_add_to_cart_button,
.rog-qv-summary .single_add_to_cart_button {
    background: var(--rog-primary);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: var(--rog-radius);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
}
.rog-qv-summary button.single_add_to_cart_button:hover {
    background: var(--rog-primary-dark);
}

.rog-qv-summary .product_meta {
    margin-top: 16px;
    font-size: 0.85rem;
    color: var(--rog-text-muted);
}

.rog-qv-full-link {
    margin-top: 16px;
    font-size: 0.9rem;
}
.rog-qv-full-link a {
    color: var(--rog-accent);
}
.rog-qv-full-link a:hover {
    color: var(--rog-text);
}

@media (max-width: 720px) {
    .rog-qv-content { padding: 22px; }
    .rog-qv-product {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .rog-qv-modal { max-width: 100%; }
}

/* Added-to-basket toast */
.rog-cart-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #1f3b1f;
    color: #d6f5d6;
    padding: 12px 18px;
    border-radius: 6px;
    border: 1px solid #2d5a2d;
    z-index: 100000;
    font-size: 0.92rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    max-width: 340px;
}
.rog-cart-toast--visible {
    transform: translateY(0);
    opacity: 1;
}
.rog-cart-toast--error {
    background: #3b1f1f;
    color: #f5d6d6;
    border-color: #5a2d2d;
}
.rog-cart-toast[hidden] {
    display: none;
}
@media (max-width: 480px) {
    .rog-cart-toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
    }
}

/* ── 404 page ─────────────────────────────────────────────────────── */
.rog-404 {
    padding: 60px 0 80px;
    text-align: center;
}

.rog-404 .rog-section-title {
    margin-bottom: 16px;
}

.rog-404-lead {
    max-width: 640px;
    margin: 0 auto 32px;
    font-size: 1.1rem;
    line-height: 1.5;
}

.rog-404-image {
    max-width: 720px;
    margin: 0 auto 40px;
}

.rog-404-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.rog-404-actions {
    margin: 0;
}

@media (max-width: 600px) {
    .rog-404 {
        padding: 40px 0 60px;
    }
    .rog-404-lead {
        font-size: 1rem;
    }
}

/* ==========================================================================
   My Account — sub-menu strip, page header, dashboard tiles, quick links
   (see inc/rog-account-nav.php)
   ========================================================================== */

/* ── The strip: sits directly under the red category bar ─────────── */
.rog-account-strip {
    background: #262626;
    border-bottom: 1px solid var(--rog-border);
}

.rog-account-strip-in {
    position: relative;
}

.rog-account-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.rog-account-tabs::-webkit-scrollbar {
    display: none;
}

.rog-account-tabs li {
    flex: 0 0 auto;
    display: flex;
}

.rog-account-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 14px 10px;
    font-family: var(--rog-font-body);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--rog-text-muted);
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--rog-transition), border-color var(--rog-transition);
}

.rog-account-tab:hover,
.rog-account-tab:focus-visible {
    color: var(--rog-text);
}

.rog-account-tab:focus-visible {
    outline: 2px solid var(--rog-accent);
    outline-offset: -2px;
}

.rog-account-tab.is-active {
    color: var(--rog-text);
    border-bottom-color: var(--rog-accent);
}

.rog-account-count {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--rog-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}

/* "More" — pushed to the right edge, dropdown below it */
.rog-account-more {
    margin-left: auto;
}

.rog-account-more-btn svg {
    transition: transform var(--rog-transition);
}

.rog-account-more-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Sits OUTSIDE the scrolling tab row (which would clip it), anchored to the strip. */
.rog-account-more-menu {
    position: absolute;
    right: 20px;
    top: 100%;
    z-index: 40;
    min-width: 240px;
    margin-top: 2px;
    padding: 6px 0;
    background: var(--rog-bg-lighter);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.rog-account-more-group + .rog-account-more-group {
    border-top: 1px solid var(--rog-border);
    margin-top: 4px;
    padding-top: 4px;
}

.rog-account-more-heading {
    padding: 8px 14px 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rog-text-muted);
}

.rog-account-more-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 0.9rem;
    color: var(--rog-text);
    text-decoration: none;
}

.rog-account-more-link:hover,
.rog-account-more-link:focus-visible,
.rog-account-more-link.is-active {
    background: rgba(238, 120, 10, 0.12);
    color: var(--rog-text);
}

.rog-account-more-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--rog-accent);
}

.rog-account-more-icon svg {
    width: 18px;
    height: 18px;
}

.rog-account-more-link--logout {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--rog-border);
    color: var(--rog-text-muted);
}

.rog-account-more-link--logout .rog-account-more-icon {
    color: var(--rog-danger);
}

.rog-account-more-link--logout:hover,
.rog-account-more-link--logout:focus-visible {
    background: rgba(220, 53, 69, 0.12);
    color: var(--rog-text);
}

/* ── Page shell ───────────────────────────────────────────────────── */
.rog-account {
    max-width: var(--rog-container);
    margin: 0 auto;
    padding: 28px 24px 80px;
}

.rog-account-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.rog-account-crumb {
    margin: 0 0 4px;
    font-size: 0.8rem;
    color: var(--rog-text-muted);
}

.rog-account-crumb a {
    color: var(--rog-text-muted);
    text-decoration: none;
}

.rog-account-crumb a:hover {
    color: var(--rog-accent);
}

.rog-account-title {
    margin: 0;
    font-size: 2.1rem;
    line-height: 1.1;
    color: var(--rog-text);
}

.rog-account-title span {
    color: var(--rog-accent);
}

.rog-account-action {
    flex: 0 0 auto;
    margin-bottom: 4px;
}

.rog-account-member {
    margin: 0 0 6px;
    font-size: 0.8rem;
    color: var(--rog-text-muted);
}

.rog-account-member code {
    font-size: 0.85rem;
    color: var(--rog-text);
    background: var(--rog-bg-light);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ── Dashboard tiles ──────────────────────────────────────────────── */
.rog-account-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(120px, auto);
    gap: 14px;
}

.rog-account-tile {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    color: var(--rog-text);
    text-decoration: none;
    transition: border-color var(--rog-transition), background-color var(--rog-transition);
}

a.rog-account-tile:hover,
a.rog-account-tile:focus-visible {
    border-color: var(--rog-accent);
    background: var(--rog-bg-lighter);
    color: var(--rog-text);
}

.rog-account-tile--hero {
    grid-row: span 2;
    border-color: rgba(238, 120, 10, 0.5);
    background: linear-gradient(135deg, rgba(238, 120, 10, 0.14), var(--rog-bg-light) 60%);
}

/* A hero with nothing beside it should not stretch two rows tall. */
.rog-account-tile--hero:only-child {
    grid-row: auto;
}

.rog-account-tile-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rog-text-muted);
}

.rog-account-tile-value {
    font-family: var(--rog-font-heading);
    font-size: 1.6rem;
    line-height: 1.15;
    margin: 6px 0 2px;
    font-variant-numeric: tabular-nums;
}

.rog-account-tile--hero .rog-account-tile-value {
    font-size: 2.2rem;
}

.rog-account-tile-detail {
    font-size: 0.85rem;
    color: var(--rog-text-muted);
}

.rog-account-tile-bar {
    display: block;
    height: 6px;
    margin: 12px 0 4px;
    background: #2a2a2a;
    border-radius: 3px;
    overflow: hidden;
}

.rog-account-tile-bar i {
    display: block;
    height: 100%;
    background: var(--rog-accent);
    border-radius: 3px;
}

.rog-account-tile-link {
    margin-top: auto;
    padding-top: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rog-accent);
}

.rog-account-quiet {
    margin: 0;
    padding: 18px 20px;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    color: var(--rog-text-muted);
}

.rog-account-section-title {
    margin: 28px 0 10px;
    font-family: var(--rog-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rog-text-muted);
}

/* ── Quick-link cards (compact version of the old menu cards) ─────── */
.rog-account-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.rog-account-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    color: var(--rog-text);
    text-decoration: none;
    transition: border-color var(--rog-transition),
                background-color var(--rog-transition);
}

.rog-account-card:hover,
.rog-account-card:focus-visible {
    border-color: var(--rog-accent);
    background: var(--rog-bg-lighter);
    color: var(--rog-text);
}

.rog-account-card-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rog-radius);
    background: rgba(238, 120, 10, 0.12);
    color: var(--rog-accent);
    transition: background-color var(--rog-transition), color var(--rog-transition);
}

.rog-account-card-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.rog-account-card:hover .rog-account-card-icon {
    background: var(--rog-accent);
    color: #fff;
}

.rog-account-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rog-account-card-title {
    font-family: var(--rog-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--rog-text);
}

.rog-account-card-desc {
    font-size: 0.78rem;
    color: var(--rog-text-muted);
    margin-top: 3px;
    line-height: 1.3;
}

/* ── Endpoint content panel ───────────────────────────────────────── */
.rog-account-content {
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    padding: 28px;
}

/* The dashboard paints its own tiles; no panel around them. */
.rog-account-content--dashboard {
    background: none;
    border: 0;
    padding: 0;
}

.rog-account-content:empty {
    display: none;
}

.rog-account-content h2,
.rog-account-content h3 {
    margin-top: 0;
}

.rog-account-content a {
    color: var(--rog-accent);
}

.rog-account-content a:hover {
    color: var(--rog-gold);
}

/* Tiles and quick-link cards are anchors too, but they are not "links" */
.rog-account-content a.rog-account-tile,
.rog-account-content a.rog-account-tile:hover,
.rog-account-content a.rog-account-card,
.rog-account-content a.rog-account-card:hover {
    color: var(--rog-text);
}

/* Tighten up WC's default tables/forms inside the panel */
.rog-account-content .woocommerce-orders-table,
.rog-account-content table.shop_table {
    width: 100%;
    border-collapse: collapse;
    color: var(--rog-text);
}

.rog-account-content .woocommerce-orders-table th,
.rog-account-content .woocommerce-orders-table td,
.rog-account-content table.shop_table th,
.rog-account-content table.shop_table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--rog-border);
    text-align: left;
}

.rog-account-content input[type="text"],
.rog-account-content input[type="email"],
.rog-account-content input[type="tel"],
.rog-account-content input[type="password"],
.rog-account-content select,
.rog-account-content textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--rog-bg);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    color: var(--rog-text);
    font-family: var(--rog-font-body);
    font-size: 0.95rem;
}

.rog-account-content input:focus,
.rog-account-content select:focus,
.rog-account-content textarea:focus {
    outline: none;
    border-color: var(--rog-accent);
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .rog-account-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
    .rog-account-quick {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 720px) {
    .rog-account {
        padding: 18px 16px 60px;
    }
    .rog-account-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .rog-account-title {
        font-size: 1.7rem;
    }
    .rog-account-action {
        margin-bottom: 0;
    }

    /* Strip becomes a row of scrolling pills */
    .rog-account-strip-in {
        padding-left: 12px;
        padding-right: 12px;
    }
    .rog-account-tabs {
        gap: 6px;
        padding: 8px 0;
    }
    .rog-account-tab {
        padding: 6px 12px;
        font-size: 0.85rem;
        border: 1px solid var(--rog-border);
        border-radius: 15px;
    }
    .rog-account-tab.is-active {
        background: var(--rog-accent);
        border-color: var(--rog-accent);
        color: #fff;
    }
    .rog-account-tab.is-active .rog-account-count {
        background: #fff;
        color: var(--rog-accent);
    }
    .rog-account-more {
        margin-left: 0;
    }
    .rog-account-more-menu {
        left: 12px;
        right: 12px;
        min-width: 0;
    }

    .rog-account-tiles {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    .rog-account-tile--hero {
        grid-row: auto;
    }
    .rog-account-quick {
        grid-template-columns: repeat(2, 1fr);
    }
    .rog-account-card {
        padding: 10px 12px;
    }
    .rog-account-card-desc {
        display: none;
    }
    .rog-account-content {
        padding: 20px 18px;
    }

    /* WooCommerce's order table as a stacked list */
    .rog-account-content .woocommerce-orders-table thead {
        display: none;
    }
    .rog-account-content .woocommerce-orders-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 2px 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--rog-border);
    }
    .rog-account-content .woocommerce-orders-table td {
        padding: 0;
        border: 0;
    }
    .rog-account-content .woocommerce-orders-table td::before {
        content: attr(data-title) ": ";
        color: var(--rog-text-muted);
    }
    .rog-account-content .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
        grid-column: 1 / -1;
        padding-top: 6px;
    }
    .rog-account-content .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before {
        content: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rog-account-tab,
    .rog-account-tile,
    .rog-account-card,
    .rog-account-card-icon,
    .rog-account-more-btn svg {
        transition: none;
    }
}

/* ── Header: quiet Log out link, far right ────────────────────────── */
.rog-header-logout {
    font-size: 0.8rem;
    color: var(--rog-text-muted);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.rog-header-logout:hover,
.rog-header-logout:focus-visible {
    color: var(--rog-text);
}

/* ── Profile page: jump list + sections ───────────────────────────── */
.rog-profile {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 24px;
    align-items: start;
}

.rog-profile-jump {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.9rem;
}

.rog-profile-jump a {
    padding: 7px 12px;
    color: var(--rog-text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 0 var(--rog-radius) var(--rog-radius) 0;
}

.rog-profile-jump a:hover,
.rog-profile-jump a:focus-visible {
    color: var(--rog-text);
}

.rog-profile-jump a.is-active {
    color: var(--rog-text);
    font-weight: 600;
    border-left-color: var(--rog-accent);
    background: rgba(238, 120, 10, 0.08);
}

.rog-profile-jump--quiet {
    margin-top: 10px;
    opacity: 0.75;
}

.rog-profile-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.rog-profile-section {
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    padding: 20px 22px;
    scroll-margin-top: 16px;
}

.rog-profile-section h2 {
    margin: 0 0 4px;
    font-size: 1.35rem;
}

.rog-profile-lead {
    margin: 0 0 16px;
    font-size: 0.9rem;
    color: var(--rog-text-muted);
    max-width: 62ch;
}

.rog-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.rog-field {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rog-field label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rog-text-muted);
    margin-bottom: 5px;
}

.rog-field-hint {
    font-size: 0.78rem;
    color: var(--rog-text-muted);
    margin-top: 5px;
    line-height: 1.35;
}

.rog-field input[type="date"] {
    color-scheme: dark;
}

.rog-profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 16px 0 0;
}

.rog-profile-actions--data {
    justify-content: flex-start;
}

/* Buttons on account pages: .rog-btn alone carries no colour in the theme,
   so give it the primary look here and layer the outline/danger variants. */
.rog-account .rog-btn {
    padding: 10px 18px;
    font-size: 0.9rem;
    background: var(--rog-primary);
    color: #fff;
}

.rog-account .rog-btn:hover,
.rog-account .rog-btn:focus-visible {
    background: var(--rog-primary-dark);
    color: #fff;
}

.rog-account .rog-btn--outline {
    background: none;
    border: 1px solid var(--rog-border);
    color: var(--rog-text);
}

.rog-account .rog-btn--outline:hover,
.rog-account .rog-btn--outline:focus-visible {
    background: var(--rog-bg-lighter);
    border-color: var(--rog-accent);
    color: var(--rog-text);
}

.rog-account .rog-btn--danger {
    color: #f28b8b;
    border-color: rgba(220, 53, 69, 0.5);
}

.rog-account .rog-btn--danger:hover,
.rog-account .rog-btn--danger:focus-visible {
    background: rgba(220, 53, 69, 0.15);
    border-color: var(--rog-danger);
    color: #fff;
}

.rog-profile-section--data {
    border-color: rgba(220, 53, 69, 0.35);
}

/* Addresses as cards that open into the form */
.rog-profile-addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.rog-profile-address {
    background: var(--rog-bg);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
}

.rog-profile-address[open] {
    grid-column: 1 / -1;
}

.rog-profile-address summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

.rog-profile-address summary::-webkit-details-marker {
    display: none;
}

.rog-profile-address summary:focus-visible {
    outline: 2px solid var(--rog-accent);
    outline-offset: -2px;
    border-radius: var(--rog-radius);
}

.rog-profile-address-body b {
    display: block;
    margin-bottom: 4px;
}

.rog-profile-address-text {
    font-size: 0.88rem;
    line-height: 1.4;
}

.rog-profile-address-text--empty {
    color: var(--rog-text-muted);
}

.rog-profile-address-edit {
    flex: 0 0 auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rog-accent);
}

.rog-profile-address-form {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--rog-border);
}

.rog-profile-address-form .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.rog-profile-address-form .form-row {
    margin: 0;
}

.rog-profile-address-form .form-row-wide,
.rog-profile-address-form .form-row.address-field {
    grid-column: 1 / -1;
}

.rog-profile-address-form label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rog-text-muted);
    margin-bottom: 5px;
}

/* Contact plugin's form inside the section */
.rog-profile-section .rogc-account > p:first-child {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--rog-text-muted);
    max-width: 62ch;
}

.rog-profile-section .rogc-fine {
    font-size: 0.8rem;
    color: var(--rog-text-muted);
}

/* Collectibles' fieldset inside the Public profile section */
.rog-profile-form--public fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.rog-profile-form--public legend {
    display: none;
}

@media (max-width: 900px) {
    .rog-profile {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .rog-profile-jump {
        position: static;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .rog-profile-jump::-webkit-scrollbar {
        display: none;
    }
    .rog-profile-jump a {
        flex: 0 0 auto;
        border: 1px solid var(--rog-border);
        border-radius: 15px;
        padding: 5px 12px;
        font-size: 0.85rem;
    }
    .rog-profile-jump a.is-active {
        border-color: var(--rog-accent);
        background: none;
    }
    .rog-profile-jump--quiet {
        margin-top: 0;
    }
}

@media (max-width: 720px) {
    .rog-header-logout {
        display: none; /* the More menu carries Log out on phones */
    }
    .rog-profile-section {
        padding: 16px;
    }
    .rog-profile-grid,
    .rog-profile-addresses,
    .rog-profile-address-form .woocommerce-address-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
    .rog-field--spacer {
        display: none;
    }
    .rog-profile-actions {
        flex-direction: column;
    }
    .rog-profile-actions .rog-btn {
        text-align: center;
    }
}

/* ==========================================================================
   My Account — Login / Register / Lost Password (logged-out)
   Restyles WooCommerce's default form-login / lost-password templates to
   match the site. Scoped to .woocommerce-account so the inline checkout
   login form (body.woocommerce-checkout) is left untouched. WooCommerce's
   own stylesheets are dequeued, so these rules style the forms from scratch.
   ========================================================================== */

/* Centre the auth area and lay the two forms out as side-by-side cards */
body.woocommerce-account #customer_login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    max-width: 940px;
    margin: 24px auto 60px;
}

/* Defensive reset of WooCommerce's float-based column markup */
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2,
body.woocommerce-account #customer_login .col-1,
body.woocommerce-account #customer_login .col-2 {
    float: none;
    width: auto;
    margin: 0;
}

/* Card panel per form */
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2 {
    display: flex;
    flex-direction: column;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    padding: 32px 28px;
}

/* Section headings (Login / Register) with a brand-coloured underline */
body.woocommerce-account #customer_login h2 {
    font-size: 1.6rem;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--rog-primary);
}

body.woocommerce-account #customer_login .u-column2 h2 {
    border-bottom-color: var(--rog-accent);
}

/* ── Fields ──────────────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-form-login .form-row,
body.woocommerce-account .woocommerce-form-register .form-row,
body.woocommerce-account .woocommerce-ResetPassword .form-row {
    display: block;
    margin: 0 0 18px;
    padding: 0;
}

body.woocommerce-account .woocommerce-form-login label,
body.woocommerce-account .woocommerce-form-register label,
body.woocommerce-account .woocommerce-ResetPassword label {
    display: block;
    margin-bottom: 6px;
    color: var(--rog-text-muted);
    font-size: 0.88rem;
    font-weight: 500;
}

body.woocommerce-account #customer_login .required,
body.woocommerce-account .woocommerce-ResetPassword .required {
    color: var(--rog-primary);
    border: 0;
    text-decoration: none;
}

body.woocommerce-account .woocommerce-form-login input[type="text"],
body.woocommerce-account .woocommerce-form-login input[type="password"],
body.woocommerce-account .woocommerce-form-register input[type="text"],
body.woocommerce-account .woocommerce-form-register input[type="email"],
body.woocommerce-account .woocommerce-form-register input[type="password"],
body.woocommerce-account .woocommerce-ResetPassword input[type="text"],
body.woocommerce-account .woocommerce-ResetPassword input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    background: var(--rog-bg);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
    color: var(--rog-text);
    font-family: var(--rog-font-body);
    font-size: 0.95rem;
    transition: border-color var(--rog-transition), box-shadow var(--rog-transition);
}

body.woocommerce-account .woocommerce-form-login input:focus,
body.woocommerce-account .woocommerce-form-register input:focus,
body.woocommerce-account .woocommerce-ResetPassword input:focus {
    outline: none;
    border-color: var(--rog-accent);
    box-shadow: 0 0 0 3px rgba(238, 120, 10, 0.15);
}

/* Helper / privacy text inside the cards */
body.woocommerce-account .woocommerce-form-register p:not(.form-row),
body.woocommerce-account .woocommerce-ResetPassword p:not(.form-row) {
    margin: 0 0 16px;
    color: var(--rog-text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* ── Remember me ─────────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 18px;
    color: var(--rog-text-muted);
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
}

body.woocommerce-account .woocommerce-form-login__rememberme input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--rog-accent);
    cursor: pointer;
}

body.woocommerce-account .woocommerce-form-login__rememberme span {
    line-height: 1;
}

/* ── Submit buttons ──────────────────────────────────────────────── */
body.woocommerce-account #customer_login button[type="submit"],
body.woocommerce-account .woocommerce-ResetPassword button[type="submit"] {
    display: block;
    width: 100%;
    margin: 4px 0 0;
    padding: 13px 24px;
    border: none;
    border-radius: var(--rog-radius);
    color: #fff;
    font-family: var(--rog-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background var(--rog-transition), transform var(--rog-transition);
}

body.woocommerce-account #customer_login button[type="submit"]:hover,
body.woocommerce-account .woocommerce-ResetPassword button[type="submit"]:hover {
    transform: translateY(-1px);
}

body.woocommerce-account #customer_login button[type="submit"]:focus-visible,
body.woocommerce-account .woocommerce-ResetPassword button[type="submit"]:focus-visible {
    outline: 2px solid var(--rog-gold);
    outline-offset: 2px;
}

/* Log in — primary red */
body.woocommerce-account .woocommerce-form-login__submit {
    background: var(--rog-primary);
}
body.woocommerce-account .woocommerce-form-login__submit:hover {
    background: var(--rog-primary-dark);
}

/* Register — accent orange */
body.woocommerce-account .woocommerce-form-register__submit {
    background: var(--rog-accent);
}
body.woocommerce-account .woocommerce-form-register__submit:hover {
    background: #d56a08;
}

/* Lost-password reset — primary red */
body.woocommerce-account .woocommerce-ResetPassword button[type="submit"] {
    background: var(--rog-primary);
}
body.woocommerce-account .woocommerce-ResetPassword button[type="submit"]:hover {
    background: var(--rog-primary-dark);
}

/* ── "Lost your password?" link ──────────────────────────────────── */
body.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword {
    margin: 18px 0 0;
    padding: 0;
    font-size: 0.88rem;
}
body.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword a {
    color: var(--rog-text-muted);
}
body.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword a:hover {
    color: var(--rog-accent);
}

/* ── Standalone lost / reset password page (no #customer_login wrap) ─ */
body.woocommerce-account .woocommerce-ResetPassword.lost_reset_password {
    max-width: 480px;
    margin: 24px auto 60px;
    padding: 32px 28px;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-radius: var(--rog-radius);
}

/* Hide WooCommerce's float-clear helpers (not needed with grid/flex) */
body.woocommerce-account #customer_login .clear,
body.woocommerce-account .woocommerce-ResetPassword .clear {
    display: none;
}

/* ── Mobile: stack the two cards ─────────────────────────────────── */
@media (max-width: 720px) {
    body.woocommerce-account #customer_login {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 480px;
    }
    body.woocommerce-account #customer_login .u-column1,
    body.woocommerce-account #customer_login .u-column2 {
        padding: 24px 20px;
    }
}

/* ==========================================================================
   My Bookings — customer-facing list inside My Account
   ========================================================================== */

.rog-bookings-page {
    color: var(--rog-text);
}

.rog-bookings-header {
    margin-bottom: 20px;
}

.rog-bookings-header h2 {
    margin: 0 0 6px;
    font-size: 1.5rem;
}

.rog-bookings-intro {
    margin: 0;
    color: var(--rog-text-muted);
    font-size: 0.95rem;
}

.rog-notice {
    padding: 12px 16px;
    border-radius: var(--rog-radius);
    margin-bottom: 20px;
    font-size: 0.95rem;
    border: 1px solid var(--rog-border);
    background: var(--rog-bg-lighter);
}

.rog-notice--success {
    border-color: var(--rog-success);
    background: rgba(40, 167, 69, 0.12);
    color: #c0f0c9;
}

.rog-notice--error {
    border-color: var(--rog-danger);
    background: rgba(220, 53, 69, 0.12);
    color: #f4c2c8;
}

.rog-bookings-empty {
    padding: 32px;
    text-align: center;
    background: var(--rog-bg);
    border: 1px dashed var(--rog-border);
    border-radius: var(--rog-radius);
}

.rog-bookings-empty p {
    margin: 0 0 16px;
    color: var(--rog-text-muted);
}

.rog-bookings-cta {
    display: inline-block;
    padding: 10px 22px;
    background: var(--rog-primary);
    color: #fff;
    border-radius: var(--rog-radius);
    font-weight: 600;
    transition: background-color var(--rog-transition);
}

.rog-bookings-cta:hover,
.rog-bookings-cta:focus-visible {
    background: var(--rog-primary-dark);
    color: #fff;
}

.rog-bookings-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rog-booking-card {
    background: var(--rog-bg);
    border: 1px solid var(--rog-border);
    border-left: 3px solid var(--rog-accent);
    border-radius: var(--rog-radius);
    padding: 18px 20px;
    transition: border-color var(--rog-transition),
                box-shadow var(--rog-transition);
}

.rog-booking-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.rog-booking-card--pending {
    border-left-color: var(--rog-gold);
}

.rog-booking-card--cancelled {
    border-left-color: var(--rog-text-muted);
    opacity: 0.7;
}

.rog-booking-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.rog-booking-card-heading {
    min-width: 0;
    flex: 1 1 auto;
}

.rog-booking-card-title {
    margin: 0 0 4px;
    font-family: var(--rog-font-body);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rog-text);
}

.rog-booking-card-meta {
    margin: 0;
    color: var(--rog-text-muted);
    font-size: 0.92rem;
    line-height: 1.4;
}

.rog-booking-card-dot {
    margin: 0 6px;
    color: var(--rog-border);
}

.rog-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    flex: 0 0 auto;
}

.rog-status-badge--confirmed {
    background: rgba(40, 167, 69, 0.18);
    color: #6ee08a;
}

.rog-status-badge--pending {
    background: rgba(200, 164, 21, 0.18);
    color: var(--rog-gold);
}

.rog-status-badge--cancelled {
    background: rgba(220, 53, 69, 0.18);
    color: #f4a3aa;
}

.rog-booking-card-details {
    margin-top: 4px;
}

.rog-booking-card-details summary {
    cursor: pointer;
    color: var(--rog-accent);
    font-size: 0.9rem;
    font-weight: 600;
    list-style: none;
    padding: 6px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.rog-booking-card-details summary::-webkit-details-marker {
    display: none;
}

.rog-booking-card-details summary::before {
    content: '+';
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.85rem;
    transition: transform var(--rog-transition);
}

.rog-booking-card-details[open] summary::before {
    content: '–';
}

.rog-booking-card-details summary:hover,
.rog-booking-card-details summary:focus-visible {
    color: var(--rog-gold);
}

.rog-booking-detail-list {
    margin: 12px 0 0;
    padding: 14px 16px;
    background: var(--rog-bg-light);
    border-radius: var(--rog-radius);
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 18px;
    font-size: 0.92rem;
}

.rog-booking-detail-list dt {
    color: var(--rog-text-muted);
    font-weight: 600;
}

.rog-booking-detail-list dd {
    margin: 0;
    color: var(--rog-text);
}

.rog-booking-card-actions {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--rog-border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.rog-booking-card-note {
    margin: 0;
    color: var(--rog-text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

.rog-booking-cancel-form {
    margin: 0;
}

.rog-booking-cancel-btn {
    padding: 8px 18px;
    background: transparent;
    border: 1px solid var(--rog-danger);
    color: var(--rog-danger);
    border-radius: var(--rog-radius);
    font-family: var(--rog-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--rog-transition),
                color var(--rog-transition);
}

.rog-booking-cancel-btn:hover,
.rog-booking-cancel-btn:focus-visible {
    background: var(--rog-danger);
    color: #fff;
}

@media (max-width: 600px) {
    .rog-booking-card {
        padding: 16px 14px;
    }
    .rog-booking-detail-list {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }
    .rog-booking-detail-list dt {
        margin-top: 8px;
    }
    .rog-booking-detail-list dt:first-child {
        margin-top: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GOOGLE REVIEWS (footer badge + homepage strip)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared: logo + stars ─────────────────────────────────────────────── */

.rog-grev-logo {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.rog-grev-stars {
    position: relative;
    display: inline-block;
    line-height: 0;
    flex: 0 0 auto;
}

.rog-grev-stars-base,
.rog-grev-stars-fill {
    display: inline-flex;
    gap: 1px;
    white-space: nowrap;
}

.rog-grev-stars-base {
    color: var(--rog-border);
}

.rog-grev-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: var(--rog-gold);
}

.rog-grev-stars svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.rog-grev-rating {
    color: var(--rog-gold);
    font-weight: 600;
}

.rog-grev-count {
    color: var(--rog-text-muted);
}

/* ── Footer badge ─────────────────────────────────────────────────────── */

.rog-grev-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-family: var(--rog-font-body);
    font-size: 0.85rem;
    color: var(--rog-text-muted);
    text-decoration: none;
    transition: color var(--rog-transition);
}

a.rog-grev-badge:hover,
a.rog-grev-badge:focus-visible {
    color: var(--rog-text);
}

/* ── Homepage strip (between header and nav) ──────────────────────────── */

.rog-grev-strip {
    background: var(--rog-bg-light);
    border-bottom: 1px solid var(--rog-border);
    font-family: var(--rog-font-body);
    font-size: 0.85rem;
}

.rog-grev-strip-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.rog-grev-strip-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    color: var(--rog-text);
    text-decoration: none;
}

a.rog-grev-strip-meta:hover .rog-grev-rating,
a.rog-grev-strip-meta:focus-visible .rog-grev-rating {
    text-decoration: underline;
}

/* ── Featured review cards (curated quotes) ───────────────────────────── */

.rog-grev-cards {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 10px;
}

.rog-grev-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px 11px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--rog-border);
    border-radius: 8px;
    line-height: 1.4;
}

.rog-grev-card .rog-grev-stars svg {
    width: 12px;
    height: 12px;
}

.rog-grev-card-text {
    color: var(--rog-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rog-grev-card-author {
    color: var(--rog-text);
    font-weight: 600;
}

.rog-grev-card-time {
    color: var(--rog-text-muted);
}

@media (max-width: 720px) {
    .rog-grev-strip-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .rog-grev-strip-meta {
        align-self: flex-start;
    }
    .rog-grev-cards {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .rog-grev-card {
        flex: 0 0 78%;
    }
}

/* ==========================================================================
   My Account — per-item fulfilment status
   Rendered by inc/rog-order-line-status.php on the "view order" and
   order-received item tables: a small chip beneath each line item, plus a
   summary strip above the table when the lines differ from one another.
   ========================================================================== */

.rog-line-status-wrap {
    display: block;
    margin-top: 6px;
    line-height: 1.5;
}

.rog-line-status {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--rog-border);
    border-radius: 999px;
    background: var(--rog-bg-lighter);
    color: var(--rog-text-muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.rog-line-status__detail {
    color: var(--rog-text-muted);
    font-size: 0.78rem;
}

/* Ready / Ready to collect — the customer can act on this. */
.rog-line-status--ready {
    background: rgba(40, 167, 69, 0.16);
    border-color: rgba(40, 167, 69, 0.5);
    color: #7ddb96;
}

/* Being prepared — in progress, nothing to do yet. */
.rog-line-status--preparing {
    background: transparent;
    border-style: dashed;
    color: var(--rog-text-muted);
}

/* On back order — waiting on a supplier. */
.rog-line-status--waiting {
    background: rgba(200, 164, 21, 0.16);
    border-color: rgba(200, 164, 21, 0.5);
    color: var(--rog-gold);
}

/* Collected / Dispatched — settled, no further action. */
.rog-line-status--done {
    background: var(--rog-bg-lighter);
    border-color: var(--rog-border);
    color: var(--rog-text);
}

/* Tickets and anything else that needs no collection. */
.rog-line-status--info {
    background: rgba(238, 120, 10, 0.14);
    border-color: rgba(238, 120, 10, 0.45);
    color: var(--rog-accent);
}

.rog-line-status--refunded {
    background: rgba(220, 53, 69, 0.16);
    border-color: rgba(220, 53, 69, 0.5);
    color: #f08a94;
}

/* ── Summary strip ───────────────────────────────────────────────────────── */

.rog-line-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 0 0 20px;
    padding: 12px 16px;
    background: var(--rog-bg-light);
    border: 1px solid var(--rog-border);
    border-left: 3px solid var(--rog-primary);
    border-radius: var(--rog-radius);
    font-size: 0.92rem;
    color: var(--rog-text-muted);
}

.rog-line-summary__label {
    font-weight: 600;
    color: var(--rog-text);
}

.rog-line-summary__entry {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.rog-line-summary__entry + .rog-line-summary__entry::before {
    content: '\00b7';
    color: var(--rog-border);
}

.rog-line-summary__entry strong {
    color: var(--rog-text);
}

.rog-line-summary__entry--ready strong {
    color: #7ddb96;
}

.rog-line-summary__entry--waiting strong {
    color: var(--rog-gold);
}

.rog-line-summary__entry--info strong {
    color: var(--rog-accent);
}

.rog-line-summary__entry--refunded strong {
    color: #f08a94;
}

@media (max-width: 600px) {
    .rog-line-summary {
        font-size: 0.86rem;
        padding: 10px 14px;
    }
}

/* ==========================================================================
   Marketplace integration (2.22.0)

   Only two things the theme itself needs. Everything else the marketplace
   renders — its own header, nav, cards and policy pages — is styled by the
   ROG Marketplace plugin's own stylesheet, which reuses the custom properties
   declared at the top of this file so the two shops share one palette.
   ========================================================================== */

/* The "Marketplace" heading inside the footer's Our Policies column (C9). */
.rog-footer-subhead {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--rog-border);
}

.rog-footer-note {
    font-size: 12.5px;
    color: var(--rog-text-muted);
    margin: 0 0 8px;
}

/* The Marketplace nav item, tinted with the accent so it reads as a different
   shop rather than another product category. */
.rog-menu .rog-menu-marketplace > a {
    color: var(--rog-accent);
}

/* ==========================================================================
   Game chips - the publisher's logo (Events -> Settings -> Games) or the accent
   dot, and the game's name. Same look on event cards, the event page, the
   homepage board, the modal and shelf headers - and in the app.
   ========================================================================== */
.rog-game-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #a0a0a0;
    text-transform: uppercase;
}
.rog-game-chip-logo {
    height: 18px;
    width: auto;
    max-width: 72px;
    object-fit: contain;
    display: block;
}
.rog-game-chip--large { font-size: 0.9rem; margin-bottom: 10px; gap: 10px; }
.rog-game-chip--large .rog-game-chip-logo { height: 32px; max-width: 140px; }
.rog-game-chip.has-logo.rog-game-chip--large .rog-game-chip-name { position: absolute; left: -9999px; }
.rog-game-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #c92516; flex: none; }
.rog-game-chip-dot--wargames   { background: #c92516; }
.rog-game-chip-dot--tcgA       { background: #3b82f6; }
.rog-game-chip-dot--tcgB       { background: #a855f7; }
.rog-game-chip-dot--boardgames { background: #22c55e; }
.rog-game-chip-dot--tavern     { background: #d5a43d; }
.rog-shelf-game { margin-bottom: 8px; }
.rog-shelf-game-logo { height: 48px; width: auto; max-width: 220px; object-fit: contain; display: block; }
@media (min-width: 768px) {
    .rog-shelf-game-logo { height: 64px; max-width: 300px; }
}

/* Events archive: the filterable list and its "filtered to a day" bar. */
.rog-events-list-hint { color: #9a9a9a; font-size: 0.9rem; margin: -4px 0 14px; }
.rog-events-filter-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #161616; border: 1px solid #2c2c2c; border-left: 3px solid #c92516; border-radius: 8px; padding: 10px 14px; margin: 0 0 18px; }
.rog-events-filter-label { color: #f0f0f0; font-weight: 700; }
.rog-events-filter-clear { background: transparent; border: 1px solid #3a3a3a; color: #d5a43d; border-radius: 999px; padding: 5px 14px; font-weight: 600; cursor: pointer; }
.rog-events-filter-clear:hover { border-color: #d5a43d; }
.rog-event-card[hidden] { display: none !important; }
.rog-events-none-on-day { color: #9a9a9a; }


/* -- Opening hours in the week strip --------------------------------------
   A line of its own across the top of the day, above that day's events. It
   was stacked inside the day column, which made that column taller than the
   times beside it and pushed the date out of line with its own events. */



/* A clock, so "17:00 - 22:00" reads as the shop's opening hours rather than
   as one more event time. */
.rog-cal-hours {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.3;
    color: #d7d7d7;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    padding: 2px 7px 2px 6px;
    white-space: nowrap;
}

.rog-cal-hours::before {
    content: '';
    width: 12px;
    height: 12px;
    flex: none;
    opacity: 0.85;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7d7d7' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.rog-cal-hours.is-shut {
    background: none;
    padding-left: 0;
    font-weight: 500;
    color: var(--rog-text-muted);
}

.rog-cal-hours-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--rog-gold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rog-week-cal li.is-shut { opacity: 0.68; }

.rog-week-cal li.is-special::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--rog-gold);
}

/* The Tavern staying open later. A tankard when no logo is set, so the line
   never reads as a bare time with nothing to attach it to. */
.rog-cal-tavern {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rog-accent);
    white-space: nowrap;
}

.rog-cal-tavern::before {
    content: '';
    width: 12px;
    height: 12px;
    flex: none;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee780a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9h9v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9z'/%3E%3Cpath d='M15 12h2.4a2.4 2.4 0 0 1 0 4.8H15'/%3E%3Cpath d='M6 9c0-1.9 1.4-2.9 2.9-2.9C9.4 4.9 10.5 4 12 4s2.5.9 3 2.1'/%3E%3C/svg%3E");
}

/* A real logo replaces the tankard rather than sitting beside it. */
.rog-cal-tavern.has-logo::before { display: none; }

.rog-cal-tavern-logo {
    height: 20px;
    width: auto;
    max-width: 56px;
    object-fit: contain;
    flex: none;
}

@media (max-width: 640px) {
    .rog-week-cal li { grid-template-columns: 76px 52px 1fr; }
    .rog-cal-hours { font-size: 0.7rem; }
    /* The shop's own hours stay; the Tavern extra is the first thing to go. */
    .rog-cal-tavern { display: none; }
}

/* Every bit of the week strip's motion is decoration; the panel works without
   it. Honour the setting rather than making the choice for someone. */
@media (prefers-reduced-motion: reduce) {
    .rog-day,
    .rog-day-caret,
    .rog-day-logo,
    .rog-day-event,
    .rog-day-note,
    .rog-day-openplay,
    .rog-day-name strong,
    .rog-day-event-title {
        transition: none !important;
        transition-delay: 0s !important;
    }
    .rog-day-fold[open] .rog-day-logo { transform: none; }
    .rog-day-event,
    .rog-day-note,
    .rog-day-openplay { opacity: 1; transform: none; }
}