/* Phase 1 compatibility layer for public pages using Bootstrap-style utilities. */

.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }

.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }

.w-100 { width: 100% !important; }

.small { font-size: 0.875em !important; }
.h4 { font-size: 1.5rem !important; line-height: 1.25; margin: 0; }
.h5 { font-size: 1.25rem !important; line-height: 1.3; margin: 0; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.me-1 { margin-right: 0.25rem !important; }

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.row > * {
    width: 100%;
    max-width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.g-2 {
    row-gap: 0.5rem !important;
    column-gap: 0.5rem !important;
}

.g-3 {
    row-gap: 1rem !important;
    column-gap: 1rem !important;
}

.col-12 { width: 100%; }

@media (min-width: 576px) {
    .flex-sm-row { flex-direction: row !important; }
    .align-items-sm-center { align-items: center !important; }
}

@media (min-width: 768px) {
    .col-md-2 { width: 16.666667%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.333333%; }
    .col-md-5 { width: 41.666667%; }
    .col-md-6 { width: 50%; }
    .col-md-8 { width: 66.666667%; }
}

@media (min-width: 992px) {
    .col-lg-6 { width: 50%; }
}

@media (min-width: 1200px) {
    .col-xl-3 { width: 25%; }
    .col-xl-4 { width: 33.333333%; }
}

.table-responsive,
.orders-table-wrap,
.order-items-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #d6deea;
}

.align-middle td,
.align-middle th {
    vertical-align: middle;
}

.form-control,
.form-select {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color, #d8e1ed);
    border-radius: 0.5rem;
    background: #fff;
    font: inherit;
}

.form-control-sm {
    min-height: 32px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-sm {
    min-height: 34px;
    padding: 0.35rem 0.65rem;
    font-size: 0.875rem;
}

@media (max-width: 900px) {
    .nav-link,
    .submenu-toggle,
    .nav-quick-link {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 640px) {
    .site-main {
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }

    .whatsapp-float {
        bottom: calc(132px + env(safe-area-inset-bottom, 0px));
    }

    .stanificent-chat-launcher {
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .stanificent-chat-launcher__button {
        padding: 11px 14px !important;
        font-size: 0.94rem !important;
    }
}

/* Force 2-up product grids on mobile without affecting desktop layout. */
@media (max-width: 480px) {
    .shop-grid.products-archive-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .shop-grid.products-archive-grid > * {
        min-width: 0;
    }

    .shop-grid.products-archive-grid .shop-card {
        width: auto;
        min-width: 0;
    }

    .blog-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .blog-grid > * {
        min-width: 0;
    }
}

/* Phase 2: mobile hero readability and targeted long-string wrapping guards. */
.hero {
    position: relative;
    isolation: isolate;
}

.hero > .container,
.hero .hero-content {
    position: relative;
    z-index: 1;
}

@media (max-width: 700px) {
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(
            180deg,
            rgba(4, 10, 22, 0.52) 0%,
            rgba(4, 10, 22, 0.82) 100%
        );
        pointer-events: none;
    }

    .hero h1,
    .hero .eyebrow,
    .hero .hero-subtitle {
        text-shadow: 0 3px 10px rgba(0, 0, 0, 0.58);
    }
}

.orders-table td,
.order-items-table td,
.table td,
.table th,
.shop-card-seller,
.post-meta,
.public-pagination-summary,
.footer-contact-list,
.footer-contact-list a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 480px) {
    .blog-grid .post-card {
        padding: 14px;
    }

    .blog-grid .post-card h2 {
        font-size: 1.05rem;
        line-height: 1.3;
        margin-bottom: 6px;
        overflow-wrap: anywhere;
    }

    .blog-grid .post-meta {
        font-size: 0.95rem;
        line-height: 1.42;
        margin-bottom: 8px;
    }

    .blog-grid .post-card > p:last-child {
        font-size: 0.95rem;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}