/* =========================================================
   MAP SECTION
========================================================= */

.section-map {
    margin: var(--section-spacing) auto;
}


/* =========================================================
   SECTION COPY
========================================================= */

.copy-divider {
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.short-line {
    width: 35%;
    height: 0.2rem;

    background-color: var(--accent-color);
}

.butterfly {
    max-width: 4rem;
}

.about {
    padding: 2rem 0;

    font-size: 2rem;
    text-align: center;
}


/* =========================================================
   WHERE TO BUY
========================================================= */

.where-to-buy {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: stretch;

    gap: clamp(4rem, 6vw, 9rem);

    width: min(88%, 150rem);

    margin: 6rem auto 0;
}
.comming-soon{
    font-size: 2.4rem;
    color: var(--main-color);
}

/* =========================================================
   BUY BOOKS
========================================================= */

.buy-books {
    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 2.5rem;

    min-width: 0;
}


/* =========================================================
   BUY CARD
========================================================= */

.buy-card {
    position: relative;

    padding: 2.5rem;

    overflow: hidden;

    background-color: var(--main-shade);

    border-radius: var(--large-border-radius);
}

.buy-card::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 0.5rem;

    background-color: var(--accent-color);
}

.buy-card--edp::before {
    background-color: var(--main-color);
}

.buy-card-top {
    margin-bottom: 2rem;
}

.buy-badge {
    display: inline-block;

    margin-bottom: 0.5rem;

    color: var(--accent-color);

    font-size: 1.3rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.buy-card-title {
    margin: 0 0 0.8rem;
    padding: 0;

    color: var(--main-color);

    font-size: clamp(2.2rem, 2.5vw, 3rem);
    line-height: 1.1;
}

.buy-card-description {
    max-width: 48rem;

    margin: 0;

    color: var(--main-color);

    font-size: 1.4rem;
    line-height: 1.5;

    opacity: 0.72;
}


/* =========================================================
   BUY BUTTONS
========================================================= */

.buy-buttons {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1rem;

    min-width: 0;
}

.buy-btn {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    min-width: 0;
    min-height: 5.2rem;

    padding: 1rem 1.3rem;

    background-color:
        rgba(255, 255, 255, 0.75);

    border:
        1px solid
        rgba(71, 48, 110, 0.08);

    border-radius: 1.4rem;

    color: var(--main-color);

    font-size: 1.25rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.buy-btn__text {
    min-width: 0;

    overflow: hidden;

    font-size: 1.8rem;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.buy-btn:hover,
.buy-btn:focus-visible {
    background-color: var(--main-color);

    color: #fff;

    transform: translateY(-0.2rem);

    box-shadow:
        0 0.8rem 1.8rem
        rgba(71, 48, 110, 0.12);
}

.buy-btn:focus-visible {
    outline:
        2px solid
        var(--accent-color);

    outline-offset: 0.3rem;
}


/* =========================================================
   MAP
========================================================= */

#map {
    width: 100%;
    height: 55rem;

    min-width: 0;

    overflow: hidden;

    border-radius: var(--large-border-radius);
}


/* =========================================================
   GOOGLE MAP INFO WINDOW
========================================================= */

.map-info {
    width: 26rem;

    padding: 1.2rem 1rem 1rem;

    color: #493b46;

    font-family: "Eczar", serif;
}

.map-info-label {
    display: block;

    margin-bottom: 0.3rem;

    color: var(--accent-color);

    font-size: 1.2rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.map-info-title {
    margin: 0;

    color: #493b46;

    font-family: "Eczar", serif;
    font-size: 2rem;
    line-height: 1.25;
}

.map-info-divider {
    width: 4.5rem;
    height: 0.2rem;

    margin: 0.8rem 0 1rem;

    background-color: var(--accent-color);
}

.map-info-row {
    display: flex;
    align-items: flex-start;

    gap: 0.7rem;

    margin-top: 0.8rem;
}

.map-info-icon {
    color: var(--accent-color);

    font-size: 2rem;
    line-height: 1.4;
}

.map-info-small {
    display: block;

    color: #9b8994;

    font-size: 1.1rem;
    font-weight: 600;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.map-info p {
    margin: 0.1rem 0 0;

    font-size: 1.5rem;
    line-height: 1.5;
}

.map-info a {
    color: #493b46;

    text-decoration-color: var(--accent-color);
    text-underline-offset: 0.3rem;
}

.map-info a:hover {
    color: var(--accent-color);
}

.gm-style .gm-style-iw-c {
    background: var(--background-color) !important;

    border-radius: var(--large-border-radius) !important;
}

.gm-style .gm-style-iw-tc::after {
    background: var(--background-color) !important;
}


/* =========================================================
   STATISTICS
========================================================= */

.statistics {
    display: flex;

    align-items: center;
    justify-content: space-around;

    width: 100%;
    max-width: 80%;
    min-height: 15rem;

    margin: 5rem auto 0;

    background-color: var(--main-shade);

    border-radius: var(--large-border-radius);
}

.stat-item {
    display: flex;

    align-items: center;

    gap: 1rem;
}

.stat-number {
    font-size: 4.5rem;
    font-weight: 800;
}

.stat-copy {
    font-size: 2rem;

    text-align: center;
}

.icon-bg {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 10rem;
    height: 10rem;

    padding: 0.3rem;

    background-color: var(--light-accent-color);

    border-radius: 50%;
}

.map-icon {
    width: 7rem;
    height: 7rem;
}
.buy-btn__arrow {
    flex-shrink: 0;

    width: 2.4rem;
    height: 2.4rem;

    transition:
        transform 0.25s ease;
}

.buy-btn:hover .buy-btn__arrow,
.buy-btn:focus-visible .buy-btn__arrow {
    transform: translateX(0.4rem);
}

/* =========================================================
   RESPONSIVE
========================================================= */