/* ==========================================
   WILDSOLES - RESPONSIVE FIX
   359px TO 280px
========================================== */

@media screen and (max-width: 359px) {

    /* Global overflow fix */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }


    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

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

    /* Main layout */
    main,
    section,
    header,
    footer,
    article,
    .container,
    .wrapper,
    [class*="container"],
    [class*="wrapper"] {
        max-width: 100%;
        min-width: 0;
    }

    .container,
    .wrapper,
    [class*="container"],
    [class*="wrapper"] {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Typography */
    h1 {
        font-size: clamp(21px, 7vw, 25px);
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    h2 {
        font-size: clamp(19px, 6vw, 22px);
        line-height: 1.2;
    }

    h3 {
        font-size: clamp(16px, 5vw, 19px);
        line-height: 1.25;
    }
    

    p,
    li {
        font-size: 13px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    /* Flex and grid */
    .row,
    [class*="row"] {
        flex-wrap: wrap;
    }

    [class*="grid"] {
        min-width: 0;
        max-width: 100%;
    }

    [class*="grid"] > *,
    [class*="row"] > *,
    [class*="column"] > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Product and content cards */
    [class*="card"],
    [class*="product"] {
        min-width: 0;
        max-width: 100%;
    }

    /* CTA buttons - keep text on one line */
    a[href*="checkout"],
    a[href*="order"],
    a[href*="offer"],
    a.btn,
    a.button,
    button,
    input[type="submit"],
    input[type="button"],
    [class*="cta"] a,
    [class*="button"] a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        /* white-space: nowrap !important; */
        max-width: 100%;
        min-width: 0;
        font-size: clamp(10px, 3.5vw, 12px);
        line-height: 1.2;
        padding-left: 6px;
        padding-right: 6px;
        letter-spacing: 0;
    }

    /* Countdown */
    [class*="countdown"] {
        max-width: 100%;
        min-width: 0;
    }

    /* Navigation */
    nav,
    nav ul {
        max-width: 100%;
    }

    /* FAQ */
    details,
    summary {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Forms */
    input,
    select,
    textarea {
        max-width: 100%;
        min-width: 0;
    }

    /* Tables */
    table {
        max-width: 100%;
    }


    /* Long content */
    pre,
    code {
        max-width: 100%;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .hero-title{
        font-size: 28px;
    }

    .btn-cta-main{
        padding-inline:12px;
    }

    .cardHead h6{
        padding:7px 7px;
    }

    .cardHead{
        flex-wrap: wrap;
    }

    .liveText{
        min-width: 100%;
    }

    .hero-section .review-card{
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding:12px;
    }

    .hero-section .review-author, .hero-section .verified-icon{
        justify-content: center;
    }
    
    #footer ul li a{
        font-size: 12px;
    }

    .green-dot{
        width:12px;
        height: 9px;
    }

    #header .justify-content-end{
        padding-left: 0;
    }


    header .right .gbadge{
        height:35px;
    }

    .checkout-bonusDeals-reciept h3 span.line-with-arrow{
        width:1rem;
    }

    .checkout-bonusDeals-reciept h3 span.line-with-arrow img{
        width: 100%;
    }

    .timer-container .black-container{
        text-align: center;
    }

    .size-container,.color-container{
        margin-left: 0;
        width: 100%;
    }

    .checkout-form-submit{
        font-size:13px;
    }

    .ssl-safe-section .inner-section img{
        width: 14px;
    }

    .main-middle-sec {
        padding-bottom: 30px;
    }

    footer ul li a{
        font-size: 12px;
    }

    footer p{
        font-size: 10px;
    }

    .payment-section .payment-section-body,.checkout-form .billing-address-section .billing-address-head{
        padding-inline:6px;
    }

    .checkout-form .billing-address-section .billing-address-head label{
        font-size: 12px;
    }

    .express-checkout-btn-group{
        padding-bottom:44px;
    }

    .express-checkout-btn-group>div{
        padding-inline: 0;
    }

    .checkout-steps{
        gap:3px;
    }

    .checkout-steps li {
        font-size: 12px;
    }

    .upsell-btn {
        font-size: 15px;
    }

    .upsell-btn {
        padding: 8px 7px;
    }

    .shipping-info-box{
    flex-direction: column;
    padding: 10px;
    text-align: center;
    }

    .shipping-info-box p{
        width: 100%;
    }

    .nothnx-txt i{
        width: 25px;
    }

    .nothnx-txt a{
    font-size: 11px !important;
    text-align: left;
    }

    .thumb-item{
        height: 60px;
    }

    #productCarousel .carousel-inner{
        width: 100%;
    }

    .offer-title{
        font-size: 18px;
    }

    .upsl-lft-clm .rating-stars-wrpr{
        flex-direction: column;
    }

    .topbar .breadcrumb .breadcrumb-item{
        font-size: 11px;
    }

    .thnkbody .fs-5 {
        font-size: 1rem !important;
    }   

}




/* Extra compact spacing for 280px - 320px */
@media screen and (max-width: 320px) {

    .container,
    .wrapper,
    [class*="container"],
    [class*="wrapper"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    h1 {
        font-size: 21px;
    }

    h2 {
        font-size: 19px;
    }

    h3 {
        font-size: 16px;
    }

    p,
    li {
        font-size: 12px;
    }

    a[href*="checkout"],
    a[href*="order"],
    a[href*="offer"],
    a.btn,
    a.button,
    button,
    input[type="submit"],
    input[type="button"],
    [class*="cta"] a,
    [class*="button"] a {
        font-size:15px;
        padding-left: 6px;
        padding-right: 6px;
    }

    header .right p span{
        font-size: 9px;
    }
    .btn-cta-header {
        font-size: 12px !important;
    }
}