.margin-nav {
    margin-top: 64px;
}

@media (min-width: 1200px) {
  .tf-product-info-wrap {
    gap: 15px;
  }
}

/* ==========================================================================
   PRODUCTION MOBILE RESPONSIVENESS OVERRIDES (< 768px)
   ========================================================================== */

@media (max-width: 767.98px) {
    /* 1. Reset Global Typography & Headings */
    h1,
    .display-2xl,
    .display-2xl-2 {
        font-size: 32px !important;
        line-height: 40px !important;
    }
    .display-xl,
    .display-xl-2 {
        font-size: 28px !important;
        line-height: 36px !important;
    }
    h2,
    h3,
    .display-lg,
    .display-lg-2,
    .display-lg-3,
    .display-lg-4,
    .display-lg-5,
    .display-lg-6,
    .display-lg-7 {
        font-size: 22px !important;
        line-height: 32px !important;
    }
    h4,
    .display-md,
    .display-md-2,
    .display-md-3 {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    h5,
    h6,
    .display-sm,
    .display-sm-2,
    .display-xs,
    .display-xs-2 {
        font-size: 18px !important;
        line-height: 24px !important;
    }

    /* 2. Constrain Excessive Section Spacers (70px-180px -> 30px-45px) */
    .flat-spacing,
    .flat-spacing-1,
    .flat-spacing-2,
    .flat-spacing-3,
    .flat-spacing-4,
    .flat-spacing-6,
    .flat-spacing-8,
    .flat-spacing-9,
    .flat-spacing-10 {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }

    .flat-spacing-11,
    .flat-spacing-12,
    .flat-spacing-13,
    .flat-spacing-14,
    .flat-spacing-15,
    .flat-spacing-16,
    .flat-spacing-17,
    .flat-spacing-19,
    .flat-spacing-20,
    .flat-spacing-21,
    .flat-spacing-22,
    .flat-spacing-23,
    .flat-spacing-25,
    .flat-spacing-26,
    .flat-spacing-27,
    .flat-spacing-28,
    .flat-spacing-29,
    .flat-spacing-30,
    .flat-spacing-31,
    .flat-spacing-33,
    .flat-spacing-34,
    .flat-spacing-35 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .flat-spacing-5,
    .flat-spacing-7,
    .flat-spacing-18,
    .flat-spacing-24,
    .flat-spacing-32,
    .flat-spacing-36,
    .flat-spacing-37 {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* 3. Dampen Fixed Utility Paddings */
    .pt_8,
    .pt_9,
    .pt_10,
    .pt_11,
    .pt_12,
    .pt_13,
    .pt_14,
    .pt_15 {
        padding-top: 35px !important;
    }
    .pb_8,
    .pb_9,
    .pb_10,
    .pb_11,
    .pb_12,
    .pb_13,
    .pb_14,
    .pb_15 {
        padding-bottom: 35px !important;
    }

    /* 4. Fix Container Gutters and Edge Blowout */
    .container,
    .container-2,
    .container-3,
    .container-4,
    .container-5,
    .container-6,
    .container-7,
    .container-full {
        padding-left: 14px !important;
        padding-right: 14px !important;
        max-width: 100% !important;
    }

    .row {
        margin-left: -7px !important;
        margin-right: -7px !important;
    }
    .row > * {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    /* 5. Buttons, Inputs & Tap Target Normalization */
    .tf-btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
        line-height: 20px !important;
        height: auto !important;
        min-height: 44px; /* WCAG touch target compliance */
    }

    /* 6. Form Field Widths & Mobile Layout */
    .cols,
    .form-default .cols {
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .wd-form-address {
        padding: 16px !important;
    }

    /* 7. Modal & Off-Canvas Containment */
    .modal-dialog {
        margin: 10px auto !important;
        max-width: calc(100vw - 20px) !important;
    }
    .modal-content {
        padding: 20px 14px !important;
    }
    .modal-quick-view .modal-content,
    .popup-shopping-cart .modal-content {
        padding: 16px 12px !important;
    }

    /* 8. Table Responsive Wrappers */
    .table-page-cart,
    .account-orders table,
    .tb-info-product {
        display: block;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 9. Component-Specific Spacing Normalization */
    .section-asked-questions .faq-wrap {
        padding: 24px 16px !important;
    }
    .flat-title {
        margin-bottom: 20px !important;
    }
    .flat-title.style-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* 10. Sticky / Floating Button Elevation Clearance */
    #goTop,
    #scroll-top {
        bottom: 75px !important; /* Clears sticky bottom bars */
        right: 12px !important;
        width: 38px !important;
        height: 38px !important;
    }

    .footer-default .footer-top,
    .footer-bottom-wrap {
        padding: 15px 0;
    }

    .footer-bottom-wrap p,
    .footer-bottom-wrap a {
        font-size: 12px;
        line-height: 18px;
    }

    .tf-product-info-wrap {
        margin-top: 20px;
    }
    .tf-product-info-wrap {
        gap: 5px;
    }
    .breadcrumb-wrap {
        padding: 0;
    }
    .tf-product-info-wrap .tf-product-trust-seal .card-item {
        width: 40px;
        height: 30px;
    }

    .text-md {
        font-size: 12px;
        line-height: 13px;
    }
    .tf-page-title .box-title {
        gap: 5px;
    }
    .breadcrumb-sec {
        margin-top: 64px;
    }
    .tf-page-title {
        padding: 18px 15px !important;
    }

    .wg-cls.style-circle-md .image {
        width: 60px;
        height: 60px;
    }
    .wg-cls.style-circle-md .shop-all img {
        width: 45px;
    }
    .sw-dot-default {
        margin-top: 10px;
    }

    .tf-page-cart-sidebar {
        margin-top: 0px;
    }
}