/**
 * Places Thailand — Core Restaurant Stylesheet
 * v2.1.0 | TASK-P1-MOBILE-CARD-01
 *
 * Dual-theme design system:
 *   B2C (Tourist) — "Nomad Precision" Light Theme (Neo-Brutalism)
 *   B2B (Business) — "Cyber-Jungle" Dark Theme (for /for-business/ pages)
 *
 * Strategy: Mobile-First (base = 320px), then scale up.
 * Core Web Vitals target: LCP < 1.8s (no heavy JS, minimal repaints).
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES — Design Tokens
   ========================================================================== */

/* --- B2C Nomad Precision (Light — Default for Tier 0 public cards) --- */
:root {
    /* Backgrounds */
    --pt-bg-page:             #F8F6F0;
    --pt-bg-surface:          #FFFFFF;
    --pt-bg-surface-elevated: #F1F5F9;

    /* Typography */
    --pt-text-primary:   #0F172A;
    --pt-text-secondary: #475569;
    --pt-text-muted:     #94A3B8;

    /* Borders — Neo-Brutalism: hard 1.5px solid, no softness */
    --pt-border-hard:    1.5px solid #0F172A;
    --pt-border-subtle:  1px solid #E2E8F0;
    --pt-border-focus:   #2563EB;

    /* Brand accent colors */
    --pt-accent-blue:    #2563EB;   /* Primary CTA */
    --pt-accent-emerald: #10B981;   /* Emerald Verified Badge */
    --pt-accent-amber:   #F59E0B;   /* Paywall locks & Tier 0 alerts */
    --pt-accent-red:     #EF4444;   /* Errors / warnings */

    /* Neo-Brutalism shadows — hard offset, no blur */
    --pt-shadow-brutal-sm:  3px 3px 0px #0F172A;
    --pt-shadow-brutal-md:  4px 4px 0px #0F172A;
    --pt-shadow-brutal-lg:  6px 6px 0px #0F172A;

    /* Soft shadows (for images only) */
    --pt-shadow-soft:    0 4px 16px rgba(15, 23, 42, 0.10);

    /* Border radii — Neo-Brutalism uses minimal radius */
    --pt-radius-sm:   4px;
    --pt-radius-md:   6px;
    --pt-radius-lg:   8px;
    --pt-radius-full: 9999px;

    /* Typography */
    --pt-font-main:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pt-font-mono:  'JetBrains Mono', 'Fira Code', monospace;
}

/* --- B2B Cyber-Jungle Override (Dark — applied via .theme-b2b or body.for-business) --- */
.theme-b2b,
body.page-for-business {
    --pt-bg-page:             #0b0f19;
    --pt-bg-surface:          #131b2e;
    --pt-bg-surface-elevated: #1e293b;

    --pt-text-primary:   #f8fafc;
    --pt-text-secondary: #94a3b8;
    --pt-text-muted:     #64748b;

    --pt-border-hard:   1.5px solid rgba(16, 185, 129, 0.5);
    --pt-border-subtle: rgba(255, 255, 255, 0.08);
    --pt-border-focus:  #38bdf8;

    --pt-accent-blue:    #38bdf8;
    --pt-accent-emerald: #10b981;
    --pt-accent-amber:   #f59e0b;

    --pt-shadow-brutal-sm:  3px 3px 0px rgba(16, 185, 129, 0.6);
    --pt-shadow-brutal-md:  4px 4px 0px rgba(16, 185, 129, 0.6);
    --pt-shadow-brutal-lg:  6px 6px 0px rgba(16, 185, 129, 0.6);
}

/* ==========================================================================
   Google Fonts Import (Inter)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   Base Reset & Box Model
   ========================================================================== */
.restaurant-page *,
.restaurant-card--tile *,
.restaurant-grid * {
    box-sizing: border-box;
}

/* ==========================================================================
   ARCHIVE GRID CONTAINER (Mobile-first)
   ========================================================================== */
.restaurant-grid {
    display: grid;
    grid-template-columns: 1fr;           /* 1 col on mobile */
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    font-family: var(--pt-font-main);
}

/* 2 cols on tablet */
@media (min-width: 640px) {
    .restaurant-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        padding: 24px 20px;
    }
}

/* 3 cols on desktop */
@media (min-width: 1024px) {
    .restaurant-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

/* ==========================================================================
   TIER 0 COMPACT TILE CARD — Nomad Precision Neo-Brutalism
   Mobile-first, 5 conversion zones:
     1. Hero Image  2. Meta (name + badges)  3. Rating
     4. Amenity Chips  5. CTA Button
   ========================================================================== */
.restaurant-card--tile {
    background: var(--pt-bg-surface);
    border: var(--pt-border-hard);
    border-radius: var(--pt-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;

    /* Neo-Brutalism hard shadow */
    box-shadow: var(--pt-shadow-brutal-sm);

    /* Micro-animation on hover */
    transition: transform 0.15s ease, box-shadow 0.15s ease;

    /* Ensure tap target area >= 48px (mobile a11y) */
    min-height: 0;

    font-family: var(--pt-font-main);
    color: var(--pt-text-primary);
}

/* Hover: shift + deeper shadow = lifted brutalist card */
.restaurant-card--tile:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--pt-shadow-brutal-lg);
}

/* Focus-within for keyboard navigation */
.restaurant-card--tile:focus-within {
    outline: 2px solid var(--pt-border-focus);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   ZONE 1 — Hero Image (16:10 aspect, lazy-loaded)
   ------------------------------------------------------------------ */
.restaurant-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--pt-bg-surface-elevated);
    overflow: hidden;
    /* Hard bottom border separates media from body */
    border-bottom: var(--pt-border-hard);
}

.restaurant-card__media-link {
    display: block;
    width: 100%;
    height: 100%;
}

.restaurant-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.restaurant-card--tile:hover .restaurant-card__image {
    transform: scale(1.04);
}

/* Placeholder image — slightly desaturated */
.restaurant-card__image.is-placeholder {
    filter: grayscale(20%) opacity(0.8);
}

/* Score Badge (expert score overlay, bottom-right) */
.restaurant-card__score-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--pt-text-primary);
    color: var(--pt-bg-surface);
    border: 1.5px solid var(--pt-bg-surface);
    padding: 3px 8px;
    border-radius: var(--pt-radius-sm);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    box-shadow: 2px 2px 0px var(--pt-accent-amber);
}

.score-icon {
    font-size: 0.9rem;
}

.score-val {
    color: var(--pt-accent-amber);
}

/* Tier 0 — Paywall lock overlay (amber badge top-left) */
.restaurant-card__tier-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--pt-accent-amber);
    color: #FFFFFF;
    border: 1.5px solid #0F172A;
    padding: 3px 10px;
    border-radius: var(--pt-radius-sm);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 2px 2px 0px #0F172A;
}

/* Emerald Verified Badge (Tier 1+) */
.restaurant-card__verified-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--pt-accent-emerald);
    color: #FFFFFF;
    border: 1.5px solid #0F172A;
    padding: 3px 10px;
    border-radius: var(--pt-radius-sm);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 2px 2px 0px #0F172A;
}

/* ------------------------------------------------------------------
   ZONE 2 — Card Body: Meta, Tags, Name, Location
   ------------------------------------------------------------------ */
.restaurant-card__body {
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

/* Tag row: Category + Price */
.restaurant-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Brutalist badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--pt-radius-sm);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 1.5px solid currentColor;
    line-height: 1.4;
}

.badge--category {
    color: var(--pt-accent-blue);
    background: rgba(37, 99, 235, 0.08);
}

.badge--price {
    color: var(--pt-accent-amber);
    background: rgba(245, 158, 11, 0.10);
    font-weight: 800;
}

.badge--subtle {
    color: var(--pt-text-muted);
    background: transparent;
    border-color: var(--pt-text-muted);
    font-size: 0.68rem;
}

.badge--emerald {
    color: var(--pt-accent-emerald);
    background: rgba(16, 185, 129, 0.08);
}

/* Restaurant name (H2 in tile context) */
.restaurant-card__title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.3px;
}

/* On larger screens, slightly bigger */
@media (min-width: 640px) {
    .restaurant-card__title {
        font-size: 1.1rem;
    }
}

.restaurant-card__title-link {
    color: var(--pt-text-primary);
    text-decoration: none;
    /* Stretch link to full card width for easy mobile tap */
    display: block;
}

.restaurant-card__title-link:hover,
.restaurant-card__title-link:focus-visible {
    color: var(--pt-accent-blue);
    outline: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Location row */
.restaurant-card__location {
    font-size: 0.82rem;
    color: var(--pt-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

/* ------------------------------------------------------------------
   ZONE 3 — Rating Row
   ------------------------------------------------------------------ */
.restaurant-card__rating {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin: 0;
}

.rating-star {
    color: var(--pt-accent-amber);
    font-size: 0.95rem;
}

.rating-val {
    font-weight: 800;
    color: var(--pt-text-primary);
}

.rating-num {
    color: var(--pt-text-muted);
    font-size: 0.8rem;
}

/* ------------------------------------------------------------------
   ZONE 4 — Comfort / Amenity Chips (max 3 visible in tile)
   ------------------------------------------------------------------ */
.restaurant-card__amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
}

.amenity-chip {
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--pt-bg-surface-elevated);
    border: 1px solid #CBD5E1;
    border-radius: var(--pt-radius-sm);
    padding: 3px 7px;
    color: var(--pt-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   ZONE 5 — CTA Footer
   ------------------------------------------------------------------ */
.restaurant-card__footer {
    margin-top: auto;
    padding: 12px 16px 14px;
    border-top: var(--pt-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Primary view button */
.btn--card-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--pt-accent-blue);
    color: #FFFFFF;
    border: 1.5px solid #0F172A;
    border-radius: var(--pt-radius-sm);
    /* Neo-Brutalism hard shadow on button */
    box-shadow: 3px 3px 0px #0F172A;
    padding: 10px 16px;
    font-family: var(--pt-font-main);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    /* Minimum touch target 44px */
    min-height: 44px;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn--card-action:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px #0F172A;
}

.btn--card-action:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #0F172A;
}

.btn--card-action:focus-visible {
    outline: 3px solid var(--pt-border-focus);
    outline-offset: 2px;
}

/* "Claim Listing" button — Tier 0 only (amber style) */
.btn--claim {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--pt-bg-surface);
    color: var(--pt-text-primary);
    border: 1.5px solid #0F172A;
    border-radius: var(--pt-radius-sm);
    box-shadow: 3px 3px 0px var(--pt-accent-amber);
    padding: 9px 16px;
    font-family: var(--pt-font-main);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    min-height: 40px;
    gap: 6px;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn--claim:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px var(--pt-accent-amber);
    background: rgba(245, 158, 11, 0.06);
}

.btn--claim:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px var(--pt-accent-amber);
}

.btn--claim:focus-visible {
    outline: 3px solid var(--pt-accent-amber);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Tier 0 — Paywall Blur Overlay (for hidden content areas)
   ------------------------------------------------------------------ */
.paywall-overlay {
    position: relative;
    overflow: hidden;
}

/* The blurred content beneath */
.paywall-overlay__content {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
    /* Prevent screen readers from reading blurred content */
    aria-hidden: true;
}

/* Lock icon overlay on top */
.paywall-overlay__lock {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(248, 250, 252, 0.7);
    backdrop-filter: blur(2px);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--pt-text-secondary);
    text-align: center;
    padding: 8px;
}

.paywall-overlay__lock-icon {
    font-size: 1.4rem;
    color: var(--pt-accent-amber);
}

/* ------------------------------------------------------------------
   Tier 0 — Competitor Injection Block (alternatives list)
   ------------------------------------------------------------------ */
.tier0-competitors {
    background: #FFFBEB;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-top: 3px solid var(--pt-accent-amber);
    padding: 10px 14px;
    margin: 0 16px 12px;
    border-radius: 0 0 var(--pt-radius-sm) var(--pt-radius-sm);
}

.tier0-competitors__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #92400E;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tier0-competitors__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tier0-competitors__item a {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pt-accent-blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tier0-competitors__item a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ------------------------------------------------------------------
   Masked Contact (Tier 0) — shows +66 81 XXX-XX-XX style
   ------------------------------------------------------------------ */
.masked-contact {
    font-family: var(--pt-font-mono);
    font-size: 0.85rem;
    color: var(--pt-text-muted);
    letter-spacing: 0.5px;
    user-select: none;
}

/* ==========================================================================
   CANONICAL SINGLE VIEW — restaurant-page (single context)
   ========================================================================== */
.restaurant-page {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 16px;
    color: var(--pt-text-primary);
    font-family: var(--pt-font-main);
    line-height: 1.6;
    background: var(--pt-bg-page);
}

@media (min-width: 768px) {
    .restaurant-page {
        padding: 32px 24px;
    }
}

/* Hero Section */
.restaurant-hero {
    background: var(--pt-bg-surface);
    border: var(--pt-border-hard);
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
    box-shadow: var(--pt-shadow-brutal-md);
    margin-bottom: 24px;
}

.restaurant-hero__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--pt-bg-surface-elevated);
    overflow: hidden;
    border-bottom: var(--pt-border-hard);
}

.restaurant-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.restaurant-hero__content {
    padding: 20px 16px;
}

@media (min-width: 640px) {
    .restaurant-hero__content {
        padding: 28px 24px;
    }
}

.restaurant-hero__meta-top {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.restaurant-hero__title {
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 8px 0;
    color: var(--pt-text-primary);
    word-break: break-word;
    letter-spacing: -0.5px;
}

@media (min-width: 640px) {
    .restaurant-hero__title {
        font-size: 2.25rem;
    }
}

.restaurant-hero__local-name {
    font-size: 1.05rem;
    color: var(--pt-text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
}

.restaurant-hero__location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    color: var(--pt-text-secondary);
    margin-bottom: 14px;
}

.restaurant-hero__rating-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: var(--pt-border-subtle);
    font-size: 0.95rem;
}

.rating-stars {
    color: var(--pt-accent-amber);
    font-size: 1.1rem;
}

.rating-value {
    font-weight: 800;
    color: var(--pt-text-primary);
}

.rating-count {
    color: var(--pt-text-muted);
}

/* Sections */
.restaurant-section {
    margin-bottom: 24px;
}

.section-heading {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 14px 0;
    color: var(--pt-text-primary);
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: var(--pt-border-hard);
}

/* AI Snippet Card */
.snippet-card {
    background: var(--pt-bg-surface);
    border: var(--pt-border-hard);
    border-radius: var(--pt-radius-md);
    padding: 16px 20px;
    box-shadow: var(--pt-shadow-brutal-sm);
}

.snippet-card__header {
    margin-bottom: 8px;
}

.snippet-card__tag {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--pt-accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-snippet-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--pt-text-secondary);
}

/* Expert Verdict Card */
.expert-card {
    background: var(--pt-bg-surface);
    border: var(--pt-border-hard);
    border-radius: var(--pt-radius-md);
    padding: 20px;
    box-shadow: var(--pt-shadow-brutal-sm);
}

.expert-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: var(--pt-border-subtle);
}

.expert-card__title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.expert-card__title {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
    color: var(--pt-text-primary);
}

.expert-card__score {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    background: rgba(245, 158, 11, 0.1);
    border: 1.5px solid var(--pt-accent-amber);
    padding: 4px 12px;
    border-radius: var(--pt-radius-sm);
    box-shadow: 2px 2px 0px var(--pt-accent-amber);
}

.score-num {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--pt-accent-amber);
}

.score-max {
    font-size: 0.82rem;
    color: var(--pt-text-muted);
    margin-left: 1px;
}

.expert-card__body p {
    margin: 0;
    color: var(--pt-text-secondary);
    font-size: 0.97rem;
}

/* Comfort Amenities Grid */
.comfort-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 480px) {
    .comfort-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

.comfort-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--pt-bg-surface);
    border: var(--pt-border-subtle);
    border-left: 3px solid var(--pt-accent-emerald);
    border-radius: var(--pt-radius-sm);
    padding: 10px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--pt-text-primary);
}

.comfort-pill__icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Contacts & Info */
.contacts-wrapper {
    background: var(--pt-bg-surface);
    border: var(--pt-border-hard);
    border-radius: var(--pt-radius-md);
    padding: 20px;
    box-shadow: var(--pt-shadow-brutal-sm);
}

.contacts-info-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.contact-entry {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.contact-entry__icon {
    font-size: 1.2rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.contact-entry__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pt-text-muted);
    margin-bottom: 2px;
}

.contact-entry__value {
    font-size: 0.95rem;
    color: var(--pt-text-primary);
}

.contact-entry__value a {
    color: var(--pt-accent-blue);
    text-decoration: none;
    font-weight: 600;
}

.contact-entry__value a:hover,
.contact-entry__value a:focus {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.contacts-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 16px;
    border-top: var(--pt-border-subtle);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--pt-radius-sm);
    font-family: var(--pt-font-main);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    border: 1.5px solid #0F172A;
    min-height: 44px;
}

.btn:focus-visible {
    outline: 3px solid var(--pt-border-focus);
    outline-offset: 2px;
}

.btn--primary {
    background: var(--pt-accent-blue);
    color: #ffffff;
    box-shadow: var(--pt-shadow-brutal-sm);
}

.btn--primary:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--pt-shadow-brutal-md);
}

.btn--primary:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #0F172A;
}

.btn--secondary {
    background: var(--pt-bg-surface);
    color: var(--pt-text-primary);
    box-shadow: var(--pt-shadow-brutal-sm);
}

.btn--secondary:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--pt-shadow-brutal-md);
    background: var(--pt-bg-surface-elevated);
}

.btn--social {
    background: transparent;
    color: var(--pt-text-secondary);
    border-color: #CBD5E1;
    box-shadow: 2px 2px 0px #CBD5E1;
    font-size: 0.82rem;
    padding: 8px 14px;
    min-height: 38px;
}

.btn--social:hover {
    color: var(--pt-text-primary);
    border-color: var(--pt-text-primary);
    box-shadow: 2px 2px 0px var(--pt-text-primary);
}

/* FAQ Accordion */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-accordion__item {
    background: var(--pt-bg-surface);
    border: var(--pt-border-hard);
    border-radius: var(--pt-radius-sm);
    overflow: hidden;
    box-shadow: 2px 2px 0px #E2E8F0;
}

.faq-accordion__question {
    padding: 14px 18px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--pt-text-primary);
    cursor: pointer;
    list-style: none;
    position: relative;
    user-select: none;
    font-family: var(--pt-font-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.faq-accordion__question::-webkit-details-marker {
    display: none;
}

.faq-accordion__question::after {
    content: "+";
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--pt-text-muted);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

details[open] .faq-accordion__question::after {
    content: "−";
}

.faq-accordion__answer {
    padding: 0 18px 16px 18px;
    color: var(--pt-text-secondary);
    font-size: 0.95rem;
    border-top: var(--pt-border-subtle);
}

/* B2B Card (Tier 1 Authorized — dark remains for contrast) */
.b2b-card {
    background: var(--pt-bg-surface);
    border: var(--pt-border-hard);
    border-top: 4px solid var(--pt-accent-blue);
    border-radius: var(--pt-radius-md);
    padding: 24px;
    box-shadow: var(--pt-shadow-brutal-sm);
}

.b2b-card__header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: var(--pt-border-subtle);
}

.b2b-card__tag {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--pt-accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 6px;
}

.b2b-card__title {
    font-size: 1.2rem;
    margin: 0;
    font-weight: 800;
    color: var(--pt-text-primary);
}

.b2b-card__block {
    margin-bottom: 18px;
}

.b2b-card__block h3 {
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: var(--pt-accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.b2b-card__text {
    font-size: 0.95rem;
    color: var(--pt-text-secondary);
}

.b2b-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding-top: 14px;
    border-top: var(--pt-border-subtle);
}

.metric-item {
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    border: var(--pt-border-subtle);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-bg-surface-elevated);
}

.metric-item__label {
    color: var(--pt-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
}

.metric-item__val {
    color: var(--pt-text-primary);
    font-weight: 700;
    font-size: 0.95rem;
}

/* ==========================================================================
   B2C GLOBAL LIGHT RESET (Nomad Precision — enforced for body)
   Ensures that B2C pages (except /for-business/) never get a dark theme
   from third-party CSS or plugins.
   ========================================================================== */
body:not(.page-for-business) {
    background-color: var(--pt-bg-page) !important; /* #F8FAFC */
    color: var(--pt-text-primary) !important;        /* #0F172A */
}

body:not(.page-for-business) .site-main,
body:not(.page-for-business) .restaurant-directory {
    background-color: var(--pt-bg-page);
}

/* ==========================================================================
   LIVE BOOKING COUNTER (Compact Header Variant)
   Component: components/live-booking-counter.html
   Design: Nomad Precision — Obsidian Dark pill on light background
   ========================================================================== */
.places-live-counter-wrapper {
    display: flex;
    justify-content: center;
    margin: 24px 0 20px 0;
    padding: 0 16px;
    width: 100%;
    box-sizing: border-box;
}

.places-live-bar-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 640px;
    width: 100%;
}

/* 1. Main WhatsApp Capsule Pill (Screenshot 1) */
.places-wa-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #08101d; /* Deep obsidian navy */
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-radius: 16px;
    padding: 10px 20px;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45), 0 0 16px rgba(16, 185, 129, 0.12);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.places-wa-pill:hover {
    border-color: rgba(16, 185, 129, 0.7);
    box-shadow: 0 12px 28px -5px rgba(0, 0, 0, 0.55), 0 0 22px rgba(16, 185, 129, 0.2);
}

.places-wa-pill__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.places-wa-pill__indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

.places-wa-pill__core {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #10b981;
}

.places-wa-pill__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: rgba(16, 185, 129, 0.35);
    animation: waProofPulseRing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.places-wa-pill__status {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 800;
    color: #10b981;
    letter-spacing: 0.08em;
}

.places-wa-pill__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex-grow: 1;
    min-width: 0;
}

.places-wa-pill__title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.places-wa-pill__sub {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: #8da4be;
    line-height: 1.35;
    margin-top: 1px;
}

.places-wa-pill__perks {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
}

.places-wa-pill__stat-row {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
    line-height: 1.25;
}

.places-wa-pill__stat-num {
    font-family: "JetBrains Mono", Consolas, -apple-system, monospace;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    transition: color 0.3s ease, transform 0.3s ease;
}

.places-wa-pill__stat-num.is-pulsing {
    color: #34d399;
    transform: scale(1.15);
}

.places-wa-pill__stat-plus {
    color: #10b981;
    font-weight: 800;
    font-size: 13px;
    margin-left: -3px;
}

.places-wa-pill__stat-label {
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
}

.places-wa-pill__dev-badge {
    display: inline-flex;
    align-items: center;
    font-family: "JetBrains Mono", Consolas, -apple-system, monospace;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.places-wa-pill__perk-row {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: #2dd4bf;
    line-height: 1.35;
    letter-spacing: -0.01em;
    white-space: nowrap;
    margin-top: 2px;
}

/* 2. Connected B2B FOMO Bridge (Screenshot 2) */
.places-fomo-bridge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(8, 16, 29, 0.92);
    border: 1px solid rgba(16, 185, 129, 0.28);
    border-radius: 6px;
    padding: 6px 14px;
    text-decoration: none;
    font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
    font-size: 12px;
    letter-spacing: 0.03em;
    color: #cbd5e1;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.places-fomo-bridge:hover {
    background: rgba(6, 25, 34, 0.98);
    border-color: #10b981;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.28);
    transform: translateY(-1px);
}

.places-fomo-bridge__dot {
    color: #10b981;
    font-size: 13px;
    line-height: 1;
}

.places-fomo-bridge__text {
    color: #cbd5e1;
}

.places-fomo-bridge__text strong {
    color: #34d399;
    font-weight: 700;
}

.places-fomo-bridge__cta {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 3px;
    padding: 2px 6px;
    margin-left: 4px;
    letter-spacing: 0.05em;
    transition: background 0.2s ease, color 0.2s ease;
}

.places-fomo-bridge:hover .places-fomo-bridge__cta {
    background: #10b981;
    color: #03141e;
}

@media (max-width: 640px) {
    .places-wa-pill {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 14px 16px;
        gap: 10px;
        border-radius: 14px;
    }
    .places-wa-pill__info {
        align-items: center;
        text-align: center;
    }
    .places-wa-pill__perks {
        align-items: center;
        text-align: center;
    }
    .places-wa-pill__perk-row {
        white-space: normal;
    }
    .places-fomo-bridge {
        flex-wrap: wrap;
        text-align: center;
        padding: 7px 12px;
        font-size: 11px;
    }
}

/* ==========================================================================
   NOMAD PRECISION BENTO — CANONICAL SINGLE RESTAURANT PAGE
   ========================================================================== */

.restaurant-page--single {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 16px 60px;
    font-family: var(--pt-font-main);
    color: var(--pt-text-primary);
}

/* --- 1. Hero Header --- */
.restaurant-hero-header {
    margin-bottom: 20px;
}

.restaurant-hero-header__top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

/* Trust Badges */
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: var(--pt-radius-md);
    border: var(--pt-border-hard);
    box-shadow: var(--pt-shadow-brutal-sm);
}

.trust-badge__icon {
    font-size: 1.35rem;
    line-height: 1;
}

.trust-badge__content {
    display: flex;
    flex-direction: column;
}

.trust-badge__label {
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.trust-badge__sub {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.85;
}

.trust-badge.badge--tier2 {
    background: #0F172A;
    color: #F59E0B;
    border-color: #F59E0B;
    box-shadow: 3px 3px 0px #F59E0B;
}

.trust-badge.badge--tier1 {
    background: #ECFDF5;
    color: #065F46;
    border-color: #10B981;
    box-shadow: 3px 3px 0px #10B981;
}

.trust-badge.badge--tier0 {
    background: #F8FAFC;
    color: #475569;
    border-color: #94A3B8;
    box-shadow: 2px 2px 0px #94A3B8;
}

/* Ratings Cluster */
.ratings-cluster {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--pt-radius-md);
    border: var(--pt-border-hard);
    box-shadow: 2px 2px 0px #0F172A;
    font-weight: 700;
    font-size: 0.88rem;
}

.rating-pill--public {
    background: #FFFBEB;
    border-color: #0F172A;
    color: #92400E;
}

.rating-pill__star {
    font-size: 1rem;
}

.rating-pill__value {
    font-weight: 900;
}

.rating-pill__count {
    color: #78350F;
    font-weight: 500;
    font-size: 0.78rem;
}

.rating-pill--expert {
    background: #EEF2FF;
    border-color: #0F172A;
    color: #3730A3;
}

.rating-pill__score {
    font-weight: 900;
    font-size: 0.95rem;
}

.rating-pill__max {
    font-size: 0.75rem;
    color: #6366F1;
}

/* Title & Meta */
.restaurant-hero-header__title {
    font-size: clamp(1.8rem, 3.2vw, 2.7rem);
    font-weight: 900;
    margin: 8px 0 4px;
    color: #0F172A;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.restaurant-hero-header__local-name {
    font-size: 1.15rem;
    color: #64748B;
    margin-bottom: 8px;
    font-weight: 500;
}

.restaurant-hero-header__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.92rem;
    color: #475569;
    font-weight: 600;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* --- 2. Bento Photo Gallery (5 Photos on 1 Screen) --- */
.restaurant-bento-gallery {
    margin-bottom: 20px;
}

.bento-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: 205px 205px;
    gap: 12px;
    height: 422px;
    border-radius: var(--pt-radius-lg);
}

.bento-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    border: var(--pt-border-hard);
    box-shadow: 2px 2px 0px #0F172A;
    background: #0F172A;
}

.bento-item--hero {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.bento-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.bento-item:hover .bento-item__img {
    transform: scale(1.04);
}

.bento-item__hero-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(15, 23, 42, 0.88);
    color: #FFFFFF;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bento-item__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    cursor: pointer;
}

.bento-item__overlay:hover {
    background: rgba(15, 23, 42, 0.7);
}

.bento-item__overlay-btn {
    background: #FFFFFF;
    color: #0F172A;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 8px 14px;
    border-radius: 4px;
    border: 1.5px solid #0F172A;
    box-shadow: 2px 2px 0px #0F172A;
}

/* Mobile 1-screen Bento Adaptation */
@media (max-width: 768px) {
    .bento-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 210px 75px;
        height: 293px;
        gap: 8px;
    }
    .bento-item--hero {
        grid-column: 1 / 5;
        grid-row: 1 / 2;
    }
    .bento-item:not(.bento-item--hero) {
        height: 75px;
    }
}

/* --- 3. Sticky Action Bar --- */
.restaurant-action-bar {
    position: sticky;
    top: 12px;
    z-index: 40;
    margin-bottom: 24px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: var(--pt-border-hard);
    border-radius: 10px;
    box-shadow: var(--pt-shadow-brutal-sm);
}

.action-bar-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.btn-action--whatsapp {
    flex: 1 1 260px;
    background: #25D366;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.98rem;
    padding: 12px 20px;
    border-radius: 6px;
    border: var(--pt-border-hard);
    box-shadow: 2px 2px 0px #0F172A;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s ease;
    text-align: center;
}

.btn-action--whatsapp:hover {
    background: #20BA5C;
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0px #0F172A;
    color: #FFFFFF;
}

.btn-action--whatsapp.tier0-prompt {
    background: #0284C7;
}

.action-bar-secondary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-action--icon {
    padding: 10px 14px;
    background: #FFFFFF;
    color: #0F172A;
    font-weight: 700;
    font-size: 0.85rem;
    border: var(--pt-border-hard);
    border-radius: 6px;
    box-shadow: 2px 2px 0px #0F172A;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.btn-action--icon:hover {
    background: #F1F5F9;
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0px #0F172A;
    color: #0F172A;
}

/* --- 4. Two-Column Layout Grid --- */
.restaurant-layout-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
}

@media (max-width: 960px) {
    .restaurant-layout-grid {
        grid-template-columns: 1fr;
    }
}

/* Sections */
.restaurant-section {
    margin-bottom: 28px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 2px solid #0F172A;
    padding-bottom: 8px;
}

.section-header__title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-heading {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
}

.section-header__hint {
    font-size: 0.78rem;
    color: #64748B;
    font-weight: 600;
}

/* --- 5. 10 Comfort Criteria Matrix --- */
.comfort-matrix-10 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    .comfort-matrix-10 {
        grid-template-columns: 1fr;
    }
}

.comfort-box {
    padding: 12px 14px;
    border-radius: var(--pt-radius-md);
    transition: transform 0.15s ease;
}

.comfort-box__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
}

.comfort-box__icon {
    font-size: 1.15rem;
    line-height: 1;
}

.comfort-box__name {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 1;
}

.comfort-box__pill {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.comfort-box__value {
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.3;
    margin-bottom: 2px;
}

.comfort-box__desc {
    font-size: 0.78rem;
    line-height: 1.35;
}

/* Verified Variant (Green) */
.comfort-box--verified {
    background: #F0FDF4;
    border: 1.5px solid #22C55E;
    box-shadow: 2px 2px 0px #16A34A;
    color: #0F172A;
}

.comfort-box--verified .comfort-box__name {
    color: #15803D;
}

.comfort-box--verified .comfort-box__pill {
    background: #DCFCE7;
    color: #15803D;
    border: 1px solid #86EFAC;
}

.comfort-box--verified .comfort-box__value {
    color: #166534;
}

.comfort-box--verified .comfort-box__desc {
    color: #374151;
}

/* Unknown Variant (Grey) */
.comfort-box--unknown {
    background: #F8FAFC;
    border: 1.5px dashed #CBD5E1;
    box-shadow: none;
    opacity: 0.85;
}

.comfort-box--unknown .comfort-box__icon {
    opacity: 0.45;
}

.comfort-box--unknown .comfort-box__name {
    color: #64748B;
}

.comfort-box--unknown .comfort-box__pill {
    background: #F1F5F9;
    color: #64748B;
    border: 1px dashed #CBD5E1;
}

.comfort-box--unknown .comfort-box__value {
    color: #64748B;
    font-style: italic;
}

.comfort-box--unknown .comfort-box__desc {
    color: #94A3B8;
}

/* --- 6. Editorial Verdict Block --- */
.verdict-card {
    background: #FFFFFF;
    border: var(--pt-border-hard);
    border-radius: 8px;
    box-shadow: var(--pt-shadow-brutal-sm);
    padding: 20px;
}

.verdict-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.verdict-card__title {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
    color: #0F172A;
}

.verdict-card__body {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #334155;
    margin: 0;
}

/* --- 7. Fail-Closed Competitor Ad Injection (Tier 0) --- */
.competitor-card {
    background: #FFFBEB;
    border: 1.5px solid #F59E0B;
    border-radius: 8px;
    box-shadow: 3px 3px 0px #F59E0B;
    padding: 20px;
}

.competitor-tag {
    display: inline-block;
    background: #F59E0B;
    color: #0F172A;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.competitor-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 14px;
    color: #78350F;
}

.competitor-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.competitor-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid #FCD34D;
    border-radius: 6px;
    text-decoration: none;
    color: #0F172A;
    transition: all 0.15s ease;
}

.competitor-item:hover {
    border-color: #B45309;
    transform: translateX(3px);
    box-shadow: 2px 2px 0px #B45309;
}

.competitor-item__icon {
    font-size: 1.2rem;
}

.competitor-item__details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.competitor-item__name {
    font-size: 0.92rem;
    font-weight: 800;
    color: #0F172A;
}

.competitor-item__meta {
    font-size: 0.75rem;
    color: #92400E;
    font-weight: 600;
}

.competitor-item__arrow {
    font-weight: 800;
    color: #B45309;
}

.tier0-b2b-callout {
    margin-top: 16px;
    padding: 14px;
    background: #FFFFFF;
    border: 1.5px dashed #0F172A;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tier0-b2b-callout__text strong {
    font-size: 0.92rem;
    color: #0F172A;
    display: block;
    margin-bottom: 4px;
}

.tier0-b2b-callout__text p {
    margin: 0;
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.4;
}

.btn-claim-upgrade {
    display: inline-block;
    background: #0F172A;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 10px 14px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s ease;
}

.btn-claim-upgrade:hover {
    background: #2563EB;
    color: #FFFFFF;
}

/* --- 8. Sidebar Widgets --- */
.sidebar-card {
    background: #FFFFFF;
    border: var(--pt-border-hard);
    border-radius: 8px;
    box-shadow: var(--pt-shadow-brutal-sm);
    padding: 20px;
    margin-bottom: 20px;
}

.sidebar-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.sidebar-card__title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
}

.sidebar-card__subtitle {
    font-size: 0.8rem;
    color: #64748B;
    margin: 0 0 14px;
    line-height: 1.35;
}

/* Guides Widget */
.guides-widget-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guide-widget-item {
    display: block;
    padding: 12px;
    border-radius: 6px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    text-decoration: none;
    transition: all 0.15s ease;
}

.guide-widget-item:hover {
    background: #FFFFFF;
    border-color: #0F172A;
    transform: translate(-2px, -2px);
    box-shadow: 2px 2px 0px #0F172A;
}

.guide-widget-item__badge {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 4px;
}

.guide-widget-item__title {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.3;
    margin-bottom: 4px;
}

.guide-widget-item__link {
    font-size: 0.78rem;
    font-weight: 700;
    color: #2563EB;
}

/* Location / Info Widget */
.info-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.88rem;
}

.info-row__icon {
    font-size: 1.1rem;
    line-height: 1.2;
}

.info-row__content {
    display: flex;
    flex-direction: column;
}

.info-row__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94A3B8;
}

.info-row__val {
    font-weight: 600;
    color: #1E293B;
    line-height: 1.35;
}

.sidebar-maps-cta {
    margin-top: 14px;
}

.btn-maps-full {
    display: block;
    text-align: center;
    background: #F1F5F9;
    color: #0F172A;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 10px;
    border-radius: 6px;
    border: var(--pt-border-hard);
    box-shadow: 2px 2px 0px #0F172A;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-maps-full:hover {
    background: #FFFFFF;
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0px #0F172A;
    color: #0F172A;
}

/* Claim Sidebar */
.sidebar-card--claim {
    background: #FFFBEB;
    border-color: #F59E0B;
}

.claim-badge {
    display: inline-block;
    background: #F59E0B;
    color: #0F172A;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.sidebar-card--claim h4 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 800;
    color: #78350F;
}

.sidebar-card--claim p {
    font-size: 0.8rem;
    color: #92400E;
    line-height: 1.4;
    margin: 0 0 12px;
}

.btn-claim-sidebar {
    display: block;
    text-align: center;
    background: #2563EB;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 10px;
    border-radius: 4px;
    border: var(--pt-border-hard);
    box-shadow: 2px 2px 0px #0F172A;
    text-decoration: none;
    transition: background 0.15s ease;
}

.btn-claim-sidebar:hover {
    background: #1D4ED8;
    color: #FFFFFF;
}

/* ==========================================================================
   Places Thailand — V3 Restaurant Card & Single View Styles (B2C Nomad Precision)
   ========================================================================== */

/* Single Page Container */
.restaurant-page--single {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 0 48px;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #0F172A;
    line-height: 1.5;
}

/* 1. Hero Block */
.v3-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #0B0F19;
    margin-bottom: 1.75rem;
    padding: 2.25rem 2rem;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px -4px rgba(11, 15, 25, 0.12);
}

.v3-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    color: #E2E8F0;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.v3-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F59E0B;
    display: inline-block;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.v3-hero__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.5rem;
    color: #FFFFFF;
    letter-spacing: -0.025em;
}

.v3-hero__local-name {
    font-size: 1.05rem;
    color: #94A3B8;
    margin: 0 0 1.25rem;
    font-weight: 400;
}

.v3-identity {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1.25rem;
}

.v3-identity span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.825rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.07);
    color: #F8FAFC;
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(4px);
}

/* 2. Action Bar */
.v3-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 1.25rem 0 1.75rem;
}

.v3-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: #1E293B;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    transition: all 0.2s ease;
}

.v3-action:hover {
    transform: translateY(-2px);
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    background: #FFFFFF;
    color: #0F172A;
}

/* 3. Section Wrapper */
.v3-section {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
    padding: 1.75rem 2rem;
    margin-bottom: 1.75rem;
}

.v3-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748B;
    margin-bottom: 0.4rem;
}

.v3-section-title h2,
.v3-comfort__head h2,
.v3-location__title h2 {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.02em;
}

/* 4. Comfort Criteria Grid & Details Accordion */
.v3-comfort__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.v3-comfort__summary {
    display: inline-flex;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
}

.v3-comfort__summary span:first-child {
    color: #065F46;
    background: #ECFDF5;
    padding: 5px 12px;
    border-radius: 9999px;
    border: 1px solid #A7F3D0;
}

.v3-comfort__summary span:last-child {
    color: #92400E;
    background: #FFFBEB;
    padding: 5px 12px;
    border-radius: 9999px;
    border: 1px solid #FDE68A;
}

.v3-comfort__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

details.v3-criterion {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}

details.v3-criterion:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
}

details.v3-criterion[open] {
    background: #FFFFFF;
    border-color: #94A3B8;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

details.v3-criterion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

details.v3-criterion summary::-webkit-details-marker {
    display: none;
}

.v3-criterion__icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.v3-criterion__copy {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.v3-criterion__copy strong {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0F172A;
}

.v3-criterion__copy span {
    font-size: 0.75rem;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v3-criterion__state {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.v3-criterion--verified .v3-criterion__state {
    background: #10B981;
    color: #FFFFFF;
}

.v3-criterion--unknown .v3-criterion__state {
    background: #E2E8F0;
    color: #475569;
}

details.v3-criterion p {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.825rem;
    color: #475569;
    line-height: 1.5;
}

.v3-comfort__hint {
    font-size: 0.75rem;
    color: #94A3B8;
    margin: 14px 0 0;
    text-align: center;
    font-style: italic;
}

/* 5. WhatsApp Booking Block */
.v45-whatsapp-booking {
    margin-bottom: 1.75rem;
}

.v45-whatsapp-booking__card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
    transition: all 0.2s ease;
}

.v45-whatsapp-booking--disabled .v45-whatsapp-booking__card {
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    box-shadow: none;
    opacity: 0.85;
}

.v45-whatsapp-booking__icon-wrap {
    font-size: 1.5rem;
    line-height: 1;
}

.v45-whatsapp-booking__copy {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.v45-whatsapp-booking__copy strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0F172A;
}

.v45-whatsapp-booking__copy span {
    font-size: 0.8rem;
    color: #64748B;
}

.v45-whatsapp-booking__status {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #94A3B8;
    margin-top: 6px;
    text-align: center;
}

/* 6. Location & Opening Hours (Split 50/50 Dual Grid) */
.v3-visit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 1.75rem;
    align-items: stretch;
}

.v3-location-box,
.v3-hours-box {
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
}

/* Location Box */
.v3-location-box__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    flex-grow: 1;
    margin-top: 1rem;
}

.v3-location-box__address {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}

.v3-location-box__pin {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.v3-location-box__text small {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748B;
    margin-bottom: 4px;
}

.v3-location-box__text strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.45;
}

.v3-location-box__sub {
    display: block;
    font-size: 0.8rem;
    color: #64748B;
    margin-top: 4px;
}

.v3-location-box__map-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    background: #EFF6FF;
    color: #1D4ED8;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #BFDBFE;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.v3-location-box__map-btn:hover {
    background: #DBEAFE;
    border-color: #93C5FD;
    color: #1E40AF;
    transform: translateY(-1px);
}

.v3-location-box__map-btn .v3-arrow {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.v3-location-box__map-btn:hover .v3-arrow {
    transform: translate(2px, -2px);
}

/* Hours Box with Mini Cards Grid */
.v3-hours-box__content {
    flex-grow: 1;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.v3-hours-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.v3-hours-card {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    transition: all 0.15s ease;
}

.v3-hours-card:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
}

.v3-hours-card--today {
    background: #ECFDF5;
    border-color: #86EFAC;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.12);
}

.v3-hours-card--closed {
    opacity: 0.65;
}

.v3-hours-card:last-child:nth-child(odd) {
    grid-column: span 2;
}

.v3-hours-card__day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.v3-hours-card__day strong {
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
}

.v3-hours-card--today .v3-hours-card__day strong {
    color: #065F46;
}

.v3-hours-card__badge {
    font-size: 0.65rem;
    font-weight: 700;
    color: #047857;
    background: #A7F3D0;
    padding: 1px 6px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.v3-hours-card__time {
    font-size: 0.78rem;
    font-weight: 600;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v3-hours-card--today .v3-hours-card__time {
    color: #064E3B;
    font-weight: 700;
}

.v3-hours-raw {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}

.v3-hours-empty {
    font-size: 0.85rem;
    color: #94A3B8;
    margin: 0;
    text-align: center;
    font-style: italic;
}

/* 7. Useful Details Grid */
.v3-useful__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.v3-fact {
    display: flex;
    flex-direction: column;
    padding: 14px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
}

.v3-fact span {
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.v3-fact small {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #64748B;
    font-weight: 700;
    margin-bottom: 2px;
}

.v3-fact strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0F172A;
}

/* 8. Guides & Alternatives */
.v3-guides__grid,
.v3-alternatives__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.v3-guide {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    text-decoration: none;
    color: #0F172A;
    transition: all 0.2s ease;
}

.v3-guide:hover {
    transform: translateY(-2px);
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    background: #FFFFFF;
}

.v3-guide span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #D97706;
}

.v3-guide strong {
    font-size: 0.925rem;
    font-weight: 600;
    line-height: 1.4;
    color: #0F172A;
}

.v3-guide small {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2563EB;
    margin-top: auto;
}

.v3-alternative {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    text-decoration: none;
    color: #0F172A;
    transition: all 0.15s ease;
}

.v3-alternative:hover {
    border-color: #2563EB;
    background: #F8FAFC;
}

.v3-alternative strong {
    font-size: 0.875rem;
    font-weight: 600;
    flex-grow: 1;
}

/* 9. Claim & Owner Footer */
.v3-owner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 24px 28px;
    background: #0B0F19;
    border-radius: 20px;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 2rem;
    box-shadow: 0 12px 32px -4px rgba(11, 15, 25, 0.12);
}

.v3-owner__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #F59E0B;
    margin-bottom: 6px;
}

.v3-owner__info strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 6px;
}

.v3-owner__info p {
    margin: 0;
    font-size: 0.85rem;
    color: #94A3B8;
    max-width: 500px;
    line-height: 1.5;
}

.v3-owner__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #2563EB;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.925rem;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.v3-owner__btn:hover {
    transform: translateY(-2px);
    background: #1D4ED8;
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .v3-visit-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .v3-hero {
        padding: 1.5rem 1.25rem;
        border-radius: 16px;
    }
    .v3-hero__title {
        font-size: 1.65rem;
    }
    .v3-actions {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 6px;
        margin: 1rem 0 1.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .v3-actions::-webkit-scrollbar {
        display: none;
    }
    .v3-action {
        flex: 0 0 auto;
        padding: 8px 14px;
        font-size: 0.825rem;
    }
    .v3-section {
        padding: 1.25rem;
        border-radius: 16px;
    }
    .v3-comfort__grid {
        grid-template-columns: 1fr;
    }
    .v3-owner {
        flex-direction: column;
        align-items: stretch;
        padding: 1.5rem;
    }
    .v3-owner__btn {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .v3-hours-grid {
        grid-template-columns: 1fr;
    }
}