/*
Theme Name: German Beverage Co.
Theme URI: https://germanbev.co.th
Author: German Beverage Co., Ltd.
Author URI: https://germanbev.co.th
Description: Gutenberg-editable launch site for German Beverage Co. / fritz-kola Thailand. Sections are block patterns — edit, reorder, add, delete in Pages → Home. Now ships official fritz-kola 0.33 l on-black packshots and Hamburg lifestyle photography. v2.4.8 makes Range section bottle cards link to per-product detail pages (created separately on germanbev.co.th at /fritz-kola-original/ etc.), with a hover lift + "See more" chip. v2.4.9 fixes the header/footer nav anchors (Range, Pre-order, Legal Notice, logo) so they point back to the home-page sections (/#range) on product detail pages instead of dead same-page anchors. v2.5.0 applies fritz HQ's official brand rules (International Brand Training 2026): product/brand names fully lowercase (Range cards + headlines), fritz-voice headlines all-lowercase ending with a period, and the fritz-kola wordmark in white/black only (removed the red "fritz" in the hero). LINE OA Verified Account compliant.
Version: 2.5.0
License: Proprietary
Text Domain: germanbev
*/

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --black: #0a0a0a;
    --red: #c8102e;
    --gold: #f0c030;
    --white: #ffffff;
    --off-white: #f5f5f0;
    --dark-grey: #1a1a1a;
    --mid-grey: #333333;
    --light-grey: #888888;
    --font-sans: 'Karla', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'fritz-kola', 'Karla', 'Helvetica Neue', Arial, sans-serif;
    --max-width: 1100px;
    --section-pad: 100px 24px;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--black);
    color: var(--white);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* =============================================
   NAVIGATION
   ============================================= */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(10,10,10,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(240,192,48,0.15);
    transition: background 0.3s;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav-logo-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    border-radius: 6px;
}

.nav-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}

.nav-fritz-svg {
    display: block;
    flex-shrink: 0;
}

.nav-wordmark {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--white);
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: block;
}

.nav-wordmark-thai {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.5);
    line-height: 1;
    letter-spacing: 0.02em;
    display: block;
    margin-top: 3px;
}

.nav-logo-subtext {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    align-self: flex-end;
    padding-bottom: 2px;
}

.nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
}

.nav-links a {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--gold);
}

.nav-cta {
    background: var(--red);
    color: var(--white) !important;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: 600 !important;
    transition: background 0.2s !important;
}

.nav-cta:hover {
    background: #e01030 !important;
    color: var(--white) !important;
}

.nav-line-btn {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.nav-line-ghost {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #06C755;
    color: #06C755;
    background: transparent;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.nav-line-ghost:hover {
    background: rgba(6,199,85,0.12);
    color: #06C755;
}

.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
}

.nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: all 0.3s;
}

/* =============================================
   HERO
   ============================================= */
#hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 24px 80px;
    position: relative;
    overflow: hidden;
    background: var(--black);
}

.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 60% 40%, rgba(200,16,46,0.18) 0%, transparent 65%),
        radial-gradient(ellipse at 20% 80%, rgba(240,192,48,0.1) 0%, transparent 55%),
        linear-gradient(180deg, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.82) 60%, rgba(10,10,10,0.92) 100%),
        url('assets/images/lifestyle/hero-bg.jpg') center/cover no-repeat,
        var(--black);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-text {
    max-width: 540px;
}

.hero-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(240,192,48,0.4);
    padding: 5px 14px;
    border-radius: 2px;
    margin-bottom: 24px;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    color: var(--white);
    /* The bundled fritz-kola display font is a brand subset — it only has
       lowercase glyphs. Forcing lowercase so capital letters like the T in
       "Thailand" render in the same font as the rest of the word, and
       matches fritz-kola's own lowercase brand treatment. The DOM keeps
       proper casing for accessibility + SEO. */
    text-transform: lowercase;
}

.hero-title .brand-red {
    color: var(--red);
}

.hero-title .brand-gold {
    color: var(--gold);
}

.hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 16px;
    line-height: 1.7;
    font-weight: 400;
}

.hero-launch-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(200,16,46,0.15);
    border: 1px solid rgba(200,16,46,0.4);
    padding: 12px 20px;
    border-radius: 6px;
    margin-bottom: 36px;
    font-size: 0.85rem;
}

.hero-launch-badge .pulse {
    width: 8px;
    height: 8px;
    background: var(--red);
    border-radius: 50%;
    animation: pulse 1.8s infinite;
    flex-shrink: 0;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red);
    color: var(--white);
    padding: 14px 28px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background 0.2s, transform 0.15s;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background: #e01030;
    transform: translateY(-1px);
    color: var(--white);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--white);
    padding: 14px 28px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.25);
    transition: border-color 0.2s, color 0.2s, transform 0.15s;
    cursor: pointer;
}

.btn-secondary:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-1px);
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero-logo-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-logo-ring {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    animation: rotate 24s linear infinite;
}

.hero-logo-ring::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--white);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 12px rgba(255,255,255,0.6);
}

.hero-logo-ring-outer {
    position: absolute;
    width: 410px;
    height: 410px;
    border-radius: 50%;
    border: 1px solid rgba(200,16,46,0.2);
    animation: rotate 40s linear infinite reverse;
}

.hero-logo-ring-outer::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(200,16,46,0.8);
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hero-logo-img {
    width: 280px;
    height: 280px;
    object-fit: contain;
    border-radius: 16px;
    background: var(--black);
    filter: drop-shadow(0 0 60px rgba(255,255,255,0.08)) drop-shadow(0 0 20px rgba(200,16,46,0.2));
    position: relative;
    z-index: 2;
}

/* GBC logo in hero orbit */
.hero-fritz-svg-wrap {
    position: relative;
    z-index: 2;
    background: transparent;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 80px rgba(255,255,255,0.04), 0 0 30px rgba(200,16,46,0.15);
}

.hero-fritz-svg {
    width: 240px;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 12px rgba(255,255,255,0.12));
}

.hero-wordmark {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 2.6rem;
    color: var(--white);
    line-height: 1;
    letter-spacing: 0.02em;
    display: block;
    filter: drop-shadow(0 2px 12px rgba(255,255,255,0.12));
}

.hero-gbc-logo {
    width: 160px;
    height: 160px;
    object-fit: contain;
    border-radius: 50%;
    display: block;
}

.hero-fritz-logo {
    width: 320px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 24px rgba(255,255,255,0.08)) drop-shadow(0 0 30px rgba(200,16,46,0.25));
}

.hero-fritz-label {
    position: absolute;
    bottom: -110px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
}

/* =============================================
   SECTION COMMONS
   ============================================= */
section {
    padding: var(--section-pad);
}

.section-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.section-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
    display: block;
}

.section-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    color: var(--white);
}

.section-lead {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.65);
    max-width: 600px;
    line-height: 1.75;
}

.divider {
    width: 48px;
    height: 3px;
    background: var(--red);
    margin-bottom: 32px;
    border-radius: 2px;
}

/* =============================================
   ABOUT FRITZ-KOLA
   ============================================= */
#about {
    background: var(--dark-grey);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-top: 48px;
}

.stat-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    padding: 28px 24px;
    transition: border-color 0.2s;
}

.stat-card:hover {
    border-color: rgba(240,192,48,0.3);
}

.stat-number {
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -0.03em;
}

.stat-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-story p {
    color: rgba(255,255,255,0.72);
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 0.98rem;
}

.about-story p:last-child {
    margin-bottom: 0;
}

.about-story strong {
    color: var(--white);
    font-weight: 600;
}

.about-pillars {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pillar {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 4px;
    background: rgba(255,255,255,0.025);
    transition: border-color 0.2s, background 0.2s;
}

.pillar:hover {
    border-color: rgba(200,16,46,0.35);
    background: rgba(200,16,46,0.05);
}

.pillar-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.pillar-text strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
    letter-spacing: 0.03em;
}

.pillar-text p {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    margin: 0;
    line-height: 1.5;
}

/* =============================================
   COMING TO THAILAND BAND
   ============================================= */
#coming-band {
    padding: 60px 24px;
    background: var(--red);
    text-align: center;
}

.coming-band-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.coming-band-text {
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--white);
}

.coming-band-badge {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 8px 20px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
}

/* =============================================
   PRE-ORDERS / ENQUIRIES
   ============================================= */
#preorder {
    background: var(--black);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.preorder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.preorder-intro .section-lead {
    margin-bottom: 36px;
}

.line-cta-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(135deg, rgba(0,179,0,0.12) 0%, rgba(0,200,0,0.06) 100%);
    border: 1px solid rgba(0,200,0,0.3);
    border-radius: 10px;
    padding: 24px 26px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.line-cta-block:hover,
.line-cta-block:focus-visible {
    border-color: rgba(0,200,0,0.55);
    background: linear-gradient(135deg, rgba(0,179,0,0.18) 0%, rgba(0,200,0,0.1) 100%);
    transform: translateY(-1px);
    outline: none;
}

.line-cta-text {
    flex: 1 1 auto;
    min-width: 0;
}

.line-cta-heading {
    display: block;
    margin-bottom: 8px;
    line-height: 1.25;
}

.line-cta-heading span[lang="en"] {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.01em;
}

.line-cta-heading span[lang="th"] {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    margin-top: 2px;
}

.line-cta-body {
    margin: 0 0 14px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.line-cta-body span[lang="en"] {
    display: block;
    color: rgba(255,255,255,0.72);
}

.line-cta-body span[lang="th"] {
    display: block;
    color: rgba(255,255,255,0.55);
    font-size: 0.8rem;
    margin-top: 2px;
}

.line-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #06C755;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.line-cta-button-sep {
    opacity: 0.7;
    font-weight: 400;
}

.line-cta-qr {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 10px 10px 8px;
    border-radius: 8px;
}

.line-cta-qr img {
    display: block;
    width: 140px;
    height: 140px;
    object-fit: contain;
}

.line-cta-qr-caption {
    display: block;
    text-align: center;
    font-size: 0.62rem;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0a0a0a;
    font-weight: 700;
}

.line-cta-qr-caption span[lang="th"] {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
    color: rgba(10,10,10,0.65);
    margin-top: 1px;
}

.alt-contact {
    margin-top: 20px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.05em;
    text-align: center;
}

.alt-contact a {
    color: rgba(255,255,255,0.5);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Enquiry Form */
.enquiry-form-wrap {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 36px 32px;
}

.form-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 6px;
    letter-spacing: 0.03em;
}

.form-subtitle {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 28px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    padding: 11px 14px;
    color: var(--white);
    font-size: 0.88rem;
    font-family: var(--font-sans);
    transition: border-color 0.2s, background 0.2s;
    outline: none;
    width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255,255,255,0.25);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: rgba(240,192,48,0.5);
    background: rgba(255,255,255,0.07);
}

.form-group select option {
    background: var(--dark-grey);
    color: var(--white);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-submit {
    width: 100%;
    background: var(--gold);
    color: var(--black);
    border: none;
    padding: 13px 24px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    margin-top: 4px;
}

.form-submit:hover {
    background: #e8b828;
    transform: translateY(-1px);
}

.form-note {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
    margin-top: 12px;
    text-align: center;
    line-height: 1.5;
}

/* =============================================
   IMPRESSUM
   ============================================= */
#impressum {
    background: rgba(255,255,255,0.02);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 80px 24px;
}

.impressum-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-top: 40px;
}

.impressum-block h3 {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.impressum-block p,
.impressum-block address {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.85;
    font-style: normal;
}

.impressum-block a {
    color: rgba(255,255,255,0.55);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.impressum-block a:hover {
    color: var(--gold);
}

.dbd-trustmark-link {
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
}

.dbd-trustmark-link:hover .dbd-badge-wrap {
    border-color: rgba(240,192,48,0.5);
    background: rgba(240,192,48,0.06);
}

.dbd-badge-wrap {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(26,58,107,0.25);
    border: 1px solid rgba(26,58,107,0.6);
    padding: 12px 18px;
    border-radius: 6px;
    transition: border-color 0.2s, background 0.2s;
}

.dbd-logo {
    flex-shrink: 0;
}

.dbd-badge-text {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
}

.dbd-badge-text strong {
    display: block;
    color: rgba(255,255,255,0.85);
    font-weight: 700;
    font-size: 0.78rem;
    margin-bottom: 2px;
}

.dbd-verify {
    font-size: 0.66rem;
    color: rgba(240,192,48,0.7);
    letter-spacing: 0.03em;
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
    background: var(--black);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 40px 24px 28px;
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-fritz-svg {
    display: block;
    flex-shrink: 0;
}

.footer-wordmark {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.2rem;
    color: rgba(255,255,255,0.55);
    line-height: 1;
    letter-spacing: 0.02em;
}

/* v2.4.7 — GB lockup as image in the footer (replaces "fritz-kola Thailand"
   text wordmark which read as fritz-kola corporate footer copy, risky for
   a distributor on a co.th domain). */
.footer-logo-img {
    display: block;
    width: 200px;
    height: auto;
    max-width: 100%;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.footer-logo-img:hover { opacity: 1; }
@media (max-width: 640px) {
    .footer-logo-img { width: 160px; }
}

/* ── Brand name enforcement ──────────────────────────────────────────────────
   Every mention of fritz-kola, fritz-limo, superzero (and variants)
   must render in the fritz-kola typeface per brand guidelines.
   Use <span class="brand-name"> around any inline brand mention.
   ──────────────────────────────────────────────────────────────────────────── */
.brand-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: normal;
    /* Inherit size/colour from surrounding context */
    font-size: inherit;
    color: inherit;
    letter-spacing: 0.01em;
    /* Prevent line-break inside the brand name */
    white-space: nowrap;
}

.footer-version {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.18);
    letter-spacing: 0.08em;
    margin-top: 8px;
}

.footer-logo-text {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    align-self: flex-end;
    padding-bottom: 1px;
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 16px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    color: rgba(255,255,255,0.5);
    transition: border-color 0.2s, color 0.2s;
    font-size: 0.9rem;
}

.social-link:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.social-link.line-social {
    background: #00b300;
    border-color: #00b300;
    color: var(--white);
}

.social-link.line-social:hover {
    background: #009900;
    border-color: #009900;
    color: var(--white);
}

.footer-legal {
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-legal p {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.3);
    line-height: 1.6;
}

.footer-legal a {
    color: rgba(255,255,255,0.4);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-phone {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.3);
}

.footer-phone a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
}

.footer-phone a:hover {
    color: var(--gold);
}

/* =============================================
   RESPONSIVE — mobile-first refinements
   ============================================= */

/* Ensure anchor scroll targets clear the fixed nav on all viewports */
section[id], div[id="coming-band"] {
    scroll-margin-top: 88px;
}

/* Tablet & small desktop (≤900px) */
@media (max-width: 900px) {
    :root {
        --section-pad: 80px 24px;
    }
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    .hero-text {
        max-width: 100%;
        order: 2;
        margin: 0 auto;
    }
    .hero-visual {
        order: 1;
    }
    .hero-actions {
        justify-content: center;
    }
    .about-grid,
    .preorder-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .impressum-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(10,10,10,0.98);
        padding: 16px 24px 24px;
        gap: 16px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .nav-links.open {
        display: flex;
    }
    .nav-hamburger {
        display: flex;
    }

    .hero-logo-ring {
        width: 260px;
        height: 260px;
    }
    .hero-logo-ring-outer {
        width: 300px;
        height: 300px;
    }
    .hero-fritz-svg {
        width: 160px;
    }
    .hero-fritz-logo {
        width: 220px;
    }
    .hero-fritz-svg-wrap {
        padding: 0;
    }
    .hero-fritz-label {
        bottom: -90px;
        font-size: 0.58rem;
        letter-spacing: 0.2em;
    }

    .nav-logo-icon {
        width: 38px;
        height: 38px;
    }
    .nav-wordmark {
        font-size: 1rem;
    }
    .nav-wordmark-thai {
        font-size: 0.62rem;
    }
    .hero-wordmark {
        font-size: 1.9rem;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
    .footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-legal {
        justify-content: center;
        text-align: center;
    }
}

/* Large phone / small tablet (≤640px) */
@media (max-width: 640px) {
    :root {
        --section-pad: 64px 20px;
    }

    .site-nav {
        padding: 12px 16px;
    }
    .nav-logo {
        gap: 10px;
    }
    .nav-logo-icon {
        width: 36px;
        height: 36px;
    }
    .nav-wordmark {
        font-size: 0.92rem;
        letter-spacing: 0.03em;
    }
    .nav-wordmark-thai {
        font-size: 0.58rem;
    }

    #hero {
        padding: 104px 20px 64px;
    }
    .hero-eyebrow {
        font-size: 0.62rem;
        padding: 4px 10px;
    }
    .hero-launch-badge {
        font-size: 0.78rem;
        padding: 10px 14px;
    }
    .hero-subtitle {
        font-size: 1.02rem;
    }
    .hero-fritz-logo {
        width: 180px;
    }
    .hero-logo-ring {
        width: 220px;
        height: 220px;
    }
    .hero-logo-ring-outer {
        width: 250px;
        height: 250px;
    }

    .about-stats {
        margin-top: 32px;
    }
    .stat-card {
        padding: 22px 18px;
    }
    .stat-number {
        font-size: 2rem;
    }

    .pillar {
        padding: 16px;
        gap: 12px;
    }

    /* LINE CTA — stack vertically with QR centered below */
    .line-cta-block {
        flex-direction: column;
        align-items: stretch;
        padding: 22px 20px;
        gap: 18px;
    }
    .line-cta-text {
        text-align: center;
    }
    .line-cta-button {
        display: inline-flex;
        margin: 0 auto;
    }
    .line-cta-qr {
        align-self: center;
    }

    .enquiry-form-wrap {
        padding: 26px 20px;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* prevents iOS zoom-on-focus */
        padding: 12px 14px;
    }
    .form-submit {
        padding: 14px 24px;
        font-size: 0.88rem;
    }

    .coming-band-inner {
        flex-direction: column;
        gap: 14px;
        text-align: center;
    }

    #impressum {
        padding: 60px 20px;
    }
    .impressum-block h3 {
        font-size: 0.66rem;
    }

    .footer-inner {
        gap: 20px;
    }
    .footer-legal {
        flex-direction: column;
        gap: 10px;
    }
}

/* Small phone (≤420px) */
@media (max-width: 420px) {
    :root {
        --section-pad: 56px 18px;
    }

    .nav-wordmark-thai {
        display: none; /* reclaim space when very narrow */
    }
    .nav-line-btn {
        display: none; /* keep only hamburger at top-level */
    }

    .hero-title {
        font-size: 2.6rem;
    }
    .section-title {
        font-size: 1.7rem;
    }
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        justify-content: center;
        width: 100%;
    }

    .hero-fritz-logo {
        width: 160px;
    }
    .hero-logo-ring {
        width: 200px;
        height: 200px;
    }
    .hero-logo-ring-outer {
        width: 230px;
        height: 230px;
    }

    .about-stats {
        grid-template-columns: 1fr 1fr;
        gap: 2px;
    }
    .stat-card {
        padding: 18px 14px;
    }

    .line-cta-qr img {
        width: 120px;
        height: 120px;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-logo-ring,
    .hero-logo-ring-outer,
    .pulse {
        animation: none !important;
    }
    .fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
    html {
        scroll-behavior: auto;
    }
}

/* =============================================
   SCROLL ANIMATIONS
   ============================================= */
.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-up-delay-1 { transition-delay: 0.1s; }
.fade-up-delay-2 { transition-delay: 0.2s; }
.fade-up-delay-3 { transition-delay: 0.3s; }

/* =============================================
   THE RANGE (Gutenberg section)
   ============================================= */
.range-section {
    background: var(--dark-grey);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: var(--section-pad);
}

.range-section .range-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.range-section .section-label,
.range-section .section-title,
.range-section .section-lead {
    text-align: left;
}

.range-section .section-lead {
    margin-bottom: 48px;
}

.range-section .range-grid {
    gap: 28px;
    margin: 0;
}

.range-section .bottle-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 32px 20px 24px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.range-section .bottle-card:hover {
    border-color: rgba(240,192,48,0.35);
    background: rgba(255,255,255,0.05);
    transform: translateY(-3px);
}

.range-section .bottle-card .wp-block-image,
.range-section .bottle-card .bottle-img {
    margin: 0 auto 20px;
    max-width: 180px;
}

.range-section .bottle-card .wp-block-image img,
.range-section .bottle-card .bottle-img img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
}

.range-section .bottle-name {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--white);
    margin: 0 0 8px;
}

.range-section .bottle-tag {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    margin: 0;
    line-height: 1.5;
}

/* Block-editor safety: WP applies wide widths to .alignwide — keep our max */
.range-section .alignwide {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    .range-section .range-grid {
        flex-wrap: wrap;
        gap: 18px;
    }
    .range-section .bottle-card .wp-block-image img,
    .range-section .bottle-card .bottle-img img {
        height: 220px;
    }
}

@media (max-width: 640px) {
    .range-section .range-grid {
        gap: 14px;
    }
    .range-section .bottle-card {
        padding: 24px 16px 20px;
        flex-basis: calc(50% - 7px) !important;
    }
    .range-section .bottle-card .wp-block-image img,
    .range-section .bottle-card .bottle-img img {
        height: 180px;
    }
}

@media (max-width: 420px) {
    .range-section .range-grid {
        gap: 10px;
    }
    .range-section .bottle-card {
        padding: 18px 12px 14px;
        flex-basis: calc(50% - 5px) !important;
    }
    .range-section .bottle-card .wp-block-image,
    .range-section .bottle-card .bottle-img {
        margin-bottom: 14px;
        max-width: 130px;
    }
    .range-section .bottle-card .wp-block-image img,
    .range-section .bottle-card .bottle-img img {
        height: 150px;
    }
    .range-section .bottle-name {
        font-size: 0.92rem;
    }
    .range-section .bottle-tag {
        font-size: 0.75rem;
    }
}

/* =============================================
   GUTENBERG ADMIN / EDITOR COMPATIBILITY
   ============================================= */
.site-main > .wp-block-group,
.site-main > section {
    /* Let section patterns own their own horizontal padding via CSS — the
       block editor likes to inject wrappers; this neutralises them. */
}

/* Reasonable dark-mode defaults for blocks inserted outside our patterns */
.site-main .wp-block-paragraph,
.site-main .wp-block-heading {
    color: inherit;
}

/* =============================================
   WP-BLOCK-GROUP INNER-CONTAINER FIXES
   -----------------------------------------------
   When a wp:group block has layout:default, WP wraps its children in a
   .wp-block-group__inner-container div. That extra wrapper breaks any
   `display: grid / flex` we apply to the outer wrapper, because the grid
   container only sees the wrapper as its only child.

   Fix: neutralise display on the outer wrapper, move the actual grid to
   the inner-container.
   ============================================= */

/* Outer wrappers: no longer the grid/flex context (only one child = inner-container).
   Original CSS gave them display:grid / display:flex — but the wp:group block
   inserts a single inner-container child, so the layout has nothing to lay out.
   Override to block; the inner-container becomes the real layout context below. */
.hero-content,
.about-grid,
.preorder-grid,
.impressum-grid,
.coming-band-inner {
    display: block !important;
}

/* Hero — text + visual side by side (on the inner-container, the real parent) */
.hero-content > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
}

/* About — story copy + stats grid side by side */
.about-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    width: 100%;
}

/* Pre-orders — intro + form side by side */
.preorder-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    width: 100%;
}

/* Impressum — three columns of company / registration / disclaimer */
.impressum-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-top: 40px;
    width: 100%;
}

/* The hero/about/preorder section-inner wrappers also get inner-containers
   from being wp:group — make sure they fill width and centre */
.hero-section > .wp-block-group__inner-container,
.about-section > .wp-block-group__inner-container,
.preorder-section > .wp-block-group__inner-container,
.impressum-section > .wp-block-group__inner-container,
.range-section > .wp-block-group__inner-container {
    width: 100%;
    max-width: none;
}

.section-inner > .wp-block-group__inner-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Coming-band inner wrappers: centre the content like the original flex did */
#coming-band > .wp-block-group__inner-container,
.coming-band-inner > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Mobile: collapse the side-by-side grids to single-column */
@media (max-width: 900px) {
    .hero-content > .wp-block-group__inner-container,
    .about-grid > .wp-block-group__inner-container,
    .preorder-grid > .wp-block-group__inner-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .impressum-grid > .wp-block-group__inner-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    /* Mobile order swap (hero text below visual) — order works on grid items
       which are now the inner-container's children, not the .hero-content's */
    .hero-content > .wp-block-group__inner-container > .hero-text {
        order: 2;
    }
    .hero-content > .wp-block-group__inner-container > .hero-visual {
        order: 1;
    }
}

@media (max-width: 640px) {
    #coming-band > .wp-block-group__inner-container,
    .coming-band-inner > .wp-block-group__inner-container {
        flex-direction: column;
        gap: 14px;
        text-align: center;
    }
}


/* =============================================
   ABOUT — big Fritz Original bottle (v2.3)
   -----------------------------------------------
   Big bottle anchored to the right side of the about section, vertically
   centred. Absolute-positioned so it sits over the section without
   disturbing the existing 2-column grid. On mobile it falls back to a
   smaller centred image below the story.
   ============================================= */
.about-section {
    position: relative;
    overflow: hidden;
}

/* Defensively reset legacy bottle-wrap figure so it doesn't take layout
   space when the Home page still has v2.3.4-era markup (figure>img) */
.about-section .about-bottle-wrap {
    display: contents;
    margin: 0;
}

/* Bottle as a BACKGROUND element of the about section — behind the content,
   shifted by JS parallax on scroll. Explicit width so cached square images
   can't blow up the layout. The selector also matches legacy class names
   so this works whether the Home page was reset post-v2.3.5 or not. */
.about-bottle-bg,
.about-section .about-hero-bottle,
.about-section .about-bottle-wrap img {
    position: absolute;
    top: 50%;
    /* Right-align with a viewport-aware offset: pushes the bottle into the
       margin between the centered content (max-width 1100) and the viewport
       edge — so on wide screens it lives entirely in the empty side gutter. */
    right: max(16px, calc(50vw - 600px));
    left: auto;
    transform: translate3d(0, -50%, 0);
    width: 130px;
    height: auto;
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
    will-change: transform;
    filter:
        drop-shadow(0 0 40px rgba(200, 16, 46, 0.3))
        drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

/* Lift content above the background bottle */
.about-section .section-inner {
    position: relative;
    z-index: 1;
}

/* Reset any inner-container padding from earlier versions — bottle no
   longer takes column space */
.about-section .section-inner > .wp-block-group__inner-container {
    padding-left: 0;
    padding-right: 0;
}

/* Tablet — bottle hides into the right gutter, opacity dropped */
@media (max-width: 1200px) {
    .about-bottle-bg,
    .about-section .about-hero-bottle,
    .about-section .about-bottle-wrap img {
        width: 100px;
        right: 12px;
        opacity: 0.18;
    }
}

/* Mobile — faint watermark in top-right corner; doesn't compete with stack */
@media (max-width: 640px) {
    .about-bottle-bg,
    .about-section .about-hero-bottle,
    .about-section .about-bottle-wrap img {
        width: 80px;
        top: 80px;
        right: 12px;
        left: auto;
        transform: none;
        opacity: 0.12;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-bottle-bg,
.about-section .about-hero-bottle,
.about-section .about-bottle-wrap img {
        will-change: auto;
    }
}

/* =============================================
   ABOUT — side-rail lifestyle photo (v2.4.4)
   Sits to the right of the story stack. The existing parallax bottle
   stays as a deeper background; the lifestyle photo overlays it on
   the right column to bring the Hamburg origin story to life.
   ============================================= */
.about-side-photo {
    display: block;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 2 / 3;
    margin: 32px auto 0;
    border-radius: 4px;
    overflow: hidden;
    background: center/cover no-repeat var(--dark-grey);
    box-shadow: 0 18px 48px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.06);
}

@media (min-width: 901px) {
    .about-section .about-grid {
        position: relative;
    }
    .about-section .about-side-photo {
        position: absolute;
        top: 0;
        right: max(0px, calc(50vw - 540px));
        width: 280px;
        max-width: 280px;
        margin: 0;
    }
}

/* =============================================
   LIFESTYLE BAND (v2.4.4)
   Three-up photo grid between Range and Coming-band. Square-ish
   aspect, full-bleed on desktop with max-width constraint, stacks
   2-col on tablet, 1-col on phone. Light overlay on hover to hint
   interactivity (cards don't link by default — purely visual).
   ============================================= */
.lifestyle-band {
    background: var(--black);
    padding: 100px 24px;
    position: relative;
}

.lifestyle-band-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.lifestyle-band-eyebrow {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

.lifestyle-band-headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--white);
    text-align: center;
    margin-bottom: 56px;
    text-transform: lowercase;
}

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

.lifestyle-tile {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: var(--dark-grey) center/cover no-repeat;
    transition: transform 0.4s ease;
}

.lifestyle-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,10,10,0) 50%, rgba(10,10,10,0.55) 100%);
    pointer-events: none;
}

.lifestyle-tile-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0.02em;
    line-height: 1.4;
    z-index: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

@media (hover: hover) {
    .lifestyle-tile:hover {
        transform: scale(1.015);
    }
}

@media (max-width: 900px) {
    .lifestyle-band {
        padding: 72px 20px;
    }
    .lifestyle-band-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .lifestyle-tile:nth-child(3) {
        grid-column: span 2;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 560px) {
    .lifestyle-band-grid {
        grid-template-columns: 1fr;
    }
    .lifestyle-tile,
    .lifestyle-tile:nth-child(3) {
        aspect-ratio: 4 / 5;
    }
}

/* =============================================
   v2.4.8 — Linkable Range bottle cards
   Whole bottle card is now an <a>; add hover lift + a subtle "See more"
   chip that appears on hover. Cards must render in 4-up grid even
   though they're now <a> elements (not real wp:columns).
   ============================================= */
.range-section .range-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
}

.range-section .bottle-card-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px 28px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.25s, border-color 0.25s, background 0.25s;
    cursor: pointer;
}

.range-section .bottle-card-link:hover {
    transform: translateY(-4px);
    border-color: rgba(240,192,48,0.35);
    background: rgba(240,192,48,0.04);
}

.range-section .bottle-card-link .bottle-img {
    margin: 0 0 18px;
    max-height: 360px;
}
.range-section .bottle-card-link .bottle-img img {
    max-height: 360px;
    width: auto;
    height: auto;
    margin: 0 auto;
    display: block;
    object-fit: contain;
}

.range-section .bottle-card-link .bottle-name {
    margin: 0 0 6px;
    font-size: 1.1rem;
}

.range-section .bottle-card-link .bottle-tag {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 14px;
}

.range-section .bottle-card-link .bottle-cta {
    margin-top: auto;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0;
    transition: opacity 0.2s;
}

.range-section .bottle-card-link:hover .bottle-cta,
.range-section .bottle-card-link:focus-visible .bottle-cta {
    opacity: 1;
}

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

/* about fritz-kola — official brand-text section (v2.5.0) */
.about-fritz-section {
    background: var(--black);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: var(--section-pad);
}
.about-fritz-section .section-lead {
    max-width: 760px;
}
.about-fritz-section .about-fritz-importer {
    margin-top: 28px;
    color: var(--white);
}