/* =============================================================
   AstroAI.ge — css/style.css
   Shared stylesheet for every page (the only stylesheet on 20 of 21 pages).

   Order of sections (order is significant — see "Cascade notes"):
     1. Reset, header, hero, product cards, info/preview sections,
        order forms, legal/FAQ/contact pages, footer    (all widths)
     2. @media (max-height: 850px)          short desktop screens
     3. @media (max-width: 1024px)          tablet and below
     4. @media (max-width: 1920px)          up to full-HD
     5. @media (max-width: 767px)           mobile
     6. @media (max-width: 479px)           small mobile
     7. @media (max-width: 370px)           360px-class phones
     8. @media (min-width: 768px) and (max-width: 1024px)   tablet only
     9. @media (width: 1024px)              exactly 1024px (approved 1024x768 layout)
    10. @media (min-width: 1025px) and (max-width: 1920px)  desktop
    11. @media (min-width: 1921px)          large / 4K screens
    12. Page-specific components (formerly inline <style> blocks in the
        HTML), grouped per page; scoped with :where(.page-*) only where a
        selector would otherwise match on other pages (zero specificity
        added). Includes one (max-width: 767px) block for the natal-chart
        table of contents / preview grid.

   Breakpoint system: 370 / 479 / 767 / 1024 / 1920 (mobile-first
   thresholds are 768 / 1025 / 1921). Use only these values here.

   Cascade notes:
   - Section 12 must stay last: its rules override shared component
     rules with equal specificity.
   - The (max-width: 767px) block inside section 12 cannot be merged
     into section 5: it contains rules that must win over section 6.
     This was verified with a cascade model, not assumed.
   - !important is used only where a rule must beat a more specific
     selector; each remaining use is load-bearing (4 in this file).
   ============================================================= */

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

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    background: #ffffff;
    color: #111111;
    font-family: "Noto Sans Georgian", sans-serif;
}

/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 84px;
    background: #081f39;
    border-bottom: 1px solid #d9d9d9;
}

.header-container {
    width: 100%;
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    padding: 0 34px;
    display: flex;
    align-items: center;
}

/* Logo */

.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.site-logo img {
    display: block;
    width: 150px;
    height: auto;
}

/* Navigation */

.main-nav {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-left: auto;
}

.main-nav a {
    position: relative;
    padding: 32px 0 27px;
    color: #647183;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 0;
    height: 2px;
    background: #ffffff;
    transition: width 0.3s ease;
}

.main-nav a:not(.active):hover {
    color: #ffffff;
}

.main-nav a:not(.active):hover::after {
    width: 100%;
}

.main-nav a.active {
    color: #eca44b;
}

.main-nav a.active::after {
    width: 100%;
    background: #eca44b;
}

/* Header actions */

.header-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: 34px;
}

/* Free test button */

.free-test-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    height: 35px;
    padding: 0 20px;
    background: #0b2845;
    color: #eca44b;
    border: 2px solid #5f4b32;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}

.free-test-btn:hover {
    background: #eca44b;
    color: #ffffff;
}

/* Social links */

.social-links {
    display: flex;
    align-items: center;
    gap: 13px;
}

.social-icon {
    display: block;
    width: 20px;
    height: 20px;
    background-color: #535e6c;
    transition: background-color 0.3s ease;
}

.social-icon:hover {
    background-color: #eda54b;
}

.social-facebook {
    mask: url("../assets/images/facebook.svg") center / contain no-repeat;
    -webkit-mask: url("../assets/images/facebook.svg") center / contain
        no-repeat;
}

.social-instagram {
    mask: url("../assets/images/instagram.svg") center / contain no-repeat;
    -webkit-mask: url("../assets/images/instagram.svg") center / contain
        no-repeat;
}

.social-tiktok {
    mask: url("../assets/images/tiktok.svg") center / contain no-repeat;
    -webkit-mask: url("../assets/images/tiktok.svg") center / contain no-repeat;
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
    width: 100%;
    background: #ffffff;
}

.hero-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 70px 24px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: clamp(42px, 4vh, 70px);
    padding-bottom: clamp(42px, 4vh, 70px);
}

.hero-logo {
    display: block;
    width: 200px;
    height: auto;
}

.hero-title {
    color: #00598a;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    margin-top: clamp(18px, 2.4vh, 30px);
}

.hero-description {
    color: #545f6f;
    font-size: 15px;
    font-weight: 400;
    margin-top: clamp(14px, 2vh, 24px);
}

/* =========================================================
   PRODUCTS
   ========================================================= */

.products-section {
    width: 100%;
    background: #f4f2ef;
}

.products-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    padding-top: clamp(25px, 3vh, 70px);
    padding-bottom: clamp(25px, 3vh, 70px);
}

.product-card {
    background: #0e2d50;
    padding: 10px;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.product-card-inner {
    min-height: 100%;
    padding: 26px 18px 24px;
    border: 1px solid #9f7855;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.product-card-image {
    display: block;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease;
}

.product-card-title {
    margin-top: 14px;
    color: #b48b67;
    font-weight: 600;
    line-height: 1.35;
    transition: color 0.3s ease;
}

/* Smaller desktop screens */

@media (max-height: 850px) {
    .hero-container {
        padding-top: clamp(28px, 4.5vh, 45px);
        padding-bottom: clamp(28px, 4.5vh, 45px);
    }

    .hero-title {
        margin-top: clamp(14px, 2vh, 22px);
    }

    .hero-description {
        margin-top: clamp(12px, 1.6vh, 18px);
    }

    .products-container {
        padding-top: clamp(28px, 4.5vh, 45px);
        padding-bottom: clamp(28px, 4.5vh, 45px);
    }
}

/* =========================================================
   FREE TEST CTA
   ========================================================= */

.test-cta {
    width: 100%;
    background: #ffffff;
    flex: 1 1 0;
    min-height: 0;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.test-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    height: 40px;
    padding: 0 0 5px;
    background: #eca44b;
    color: #ffffff;
    border: none;
    border-radius: 16px;
    font-size: 14.3px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}

.test-cta-button:hover {
    background: #0b2845;
    color: #eca44b;
    border-color: #5f4b32;
}

/* =========================================================
   SITE FOOTER
   ========================================================= */

.site-footer {
    width: 100%;
    height: 40px;
    background: #081f39;
    position: static;
}

.footer-container {
    width: 100%;
    max-width: 1440px;
    height: 40px;
    margin: 0 auto;
    padding: 0 34px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.footer-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.footer-logo img {
    display: block;
    width: 70px;
    height: auto;
}

.footer-nav {
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
    gap: 30px;
}

.footer-nav a {
    color: rgb(100, 113, 131);
    font-size: 11px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: #eca44b;
}

/* =========================================================
   MAIN VERTICAL FILL
   ========================================================= */

main {
    height: auto;
    min-height: calc(100vh - 84px - 40px);
    display: flex;
    flex-direction: column;
}

/* Product card interaction */

.product-card:hover {
    background-color: #0b2440;
}

/* Product image hover */

.product-card:hover .product-card-image {
    transform: scale(1.05);
}

/* =========================================================
   PROJECT PAGE
   ========================================================= */

.project-main {
    display: block;
    min-height: calc(100vh - 84px - 60px);
}

.project-page {
    width: 100%;
    background: #ffffff;
    padding: 34px 24px 90px;
}

.project-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.project-intro {
    margin-bottom: 26px;
}

.project-intro h1 {
    margin: 0 0 20px;
    color: #00598a;
    font-weight: 600;
}

.project-intro h1 span {
    color: #eca44b;
}

.project-intro p,
.project-section-box p {
    margin: 0 0 9px;
    color: #545f6f;
    font-weight: 400;
}

.project-section {
    margin-top: 15px;
}

.project-section h2 {
    margin: 0 0 8px 10px;
    color: #00598a;
    font-weight: 600;
    line-height: 1.4;
}

.project-section h2 span {
    margin-right: 8px;
    color: #eca44b;
    font-weight: 700;
}

.project-section-box {
    background: #f4f2ef;
    border-radius: 12px;
    padding: 14px 18px;
}

.project-section-box p:last-child {
    margin-bottom: 0;
}

.project-process {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0 12px;
    color: #545f6f;
    line-height: 1.5;
}

.project-process b {
    color: #eca44b;
    font-weight: 700;
}

.project-products-list strong {
    color: #00598a;
    font-weight: 600;
}

.project-closing {
    color: #00598a !important;
    font-weight: 600 !important;
}

/* =========================================================
   PRODUCTS PAGE
   ========================================================= */

.products-page-main {
    display: block;
    min-height: calc(100vh - 84px - 60px);
}

.products-page {
    width: 100%;
    min-height: calc(100vh - 84px - 60px);
    padding: 28px 24px 85px;
    background: #ffffff;
}

.products-page-container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.products-page-intro {
    margin-bottom: 28px;
    text-align: center;
}

.products-page-intro p {
    color: rgb(100, 113, 131);
    font-weight: 500;
    line-height: 1.55;
}

.products-page-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 24px;
}

.products-page-card {
    display: block;
    padding: 12px;
    background: #f4f2ef;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.products-page-card:hover {
    transform: translateY(-3px);
    background: #e9e6e1;
}

.products-page-visual {
    padding: 14px 12px 18px;
    background: #0e2d50;
    border: 1px solid #9f7855;
    border-radius: 6px;
    text-align: center;
}

.products-page-visual img {
    display: block;
    width: 185px;
    height: 185px;
    margin: 0 auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.products-page-card:hover .products-page-visual img {
    transform: scale(1.05);
}

.products-page-visual h2 {
    margin: 10px 0 0;
    color: #d29b58;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.products-page-info {
    position: relative;
    min-height: 70px;
    padding: 12px 62px 2px 2px;
}

.products-page-info p {
    color: #273b4f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.products-page-price {
    position: absolute;
    right: 2px;
    bottom: 2px;
    color: #00598a;
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
}

.products-page-price.free {
    color: #eca44b;
    font-size: 14px;
}

/* =========================================================
   PRODUCT DETAIL PAGE
   ========================================================= */

.product-detail-main {
    display: block;
    min-height: calc(100vh - 84px - 60px);
}

.product-detail-page {
    width: 100%;
    background: #ffffff;
    padding: 34px 24px 95px;
}

.product-detail-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

/* HERO */

.product-detail-hero {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 58px;
    align-items: center;
    margin-bottom: 26px;
}

.product-detail-cover {
    padding: 10px;
    background: #081f39;
    border-radius: 8px;
}

.product-detail-cover-inner {
    padding: 16px 14px 18px;
    border: 1px solid #9f7855;
    border-radius: 5px;
    text-align: center;
}

.product-detail-cover-inner img {
    display: block;
    width: 190px;
    height: 190px;
    margin: 0 auto;
    object-fit: contain;
}

.product-detail-cover-inner h2 {
    margin: 10px 0 0;
    color:#d29b58;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.product-detail-summary h1 {
    margin: 0 0 22px;
    color: #eca44b;
    font-weight: 700;
}

.product-detail-lead {
    max-width: none;
    width: 100%;
    color: #545f6f;
    font-weight: 500;
    line-height: 1.65;
    text-align: justify;
}

.product-detail-meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-top: 12px;
}

.product-detail-meta p,
.product-detail-buy p {
    margin: 4px 0;
    color: #545f6f;
    line-height: 1.5;
}

.product-detail-meta strong {
    color: #00598a;
    font-weight: 700;
}

.product-detail-buy {
    min-width: 155px;
    text-align: center;
}

.product-detail-buy p strong {
    margin-left: 6px;
    color: #00598a;
    font-weight: 700;
}

.product-buy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 162px;
    height: 50px;
    margin-top: 9px;
    padding: 0 29px;
    background: #eca44b;
    color: #ffffff;
    border-radius: 13px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.product-buy-button:hover {
    background: #d99139;
    transform: translateY(-2px);
}

/* INFO SECTIONS */

.product-info-section {
    margin-top: 16px;
}

.product-info-section h2,
.product-preview-section h2 {
    color: #00598a;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 25px 30px;
}

.product-info-section h2 span,
.product-preview-section h2 span {
    margin-right: 8px;
    color: #eca44b;
    font-weight: 700;
}

.product-info-box {
    background: #f4f2ef;
    border-radius: 12px;
    padding: 35px;
}

.product-info-box p {
    margin: 0 0 9px;
    color: #545f6f;
    font-weight: 400;
    line-height: 1.65;
    text-align: justify;
}

.product-info-box p:last-child {
    margin-bottom: 0;
}

/* PREVIEW */

.product-preview-section {
    margin-top: 20px;
}

.product-preview-grid {
    display: grid;
    align-items: start;
}

.product-preview-grid figure {
    text-align: center;
}

.product-preview-grid img {
    object-fit: contain;
    object-position: center;
}

.product-preview-grid figcaption {
    margin-top: 9px;
    color: #00598a;
    font-weight: 600;
}

/* =========================================================
   PRODUCT PREVIEW LIGHTBOX
   ========================================================= */

.preview-lightbox-image {
    cursor: zoom-in;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.preview-lightbox-image:hover {
    transform: scale(1.025);
}

.preview-lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 90px;
    background: rgba(5, 18, 32, 0.88);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.preview-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.preview-lightbox-full {
    display: block;
    max-width: min(90vw, 1050px);
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #ffffff;
}

.preview-lightbox-close {
    position: absolute;
    top: 22px;
    right: 30px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 40px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: color 0.25s ease;
}

.preview-lightbox-close:hover {
    color: #eca44b;
}

.preview-lightbox-arrow {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 70px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 58px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color 0.25s ease;
}

.preview-lightbox-arrow:hover {
    color: #eca44b;
}

.preview-lightbox-prev {
    left: 28px;
}

.preview-lightbox-next {
    right: 28px;
}

body.lightbox-open {
    overflow: hidden;
}

/* =========================================================
   NATAL PROFILE ORDER PAGE
   ========================================================= */

.order-page-main {
    min-height: calc(100vh - 84px - 60px);
    display: block;
}

.order-page {
    background: #ffffff;
    padding: 26px 34px 42px;
}

.order-page-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.order-heading {
    text-align: center;
    margin-bottom: 18px;
}

.order-heading h1 {
    margin: 0 0 10px;
    color: #eca44b;
    font-weight: 700;
}

.order-heading p {
    margin: 0 auto;
    color: #00598a;
    font-weight: 600;
    line-height: 1.6;
}

.order-form {
    background: #f4f2ef;
    border-radius: 14px;
    padding: 22px 24px 20px;
}

.order-grid {
    display: grid;
    width: 100%;
    gap: 18px;
}

.order-grid-date {
    margin-top: 18px;
}

.order-grid-email {
    grid-template-columns: repeat(2, 1fr);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.form-field label {
    color: #545f6f;
    font-weight: 600;
    margin-top: 10px;
}

.form-field input,
.form-field select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    background: #ffffff;
    color: #545f6f;
    border: 1px solid #d5d8dc;
    border-radius: 9px;
    outline: none;
    font: inherit;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.form-field input:focus,
.form-field select:focus {
    border-color: #00598a;
    box-shadow: 0 0 0 3px rgba(0, 89, 138, 0.08);
}

.form-field input::placeholder {
    color: #a7adb4;
}

.order-divider {
    width: 50%;
    height: 1px;
    margin: 20px auto 5px;
    background: #c7c8c9;
}

.order-email-note {
    margin: 10px 0 0;
    text-align: center;
    color: #545f6f;
    line-height: 1.6;
}

.order-checkout-row {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 18px;
}

.order-submit-button {
    height: 48px;
    padding: 0 28px;
    border: 0;
    border-radius: 9px;
    background: #005f91;
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.order-submit-button:hover {
    background: #004f79;
    transform: translateY(-2px);
}

.order-generation-note {
    font-size: 12px;
    color: #545f6f;
    line-height: 1.55;
    text-align: center;
}

/* =========================================================
   NUMBER INPUT CONTROLS
   ========================================================= */

.number-input-wrap {
    position: relative;
    width: 100%;
}

.number-input-wrap input[type="number"]::-webkit-inner-spin-button,
.number-input-wrap input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.number-spinner {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 16px;
    height: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.number-spinner-up,
.number-spinner-down {
    position: relative;
    width: 16px;
    height: 11px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.number-spinner-up::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 3px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid #858b91;
}

.number-spinner-down::before {
    content: "";
    position: absolute;
    left: 4px;
    bottom: 2px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #858b91;
}

/* =========================================================
   FAQ PAGE
   ========================================================= */

.faq-main {
    min-height: calc(100vh - 84px - 60px);
    display: block;
}

.faq-page {
    background: #ffffff;
    padding: 34px 34px 55px;
}

.faq-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.faq-heading {
    text-align: center;
    margin-bottom: 28px;
}

.faq-heading h1 {
    margin: 0 0 10px;
    color: #eca44b;
    font-weight: 700;
}

.faq-heading p {
    max-width: 780px;
    margin: 0 auto;
    color: #545f6f;
    line-height: 1.7;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    overflow: hidden;
    background: #f4f2ef;
    border-radius: 10px;
    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

.faq-item:hover {
    background: #efede9;
}

.faq-question {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: 42px 1fr 28px;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.faq-number {
    color: #eca44b;
    font-weight: 700;
}

.faq-question-text {
    color: #00598a;
    font-weight: 700;
    line-height: 1.45;
}

.faq-toggle {
    position: relative;
    width: 18px;
    height: 18px;
    justify-self: end;
}

.faq-toggle::before,
.faq-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    background: #647183;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.faq-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.is-open .faq-toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item.is-open {
    background: #f4f2ef;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-answer-inner {
    padding: 0 70px 20px 70px;
    color: #545f6f;
    line-height: 1.7;
}

.faq-answer-inner p {
    margin: 0 0 10px;
}

.faq-answer-inner p:last-child {
    margin-bottom: 0;
}

.faq-answer-inner ul {
    margin: 8px 0 10px 18px;
}

.faq-answer-inner li {
    margin: 4px 0;
}

.faq-answer-inner a {
    color: #00598a;
    font-weight: 600;
    text-decoration: none;
}

.faq-answer-inner a:hover {
    color: #eca44b;
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-main {
    min-height: calc(100vh - 84px - 60px);
    display: block;
}

.contact-page {
    background: #ffffff;
    padding: 46px 34px 70px;
}

.contact-container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.contact-heading {
    text-align: center;
    margin-bottom: 30px;
}

.contact-heading h1 {
    margin: 0 0 10px;
    color: #eca44b;
    font-weight: 700;
}

.contact-heading p {
    max-width: 720px;
    margin: 0 auto;
    color: #545f6f;
    line-height: 1.7;
}

.contact-card {
    background: #f4f2ef;
    border-radius: 14px;
    padding: 34px 38px;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.contact-info-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #545f6f;
    text-align: center;
}

.contact-info-label {
    color: #00598a;
    font-weight: 700;
}

.contact-info-item a {
    color: #545f6f;
    text-decoration: none;
    transition: color 0.25s ease;
}

.contact-info-item a:hover {
    color: #eca44b;
}

.contact-company span:not(.contact-info-label) {
    line-height: 1.45;
}

.contact-divider {
    width: 65%;
    height: 1px;
    margin: 30px auto 26px;
    background: #d0ceca;
}

.contact-socials {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.contact-social-link {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ffffff;
    border-radius: 10px;
    color: #545f6f;
    font-weight: 600;
    text-decoration: none;
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.contact-social-link:hover {
    background: #0e2d50;
    color: #ffffff;
    transform: translateY(-2px);
}

.contact-social-icon {
    width: 19px;
    height: 19px;
    display: inline-block;
    flex: 0 0 auto;
    background-color: #647183;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color 0.3s ease;
}

.contact-social-link:hover .contact-social-icon {
    background-color: #eca44b;
}

.contact-facebook {
    -webkit-mask-image: url("../assets/images/facebook.svg");
    mask-image: url("../assets/images/facebook.svg");
}

.contact-instagram {
    -webkit-mask-image: url("../assets/images/instagram.svg");
    mask-image: url("../assets/images/instagram.svg");
}

.contact-tiktok {
    -webkit-mask-image: url("../assets/images/tiktok.svg");
    mask-image: url("../assets/images/tiktok.svg");
}

.contact-youtube {
    position: relative;
    border-radius: 5px;
    background-color: transparent;
}

.contact-youtube::before {
    content: "";
    position: absolute;
    inset: 2px 0;
    border-radius: 5px;
    background: #647183;
}

.contact-youtube::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 8px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #ffffff;
}

.contact-social-link:hover .contact-youtube::before {
    background: #eca44b;
}

/* =========================================================
   LEGAL PAGES
   ========================================================= */

.legal-main {
    min-height: calc(100vh - 84px - 60px);
    display: block;
}

.legal-page {
    background: #ffffff;
    padding: 42px 34px 70px;
}

.legal-container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.legal-heading {
    text-align: center;
    margin-bottom: 34px;
}

.legal-heading h1 {
    color: #eca44b;
    font-weight: 700;
}

.legal-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.legal-section {
    background: #f4f2ef;
    border-radius: 10px;
    padding: 24px 28px;
}

.legal-section h2 {
    margin: 0 0 18px;
    color: #00598a;
    font-weight: 700;
}

.legal-section h2 span {
    display: inline-block;
    margin-right: 9px;
    color: #eca44b;
}

.legal-section p {
    margin: 0 0 12px;
    color: #545f6f;
    line-height: 1.75;
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-section p strong {
    color: #3e4b5c;
    font-weight: 700;
}

.legal-section ul {
    margin: 6px 0 16px 20px;
    color: #545f6f;
}

.legal-section li {
    margin-bottom: 6px;
    padding-left: 4px;
    line-height: 1.65;
}

.legal-section li::marker {
    color: #eca44b;
}

.legal-section a {
    color: #00598a;
    text-decoration: none;
    transition: color 0.25s ease;
}

.legal-section a:hover {
    color: #eca44b;
}

.legal-update-note {
    margin-top: 22px !important;
    padding-top: 18px;
    border-top: 1px solid #d5d2cd;
}

/* =========================================================
   FREE TEST PAGE
   ========================================================= */

.free-test-main {
    min-height: calc(100vh - 84px - 60px);
    display: block;
}

.free-test-page {
    background: #ffffff;
    padding: 42px 34px 70px;
}

.free-test-container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.free-test-heading {
    text-align: center;
    margin-bottom: 30px;
}

.free-test-heading h1 {
    margin: 0 0 12px;
    color: #b48b67;
    font-weight: 700;
}

.free-test-heading p {
    max-width: 760px;
    margin: 0 auto;
    color: #545f6f;
    line-height: 1.75;
}

.free-test-content {
    color: #545f6f;
}

.free-test-content > p {
    margin: 0 0 18px;
    line-height: 1.8;
    text-align: justify;
}

.free-test-content strong {
    color: #00598a;
    font-weight: 700;
}

.free-test-highlight {
    margin: 24px 0;
    padding: 22px 26px;
    background: #f4f2ef;
    border-left: 3px solid #eca44b;
    border-radius: 8px;
}

.free-test-highlight p {
    color: #3f4d5e;
    line-height: 1.8;
    text-align: center;
}

.free-test-action {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid #e0dedb;
    text-align: center;
}

.free-test-action p {
    margin: 0 auto 20px;
    max-width: 720px;
    color: #545f6f;
    line-height: 1.7;
}

.free-test-action-button {
    min-width: 220px;
    height: 48px;
    padding: 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eca44b;
    border-radius: 13px;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.free-test-action-button:hover {
    background: #0e2d50;
    transform: translateY(-2px);
}

/* Order forms — per-product field grids (desktop). Mobile overrides live in the responsive section. */
.forecast-order-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.forecast-order-date {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.forecast-order-city-wrap {
    position: relative;
}

.forecast-order-checkout {
    align-items: end;
}

.forecast-order-period {
    margin-bottom: 28px;
}

.forecast-period-label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #081f39;
}

.forecast-period-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.forecast-period-option {
    position: relative;
    cursor: pointer;
}

.forecast-period-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.forecast-period-option span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 0 18px;
    border: 1px solid rgba(8, 31, 57, 0.18);
    border-radius: 12px;
    background: #ffffff;
    transition: 0.2s ease;
}

.forecast-period-option strong {
    color: #081f39;
    font-size: 15px;
}

.forecast-period-option small {
    color: #eca44b;
    font-size: 15px;
    font-weight: 700;
}

.forecast-period-option input:checked + span {
    border-color: #eca44b;
    box-shadow: 0 0 0 2px rgba(236, 164, 75, 0.12);
}

.compatibility-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compatibility-date {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.compatibility-checkout {
    align-items: end;
}

.compatibility-person-heading h3 {
    color: #006b98;
    font-size: 18px;
    font-weight: 700;
}

.natal-chart-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.natal-chart-date {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.natal-chart-city-wrap {
    position: relative;
}

.natal-chart-checkout {
    align-items: end;
}

.natal-profile-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.natal-profile-date {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.natal-profile-city-wrap {
    position: relative;
}

.natal-profile-checkout {
    align-items: end;
}

.real-test-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.real-test-date {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.real-test-city-wrap {
    position: relative;
}

.real-test-submit-row {
    display: flex;
    justify-content: center;
}

.real-test-submit-row .order-submit-button {
    min-width: 260px;
}

.real-test-message {
    text-align: center;
    margin: 18px 0 0;
}

.city-ac-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1000;
    max-height: 240px;
    overflow-y: auto;
}

/* TABLET */

@media (max-width: 1024px) {
    .product-detail-page {
        padding-left: 28px;
        padding-right: 28px;
    }

    .product-detail-hero {
        gap: 38px;
    }

    .product-detail-cover-inner img {
        width: 160px;
        height: 160px;
    }

    .product-preview-grid img,
    .product-preview-section .product-preview-grid img {
        max-height: none;
    }

    .order-checkout-row {
        grid-template-columns: minmax(220px, 0.7fr) 1.3fr;
    }

    .product-card-image {
        width: 180px;
        height: 180px;
    }
}

/* =========================================================
   MOBILE HEADER / HAMBURGER
   ========================================================= */

.mobile-menu-toggle {
    display: none;
}

.mobile-menu {
    display: none;
}

/* =========================================================
   HOME REAL TEST CARD TABLET MOBILE
   ========================================================= */

@media (max-width: 1920px) {
    .real-test-home-card {
        display: block;
    }

    .product-card-inner {
        position: relative;
    }

    .product-free-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        min-width: 38px;
        height: 20px;
        padding: 0 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #eca44b;
        color: #081f39;
        border-radius: 5px;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.4px;
    }
}

/* HOME MOBILE AI LINE BREAK */

.mobile-break-ai {
    display: inline;
}

@media (max-width: 767px) {
    .product-detail-page {
        padding: 26px 18px 80px;
        padding-left: 25px;
        padding-right: 25px;
    }

    .product-detail-container {
        max-width: 620px;
    }

    .product-detail-hero {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 30px;
    }

    .product-detail-cover {
        width: min(270px, 100%);
        margin: 0 auto;
    }

    .product-detail-cover-inner img {
        width: 180px;
        height: 180px;
    }

    .product-detail-summary h1 {
        margin-bottom: 16px;
        font-size: 27px;
        line-height: 1.3;
        text-align: center;
    }

    .product-detail-lead {
        line-height: 1.7;
        text-align: left;
    }

    .product-detail-meta-row {
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
    }

    .product-detail-meta {
        width: 100%;
    }

    .product-detail-buy,
    .product-detail-meta-row .product-detail-buy {
        width: 100%;
        min-width: 0;
    }

    .product-buy-button {
        width: 100%;
        max-width: 360px;
    }

    .product-info-section {
        margin-top: 24px;
    }

    .product-info-section h2,
    .product-preview-section h2 {
        margin: 0 0 14px;
        font-size: 20px;
        line-height: 1.45;
    }

    .product-info-box {
        padding: 22px 20px;
    }

    .product-info-box p {
        line-height: 1.7;
        text-align: left;
    }

    .product-preview-section {
        margin-top: 28px;
    }

    /* ORDER PAGES */

    .order-heading {
        margin-bottom: 22px;
    }

    .order-heading h1 {
        font-size: 27px;
        line-height: 1.3;
    }

    .order-heading p {
        line-height: 1.65;
    }

    .order-form {
        padding: 20px 18px;
    }

    .order-grid-date {
        margin-top: 12px;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        column-gap: 8px;
        row-gap: 12px;
    }

    .form-field label {
        margin-top: 6px;
    }

    .order-divider {
        width: 80%;
        margin-top: 24px;
    }

    .order-submit-button {
        min-height: 50px;
        height: auto;
        padding: 12px 18px;
        line-height: 1.4;
        width: 100%;
    }

    .order-email-note {
        text-align: left;
    }

    .site-header {
        height: 72px;
        z-index: 3000;
    }

    .header-container {
        position: relative;
        padding: 0 22px;
        justify-content: space-between;
    }

    .site-logo img {
        width: 130px;
    }

    .main-nav,
    .header-actions {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid rgba(236, 164, 75, 0.55);
        border-radius: 10px;
        cursor: pointer;
    }

    .mobile-menu-toggle span {
        position: relative;
        width: 20px;
        height: 2px;
        background: #eca44b;
        transition:
            background-color 0.25s ease,
            transform 0.25s ease;
    }

    .mobile-menu-toggle span::before,
    .mobile-menu-toggle span::after {
        content: "";
        position: absolute;
        left: 0;
        width: 20px;
        height: 2px;
        background: #eca44b;
        transition:
            top 0.25s ease,
            transform 0.25s ease;
    }

    .mobile-menu-toggle span::before {
        top: -6px;
    }

    .mobile-menu-toggle span::after {
        top: 6px;
    }

    .mobile-menu-toggle.active span {
        background: transparent;
    }

    .mobile-menu-toggle.active span::before {
        top: 0;
        transform: rotate(45deg);
    }

    .mobile-menu-toggle.active span::after {
        top: 0;
        transform: rotate(-45deg);
    }

    .mobile-menu {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        padding: 20px 22px 24px;
        background: #081f39;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        z-index: 2000;
    }

    .mobile-menu.open {
        display: block;
    }

    .mobile-menu-nav {
        display: flex;
        flex-direction: column;
    }

    .mobile-menu-nav a {
        padding: 13px 0;
        color: #c4cbd3;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }

    .mobile-menu-nav a.active {
        color: #eca44b;
    }

    .mobile-menu-actions {
        margin-top: 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .mobile-menu .free-test-btn {
        display: inline-flex;
    }

    .mobile-menu .social-links {
        gap: 14px;
    }

    .mobile-menu .social-links a {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .site-footer {
        height: auto;
    }

    .footer-container {
        height: auto;
        padding: 24px 22px 26px;
        flex-direction: column;
        justify-content: center;
        gap: 22px;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-logo img {
        width: 110px;
    }

    main {
        min-height: 0;
    }

    .hero-container {
        padding: 42px 25px 46px;
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .test-cta {
        position: static;
        flex: none;
        height: auto;
        padding: 25px 24px;
    }

    .hero-logo {
        width: 180px;
        max-width: 75%;
    }

    .hero-title {
        margin-top: 16px;
        line-height: 1.3;
        font-size: 17px;
    }

    .hero-description {
        font-size: 14px;
        margin-top: 10px;
        line-height: 1.4;
    }

    .product-card {
        width: 100%;
        max-width: none;
    }

    .product-card-inner {
        min-height: 0;
        padding: 16px 10px 18px;
        justify-content: flex-start;
        gap: 12px;
    }

    .product-card-image {
        width: 120px;
        height: 120px;
        flex: 0 0 auto;
    }

    .product-card-title {
        margin-top: 0;
        font-size: 15px;
        text-align: center;
    }
    .mobile-break-ai {
        display: block;
    }

    /* HOME MOBILE PRODUCTS 2 COL */
    .products-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        padding: 20px 25px;
    }

    /* =========================================================
   MOBILE FOOTER TWO COLUMNS FINAL
   ========================================================= */

    .footer-nav {
        width: 100%;
        max-width: 330px;
        display: grid;
        grid-template-columns: 1fr 1.35fr;
        grid-template-rows: repeat(4, auto);
        grid-auto-flow: column;
        column-gap: 28px;
        row-gap: 12px;
        margin: 0 auto;
    }

    .footer-nav a {
        text-align: left;
        white-space: normal;
        line-height: 1.4;
    }

    .products-page {
        padding-left: 25px;
        padding-right: 25px;
    }

    .products-page-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .products-page-card {
        width: 100%;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }

    .products-page-info {
        display: flex;
        align-items: center;
    }

    .products-page-info p {
        font-size: inherit;
    }

    .order-grid-top {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .order-grid-date > .form-field:nth-child(1),
    .order-grid-date > .form-field:nth-child(2),
    .order-grid-date > .form-field:nth-child(3) {
        grid-column: span 2;
    }

    .order-grid-date > .form-field:nth-child(4),
    .order-grid-date > .form-field:nth-child(5) {
        grid-column: span 3;
    }

    .order-grid-date .form-field {
        width: 100%;
    }

    .order-grid-date .form-field label {
        width: 100%;
        text-align: center;
        white-space: nowrap;
    }

    .order-grid-email {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .order-checkout-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .faq-question {
        grid-template-columns: 28px minmax(0, 1fr) 20px;
        gap: 6px;
        padding: 10px 14px;
    }

    .faq-number {
        width: 28px;
        text-align: left;
    }

    .faq-question-text {
        width: 100%;
        min-width: 0;
        text-align: left;
        line-height: 1.4;
    }

    .faq-answer-inner {
        padding: 0 16px 18px 16px;
        text-align: left;
    }

    .faq-answer-inner p {
        text-align: left;
    }

    .contact-card {
        width: 100%;
        padding: 28px 20px;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 22px;
        width: 100%;
    }

    .contact-info-item {
        align-items: center;
        width: 100%;
        gap: 4px;
    }

    .contact-info-label {
        display: block;
        width: 100%;
        text-align: center;
    }

    .contact-info-item a,
    .contact-info-item > span:not(.contact-info-label) {
        display: block;
        max-width: 100%;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .contact-divider {
        width: 70%;
        margin: 26px auto;
    }

    .contact-socials {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
    }

    .contact-social-link {
        width: 100%;
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
    }

    .natal-chart-date {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
    }

    .natal-chart-date .form-field:nth-child(1) {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .natal-chart-date .form-field:nth-child(2) {
        grid-column: 3 / span 2;
        grid-row: 1;
    }

    .natal-chart-date .form-field:nth-child(3) {
        grid-column: 5 / span 2;
        grid-row: 1;
    }

    .natal-chart-date .form-field:nth-child(4) {
        grid-column: 1 / span 3;
        grid-row: 2;
    }

    .natal-chart-date .form-field:nth-child(5) {
        grid-column: 4 / span 3;
        grid-row: 2;
    }

    .natal-chart-date .form-field:nth-child(4) label {
        white-space: nowrap;
        font-size: inherit;
    }

    .natal-chart-top {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .natal-chart-top .form-field {
        width: 100%;
    }

    .natal-chart-top .form-field label {
        display: block;
        width: 100%;
    }

    .order-grid-date .form-field input,
    .order-grid-date .form-field select {
        min-width: 0;
    }

    .natal-chart-date .number-input-wrap {
        min-width: 0;
    }

    .natal-chart-date .number-input-wrap input {
        min-width: 0;
    }

    .natal-chart-date .form-field .number-input-wrap input[type="number"] {
        text-align: left;
        padding-right: 36px;
    }

    .real-test-date .number-input-wrap input[type="number"] {
        text-align: left;
        padding-right: 36px;
    }

    .natal-profile-top {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .natal-profile-top .form-field {
        width: 100%;
    }

    .natal-profile-date {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
    }

    .natal-profile-date .form-field:nth-child(1) {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .natal-profile-date .form-field:nth-child(2) {
        grid-column: 3 / span 2;
        grid-row: 1;
    }

    .natal-profile-date .form-field:nth-child(3) {
        grid-column: 5 / span 2;
        grid-row: 1;
    }

    .natal-profile-date .form-field:nth-child(4) {
        grid-column: 1 / span 3;
        grid-row: 2;
    }

    .natal-profile-date .form-field:nth-child(5) {
        grid-column: 4 / span 3;
        grid-row: 2;
    }

    .natal-profile-date .form-field:nth-child(4) label {
        white-space: nowrap;
        font-size: inherit;
    }

    .natal-profile-date .number-input-wrap {
        min-width: 0;
    }

    .natal-profile-date .number-input-wrap input[type="number"] {
        min-width: 0;
        text-align: left;
        padding-right: 36px;
    }

    .forecast-order-top {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .forecast-order-top .form-field,
    .forecast-order-top .form-field input {
        width: 100%;
    }

    .forecast-order-date {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
    }

    .forecast-order-date .form-field:nth-child(1) {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .forecast-order-date .form-field:nth-child(2) {
        grid-column: 3 / span 2;
        grid-row: 1;
    }

    .forecast-order-date .form-field:nth-child(3) {
        grid-column: 5 / span 2;
        grid-row: 1;
    }

    .forecast-order-date .form-field:nth-child(4) {
        grid-column: 1 / span 3;
        grid-row: 2;
    }

    .forecast-order-date .form-field:nth-child(5) {
        grid-column: 4 / span 3;
        grid-row: 2;
    }

    .forecast-order-date .form-field:nth-child(4) label {
        white-space: nowrap;
        font-size: inherit;
    }

    .forecast-order-date .number-input-wrap {
        min-width: 0;
    }

    .forecast-order-date .number-input-wrap input[type="number"] {
        min-width: 0;
        text-align: left;
        padding-right: 36px;
    }

    .compatibility-top {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .compatibility-top .form-field,
    .compatibility-top .form-field input {
        width: 100%;
    }

    .compatibility-date {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
    }

    .compatibility-date .form-field:nth-child(1) {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .compatibility-date .form-field:nth-child(2) {
        grid-column: 3 / span 2;
        grid-row: 1;
    }

    .compatibility-date .form-field:nth-child(3) {
        grid-column: 5 / span 2;
        grid-row: 1;
    }

    .compatibility-date .form-field:nth-child(4) {
        grid-column: 1 / span 3;
        grid-row: 2;
    }

    .compatibility-date .form-field:nth-child(5) {
        grid-column: 4 / span 3;
        grid-row: 2;
    }

    .compatibility-date .form-field:nth-child(4) label {
        white-space: nowrap;
        font-size: inherit;
    }

    .compatibility-date .number-input-wrap {
        min-width: 0;
    }

    .compatibility-date .number-input-wrap input[type="number"] {
        min-width: 0;
        text-align: left;
        padding-right: 36px;
    }

    .privacy-page-body .site-header {
        position: fixed;
        left: 0;
        right: 0;
    }

    .privacy-page-body {
        padding-top: 72px;
    }

    .privacy-page-body .legal-heading h1 {
        font-size: 22px;
        line-height: 1.35;
    }
}

/* 390px და პატარა ეკრანზეც შევინარჩუნოთ 2 სვეტი */
@media (max-width: 479px) {
    .product-detail-cover {
        width: min(245px, 100%);
    }

    .product-detail-cover-inner img {
        width: 160px;
        height: 160px;
    }

    .product-detail-summary h1,
    .order-heading h1 {
        font-size: 24px;
    }

    .product-info-section h2,
    .product-preview-section h2 {
        font-size: 18px;
    }

    .product-info-box {
        padding: 19px 16px;
    }

    .product-preview-grid figcaption {
        font-size: 13px;
    }

    .order-form {
        padding: 18px 14px;
    }

    .order-divider {
        width: 100%;
    }

    .header-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .site-logo img {
        width: 120px;
    }

    .mobile-menu {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* =========================================================
   MOBILE RESPONSIVE FOOTER
   ========================================================= */

    .footer-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* =========================================================
   HOME MOBILE 2-COLUMN CARDS
   ========================================================= */

    .product-card-inner {
        padding: 14px 8px 16px;
        gap: 10px;
    }

    .product-card-image {
        width: 112px;
        height: 112px;
    }

    .product-card-title {
        font-size: 14px;
        line-height: 1.3;
    }

    .footer-nav {
        column-gap: 20px;
        row-gap: 11px;
    }
}

/* HOME PRODUCT TITLES — 360px */
@media (max-width: 370px) {
    .product-card-title {
        font-size: 13px;
        line-height: 1.25;
    }

    .real-test-home-card .product-card-title {
        font-size: 12.5px;
        line-height: 1.22;
    }

    /* HOME 360 — INNER CARD HEIGHT */
    .products-container .product-card-inner {
        height: 100%;
    }
}

/* NUMBER INPUT — FULL WIDTH */
.number-input-wrap input[type="number"] {
    padding-right: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* =========================================================
   TABLET 768-1024 GLOBAL LAYOUT
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
    /* ---------------- HEADER ---------------- */

    .site-header {
        height: 72px;
        z-index: 3000;
    }

    .header-container {
        height: 72px;
        padding: 0 28px;
        justify-content: space-between;
        position: relative;
    }

    .site-logo img {
        width: 140px;
    }

    .main-nav,
    .header-actions {
        display: none;
    }

    .mobile-menu-toggle {
        flex: 0 0 42px;
        position: relative;
        appearance: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        min-width: 42px;
        background: transparent;
        border: 1px solid rgba(236, 164, 75, 0.55);
        border-radius: 10px;
        cursor: pointer;
    }

    /* ---------------- HOME PRODUCTS ---------------- */

    .products-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
        padding-left: 32px;
        padding-right: 32px;
    }

    .products-container .product-card {
        width: 100%;
        max-width: none;
    }

    .products-container .product-card-inner {
        height: 100%;
        min-height: 0;
        padding: 18px 14px 20px;
        gap: 12px;
    }

    .products-container .product-card-title {
        margin-top: 0;
        font-size: 12px;
        line-height: 1.3;
    }

    .test-cta {
        position: static;
        flex: none;
        height: auto;
        padding: 28px 24px;
    }

    /* ---------------- FOOTER ---------------- */

    .footer-nav {
        grid-template-rows: repeat(4, auto);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: row;
        width: 100%;
        margin: 0;
        gap: 10px 35px;
        align-items: start;
    }

    /* HAMBURGER */

    .mobile-menu-toggle span {
        border: 0;
        opacity: 1;
        display: block;
        border-radius: 2px;
        transition:
            background-color 0.25s ease,
            transform 0.25s ease;
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        top: 19px;
        transform: rotate(-45deg);
    }

    .mobile-menu-toggle::before,
    .mobile-menu-toggle::after,
    .mobile-menu-toggle span::before,
    .mobile-menu-toggle span::after {
        content: none;
        display: none;
    }

    /* FOOTER — აღარ გადაეფაროს გვერდს */

    .site-footer {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        min-height: 0;
        z-index: auto;
        transform: none;
        height: auto;
    }

    .footer-container {
        position: static;
        height: auto;
        min-height: 0;
        flex-direction: column;
        max-width: 100%;
        padding: 32px 40px 20px;
        gap: 28px;
    }

    /* ზედა და ქვედა ხაზები */
    .mobile-menu-toggle span::before,
    .mobile-menu-toggle span::after {
        border-radius: 2px;
        transition:
            top 0.25s ease,
            transform 0.25s ease;
        content: "";
        display: block;
        position: absolute;
        left: 0;
        width: 20px;
        height: 2px;
        background: #eca44b;
    }

    /* TABLET MENU */

    .mobile-menu {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        padding: 20px 28px 24px;
        background: #081f39;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        z-index: 2999;
    }

    .mobile-menu.open {
        display: block;
    }

    .mobile-menu-nav {
        display: flex;
        flex-direction: column;
    }

    .mobile-menu-nav a {
        display: block;
        padding: 13px 0;
        color: #c4cbd3;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }

    .mobile-menu-nav a.active {
        color: #eca44b;
    }

    .mobile-menu-actions {
        margin-top: 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .mobile-menu .free-test-btn {
        display: inline-flex;
    }

    .mobile-menu .social-links {
        gap: 14px;
    }

    .mobile-menu .social-links a {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* =========================================================
   TABLET HAMBURGER POSITION FIX
   ========================================================= */

    .mobile-menu-toggle span,
    .mobile-menu-toggle span:nth-child(1) {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 20px;
        height: 2px;
        background: #eca44b;
    }

    .mobile-menu-toggle span::before {
        top: -6px;
    }

    .mobile-menu-toggle span::after {
        top: 6px;
    }

    /* გახსნილი მდგომარეობა — X */
    .mobile-menu-toggle.active span,
    .mobile-menu-toggle.active span:nth-child(1) {
        background: transparent;
    }

    .mobile-menu-toggle.active span::before {
        top: 0;
        transform: rotate(45deg);
    }

    .mobile-menu-toggle.active span::after {
        top: 0;
        transform: rotate(-45deg);
    }

    /* TABLET HERO SIZE */

    .hero-title {
        margin-top: clamp(15px, 18vh, 20px);
    }

    /* TABLET HERO DESCRIPTION */

    .hero-description {
        margin-top: clamp(14px, 2vh, 15px);
        line-height: 1.45;
    }

    /* TABLET HERO CONTAINER SPACING */
    .hero-container {
        padding: 40px 40px 40px;
    }

    /* TABLET FOOTER — CENTERED LOGO + 3 MENU COLUMNS */

    .footer-logo {
        align-self: center;
    }

    .footer-nav a {
        text-align: left;
    }

    /* TABLET PRODUCTS PAGE BOTTOM SPACING */
    .products-page {
        padding-bottom: 55px;
    }

    /* TABLET PRODUCTS CONTAINER AUTO HEIGHT */
    .products-page-container {
        min-height: 0;
        height: auto;
        padding-bottom: 40px;
    }

    /* TABLET PRODUCTS PAGE GRID GAP */
    .products-page-grid {
        gap: 12px 8px;
    }

    /* TABLET BIRTH TIME HERO META LAYOUT */

    .product-detail-hero {
        position: relative;
        grid-template-columns: 220px minmax(0, 1fr);
        column-gap: 36px;
        align-items: start;

        /* ადგილი ქვედა meta/buy ზოლისთვის */
        padding-bottom: 105px;
    }

    .product-detail-cover {
        align-self: start;
    }

    .product-detail-summary {
        display: block;
        min-width: 0;
    }

    .product-detail-meta-row {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: end;
        transform: translateY(-15px);
    }

    .product-detail-buy {
        margin: 0 !important;
    }

    /* TABLET BIRTH TIME H2 TITLE */
    .product-detail-summary h2 {
        margin-bottom: 25px;
        color: #00598a;
    }
}

/* 1024 TABLET LANDSCAPE — HOME PRODUCTS */
/* Exactly 1024px wide (the approved 1024×768 tablet-landscape layout).
   Deliberately a single-width query: at 1023px the tablet rules apply,
   at 1025px the desktop rules apply. */
@media (width: 1024px) {
    .products-container {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .product-card {
        min-width: 0;
    }

    .product-card-inner {
        width: 100%;
        min-width: 0;
    }

    .product-card-image {
        width: 115px;
        max-width: 100%;
        height: auto;
    }

    .product-free-badge {
        padding: 4px 7px;
    }
}

/* DESKTOP — HOME PRODUCTS: 6 CARDS IN ONE ROW */
@media (min-width: 1025px) and (max-width: 1920px) {
    .products-container {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
        padding-left: 32px;
        padding-right: 32px;
    }

    .products-container .product-card {
        width: 100%;
        min-width: 0;
    }

    .products-container .product-card-inner {
        width: 100%;
        min-width: 0;
    }

    .products-container .product-card-image {
        width: 100%;
        height: auto;
        max-width: 150px;
    }

    .products-container .product-card-title {
        font-size: 13px;
        line-height: 1.3;
    }

    /* DESKTOP COUPLES TITLE ALIGN */
    .products-container .product-card:last-child .product-card-title {
        margin-top: 55px;
    }
}

/* =========================================================
   LARGE DESKTOP — 1921px+
   ========================================================= */

@media (min-width: 1921px) {
    .real-test-home-card {
        display: block;
    }

    .product-card-inner {
        position: relative;
    }

    .product-free-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        min-width: 38px;
        height: 20px;
        padding: 0 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #eca44b;
        color: #081f39;
        border-radius: 5px;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
    }

    .products-container {
        max-width: 2300px;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 26px;
        padding-top: clamp(25px, 5vh, 70px);
        padding-bottom: clamp(25px, 5vh, 70px);
        padding-left: 40px;
        padding-right: 40px;
    }

    .products-container .product-card {
        width: 100%;
    }

    .products-container .product-card-inner {
        padding: 30px;
    }

    .products-container .product-card-image {
        width: 280px;
        height: 280px;
    }

    .products-container .product-card-title {
        margin-top: 18px;
        font-size: 21px;
    }

    .hero-logo {
        width: 350px;
    }

    .hero-description {
        font-size: 18px;
        line-height: 2;
    }

    .test-cta-button {
        min-width: 200px;
        height: 55px;
        font-size: 16px;
    }

    .test-cta {
        padding-top: clamp(25px, 5vh, 70px);
        padding-bottom: clamp(25px, 5vh, 70px);
    }

    .site-footer {
        height: 56px;
    }

    .footer-container {
        height: 56px;
        padding-left: 40px;
        padding-right: 40px;
    }

    .footer-logo img,
    .footer-logo {
        width: 90px;
    }

    .footer-nav {
        gap: 38px;
    }

    .footer-nav a {
        font-size: 14px;
    }
}

/* Product preview grids: 3 pages (hover lift) / 4 pages */
.product-preview-section .product-preview-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    width: 100%;
}

.product-preview-section .product-preview-grid--three figure {
    width: 100%;
}

.product-preview-section .product-preview-grid--three img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.2s ease;
}

.product-preview-section .product-preview-grid--three img:hover {
    transform: translateY(-3px);
}

/* Natal chart — table of contents */
.natal-chart-toc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px;
}

.natal-chart-toc-column {
    min-width: 0;
}

.natal-chart-toc-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(8, 31, 57, 0.12);
}

.natal-chart-toc-column .natal-chart-toc-item:first-child {
    padding-top: 0;
}

.natal-chart-toc-column .natal-chart-toc-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.natal-chart-toc-item .toc-number {
    color: #eca44b;
    font-weight: 700;
    line-height: 1.55;
}

.natal-chart-toc-item h3 {
    margin: 0 0 6px;
    color: #081f39;
    font-size: 16px;
    line-height: 1.45;
}

.natal-chart-toc-item p {
    text-align: left;
    line-height: 1.65;
}

.product-preview-section .product-preview-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    width: 100%;
}

.product-preview-section .product-preview-grid--four figure {
    width: 100%;
}

.product-preview-section .product-preview-grid--four img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .natal-chart-toc {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .natal-chart-toc-column {
        width: 100%;
    }

    .natal-chart-toc-item {
        width: 100%;
        min-width: 0;
    }

    .product-preview-section .product-preview-grid--mobile-2x2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .product-preview-section .product-preview-grid--mobile-2x2 figure {
        min-width: 0;
    }
}

/* Astrology forecast — hero prices and period comparison */
.forecast-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.forecast-hero-prices {
    display: flex;
    flex-direction: column;
}

.forecast-hero-prices p {
    margin: 0;
}

.forecast-hero-prices strong {
    color: #081f39;
}

.forecast-periods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px;
}

.forecast-period-item + .forecast-period-item {
    border-left: 1px solid rgba(8, 31, 57, 0.12);
    padding-left: 35px;
}

.forecast-period-item h3 {
    margin: 0 0 14px;
    color: #081f39;
    font-size: 17px;
    line-height: 1.45;
}

.forecast-period-item h3 strong {
    color: #eca44b;
    margin-left: 8px;
}

/* Forecast period columns are ~120px wide on phones: long Georgian words must wrap
   inside the column instead of overflowing it (caused horizontal page
   scroll at 320-375px). break-word only acts on words that do not fit. */
.forecast-period-item {
    overflow-wrap: break-word;
}

:where(.page-astrology-forecast) .product-detail-meta-row .product-detail-buy {
    margin-top: 42px;
}

/* Couples compatibility — table of contents */
.compatibility-toc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 45px;
    row-gap: 0;
}

.compatibility-toc-item {
    padding: 20px 0;
    border-bottom: 1px solid rgba(8, 31, 57, 0.1);
}

.compatibility-toc-item h3 {
    margin: 0 0 8px;
    color: #081f39;
    font-size: 16px;
    line-height: 1.45;
}

.compatibility-toc-item p {
    font-size: 14px;
    line-height: 1.65;
    text-align: left;
}

/* Compatibility TOC columns are ~97px wide on 320px phones: long Georgian words must wrap
   inside the column instead of overflowing it (caused horizontal page
   scroll at 320-375px). break-word only acts on words that do not fit. */
.compatibility-toc-item {
    overflow-wrap: break-word;
}

/* Real test — info boxes keep desktop spacing on all widths */
:where(.page-real-test) .product-info-box p,
:where(.page-real-test) .product-detail-lead {
    text-align: justify;
}

:where(.page-real-test) .product-info-box {
    padding: 35px;
}

:where(.page-real-test) .product-info-section h2,
:where(.page-real-test) .product-preview-section h2 {
    margin: 0 0 25px 30px;
}

/* Birth time product page — lightbox */
.birth-time-lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 80px;
    background: rgba(5, 18, 32, 0.9);
}

.birth-time-lightbox.is-open {
    display: flex;
}

.birth-time-lightbox-image {
    display: block;
    max-width: min(90vw, 1050px);
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

.birth-time-lightbox-close {
    position: absolute;
    top: 22px;
    right: 30px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 38px;
    line-height: 1;
    cursor: pointer;
}

.birth-time-lightbox-prev,
.birth-time-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 70px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 46px;
    line-height: 1;
    cursor: pointer;
}

.birth-time-lightbox-prev {
    left: 22px;
}

.birth-time-lightbox-next {
    right: 22px;
}

/* Accessibility: semantic heading without changing visual layout */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ===== Natal Profile Order Confirmation Modal ===== */

body.modal-open{
  overflow:hidden;
}

.order-modal{
  position:fixed;
  inset:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}

.order-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.order-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(9,31,52,.52);
  backdrop-filter:blur(7px);
}

.order-modal__panel{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  max-height:calc(100vh - 56px);
  overflow:auto;
  padding:34px;
  border:1px solid #c49a63;
  border-radius:24px;
  background:#f8f6f2;
  box-shadow:0 28px 70px rgba(9,31,52,.28);
  color:#24384d;
}

.order-modal__panel:focus{
  outline:none;
}

.order-modal__close{
  position:absolute;
  top:16px;
  right:18px;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d8c4a5;
  border-radius:50%;
  background:#fff;
  color:#24384d;
  font-size:25px;
  cursor:pointer;
  transition:.2s ease;
}

.order-modal__close:hover{
  background:#b98a52;
  color:#fff;
  border-color:#b98a52;
}

.order-modal__head{
  text-align:center;
  max-width:620px;
  margin:0 auto 26px;
}

.order-modal__tag{
  margin-bottom:10px;
  color:#a87b46;
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
}

.order-modal__head h3{
  margin:0 0 10px;
  color:#173552;
  font-size:clamp(25px,3vw,34px);
  font-weight:700;
  line-height:1.3;
}

.order-modal__head p{
  margin:0;
  color:#66727e;
  font-size:15px;
  line-height:1.65;
}

.order-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:24px 0;
}

.order-summary__row{
  padding:14px 16px;
  border:1px solid #ddd6cc;
  border-radius:14px;
  background:#fff;
}

.order-summary__row span{
  display:block;
  margin-bottom:5px;
  color:#a87b46;
  font-size:13px;
  font-weight:600;
}

.order-summary__row strong{
  display:block;
  color:#22374c;
  font-size:17px;
  font-weight:700;
  line-height:1.45;
  word-break:break-word;
}

.order-confirm-check{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:8px 0 24px;
  padding:16px;
  border:1px solid #d6b783;
  border-radius:14px;
  background:#fffaf3;
  color:#24384d;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}

.order-confirm-check input{
  width:18px;
  height:18px;
  margin-top:2px;
  flex:none;
  accent-color:#b98a52;
}

.order-modal__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.order-modal__actions .btn{
  width:100%;
  justify-content:center;
  min-height:52px;
  padding:14px 22px;
  border-radius:12px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.order-modal__actions .btn-ghost{
  background:#fff;
  color:#173552;
  border:1px solid #b98a52;
}

.order-modal__actions .btn-ghost:hover{
  background:#f5eee5;
}

.order-modal__actions .btn-gold{
  background:#b98a52;
  color:#fff;
  border:1px solid #b98a52;
}

.order-modal__actions .btn-gold:hover:not(:disabled){
  background:#a97a43;
  border-color:#a97a43;
}

.order-modal__actions .btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

@media(max-width:640px){
  .order-modal{
    padding:16px;
  }

  .order-modal__panel{
    padding:28px 20px 22px;
  }

  .order-summary{
    grid-template-columns:1fr;
  }

  .order-modal__actions{
    grid-template-columns:1fr;
  }
}

/* Natal Profile order validation messages */
.order-field-error{
  color:red;
  font-size:13px;
  font-weight:bold;
}

/* Natal/Profile city autocomplete */
.city-ac-list {
    background: #ffffff;
    border: 1px solid #d8d1c8;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.city-ac-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.35;
    color: #16324a;
    background: #ffffff;
    border-bottom: 1px solid #eee8e1;
}

.city-ac-item:last-child {
    border-bottom: 0;
}

.city-ac-item:hover {
    background: #f6f2ec;
}

/* Real Test — city validation message */
#ftCityError{
    color:red;
    font-size:13px;
    font-weight:bold;
}

/* ===== CARD NAVY BACKGROUND START ===== */

/* მთავარი / პროდუქციის ბარათები */
.product-card-inner {
    background-color: #081f39 !important;
}

/* პროდუქტის შიდა გვერდებზე card_img ილუსტრაციის მქონე ბარათი */
div:has(> img[src*="card_img_"]) {
    background-color: #081f39 !important;
}

/* ===== CARD NAVY BACKGROUND END ===== */

/* ===== CARD TITLE COLOR START ===== */

.product-card-title {
    color: #d29b58 !important;
}

/* ===== CARD TITLE COLOR END ===== */


/* PRODUCT CARD BACKGROUND */
.product-card {
    background: #081f39 !important;
}


/* DESKTOP HOME PRODUCT CARD SIZE FIX */
@media (min-width: 1025px) and (max-width: 1920px) {
    .products-container .product-card {
        width: 100%;
        max-width: 190px;
        justify-self: center;
    }

    .products-container .product-card-inner {
        width: 100%;
        box-sizing: border-box;
    }
}


/* DESKTOP HOME PRODUCT CARD HEIGHT FIX */
@media (min-width: 1025px) and (max-width: 1920px) {
    .products-container .product-card {
        height: auto !important;
        align-self: start;
    }

    .products-container .product-card-inner {
        height: auto !important;
        min-height: 0 !important;
    }
}


/* DESKTOP COUPLES CARD HEIGHT FIX */
@media (min-width: 1025px) and (max-width: 1920px) {
    .products-container .product-card:last-child .product-card-title {
        margin-top: 14px !important;
    }
}


/* Links inside order-form consent checkboxes. */
.order-confirm-check a { color: inherit; text-decoration: underline; }

/* Anchor targets (e.g. /privacy-policy/#cookies) clear the sticky header. */
.legal-section { scroll-margin-top: 100px; }