/* ===================================================================
 * Royal Pizza — main styles
 * Mobile-first, breakpoint 1024px+ для desktop layout
 * =================================================================== */

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

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

body {
    margin: 0;
    font-family: var(--rp-font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: var(--rp-text);
    background: var(--rp-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--rp-yellow); }
button { font: inherit; cursor: pointer; background: transparent; border: 0; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

h1, h2, h3, h4 {
    font-family: var(--rp-font-display);
    color: var(--rp-gold);
    margin: 0;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 400;
}
h1 { font-size: clamp(48px, 12vw, 96px); }
h2 { font-size: clamp(32px, 7vw, 65px); }
h3 {
    font-family: var(--rp-font-body);
    font-weight: 500;
    font-size: clamp(20px, 3vw, 30px);
    color: var(--rp-text);
    text-transform: none;
    line-height: 1.3;
}
h4 {
    font-family: var(--rp-font-body);
    font-weight: 500;
    font-size: clamp(18px, 2vw, 25px);
    color: var(--rp-text);
    text-transform: none;
}

.screen-reader-text {
    position: absolute !important; clip: rect(1px,1px,1px,1px);
    height: 1px; width: 1px; overflow: hidden;
}
.skip-link { position: absolute; top: -40px; left: 8px; background: var(--rp-yellow); color: #000; padding: 8px; z-index: 9999; border-radius: var(--rp-r-sm); }
.skip-link:focus { top: 8px; }

/* ============================================================
 * Layout
 * ============================================================ */
.rp-container {
    /* Ширина = min(viewport - 2*gutter, 1440) — завжди має gutter від країв viewport,
       при viewport > 1440+2*gutter центрується на 1440px */
    width: min(100% - 2 * var(--rp-gutter), var(--rp-container-max));
    margin: 0 auto;
    padding: 0;
}
.rp-container--inset { padding: 0 var(--rp-gutter-lg); }
.rp-main { display: block; }

/* Коли мобільне меню відкрите — ховаємо контент сторінки за drawer щоб був чистий body bg
   + блокуємо скрол сторінки */
body.rp-menu-open { overflow: hidden; }
body.rp-menu-open .rp-main,
body.rp-menu-open .rp-footer { visibility: hidden; }
@media (min-width: 1024px) {
    body.rp-menu-open { overflow: visible; }
    body.rp-menu-open .rp-main,
    body.rp-menu-open .rp-footer { visibility: visible; }
}
.rp-section { padding: clamp(40px, 8vw, 80px) 0; }
.rp-section--menu { padding-bottom: 0; position: relative; overflow: hidden; }
.rp-section--menu__decor {
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    width: 140px;
}
/* aspect-ratio підібраний під природні розміри PNG (555×1246 / 490×1246 / 555×1246) */
.rp-section--menu__decor--1 { background-image: var(--rp-decor-1); top: 0;    right: 0; aspect-ratio: 555 / 1246; }
.rp-section--menu__decor--2 { background-image: var(--rp-decor-2); top: 35%;  left: 0;  aspect-ratio: 490 / 1246; }
.rp-section--menu__decor--3 { background-image: var(--rp-decor-3); bottom: 0; right: 0; aspect-ratio: 555 / 1246; }
.rp-section--menu > .rp-container,
.rp-section--menu > nav,
.rp-section--menu > .rp-section__title { position: relative; z-index: 1; }

@media (min-width: 768px) {
    .rp-section--menu__decor--1,
    .rp-section--menu__decor--3 { width: 280px; }
    .rp-section--menu__decor--2 { width: 245px; }
}
@media (min-width: 1024px) {
    .rp-section--menu__decor--1,
    .rp-section--menu__decor--3 { width: 555px; }
    .rp-section--menu__decor--2 { width: 490px; }
}

/* ============================================================
 * Buttons
 * ============================================================ */
.rp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 20px; border-radius: var(--rp-r-sm);
    font-family: var(--rp-font-body); font-weight: 700; font-size: 16px;
    line-height: 1; white-space: nowrap; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    text-decoration: none;
}
.rp-btn--primary {
    background: var(--rp-yellow); color: #FFFFFF;
    box-shadow: var(--rp-yellow-glow);
}
.rp-btn--primary:hover { color: #FFFFFF; transform: translateY(-1px); }
.rp-btn--ghost { background: transparent; color: var(--rp-text); padding: 14px 0; }
.rp-btn--ghost:hover { color: var(--rp-yellow); }
.rp-btn--ghost .rp-arrow { width: 24px; height: 24px; display: inline-block; }
.rp-btn--lg { padding: 20px 35px; font-size: 18px; }

/* ============================================================
 * Top Contact Bar — purple #700DDB
 * ============================================================ */
.rp-contact-bar {
    background: var(--rp-bg-contact);
    border-radius: var(--rp-r-sm);
    margin: 12px var(--rp-gutter) 0;
    color: var(--rp-text);
}
.rp-contact-bar__inner {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    font-size: 12px;
    flex-wrap: nowrap;
}
.rp-contact-bar__item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rp-contact-bar__item--hours { display: none; }
.rp-contact-bar__icon { width: 14px; height: 14px; display: inline-flex; flex: 0 0 14px; }
.rp-contact-bar__icon svg { width: 100%; height: 100%; }
.rp-contact-bar a { color: inherit; }
.rp-contact-bar a:hover { color: var(--rp-yellow); }

@media (min-width: 1024px) {
    .rp-contact-bar { margin: 18px var(--rp-gutter) 0; }
    .rp-contact-bar__inner {
        width: min(100% - 32px, var(--rp-container-max));
        margin: 0 auto;
        gap: 30px; padding: 12px 0; font-size: 16px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .rp-contact-bar__item--phone { margin-left: auto; }
    .rp-contact-bar__item--hours { display: inline-flex; }
    .rp-contact-bar__icon { width: 18px; height: 18px; flex: 0 0 18px; }
}

/* ============================================================
 * Header — dark card with rounded corners, sits below contact bar
 * ============================================================ */
.rp-header {
    background: var(--rp-bg-card);
    border-radius: 12px;
    margin: 10px var(--rp-gutter);
    position: sticky;
    top: 10px;
    z-index: 100;
}
.rp-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px;
    gap: 16px;
}
.rp-header__logo a { display: block; }
.rp-header__logo img, .rp-header__logo svg { width: 106px; height: 47px; }
@media (min-width: 1024px) {
    .rp-header__logo img, .rp-header__logo svg { width: 158px; height: 70px; }
}

.rp-header__social { display: inline-flex; align-items: center; gap: 12px; }
.rp-header__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    color: var(--rp-text);
}
.rp-header__social a:hover { color: var(--rp-yellow); }
.rp-header__social svg { width: 28px; height: 28px; }

.rp-header__nav-wrap {
    display: none;
    align-items: center;
    gap: 50px;
}

/* Mobile: drawer-card під хедером, абсолютно позиціонований щоб не виштовхувати логотип */
.rp-header__nav-wrap.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    background: var(--rp-bg-card);
    border-radius: var(--rp-r-md);
    padding: 20px 24px;
    gap: 16px;
    z-index: 40;
}

.rp-nav__list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; }
.rp-nav--primary a { font-size: 18px; font-weight: 500; color: var(--rp-text); }
.rp-nav--primary a:hover { color: var(--rp-yellow); }

/* Pункти меню в drawer: шеврон, БЕЗ підкреслень */
.rp-header__nav-wrap.is-open .rp-nav--primary .rp-nav__list { gap: 4px; }
.rp-header__nav-wrap.is-open .rp-nav--primary .rp-nav__list > li > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0;
    font-size: 18px;
    font-weight: 500;
    text-align: left;
}
.rp-header__nav-wrap.is-open .rp-nav--primary .rp-nav__list > li > a::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 2px solid #FFFFFF;
    border-top: 2px solid #FFFFFF;
    transform: rotate(45deg);
    flex: 0 0 8px;
}

/* Lang switcher: лівий край, маленький */
.rp-header__nav-wrap.is-open .rp-lang { font-size: 16px; align-self: flex-start; padding: 4px 0; }

/* Social: маленькі, без круглого фону */
.rp-header__nav-wrap.is-open .rp-header__social { gap: 14px; padding: 4px 0; }
.rp-header__nav-wrap.is-open .rp-header__social a {
    width: auto; height: auto; background: transparent; border-radius: 0;
}
.rp-header__nav-wrap.is-open .rp-header__social svg { width: 26px; height: 26px; }

/* CTA full-width + secondary link */
.rp-header__nav-wrap.is-open .rp-header__cta { width: 100%; padding: 16px 24px; }
.rp-header__nav-wrap .rp-header__menu-link { display: none; }
.rp-header__nav-wrap.is-open .rp-header__menu-link {
    display: inline-flex; align-self: center; padding: 8px 16px; box-shadow: none;
    font-size: 16px; font-weight: 700;
}

.rp-lang { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 500; }
.rp-lang__item { color: var(--rp-text-muted-2); padding: 0; }
.rp-lang__item.is-active { color: var(--rp-text); }
.rp-lang__separator { color: var(--rp-text-muted-2); }

.rp-header__burger {
    display: inline-flex; flex-direction: column; gap: 5px;
    width: 40px; height: 40px; align-items: center; justify-content: center;
    border-radius: var(--rp-r-sm);
}
.rp-header__burger span {
    width: 26px; height: 2px; background: var(--rp-yellow); border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.rp-header__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rp-header__burger.is-active span:nth-child(2) { opacity: 0; }
.rp-header__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.rp-header__close {
    display: none;
    position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px; align-items: center; justify-content: center;
    font-size: 28px; line-height: 1;
}
.rp-header__nav-wrap.is-open .rp-header__close { display: inline-flex; }

@media (min-width: 1024px) {
    .rp-header { margin: 10px var(--rp-gutter); }
    .rp-header__inner { width: min(100% - 32px, var(--rp-container-max)); margin: 0 auto; padding: 18px 0; }
    .rp-header__nav-wrap { display: flex; }
    .rp-header__burger { display: none; }
    .rp-nav__list { flex-direction: row; gap: 26px; }

    /* Порядок на desktop: Nav → Lang → Social → CTA */
    .rp-header__nav-wrap > .rp-nav--primary { order: 1; }
    .rp-header__nav-wrap > .rp-lang { order: 2; }
    .rp-header__nav-wrap > .rp-header__social { order: 3; }
    .rp-header__nav-wrap > .rp-header__cta { order: 4; }
}

/* ============================================================
 * Hero
 * ============================================================ */
.rp-hero {
    margin: 16px var(--rp-gutter) 0;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    background: var(--rp-bg-card);
    min-height: 480px;
    display: flex; align-items: center; justify-content: center;
}
@media (min-width: 1024px) { .rp-hero { border-radius: var(--rp-r-lg); } }
.rp-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--rp-overlay);
    z-index: 1;
}
.rp-hero[data-bg]::after {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--rp-hero-bg);
    background-size: cover; background-position: center;
    z-index: 0;
}
.rp-hero__inner {
    position: relative; z-index: 2;
    text-align: center;
    padding: 40px 16px;
    display: flex; flex-direction: column; align-items: center;
    gap: 20px;
    max-width: 900px;
    width: 100%;
}
.rp-hero__title { color: var(--rp-gold); font-size: clamp(48px, 12vw, 96px); line-height: 1; margin: 0; }
.rp-hero__subtitle { color: var(--rp-text); font-family: var(--rp-font-display); font-size: clamp(28px, 7vw, 65px); text-transform: uppercase; line-height: 1; margin: 0; }
.rp-hero__lead { color: var(--rp-text-soft); font-size: clamp(18px, 2.5vw, 30px); line-height: 1.3; margin: 0; }
.rp-hero__text { color: var(--rp-text-muted); font-size: clamp(15px, 1.4vw, 20px); line-height: 1.5; margin: 0; max-width: 720px; }
.rp-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 8px; }

@media (min-width: 1024px) {
    .rp-hero { margin: 20px var(--rp-gutter) 0; min-height: 890px; }
    .rp-hero__inner { width: min(100% - 32px, var(--rp-container-max)); padding: 80px 0; gap: 25px; }
}

/* ============================================================
 * Coming soon (front-page)
 * ============================================================ */
.rp-coming {
    display: flex; align-items: center; justify-content: center;
    flex: 1 1 auto;
    padding: clamp(60px, 12vw, 120px) var(--rp-gutter);
    min-height: 50vh;
}
.rp-coming__inner {
    max-width: 808px; width: 100%;
    text-align: center;
    display: flex; flex-direction: column; gap: 20px;
}
.rp-coming__title {
    color: var(--rp-gold);
    font-family: var(--rp-font-display);
    font-size: 36px;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}
.rp-coming__text {
    color: var(--rp-text);
    font-size: 14px;
    line-height: 1.46;
    margin: 0;
}
@media (min-width: 1024px) {
    .rp-coming__title { font-size: 65px; }
    .rp-coming__text { font-size: 18px; line-height: 1.4; color: #FFFFFF; }
    .rp-coming__inner { gap: 25px; }
}

/* ============================================================
 * Section title (MENU, etc.)
 * ============================================================ */
.rp-section__title {
    color: var(--rp-gold);
    text-align: center;
    font-size: clamp(36px, 7vw, 65px);
    margin: 0 0 32px;
}

/* ============================================================
 * Menu categories — на shop archive (старі лінки)
 * ============================================================ */
.rp-menu-cats { padding: 16px 0 32px; }
.rp-menu-cats__list {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center;
}
.rp-menu-cats__item a {
    display: inline-block; padding: 10px 20px;
    background: var(--rp-cat-inactive-bg); color: var(--rp-cat-inactive-text);
    border-radius: var(--rp-r-sm);
    font-weight: 500; font-size: 14px;
}
.rp-menu-cats__item a:hover { background: var(--rp-yellow); color: #1a1a1a; }
.rp-menu-cats__item.is-active a { background: var(--rp-purple-active); color: var(--rp-text); }

@media (min-width: 1024px) {
    .rp-menu-cats__item a { padding: 10px 25px; font-size: 16px; }
    .rp-menu-cats__list { gap: 20px; }
}

/* ============================================================
 * Menu tabs — табове перемикання категорій на сторінці Menu
 * Mobile: горизонтальний скрол; Desktop: центрований wrap
 * ============================================================ */
.rp-menu-tabs { padding: 16px 0 8px; }
@media (min-width: 1024px) { .rp-menu-tabs { padding: 16px 0 16px; } }
.rp-menu-tabs__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px var(--rp-gutter);
    margin: 0 calc(var(--rp-gutter) * -1);
}
.rp-menu-tabs__list::-webkit-scrollbar { display: none; }
.rp-menu-tabs__btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 20px;
    background: var(--rp-cat-inactive-bg);
    color: var(--rp-cat-inactive-text);
    border: 0;
    border-radius: var(--rp-r-sm);
    font-family: var(--rp-font-body);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.rp-menu-tabs__btn:hover { background: var(--rp-yellow); color: #1a1a1a; }
.rp-menu-tabs__btn.is-active { background: var(--rp-purple-active); color: var(--rp-text); }
.rp-menu-tabs__btn.is-active:hover { background: var(--rp-purple-active); color: var(--rp-text); }

@media (min-width: 1024px) {
    .rp-menu-tabs__list {
        flex-wrap: wrap;
        overflow: visible;
        justify-content: center;
        gap: 20px;
        padding: 0;
        margin: 0;
    }
    .rp-menu-tabs__btn { padding: 10px 25px; font-size: 18px; }
}

/* Panels */
.rp-menu-panel { display: block; }
.rp-menu-panel[hidden] { display: none; }

/* ============================================================
 * Pizza grid + card
 * ============================================================ */
.rp-pizza-grid {
    display: grid; gap: 30px;
    grid-template-columns: 1fr;
    margin-top: 16px;
}
@media (min-width: 640px) { .rp-pizza-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rp-pizza-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 32px; } }
@media (min-width: 1280px) { .rp-pizza-grid { grid-template-columns: repeat(4, 1fr); } }

/* Mobile: горизонтальна картка (фото зліва, контент справа), без фону */
.rp-pizza-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    background: transparent;
    border-radius: 0;
    padding: 0;
}
.rp-pizza-card__media {
    position: relative; display: block;
    flex: 0 0 174px;
    width: 174px;
    overflow: hidden;
    background: var(--rp-bg-card);
    border-radius: 12px;
    align-self: stretch;
}
.rp-pizza-card__media .rp-pizza-card__img { width: 100%; height: 100%; object-fit: cover; }
.rp-pizza-card__img { width: 100%; height: 100%; object-fit: cover; }
.rp-pizza-card__img--placeholder { padding: 20%; opacity: .5; }
.rp-pizza-card__badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

/* Tablet + Desktop: повернути вертикальну верстку (фото зверху, контент під ним) */
@media (min-width: 640px) {
    .rp-pizza-card {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        background: transparent;
        border-radius: 0;
        padding: 0;
    }
    .rp-pizza-card__media {
        flex: 1 1 auto;
        width: auto;
        aspect-ratio: 345/223;
        border-radius: var(--rp-r-md);
        align-self: auto;
    }
    .rp-pizza-card__badges { top: 12px; left: 12px; }
}
.rp-badge {
    background: var(--rp-yellow); color: #1a1a1a;
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
    text-transform: uppercase;
}
.rp-badge--spicy { background: #E94F2E; color: #fff; }
.rp-badge--vegetarian { background: #88C440; }
.rp-badge--new { background: var(--rp-purple-active); color: #fff; }
.rp-badge--hit { background: var(--rp-gold); }

.rp-pizza-card__body {
    display: flex; flex-direction: column; gap: 10px;
    padding: 0;
    flex: 1 1 0;
    min-width: 0;
}
.rp-pizza-card__title { font-size: 20px; font-weight: 500; color: var(--rp-text); margin: 0; line-height: 1.2; }
.rp-pizza-card__ingredients { color: var(--rp-text-faded); font-size: 14px; line-height: 1.4; margin: 0; }
@media (min-width: 640px) {
    .rp-pizza-card__body { gap: 6px; }
    .rp-pizza-card__title { font-size: clamp(20px, 2vw, 25px); }
    .rp-pizza-card__ingredients { font-size: 16px; }
}

.rp-pizza-card__sizes { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.rp-pizza-card__size {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.rp-pizza-card__size-label {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--rp-text-muted-2); font-size: 12px;
}
.rp-pizza-card__size-icon { width: 14px; height: 14px; display: inline-flex; opacity: .8; }
.rp-pizza-card__size-price {
    background: var(--rp-price-bg); color: var(--rp-text);
    padding: 3px 10px; border-radius: var(--rp-r-xs);
    font-size: 16px; font-weight: 700;
}
@media (min-width: 640px) {
    .rp-pizza-card__size-label { font-size: 16px; }
    .rp-pizza-card__size-icon { width: 16px; height: 16px; }
    .rp-pizza-card__size-price { font-size: 18px; }
}
.rp-pizza-card__price { font-size: 22px; font-weight: 700; color: var(--rp-gold); margin-top: 8px; }

/* ============================================================
 * Promo block (Kompleksowe obiady)
 * ============================================================ */
.rp-promo {
    margin: 40px var(--rp-gutter) 0;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    background: var(--rp-bg-card);
    min-height: 420px;
    display: flex; align-items: center; justify-content: center;
}
@media (min-width: 1024px) { .rp-promo { border-radius: var(--rp-r-lg); } }
.rp-promo::before { content: ''; position: absolute; inset: 0; background: var(--rp-overlay); z-index: 1; }
.rp-promo[data-bg]::after {
    content: ''; position: absolute; inset: 0;
    background-image: var(--rp-promo-bg);
    background-size: cover; background-position: center; z-index: 0;
}
.rp-promo__inner {
    position: relative; z-index: 2;
    text-align: center;
    padding: 40px 16px;
    display: flex; flex-direction: column; align-items: center;
    gap: 25px;
    max-width: 900px;
}
.rp-promo__title { color: var(--rp-gold); font-family: var(--rp-font-display); font-size: clamp(36px, 8vw, 65px); text-transform: uppercase; }
.rp-promo__text { color: var(--rp-text-muted); font-size: clamp(16px, 1.5vw, 20px); }
.rp-promo__actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
@media (min-width: 1024px) {
    .rp-promo { margin: 60px var(--rp-gutter) 0; min-height: 635px; }
    .rp-promo__inner { max-width: 820px; padding: 80px 0; gap: 25px; }
}

/* ============================================================
 * Single product
 * ============================================================ */
.rp-product { padding: clamp(24px, 5vw, 60px) 0; }
.rp-product__inner { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .rp-product__inner { grid-template-columns: 1fr 1fr; gap: 60px; } }
.rp-product__media img { border-radius: var(--rp-r-md); }
.rp-product__title { color: var(--rp-text); font-family: var(--rp-font-display); font-size: clamp(32px, 6vw, 65px); text-transform: uppercase; margin: 0 0 16px; }
.rp-product__ingredients { color: var(--rp-text-faded); font-size: 16px; margin: 0 0 16px; }
.rp-product__sizes { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.rp-product__price { font-size: 24px; font-weight: 700; color: var(--rp-gold); margin: 16px 0; }

/* ============================================================
 * Page header
 * ============================================================ */
.rp-page-header { text-align: center; padding: clamp(40px, 6vw, 80px) 0 32px; }
.rp-page-header__title { color: var(--rp-gold); font-size: clamp(48px, 10vw, 96px); }
.rp-page-header__desc { color: var(--rp-text-muted); font-size: 18px; max-width: 720px; margin: 16px auto 0; }

/* ============================================================
 * Contacts page — Kontakt (Figma 43:291 / 63:2027)
 * ============================================================ */
.rp-contacts {
    padding: 20px 0 0;
}
.rp-contacts__container {
    width: min(100% - 2 * var(--rp-gutter), var(--rp-container-max));
    margin: 0 auto;
}
@media (min-width: 1024px) {
    .rp-contacts { padding: 80px 0; }
}

.rp-contacts__heading {
    color: var(--rp-gold);
    font-family: var(--rp-font-display);
    font-size: clamp(36px, 8vw, 65px);
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
    margin: 0 0 20px;
}
@media (min-width: 1024px) { .rp-contacts__heading { margin-bottom: 40px; } }

.rp-contacts__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.rp-contacts__row:last-child { margin-bottom: 0; }
.rp-contacts__row > * { min-width: 0; }

@media (min-width: 1024px) {
    .rp-contacts__row {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: stretch;
        margin-bottom: 80px;
    }
    .rp-contacts__row--form { min-height: 608px; }
    .rp-contacts__row--cards { min-height: 325px; }
}

/* Cards grid */
.rp-contacts__cards {
    display: grid; gap: 12px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .rp-contacts__cards { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (min-width: 1024px) {
    .rp-contacts__cards { align-content: start; }
}

.rp-contacts__card {
    background: var(--rp-bg-card);
    border-radius: 15px;
    padding: 20px;
    display: flex; flex-direction: column; gap: 15px;
    min-height: 99px;
}
.rp-contacts__card-title {
    font-family: var(--rp-font-body);
    font-weight: 500;
    font-size: 20px;
    color: var(--rp-text);
    margin: 0;
    line-height: 1.2;
    text-transform: none;
}
.rp-contacts__card-text {
    font-size: 14px;
    color: var(--rp-text);
    margin: 0;
    line-height: 1.4;
}
.rp-contacts__card-text a { color: inherit; }
.rp-contacts__card-text a:hover { color: var(--rp-yellow); }
.rp-contacts__card-social { display: inline-flex; gap: 10px; align-items: center; }
.rp-contacts__card-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    color: var(--rp-text);
}
.rp-contacts__card-social svg { width: 30px; height: 30px; }
.rp-contacts__card-social a:hover { color: var(--rp-yellow); }

@media (min-width: 1024px) {
    .rp-contacts__card {
        border-radius: 20px;
        padding: 40px;
        gap: 20px;
        min-height: 152px;
    }
    .rp-contacts__card-title { font-size: 25px; }
    .rp-contacts__card-text { font-size: 16px; }
}

/* Google Maps + decorative image */
.rp-contacts__map,
.rp-contacts__media {
    border-radius: 20px;
    background-color: var(--rp-bg-card);
    background-size: cover;
    background-position: center;
    min-height: 325px;
    width: 100%;
    overflow: hidden;
    position: relative;
    display: block;
}
.rp-contacts__map iframe {
    width: 100%; height: 100%;
    display: block;
    border: 0;
    min-height: 325px;
}
@media (min-width: 1024px) {
    /* row флекс зі stretch розтягує дітей до тієї ж висоти що й сусід */
    .rp-contacts__map,
    .rp-contacts__media { min-height: auto; height: auto; align-self: stretch; }
    .rp-contacts__map iframe { min-height: 100%; }
}

/* Form card */
.rp-contacts__form-wrap {
    background: var(--rp-bg-card);
    border-radius: 20px;
    padding: 20px;
    display: flex; flex-direction: column; gap: 20px;
}
.rp-contacts__form-heading {
    color: var(--rp-text);
    font-family: var(--rp-font-body);
    font-weight: 500;
    font-size: 18px;
    text-align: center;
    text-transform: none;
    margin: 0;
    line-height: 1.3;
}
.rp-contacts__form-body {
    width: 100%;
}
@media (min-width: 1024px) {
    .rp-contacts__form-wrap { padding: 40px; gap: 30px; }
    .rp-contacts__form-heading { font-size: 25px; max-width: 538px; margin: 0 auto; }
}

/* CF7 — under Figma styling. wpautop вимкнено через wpcf7_autop_or_not. */
.rp-contacts__form-body .wpcf7-form { margin: 0; }
.rp-contacts__form-body .wpcf7-form br { display: none; }

.rp-contacts__form-body .rp-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 640px) {
    .rp-contacts__form-body .rp-form-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.rp-contacts__form-body .rp-form-field--full { grid-column: 1 / -1; }

.rp-contacts__form-body label { display: block; color: var(--rp-text); margin: 0; }
.rp-contacts__form-body .wpcf7-form-control-wrap { display: block; }
.rp-contacts__form-body .wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    padding: 12px;
    background: #353535;
    color: var(--rp-text);
    border: 1px solid #393939;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
}
.rp-contacts__form-body .wpcf7-form-control::placeholder { color: #A0A0A0; opacity: 1; }
.rp-contacts__form-body .wpcf7-form-control:not(.wpcf7-submit):focus {
    outline: 2px solid var(--rp-yellow); outline-offset: 1px; background: #353535;
}
.rp-contacts__form-body .wpcf7-form-control.wpcf7-textarea {
    min-height: 120px; resize: vertical;
}

/* Помилки: сховати tip-повідомлення, лише підсвітити поле червоним */
.rp-contacts__form-body .wpcf7-not-valid-tip,
.rp-contacts__form-body .screen-reader-response { display: none !important; }
.rp-contacts__form-body .wpcf7-not-valid {
    border-color: #E94F2E !important;
    background: rgba(233, 79, 46, 0.08) !important;
}
.rp-contacts__form-body .wpcf7-submit {
    background: var(--rp-yellow);
    color: #FFFFFF;
    padding: 15px 35px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    border: 0;
    box-shadow: var(--rp-yellow-glow);
    width: 100%;
    cursor: pointer;
    transition: transform .15s ease;
    margin-top: 20px;
}
.rp-contacts__form-body .wpcf7-submit:hover { transform: translateY(-1px); }
.rp-contacts__form-body .wpcf7-response-output {
    padding: 12px 16px; border-radius: var(--rp-r-sm); margin-top: 16px; color: var(--rp-text);
}
@media (min-width: 1024px) {
    .rp-contacts__form-body .wpcf7-form-control:not(.wpcf7-submit) {
        padding: 20px; font-size: 16px; border-radius: 10px;
    }
    .rp-contacts__form-body .wpcf7-form-control.wpcf7-textarea { min-height: 180px; }
    .rp-contacts__form-body .wpcf7-submit { padding: 20px 35px; font-size: 18px; margin-top: 10px; }
}

/* ============================================================
 * Posts (fallback blog)
 * ============================================================ */
.rp-posts { display: grid; gap: 32px; grid-template-columns: 1fr; margin-top: 32px; }
@media (min-width: 768px) { .rp-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rp-posts { grid-template-columns: repeat(3, 1fr); } }
.rp-post-card { background: var(--rp-bg-card); border-radius: var(--rp-r-md); overflow: hidden; }
.rp-post-card__media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.rp-post-card__title { padding: 16px 16px 0; font-size: 20px; }
.rp-post-card__excerpt { padding: 8px 16px 16px; color: var(--rp-text-faded); }
.rp-pagination { margin-top: 40px; text-align: center; }
.rp-pagination .page-numbers {
    display: inline-block; padding: 8px 14px; margin: 0 4px;
    border-radius: var(--rp-r-sm); background: var(--rp-bg-card); color: var(--rp-text);
}
.rp-pagination .current { background: var(--rp-yellow); color: #000; }

/* ============================================================
 * Footer — dark card with rounded top corners
 * ============================================================ */
.rp-footer {
    background: var(--rp-bg-card);
    border-radius: 12px;
    margin: 20px var(--rp-gutter) 16px;
    padding: 32px 24px;
    color: var(--rp-text);
}
@media (min-width: 1024px) {
    .rp-footer { border-radius: var(--rp-r-lg); }
}
.rp-footer > * { width: min(100% - 32px, var(--rp-container-max)); margin-left: auto; margin-right: auto; }

.rp-footer__grid {
    display: grid; gap: 32px;
    grid-template-columns: 1fr;
}
.rp-footer__col { display: flex; flex-direction: column; gap: 16px; }
.rp-footer__col--logo .rp-footer__logo { display: inline-flex; }
.rp-footer__col--logo svg { width: 106px; height: 47px; }
@media (min-width: 1024px) {
    .rp-footer__col--logo svg { width: 158px; height: 70px; }
}
.rp-footer__col--cta { gap: 16px; align-items: stretch; }
.rp-footer__col--cta .rp-btn--ghost { padding: 12px 16px; }

/* Mobile reorder: Logo → CTA → Strony → Kontakt → Social */
.rp-footer__col--logo { order: -2; }
.rp-footer__col--cta { order: -1; }

.rp-footer__title {
    color: var(--rp-text); font-size: 20px; font-weight: 500;
    margin: 0;
}
.rp-footer__menu, .rp-footer__contacts { display: flex; flex-direction: column; gap: 10px; }
.rp-footer__menu a, .rp-footer__contacts li, .rp-footer__contacts a { color: var(--rp-text-muted-2); font-size: 14px; }
.rp-footer__menu a:hover, .rp-footer__contacts a:hover { color: var(--rp-yellow); }
.rp-footer__social-text { color: var(--rp-text-muted-2); font-size: 13px; margin: 0; line-height: 1.4; }
@media (min-width: 1024px) {
    .rp-footer__title { font-size: 25px; }
    .rp-footer__menu, .rp-footer__contacts { gap: 12px; }
    .rp-footer__menu a, .rp-footer__contacts li, .rp-footer__contacts a { font-size: 16px; }
    .rp-footer__social-text { font-size: 14px; }
}
.rp-footer__social-icons { display: flex; gap: 16px; margin-top: 8px; }
.rp-footer__social-icons a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: transparent;
    color: var(--rp-text);
}
.rp-footer__social-icons a:hover { color: var(--rp-yellow); }
.rp-footer__social-icons svg { width: 28px; height: 28px; }

.rp-footer__bottom {
    display: flex; flex-direction: row; justify-content: space-between; gap: 12px;
    margin-top: 32px;
    color: var(--rp-text-copyright); font-size: 10px;
}
@media (min-width: 1024px) {
    .rp-footer__bottom { font-size: 12px; }
}

@media (min-width: 768px) {
    .rp-footer__grid { grid-template-columns: auto repeat(3, 1fr) auto; gap: 60px; align-items: start; }
    .rp-footer__col--cta { min-width: 220px; }
    /* На desktop порядок: Logo → Strony → Kontakt → Social → CTA */
    .rp-footer__col--logo { order: 0; }
    .rp-footer__col--cta { order: 1; }
}
@media (min-width: 1024px) {
    .rp-footer { margin: 20px var(--rp-gutter) 24px; padding: 60px 0; }
    .rp-footer__grid { gap: 80px; }
}

/* ============================================================
 * Empty state, simple page
 * ============================================================ */
.rp-empty { text-align: center; color: var(--rp-text-faded); padding: 60px 0; }
.rp-page__content { font-size: 18px; line-height: 1.6; color: var(--rp-text-muted); }
.rp-single__content { font-size: 18px; line-height: 1.6; color: var(--rp-text-muted); }
.rp-single__media { margin-bottom: 24px; }
.rp-single__media img { border-radius: var(--rp-r-md); }

/* Hide WooCommerce default elements that conflict with our minimal layout */
.woocommerce-breadcrumb,
.woocommerce-result-count,
.woocommerce-ordering { display: none; }
.woocommerce-notices-wrapper { color: var(--rp-text); }