/*
 * Landing Pages design kit — frozen from shop.mokaconsorten.com
 * (extraction: doc/sources/ShopDesignKitFindings.md, 2026-07-12).
 * Standalone: no runtime request to shop or WordPress assets.
 * All refs relative — the folder must work under a second domain.
 */

@font-face { font-family: "Oswald"; src: url("fonts/Oswald-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("fonts/Oswald-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("fonts/Oswald-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("fonts/Oswald-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Enriqueta"; src: url("fonts/Enriqueta-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Enriqueta"; src: url("fonts/Enriqueta-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Enriqueta"; src: url("fonts/Enriqueta-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Enriqueta"; src: url("fonts/Enriqueta-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
    --moka-primary: #ff7800;
    --moka-primary-hover: #f88d30;
    --moka-ink: #0d0600;
    --moka-text: #525252;
    --moka-text-muted: #707070;
    --moka-cream: #f7f4eb;
    --moka-card: #f8f6f5;
    --moka-border: #e6e6e6;
    --moka-radius: 5px;
}

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

body {
    font-family: "Oswald", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--moka-ink);
    background: #fff;
}

p, li {
    font-family: "Enriqueta", serif;
    color: var(--moka-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Oswald", sans-serif;
    color: var(--moka-ink);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.25;
}

h1 { font-size: 36px; }
h2 { font-size: 26px; margin-bottom: 1rem; }
h3 { font-size: 18px; }

a { color: var(--moka-primary); text-decoration: none; }
a:hover { color: var(--moka-primary-hover); }

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

.btn {
    display: inline-block;
    background: var(--moka-primary);
    color: #fff;
    border: 1px solid var(--moka-primary);
    border-radius: var(--moka-radius);
    padding: 10px 28px;
    font-family: "Oswald", sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
}
.btn:hover { background: var(--moka-primary-hover); border-color: var(--moka-primary-hover); color: #fff; }

/* ── Top USP bar (ink, uppercase, orange highlight — like the shop) ── */
.lp-topbar {
    background: var(--moka-ink);
    color: #fff;
    text-transform: uppercase;
    font-family: "Oswald", sans-serif;
    font-size: 14px;            /* measured: 14px Oswald 400 uppercase */
    padding: 1rem;              /* shop: 1rem vertical → ~53px bar */
}
/* One container row: USPs left, contact right; wraps on narrow screens
   (matches the live shop at both widths). */
.lp-topbar-inner {
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: .4rem 2rem;
    flex-wrap: wrap;
}
.lp-topbar-usps { display: flex; gap: 1rem; flex-wrap: wrap; }
.lp-topbar-highlight { color: var(--moka-primary); }
.lp-topbar-contact { display: flex; gap: 1.5rem; }
.lp-topbar-contact a { color: #fff; display: inline-flex; align-items: center; gap: .35rem; }
.lp-topbar-contact a:hover { color: var(--moka-primary-hover); }

/* ── Header (measured against the shop 2026-07-12): everything inside a
      centered 1250px container; the logo column spans both rows; the
      right column stacks search+links over the category row. ── */
.lp-header { background: var(--moka-cream); padding: 1rem 1.5rem .25rem; }
.lp-header-inner {
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 2.5rem;
}
.lp-header .lp-logo img { height: 100px; width: auto; }
.lp-header-right { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.lp-header-row1 { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
/* Search: fixed ~233px (shop custom.css max-width), pushed right so it
   clusters with the account links. */
.lp-search { display: flex; width: 233px; margin-left: auto; background: #fff; border: 1px solid #dfdfdf; border-radius: var(--moka-radius); overflow: hidden; }
.lp-search input[type="text"] { border: 0; outline: none; padding: 10px 15px; flex: 1; font-size: 14px; font-family: "Oswald", sans-serif; background: transparent; }
.lp-search button { border: 0; background: #fff; color: var(--moka-text); padding: 8px 14px; cursor: pointer; display: flex; align-items: center; }
.lp-search button:hover { color: var(--moka-primary-hover); }
/* No own auto-margin — the search field's margin-left:auto pushes the
   whole search+links cluster right as one block (like the shop). */
.lp-header-links { display: flex; gap: 1rem; align-items: center; }
.lp-header-links a { color: var(--moka-text); font-family: "Oswald", sans-serif; text-transform: uppercase; font-size: 14px; padding: 10px 8px; }
.lp-header-links a:hover { color: var(--moka-primary-hover); }
.lp-kasse { padding: 10px 16px; font-size: 14px; }
.lp-kasse svg { vertical-align: -2px; margin-left: 4px; }
/* Categories: 14px Oswald BOLD, 16px padding, right-aligned under the
   search/links row; 1.5rem on wide screens — both measured/extracted
   from the live shop (custom.css @media ≥1300px: font-size 1.5rem). */
.lp-header-cats { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.lp-cat-link { color: var(--moka-text); font-family: "Oswald", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 14px; padding: 16px; }
.lp-cat-link:hover { color: var(--moka-primary-hover); }
@media (min-width: 1300px) {
    .lp-cat-link { font-size: 1.5rem; padding: 16px 24px; }
}

/* ── Layout ── */
.lp-main {
    max-width: 1250px;
    margin: 0 auto;
    padding: 3rem 1.5rem;   /* breathing room between hero and intro */
}

/* ── Hero — full width, headline ON the image (shop slider look:
      big white display type, left, 1px black shadow) ── */
/* Shop slider is ~555px tall; the LP hero deliberately takes LESS height
   (Frank 2026-07-12) — it is an entry point, not the content. */
.lp-hero { position: relative; width: 100%; }
.lp-hero-img { display: block; width: 100%; height: 380px; object-fit: cover; }
.lp-hero-placeholder { width: 100%; height: 280px; background: var(--moka-card); }
.lp-hero-caption {
    position: absolute;
    left: 60px;
    bottom: 10%;
    max-width: 70%;
}
.lp-hero-caption h1 {
    /* Shop slider uses LocalGothic 64px — commercial font, not bundled;
       Oswald bold is the licensed stand-in, scaled to the lower hero. */
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.25;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    text-transform: none;
}

/* ── Intro / story text ── */
.lp-intro { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.lp-intro p { font-size: 1.15rem; line-height: 1.7; }

/* ── Template A: product groups ── */
.lp-group { margin-bottom: 3rem; }
/* Centered: auto-fit with a column cap so few cards sit in the middle
   instead of hugging the left edge; cap sized so FOUR fit per row in
   the 1250px container (4×280 + 3×24 gap = 1192). */
.lp-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
    gap: 1.5rem;
    justify-content: center;
}
.lp-product-card {
    background: var(--moka-cream);
    border-radius: var(--moka-radius);
    padding: 1.5rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.lp-product-card h3 { text-transform: none; font-size: 1.25rem; }

/* ── Polaroid frame: white frame, pin, slight rotation (Frank) ── */
.lp-polaroid {
    position: relative;
    background: #fff;
    padding: 12px 12px 34px;
    border-radius: 2px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
    transform: rotate(-2deg);
    margin: 10px 4px 6px;
}
.lp-polaroid::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffb066, #d95f00 70%);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
    z-index: 2;
}
.lp-polaroid img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
}
/* Optional product caption in the polaroid's white band. */
.lp-polaroid-caption {
    margin-top: 10px;
    text-align: center;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: .9rem;
    line-height: 1.4;
}
.lp-polaroid-caption a { color: inherit; }
/* Alternate the tilt so a row looks pinned by hand, not printed. */
.lp-product-card:nth-child(even) .lp-polaroid,
.lp-story-section:nth-of-type(even) .lp-polaroid { transform: rotate(1.6deg); }
.lp-product-link { font-family: "Oswald", sans-serif; text-transform: uppercase; font-size: .9rem; margin-top: auto; }

/* Group shop link — a centered orange button under the products. */
.lp-group-link { text-align: center; margin-top: 2rem; }
.lp-group-link .btn { padding: 12px 32px; font-size: 1.05rem; }

/* ── Template B: components + CTA ── */
.lp-component-row { max-width: 760px; margin: 0 auto 1.25rem; }
.lp-component-row .lp-product-card { flex-direction: row; align-items: center; }
.lp-component-row .lp-product-card img { width: 140px; flex: 0 0 140px; }

/* ── Template C: story sections, alternating image side ── */
.lp-story-section {
    display: flex;
    gap: 2rem;
    align-items: center;
    margin-bottom: 2.5rem;
}
.lp-story-section.lp-story-even { flex-direction: row-reverse; }
.lp-story-section .lp-polaroid { width: 42%; flex: 0 0 42%; }
.lp-story-section .lp-polaroid img { aspect-ratio: auto; }
/* ── Typography in flowing text (intro + stories) ──
   Taken from the SHOP's own long-text rules (Frank 2026-07-12):
   my-nova.css headings = margin-top 0 / margin-bottom 1rem, line-height
   1.2; paragraphs = margin 0 0 1rem; custom.css #tab-description
   .desc h3 = 24px. Subheadlines therefore carry little space above
   (only the preceding paragraph's 1em) and more space below (their
   own 1em) — exactly like the shop. */
.lp-story-text p { font-size: 1.05rem; }
.lp-intro p, .lp-story-text p { margin: 0 0 1em; }
.lp-story-text h3, .lp-intro h3 { text-transform: none; font-size: 24px; line-height: 1.2; margin: 0 0 1em; }
.lp-story-text ul, .lp-intro ul { margin: 0 0 1em 1.25rem; }
.lp-product-embed { max-width: 640px; margin: 0 auto 2.5rem; }

/* ── CTA ── */
.lp-cta { text-align: center; padding: 2rem 0; }

/* ── Footer — measured against the live shop footer 2026-07-12:
      padding 64px top, headline 14px/400 no border mb 16px, links
      Enriqueta 14px lh 21px, logo 184x96 natural, brand text Oswald
      light 1.2rem, round orange social buttons ~40px, copyright 12px ── */
.lp-footer { background: var(--moka-ink); color: #fff; padding: 4rem 2rem 0; }
/* Column grid taken from the shop source (Bootstrap cols + custom.css
   overrides, verified by measurement): brand 25% · three groups 18% ·
   social 20%, NO gaps, 16px inner padding per column. */
.lp-footer-boxes { display: flex; flex-wrap: wrap; max-width: 1250px; margin: 0 auto 2rem; }
.lp-footer-brandbox { flex: 0 0 25%; max-width: 25%; padding: 0 16px; box-sizing: border-box; }
.lp-footer-logo { width: 184px; height: 96px; margin-bottom: 2.5rem; }
.lp-footer-addr { color: #fff; font-family: "Oswald", sans-serif; font-weight: 300; font-size: 1.2rem; line-height: 1.5; margin-bottom: 1.5rem; }
.lp-footer-contactlines { line-height: 2; }
.lp-footer-contactlines a { display: inline-flex; align-items: center; gap: .5rem; font-family: "Oswald", sans-serif; font-weight: 300; font-size: 1.2rem; }
.lp-footer-phone { color: var(--moka-primary); }
.lp-footer-phone:hover { color: var(--moka-primary-hover); }
.lp-footer-phone svg { color: var(--moka-primary); }
.lp-footer-mail { color: #fff; }
.lp-footer-mail:hover { color: var(--moka-primary-hover); }
/* One row of four — the shop never wraps them. Icon glyphs are INK on
   orange; the higher-specificity selector wins over .lp-footer-group a. */
.lp-footer-social { display: flex; gap: .5rem; flex-wrap: nowrap; margin-top: .25rem; }
.lp-footer .lp-footer-social a {
    background: var(--moka-primary);
    color: var(--moka-ink);
    border-radius: 50%;
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-footer .lp-footer-social a:hover { background: var(--moka-primary-hover); color: var(--moka-ink); }
.lp-footer-group { flex: 0 0 18%; max-width: 18%; padding: 0 16px; box-sizing: border-box; }
.lp-footer-socialcol { flex: 0 0 20%; max-width: 20%; }
.lp-footer-group h4 { color: #fff; font-weight: 400; font-size: .875rem; margin-bottom: 1rem; }
/* The shop's "Social Media" heading is the one heading NOT uppercase. */
.lp-footer-socialcol h4 { text-transform: none; }
@media (min-width: 992px) {
    .lp-footer-group { margin-top: 7rem; }
}
.lp-footer-group ul { list-style: none; }
.lp-footer-group li { margin-bottom: 0; line-height: 21px; }
.lp-footer-group a { color: #fff; font-family: "Enriqueta", serif; font-size: .875rem; line-height: 21px; }
.lp-footer-group a:hover { color: rgba(255, 255, 255, .67); }
/* EU withdrawal button — standalone orange button centred below the
   columns, exactly like the shop (legal Button-Lösung; the shop's
   button text is serif mixed-case, not uppercase). */
.lp-withdrawal { text-align: center; margin: 0 0 1.5rem; }
.lp-withdrawal .btn { text-transform: none; font-family: "Enriqueta", serif; font-size: 1rem; padding: 12px 24px; }
.lp-footnote-vat { color: #fff; text-transform: uppercase; font-family: "Enriqueta", serif; font-size: .8rem; text-align: center; margin-bottom: 1rem; }
.lp-copyright { color: #fff; text-transform: uppercase; font-family: "Oswald", sans-serif; font-size: 12px; text-align: center; border-top: 1px solid rgba(255,255,255,.15); padding: 1rem 0; }

/* ── Responsive ── */
@media (max-width: 768px) {
    h1 { font-size: 28px; }
    .lp-footer-brandbox, .lp-footer-group, .lp-footer-socialcol { flex: 0 0 100%; max-width: 100%; margin-top: 1.5rem; }
    .lp-hero-caption { left: 1rem; max-width: 90%; bottom: 8%; }
    .lp-hero-caption h1 { font-size: 32px; }
    .lp-topbar { gap: .5rem 1.25rem; font-size: .75rem; }
    .lp-header { padding: .75rem 1rem; }
    .lp-header .lp-logo img { height: 56px; }
    .lp-story-section, .lp-story-section.lp-story-even { flex-direction: column; }
    .lp-story-section .lp-polaroid { width: 100%; flex: none; }
    .lp-component-row .lp-product-card { flex-direction: column; }
    .lp-component-row .lp-product-card img { width: 100%; flex: none; }
}