/*
 * UG SHOP redesign (design.html) – header, homepage and footer.
 * Plain CSS on purpose: works without rebuilding Tailwind/Vite.
 * All classes start with "ug-" so they never clash with existing styles.
 */

:root {
    --ug-red: #cf183e;
    --ug-red-dark: #a11230;
    --ug-text: #1f1f1f;
    --ug-text-strong: #111111;
    --ug-muted: #555555;
    --ug-bg: #f9fafb;
    --ug-card: #f3f4f6;
    --ug-line: #ececec;
    --ug-topbar: #f3f4f6;
    --ug-topbar-line: #e5e7eb;
    --ug-pink: #fbe8ec;
    --ug-map: #efece6;
}

/* Font from the design: condensed Noto Sans Georgian */
.ug-font {
    font-family: "Noto Sans Georgian", sans-serif;
    font-stretch: 62.5%;
    text-transform: uppercase;
    color: var(--ug-text);
}
.ug-font h1, .ug-font h2, .ug-font h3 {
    font-family: "Noto Sans Georgian", sans-serif !important;
    font-stretch: 62.5%;
}
.ug-font a { text-decoration: none; }

.ug-container { max-width: 1216px; margin: 0 auto; }
.ug-container--wide { max-width: 1504px; margin: 0 auto; }

/* ───────────── Header top bar ───────────── */
.ug-topbar {
    background: var(--ug-topbar);
    border-bottom: 1px solid var(--ug-topbar-line);
}
.ug-topbar__inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
    flex-wrap: wrap;
    font-size: 15px;
    font-weight: 300;
}
.ug-topbar__links { display: flex; align-items: center; gap: 8px 28px; flex-wrap: wrap; }
.ug-topbar a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    color: var(--ug-text);
}
.ug-topbar a:hover { color: var(--ug-red); }
.ug-topbar__hotline { color: var(--ug-red) !important; font-weight: 400; }
.ug-topbar svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 1023px) {
    .ug-topbar { display: none; }
}

/* ───────────── Main menu (inside existing header) ───────────── */
.ug-nav { display: flex; gap: 32px; font-weight: 300; }
.ug-nav a { color: var(--ug-text); font-size: 20px; font-weight: 300; }
.ug-nav a:hover { color: var(--ug-text-strong); }
.ug-nav a.is-active { color: var(--ug-text-strong); font-weight: 400; }

/* ───────────── Hero slider ───────────── */
.ug-hero {
    background: var(--ug-red);
    color: #ffffff;
    padding: 56px 24px 40px;
}
.ug-hero__slide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 48px;
    min-height: 400px;
}
.ug-hero__text { flex: 1 1 360px; min-width: 0; }
.ug-hero__eyebrow { font-size: 16px; font-weight: 300; letter-spacing: 1px; opacity: .85; }
.ug-hero__title {
    margin: 12px 0 0;
    font-size: 72px;
    font-weight: 300;
    line-height: 1.05;
    color: #ffffff;
}
.ug-hero__subtitle { margin: 20px 0 0; font-size: 22px; font-weight: 300; }
.ug-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    height: 48px;
    padding: 0 32px;
    background: #ffffff;
    color: var(--ug-text-strong) !important;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    transition: background .2s;
}
.ug-hero__cta:hover { background: #f3f4f6; }

.ug-hero__media { flex: 1 1 480px; min-width: 0; }
.ug-hero__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.ug-hero__grid img {
    display: block;
    width: 100%;
    aspect-ratio: 292 / 200;
    object-fit: cover;
    border-radius: 10px;
}
.ug-hero__panel {
    height: 400px;
    border-radius: 10px;
    background: var(--ug-red-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    overflow: hidden;
}
.ug-hero__panel img { width: 100%; height: 100%; object-fit: cover; }
.ug-hero__panel--books { background: #ebe6df; flex-direction: row; gap: 28px; }
.ug-hero__panel-caption { font-size: 18px; font-weight: 300; }

.ug-hero__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 36px;
}
.ug-hero__dots { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ug-hero__dot {
    height: 44px;
    min-width: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 4px;
    color: #ffffff;
    font: inherit;
    font-size: 17px;
    font-weight: 300;
    text-transform: uppercase;
    gap: 10px;
}
.ug-hero__dot-bar {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #ffffff;
    width: 16px;
    opacity: .5;
    transition: width .3s, opacity .3s;
}
.ug-hero__dot-label { opacity: .7; }
.ug-hero__dot.is-active .ug-hero__dot-bar { width: 40px; opacity: 1; }
.ug-hero__dot.is-active .ug-hero__dot-label { opacity: 1; font-weight: 500; }

.ug-hero__pager { display: flex; align-items: center; gap: 12px; }
.ug-hero__counter { font-size: 17px; font-weight: 300; min-width: 64px; text-align: center; }
.ug-hero__arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .7);
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.ug-hero__arrow--next { border: none; background: #ffffff; color: var(--ug-red); }
.ug-hero__arrow svg { width: 20px; height: 20px; }

@media (max-width: 767px) {
    .ug-hero { padding: 40px 16px 32px; }
    .ug-hero__slide { gap: 28px; min-height: 0; }
    .ug-hero__title { font-size: 48px; }
    .ug-hero__subtitle { font-size: 18px; }
    .ug-hero__panel { height: 260px; }
    .ug-hero__panel--books { gap: 16px; }
}

/* ───────────── Drawn book cover (used until a book has a cover photo) ───────────── */
.ug-cover {
    box-sizing: border-box;
    border-radius: 2px 8px 8px 2px;
    box-shadow: 8px 10px 20px rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    text-align: center;
    padding: 18px 10px 14px;
    width: 44%;
    aspect-ratio: 2 / 2.9;
    border-left: 9px solid;
}
.ug-cover__logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ug-cover__logo img { width: 38px; height: 37px; object-fit: contain; }
.ug-cover__title { font-size: 14px; font-weight: 400; line-height: 1.2; }
.ug-cover__author { font-size: 11px; font-weight: 300; }
.ug-cover__badge { font-size: 11px; font-weight: 500; letter-spacing: 1px; color: #f2b705; }
.ug-cover--0 { background: #cf183e; border-left-color: #a11230; }
.ug-cover--1 { background: #3b4a6b; border-left-color: #2a3650; }
.ug-cover--2 { background: #2f5d50; border-left-color: #1f4237; }
.ug-cover--3 { background: #1f1f1f; border-left-color: #000000; }
.ug-cover--hero { width: 170px; padding: 28px 14px 20px; border-left-width: 12px; }
.ug-cover--hero .ug-cover__logo { width: 64px; height: 64px; }
.ug-cover--hero .ug-cover__logo img { width: 54px; height: 52px; }
.ug-cover--hero .ug-cover__title { font-size: 17px; }
.ug-cover--hero .ug-cover__author { font-size: 13px; }
.ug-cover--hero-small { width: 150px; }
.ug-cover-photo {
    width: 44%;
    aspect-ratio: 2 / 2.9;
    object-fit: cover;
    border-radius: 2px 8px 8px 2px;
    box-shadow: 8px 10px 20px rgba(0, 0, 0, .25);
}
.ug-cover-photo--hero { width: 170px; }
@media (max-width: 767px) {
    .ug-cover--hero, .ug-cover-photo--hero { width: 120px; }
    .ug-cover--hero-small { width: 105px; }
}

/* ───────────── Products ───────────── */
.ug-home { background: var(--ug-bg); }
.ug-products { padding: 80px 24px 72px; }
.ug-section-title {
    margin: 0;
    text-align: center;
    font-size: 36px;
    font-weight: 400;
    color: var(--ug-text);
}
.ug-section-subtitle {
    margin: 20px 0 0;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
    color: var(--ug-muted);
}
.ug-products__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 60px;
}
.ug-products__empty { margin-top: 40px; text-align: center; color: var(--ug-muted); font-weight: 300; }
.ug-card {
    display: block;
    background: var(--ug-card);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: box-shadow .2s, transform .2s;
}
.ug-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .10); transform: translateY(-2px); }
.ug-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 292 / 256;
    object-fit: cover;
    background: #e5e7eb;
}
.ug-card__cover {
    width: 100%;
    aspect-ratio: 292 / 256;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ug-card__cover--0 { background: #ebe6df; }
.ug-card__cover--1 { background: #e3e7ee; }
.ug-card__cover--2 { background: #e6ece8; }
.ug-card__cover--3 { background: #efe9e2; }
.ug-card__name {
    padding: 20px 16px 28px;
    font-size: 19px;
    font-weight: 300;
    color: #222222;
}
@media (max-width: 767px) {
    .ug-products { padding: 56px 16px 48px; }
    .ug-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
    .ug-section-title { font-size: 28px; }
    .ug-card__name { padding: 14px 12px 18px; font-size: 16px; }
}

/* ───────────── Our store ───────────── */
.ug-store { padding: 0 24px; scroll-margin-top: 160px; }
.ug-store__inner { display: flex; flex-wrap: wrap; gap: 10px; }
.ug-store__map {
    flex: 1 1 520px;
    min-width: 0;
    min-height: 420px;
    background: var(--ug-map);
    position: relative;
}
.ug-store__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ug-store__info {
    flex: 1 1 520px;
    min-width: 0;
    min-height: 420px;
    background: var(--ug-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    box-sizing: border-box;
    text-align: center;
}
.ug-store__title { margin: 0; font-size: 32px; font-weight: 400; color: var(--ug-text); }
.ug-store__address {
    margin: 18px 0 0;
    font-style: normal;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
}
.ug-store__hours { margin-top: 22px; font-size: 17px; font-weight: 300; line-height: 1.7; }
.ug-store__hours-strong { font-weight: 400; }
.ug-store__buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.ug-pill {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 26px;
    border: 2px solid var(--ug-text);
    border-radius: 23px;
    font-size: 16px;
    font-weight: 400;
    color: var(--ug-text) !important;
    transition: background .2s, color .2s;
}
.ug-pill:hover { background: var(--ug-text); color: #ffffff !important; }
@media (max-width: 767px) {
    .ug-store { padding: 0; }
    .ug-store__map, .ug-store__info { flex-basis: 100%; min-height: 320px; }
}

/* ───────────── Benefits band ───────────── */
.ug-benefits { padding: 10px 24px 56px; }
.ug-benefits__inner {
    background: var(--ug-red-dark);
    color: #ffffff;
    padding: 34px 32px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}
.ug-benefit { display: flex; align-items: center; gap: 16px; }
.ug-benefit svg { width: 42px; height: 42px; flex-shrink: 0; }
.ug-benefit__title { font-size: 17px; font-weight: 500; }
.ug-benefit__text { font-size: 15px; font-weight: 300; margin-top: 2px; }
@media (max-width: 767px) {
    .ug-benefits { padding: 10px 0 40px; }
    .ug-benefits__inner { padding: 28px 20px; }
}

/* Screen-reader only text */
.ug-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
[x-cloak] { display: none !important; }

/* ───────────── Account dropdown (header "auth-links") ─────────────
 * Links and buttons get the same font on purpose: browsers and Tailwind reset
 * font-stretch / text-transform on <button>, so they didn't inherit .ug-font. */
.ug-auth-menu__trigger,
.ug-auth-menu__item {
    font-family: "Noto Sans Georgian", sans-serif;
    font-stretch: 62.5%;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: normal;
    color: #707070;
    background: none;
    border: 0;
    cursor: pointer;
}
.ug-auth-menu__trigger {
    display: flex;
    align-items: center;
    padding: 0;
}
/* Mobile menu: full-width row like the other menu entries */
.ug-auth-menu__trigger--block {
    width: 100%;
    padding: 8px 0;
}
.ug-auth-menu__item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    text-align: left;
}
.ug-auth-menu__trigger:hover,
.ug-auth-menu__item:hover { color: #1A1A1A; }
.ug-auth-menu__item:hover { background: #f3f4f6; }
.ug-auth-menu__item--active { font-weight: 700; }