/* Dot Marine — Responsive overrides (load last) */

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

body {
    overflow-x: hidden;
}

*,
*::before,
*::after {
    min-width: 0;
}

main,
section,
.row,
.container,
.container-fluid {
    max-width: 100%;
}

p,
a,
li,
td,
th,
.footer-link,
.contact-info-card {
    overflow-wrap: anywhere;
}

img,
video,
iframe {
    max-width: 100%;
}

.container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

.section-title {
    font-size: clamp(1.45rem, 4.2vw, 2.25rem);
    line-height: 1.2;
}

.section-header {
    margin-bottom: 1.75rem;
}

/* ── Top bar ── */
.site-topbar {
    position: relative;
    z-index: 1031;
}

@media (min-width: 992px) {
    .topbar-inner {
        gap: 1.25rem;
    }

    .topbar-left {
        max-width: none;
        flex: 1 1 auto;
    }

    .topbar-right {
        flex: 0 0 auto;
        gap: 1rem;
    }

    .topbar-contacts {
        flex-wrap: nowrap !important;
    }

    .topbar-gst {
        white-space: nowrap;
    }
}

@media (min-width: 1200px) {
    .topbar-inner {
        gap: 1.5rem;
    }

    .topbar-sep {
        margin: 0 .35rem;
    }
}

@media (max-width: 991.98px) {
    .topbar-inner {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
        gap: .5rem !important;
        flex-wrap: wrap;
    }

    .topbar-left {
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        justify-content: center;
        font-size: .74rem;
        line-height: 1.4;
    }

    .topbar-right {
        flex-direction: column;
        align-items: center;
        gap: .45rem;
    }

    .topbar-contacts {
        justify-content: center;
        flex-wrap: wrap;
        gap: .35rem;
    }

    .topbar-gst {
        margin-top: .1rem;
        font-size: .68rem;
        padding: .25rem .55rem;
    }
}

@media (max-width: 575.98px) {
    .site-topbar {
        font-size: .72rem;
        padding: .35rem 0;
    }

    .topbar-divider {
        display: none;
    }

    .topbar-contacts a {
        display: inline-flex;
        align-items: center;
        padding: .2rem 0;
    }

    .topbar-right,
    .topbar-contacts {
        width: 100%;
    }

    .topbar-contacts a:first-child {
        justify-content: center;
        width: 100%;
    }
}

/* ── Header & navigation ── */
@media (max-width: 991.98px) {
    .header-navbar {
        flex-wrap: wrap;
    }

    .header-navbar__collapse {
        width: 100%;
        flex-basis: 100%;
    }

    .site-header .navbar {
        padding: .5rem 0;
    }

    .navbar-brand img {
        width: 48px !important;
        height: 48px !important;
    }

    .brand-name {
        font-size: .88rem !important;
    }

    .brand-line {
        font-size: .58rem !important;
        letter-spacing: .1em !important;
    }

    .header-navbar__menu {
        width: 100%;
        gap: 0 !important;
    }

    .site-header .nav-item {
        width: 100%;
        border-bottom: 1px solid var(--dm-line);
    }

    .site-header .nav-item:last-child {
        border-bottom: 0;
    }

    .site-header .nav-link {
        width: 100%;
        text-align: left;
        padding: .85rem 1rem !important;
        font-size: .95rem;
        border-radius: 0 !important;
        white-space: normal;
    }

    .site-header .nav-link.active::after {
        left: 0 !important;
        right: auto !important;
        width: 4px !important;
        height: 100% !important;
        top: 0 !important;
        bottom: 0 !important;
        border-radius: 0 3px 3px 0 !important;
    }

    .header-navbar__collapse.navbar-collapse {
        margin-top: .85rem;
        padding: .5rem 0 1rem;
        border: 1px solid var(--dm-line) !important;
        border-radius: var(--dm-radius-lg) !important;
        background: #fff;
        box-shadow: var(--dm-shadow-soft) !important;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    .header-navbar__quote {
        width: 100%;
        padding: .75rem 1rem 0;
        border-top: 1px solid var(--dm-line);
        margin-top: .25rem;
    }

    .header-quote-btn,
    .site-header .btn-brand {
        width: 100%;
        justify-content: center;
        min-height: 46px;
    }

    .navbar-toggler {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
    }
}

@media (max-width: 399.98px) {
    .navbar-brand img {
        width: 42px !important;
        height: 42px !important;
    }

    .brand-text {
        margin-left: .45rem !important;
    }

    .brand-name {
        font-size: .8rem !important;
    }
}

/* ── Home hero ── */
@media (max-width: 991.98px) {
    .hero-mockup,
    .hero-mockup__content {
        min-height: 500px;
    }

    .hero-mockup__content {
        padding: 2.5rem 0 4rem;
    }
}

@media (max-width: 767.98px) {
    .hero-mockup,
    .hero-mockup__content {
        min-height: auto;
    }

    .hero-mockup__content {
        min-height: 460px;
        padding: 2rem 0 3.5rem;
        align-items: flex-end;
    }

    .hero-mockup__title {
        font-size: clamp(1.5rem, 6.5vw, 2rem);
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .hero-mockup__desc {
        font-size: .9rem;
        max-width: 100%;
        margin-bottom: 1.35rem;
    }

    .hero-mockup__actions {
        flex-direction: column;
        width: 100%;
        gap: .65rem;
    }

    .hero-mockup__actions .btn-brand,
    .hero-mockup__actions .btn-orange {
        width: 100%;
        justify-content: center;
    }

    .hero-mockup__features {
        flex-direction: column;
        align-items: flex-start;
        gap: .55rem;
    }

    .hero-mockup__feature {
        font-size: .82rem;
    }

    .hero-mockup__dots {
        bottom: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .hero-mockup__content {
        min-height: 420px;
    }

    .hero-mockup__overlay {
        background: linear-gradient(180deg, rgba(0, 29, 61, .88) 0%, rgba(0, 29, 61, .72) 100%) !important;
    }
}

/* ── Stats bar ── */
@media (max-width: 767.98px) {
    .stats-float {
        margin-top: -2rem;
        margin-bottom: 2rem;
    }

    .stats-float__item {
        padding: 1rem .85rem;
        gap: .65rem;
    }

    .stats-float__icon {
        width: 40px;
        height: 40px;
        font-size: .95rem;
    }

    .stats-float__item strong {
        font-size: 1.05rem;
    }

    .stats-float__item span {
        font-size: .72rem;
    }
}

@media (max-width: 399.98px) {
    .stats-float__inner {
        grid-template-columns: 1fr;
    }

    .stats-float__item {
        border-right: 0 !important;
        border-bottom: 1px solid var(--dm-line);
    }

    .stats-float__item:last-child {
        border-bottom: 0;
    }
}

/* ── Category & product cards ── */
@media (max-width: 575.98px) {
    .cat-card__img {
        height: 150px;
        padding: 1rem;
    }

    .cat-card__img img {
        max-height: 120px;
    }

    .cat-card__foot {
        padding: .85rem 1rem;
    }

    .cat-card__foot h3 {
        font-size: .82rem;
    }

    .cat-card__arrow {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }

    .category-grid > [class*="col-"],
    #productList .row > [class*="col-"],
    .section-products .row > [class*="col-"] {
        width: 100%;
    }
}

/* ── About section ── */
@media (max-width: 991.98px) {
    .about-mockup {
        padding: 2.5rem 0;
    }

    .about-mockup__img-wrap {
        margin-bottom: .5rem;
    }
}

@media (max-width: 575.98px) {
    .products-sidebar .sidebar-card,
    .products-sidebar .sidebar-contact {
        padding: 1rem;
    }

    #productList .product-grid {
        margin-right: -8px;
        margin-left: -8px;
    }

    #productList .product-grid > [class*="col-"] {
        padding-right: 8px;
        padding-left: 8px;
        margin-bottom: 18px;
    }

    #productList .pagination {
        justify-content: flex-start !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: .25rem 0 .6rem;
        scrollbar-width: thin;
    }
}

@media (max-width: 767.98px) {
    .about-mockup__img-wrap img {
        height: 260px;
    }

    .about-mockup__badge {
        bottom: .85rem;
        left: .85rem;
        padding: .65rem .9rem;
        font-size: .78rem;
        gap: .55rem;
    }

    .about-mockup__badge i {
        font-size: 1.15rem;
    }

    .about-feature-list li {
        font-size: .88rem;
        gap: .65rem;
    }

    .stats-row {
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem;
    }

    .stat-box {
        padding: .75rem .45rem;
    }

    .stat-box strong {
        font-size: 1.2rem;
    }

    .stat-box span {
        font-size: .68rem;
    }
}

/* ── Inner page hero ── */
@media (max-width: 767.98px) {
    .page-hero--v2 {
        min-height: auto !important;
        padding: 2rem 0 1.75rem !important;
    }

    .page-hero--v2 h1 {
        font-size: clamp(1.3rem, 5.5vw, 1.75rem) !important;
        line-height: 1.25 !important;
    }

    .page-hero__subtitle {
        font-size: .86rem;
        line-height: 1.55;
    }

    .page-hero__badge {
        font-size: .78rem;
        padding: .35rem .65rem;
        margin-bottom: .85rem;
    }

    .page-hero__badge img {
        width: 28px;
        height: 28px;
    }

    .breadcrumb-lite {
        font-size: .76rem;
        flex-wrap: wrap;
        gap: .25rem;
    }

    .page-content {
        margin-top: -.75rem;
    }

    .page-hero__wave svg {
        height: 36px;
    }
}

/* ── Inner sections ── */
@media (max-width: 767.98px) {
    .inner-section {
        padding: 2.25rem 0;
    }

    .section-categories {
        padding: 1.25rem 0 2.25rem;
    }

    .section-brands {
        padding: 2rem 0;
    }

    .mission-card,
    .value-card {
        padding: 1.35rem;
    }

    .value-card__num {
        font-size: 2rem;
    }

    .contact-form-wrap {
        padding: 1.25rem;
    }

    .contact-info-card {
        padding: 1.25rem;
    }

    .contact-info-card__icon {
        width: 52px;
        height: 52px;
        font-size: 1.15rem;
        margin-bottom: 1rem;
    }

    .inquiry-benefits {
        padding: 1.35rem;
    }

    .inquiry-benefit-item {
        font-size: .88rem;
    }

    .sidebar-card {
        padding: 1.15rem;
    }
}

/* ── Products layout ── */
@media (max-width: 991.98px) {
    .products-layout {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    .products-sidebar {
        position: static;
        top: auto;
    }

    .sidebar-contact {
        text-align: center;
    }

    .sidebar-contact img {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── Product detail ── */
@media (max-width: 991.98px) {
    .detail-layout {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    .quote-panel {
        position: static !important;
    }

    .detail-gallery img {
        max-height: 340px;
        width: 100%;
        object-fit: contain;
    }
}

@media (max-width: 575.98px) {
    .detail-specs-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .detail-specs-table tr {
        display: flex;
        flex-direction: column;
        padding: .65rem 0;
    }

    .detail-specs-table td {
        display: block;
        width: 100% !important;
        padding: .15rem 0 !important;
        border: 0 !important;
    }

    .detail-specs-table td:first-child {
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--dm-muted) !important;
    }

    .detail-specs-table td:last-child {
        font-size: .92rem;
        padding-bottom: .5rem !important;
        border-bottom: 1px solid var(--dm-line) !important;
    }

    .detail-info-card {
        padding: 1.15rem;
    }

    .description-shell {
        font-size: .92rem;
        overflow-x: auto;
    }

    .description-shell table {
        display: block;
        overflow-x: auto;
    }
}

/* ── Contact & inquiry layouts ── */
@media (max-width: 767.98px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .inquiry-layout {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    .map-wrap iframe {
        height: 260px;
    }

    .contact-grid > *,
    .inquiry-layout > *,
    .detail-layout > * {
        width: 100%;
    }
}

/* ── CTA band ── */
@media (max-width: 767.98px) {
    .cta-band {
        padding: 2rem 0 !important;
    }

    .cta-band__inner {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem;
    }

    .cta-band__text .section-title {
        font-size: clamp(1.25rem, 5vw, 1.65rem);
    }

    .cta-band__actions {
        flex-direction: column;
        width: 100%;
        gap: .65rem;
    }

    .cta-band__actions .btn-brand,
    .cta-band__actions .btn-orange,
    .cta-band__actions .btn-whatsapp,
    .cta-band__actions .btn-hero-outline {
        width: 100%;
        justify-content: center;
    }
}

/* ── Footer ── */
@media (max-width: 767.98px) {
    .brand-strip .row {
        row-gap: .65rem !important;
    }

    .brand-logo-tile {
        min-height: 52px;
        padding: .45rem;
    }

    .brand-logo-tile img {
        max-height: 26px;
    }

    .footer-wave svg {
        height: 32px;
    }

    .site-footer .section-pad-sm,
    .site-footer .container.section-pad-sm {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .footer-title {
        font-size: .95rem;
        margin-bottom: 1rem;
    }

    .footer-link {
        font-size: .88rem;
    }

    .footer-bottom {
        text-align: center;
        font-size: .78rem;
        line-height: 1.6;
    }

    .footer-bottom .container {
        gap: .35rem !important;
    }

    .site-footer .row.g-5 {
        --bs-gutter-y: 2rem;
    }

    .site-footer .ms-4 {
        margin-left: 0 !important;
    }

    .footer-social a {
        width: 44px;
        height: 44px;
    }
}

/* ── Floating actions ── */
@media (max-width: 575.98px) {
    .floating-whatsapp {
        width: 50px;
        height: 50px;
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        font-size: 1.35rem;
    }

    .scroll-top {
        right: max(14px, env(safe-area-inset-right));
        bottom: calc(72px + env(safe-area-inset-bottom));
        width: 40px;
        height: 40px;
        font-size: .85rem;
    }
}

/* ── Forms & buttons (touch-friendly) ── */
@media (max-width: 767.98px) {
    .form-control,
    .form-select {
        min-height: 46px;
        font-size: 16px; /* prevents iOS zoom on focus */
    }

    textarea.form-control {
        min-height: 120px;
    }

    .btn-brand,
    .btn-orange,
    .btn-outline-brand,
    .btn-hero-outline {
        min-height: 46px;
        font-size: .9rem;
    }

    .pagination .page-link {
        min-width: 38px;
        padding: .45rem .65rem;
        font-size: .85rem;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }
}

/* ── Utility spacing on small screens ── */
@media (max-width: 575.98px) {
    .d-flex.flex-wrap.gap-3,
    .d-flex.flex-wrap.gap-2 {
        gap: .5rem !important;
    }

    .row.g-5 {
        --bs-gutter-y: 1.75rem;
        --bs-gutter-x: 1rem;
    }

    .row.g-4 {
        --bs-gutter-y: 1.25rem;
    }

    .section-header,
    .d-flex.align-items-center.justify-content-between {
        align-items: flex-start !important;
    }

    .section-header > .btn-brand,
    .section-header > .btn-orange {
        width: 100%;
        justify-content: center;
    }

    .inner-section .container,
    .section-pad .container,
    .section-pad-sm.container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ── Landscape phones ── */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-mockup__content {
        min-height: auto;
        padding: 1.5rem 0 2.5rem;
    }

    .page-hero--v2 {
        padding: 1.5rem 0 1.25rem !important;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    [data-fade],
    html.js-ready [data-fade]:not(.is-visible),
    html.js-ready [data-fade].is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .cat-card:hover,
    .btn-brand:hover,
    .btn-orange:hover {
        transform: none;
    }
}