/* =========================================================
   Hamida Traders — RTM-020
   GLOBAL RESPONSIVE DESIGN LAYER

   Goal:
   - Desktop / large desktop
   - Laptop
   - Windows / macOS browsers
   - Tablet / iPad-class widths
   - Android / HarmonyOS / mobile browsers
   - Landscape + portrait
   - Safe viewport + touch behavior

   Load this file LAST after all Phase-2 page CSS.
   ========================================================= */

:root{
    --ht-safe-left: env(safe-area-inset-left, 0px);
    --ht-safe-right: env(safe-area-inset-right, 0px);
    --ht-safe-top: env(safe-area-inset-top, 0px);
    --ht-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

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

img,
video{
    height:auto;
}

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

button,
a,
input,
select,
textarea{
    -webkit-tap-highlight-color:transparent;
}

.site-main{
    width:100%;
    overflow-x:clip;
}

/* Prevent long B2B content / emails / product names from breaking layouts */
.site-main *,
.site-footer *,
.site-header *{
    overflow-wrap:anywhere;
}

/* Preserve deliberate single-line controls */
.site-nav__link,
.btn-header,
.home-btn,
.footer-inquiry-btn,
.stock-product-card__cta,
.services-actions a,
.about-btn,
.contact-submit-btn,
.inquiry-next-btn,
.inquiry-back-btn,
.inquiry-submit-btn{
    overflow-wrap:normal;
}

/* =========================================================
   LARGE DESKTOP — 1440px+
   ========================================================= */

@media (min-width:1440px){
    .site-header__inner,
    .home-shell,
    .stock-shell,
    .services-shell,
    .about-shell,
    .contact-shell,
    .inquiry-shell,
    .site-footer__inner{
        max-width:1280px;
    }

    .home-hero__grid{
        min-height:720px;
    }
}

/* =========================================================
   STANDARD DESKTOP / LAPTOP — <= 1280px
   ========================================================= */

@media (max-width:1280px){
.site-header__inner{
        gap:14px;
    }

    .site-nav{
        gap:20px;
    }

    .site-brand__logo svg{
        height:61px;
    }

    .btn-header{
        padding-left:14px;
        padding-right:14px;
    }

    .home-hero__grid{
        gap:42px;
    }

    .home-hero h1{
        font-size:clamp(48px,6vw,76px);
    }

    .site-footer__top{
        gap:38px;
    }
}

/* =========================================================
   SMALL LAPTOP / TABLET LANDSCAPE — <= 1100px
   ========================================================= */

@media (max-width:1100px){
    .site-header__status{
        display:none;
    }

    .site-header__inner{
        max-width:100%;
    }

    .site-nav{
        gap:16px;
    }

    .site-nav__link{
        font-size:12px;
    }

    .btn-header--outline{
        padding-left:13px;
        padding-right:13px;
    }

    .home-value__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .stock-product-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .services-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .about-pillars__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .services-process-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .site-footer__top{
        grid-template-columns:1.4fr .7fr .7fr;
    }

    .site-footer__inquiry-column{
        grid-column:1 / -1;
    }
}

/* =========================================================
   TABLET / iPAD — <= 900px
   ========================================================= */

@media (max-width:900px){
    :root{
        --ht-header-height:74px;
    }
.site-brand__logo svg{
        height:49px;
        max-width:180px;
    }

    .site-header__center{
        order:3;
        width:100%;
        flex-basis:100%;
    }

    .site-nav{
        display:none;
        width:100%;
        max-height:calc(100dvh - 92px);
        overflow-y:auto;
        overscroll-behavior:contain;
        flex-direction:column;
        align-items:stretch;
        gap:2px;
        padding:10px;
        margin-top:4px;
        border:1px solid rgba(15,39,71,.08);
        border-radius:18px;
        background:rgba(255,255,255,.98);
        box-shadow:0 22px 55px rgba(15,39,71,.12);
    }

    .site-nav.is-open{
        display:flex;
    }

    .site-nav__link{
        width:100%;
        min-height:44px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:10px 14px;
        border-radius:11px;
        font-size:12px;
    }

    .site-nav__link::after{
        display:none;
    }

    .site-nav__link.is-active,
    .site-nav__link:hover{
        color:#0052cc;
        background:rgba(0,82,204,.055);
    }

    .menu-toggle{
        display:flex;
        flex-shrink:0;
    }

    .btn-header--outline{
        display:none;
    }

    .btn-header--primary{
        min-height:38px;
        padding:0 14px;
        font-size:10px;
    }

    .home-hero__grid,
    .home-stock-preview__grid,
    .home-about-strip__inner,
    .services-hero__inner,
    .about-hero__grid,
    .about-story__grid,
    .about-network__grid,
    .contact-hero__grid,
    .contact-main__grid{
        grid-template-columns:1fr;
    }

    .home-hero__grid,
    .services-hero__inner,
    .about-hero__grid,
    .contact-hero__grid{
        gap:34px;
    }

    .home-hero__copy,
    .services-hero__copy,
    .about-hero__copy{
        text-align:center;
    }

    .home-hero h1 span::after{
        margin-left:auto;
        margin-right:auto;
    }

    .home-service-pills,
    .home-hero__actions,
    .home-trust-row,
    .services-actions,
    .about-hero__actions{
        justify-content:center;
    }

    .home-hero__lead,
    .services-hero__copy>p,
    .about-hero__copy>p{
        margin-left:auto;
        margin-right:auto;
    }

    .home-hero__visual{
        min-height:410px;
    }

    .trade-orb{
        width:min(390px,78vw);
    }

    .stock-category-nav{
        top:68px;
    }

    .stock-product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .services-hero__panel,
    .about-hero__panel,
    .contact-hero__details{
        width:100%;
        max-width:650px;
        margin-left:auto;
        margin-right:auto;
    }

    .about-story__grid{
        gap:28px;
    }

    .contact-main__grid{
        gap:28px;
    }

    .inquiry-category-grid,
    .inquiry-product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .inquiry-final-grid{
        grid-template-columns:1fr;
    }

    .site-footer__top{
        grid-template-columns:1fr 1fr;
    }

    .site-footer__brand-column,
    .site-footer__inquiry-column{
        grid-column:1 / -1;
        max-width:none;
    }
}

/* =========================================================
   MOBILE LANDSCAPE / LARGE PHONE — <= 700px
   ========================================================= */

@media (max-width:700px){
    body{
        padding-bottom:max(76px,calc(64px + var(--ht-safe-bottom)));
    }

    .home-shell,
    .stock-shell,
    .services-shell,
    .about-shell,
    .contact-shell,
    .inquiry-shell{
        width:min(100% - 28px,1200px);
    }

    .site-footer__inner{
        padding-left:max(20px,var(--ht-safe-left));
        padding-right:max(20px,var(--ht-safe-right));
        padding-bottom:max(22px,var(--ht-safe-bottom));
    }

    .home-hero__grid{
        padding-top:38px;
        padding-bottom:50px;
    }

    .home-hero h1,
    .services-hero h1,
    .about-hero h1,
    .contact-hero h1{
        font-size:clamp(35px,10vw,44px);
        letter-spacing:-2px;
    }

    .home-hero__lead,
    .services-hero__copy>p,
    .about-hero__copy>p,
    .contact-hero__copy>p{
        font-size:14px;
    }

    .home-hero__actions,
    .services-actions,
    .about-hero__actions{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }

    .home-hero__actions .home-btn,
    .services-actions a,
    .about-hero__actions .about-btn{
        width:100%;
    }

    .trade-orb{
        width:min(320px,88vw);
    }

    .trade-float{
        min-width:108px;
    }

    .inquiry-spotlight-card{
        flex-direction:column;
        align-items:flex-start;
        padding:27px 23px;
    }

    .home-category-preview{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .home-contact-cta__card,
    .stock-bottom-cta__card,
    .services-cta-card,
    .about-cta__card{
        flex-direction:column;
        align-items:flex-start;
    }

    .stock-product-grid,
    .services-grid,
    .services-process-grid,
    .about-pillars__grid{
        grid-template-columns:1fr;
    }

    .stock-category-section__heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .service-card p,
    .stock-product-card p{
        min-height:0;
    }

    .contact-form__grid,
    .inquiry-field-grid{
        grid-template-columns:1fr;
    }

    .contact-form__full,
    .inquiry-field-grid__full{
        grid-column:auto;
    }

    .inquiry-progress{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:5px;
    }

    .inquiry-progress>i{
        display:none;
    }

    .inquiry-progress__item{
        justify-content:center;
        min-width:0;
    }

    .inquiry-progress__item>strong{
        display:none;
    }

    .inquiry-step{
        padding:24px 18px;
    }

    .inquiry-category-grid,
    .inquiry-product-grid{
        grid-template-columns:1fr;
    }

    .inquiry-selected-category{
        flex-wrap:wrap;
    }

    .inquiry-selected-category>button{
        margin-left:0;
    }

    .inquiry-step__actions{
        align-items:stretch;
    }

    .inquiry-step__actions .inquiry-back-btn,
    .inquiry-step__actions .inquiry-next-btn,
    .inquiry-step__actions .inquiry-submit-btn{
        min-height:46px;
    }

    .mobile-inquiry-cta{
        left:max(12px,var(--ht-safe-left));
        right:max(12px,var(--ht-safe-right));
        bottom:max(10px,var(--ht-safe-bottom));
    }

    .site-footer__bottom{
        flex-direction:column;
        align-items:flex-start;
    }

    .site-footer__trust{
        flex-wrap:wrap;
    }
}

/* =========================================================
   SMALL PHONE — <= 480px
   ========================================================= */

@media (max-width:480px){
.site-brand__logo svg{
        height:43px;
        max-width:150px;
    }

    .btn-header--primary{
        display:none;
    }

    .menu-toggle{
        width:42px;
        height:42px;
    }

    .home-eyebrow,
    .stock-kicker,
    .services-kicker,
    .about-kicker,
    .contact-kicker,
    .inquiry-kicker{
        font-size:9px;
    }

    .home-hero h1,
    .services-hero h1,
    .about-hero h1,
    .contact-hero h1,
    .inquiry-page__header h1{
        font-size:34px;
        line-height:1.02;
    }

    .home-service-pills{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
    }

    .home-service-pills span{
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:43px;
        text-align:center;
    }

    .home-trust-row{
        flex-direction:column;
        align-items:center;
    }

    .home-hero__visual{
        min-height:320px;
    }

    .trade-orb{
        width:265px;
    }

    .trade-center-card{
        width:172px;
        padding:16px 13px;
    }

    .trade-center-card__icon{
        width:45px;
        height:45px;
    }

    .trade-float{
        min-width:96px;
        padding:8px 9px;
    }

    .trade-float strong{
        font-size:9px;
    }

    .trade-float span{
        font-size:7px;
    }

    .home-category-preview{
        grid-template-columns:1fr;
    }

    .stock-page-hero__cta,
    .services-hero__panel,
    .about-hero__panel,
    .contact-form-panel,
    .contact-side-panel__card,
    .inquiry-portal{
        border-radius:20px;
    }

    .stock-page-hero__cta,
    .services-hero__panel,
    .about-hero__panel{
        padding:22px;
    }

    .contact-form-panel{
        padding:21px 17px;
    }

    .inquiry-step__heading h2{
        font-size:24px;
    }

    .inquiry-progress{
        padding:12px 10px;
    }

    .inquiry-progress__item>span{
        width:28px;
        height:28px;
    }

    .inquiry-step__actions{
        flex-direction:column-reverse;
    }

    .inquiry-step__actions--right{
        flex-direction:column;
    }

    .inquiry-step__actions button{
        width:100%;
    }

    .site-footer__top{
        grid-template-columns:1fr;
    }

    .site-footer__brand-column,
    .site-footer__inquiry-column{
        grid-column:auto;
    }

    .site-footer__link-column a{
        width:auto;
    }
}

/* =========================================================
   VERY SMALL PHONE — <= 360px
   ========================================================= */

@media (max-width:360px){
    .site-brand__logo svg{
        max-width:135px;
    }

    .home-hero h1,
    .services-hero h1,
    .about-hero h1,
    .contact-hero h1,
    .inquiry-page__header h1{
        font-size:31px;
    }

    .home-service-pills{
        grid-template-columns:1fr;
    }

    .trade-orb{
        width:238px;
    }

    .mobile-inquiry-cta{
        gap:8px;
        padding-left:12px;
    }

    .mobile-inquiry-cta__copy span{
        display:none;
    }

    .mobile-inquiry-cta__button{
        padding:0 12px;
    }
}

/* =========================================================
   SHORT LANDSCAPE VIEWPORTS
   ========================================================= */

@media (max-height:540px) and (orientation:landscape){
    .site-nav{
        max-height:calc(100dvh - 72px);
    }

    .home-hero{
        min-height:auto;
    }

    .home-hero__grid{
        padding-top:30px;
        padding-bottom:38px;
    }

    .home-hero__visual{
        min-height:300px;
    }

    .mobile-inquiry-cta{
        min-height:50px;
    }
}

/* =========================================================
   TOUCH-FIRST SYSTEMS
   Android / iOS / HarmonyOS / tablet touch browsers
   ========================================================= */

@media (hover:none), (pointer:coarse){
    .site-nav__link,
    .btn-header,
    .home-btn,
    .footer-inquiry-btn,
    .stock-product-card__cta,
    .services-actions a,
    .service-card a,
    .about-btn,
    .about-text-link,
    .contact-submit-btn,
    .inquiry-season-tab,
    .inquiry-next-btn,
    .inquiry-back-btn,
    .inquiry-submit-btn{
        min-height:44px;
    }

    .inquiry-category-card,
    .inquiry-product-card,
    .stock-product-card,
    .service-card,
    .about-pillar-card{
        transform:none;
    }

    .inquiry-category-card:hover,
    .stock-product-card:hover,
    .service-card:hover,
    .about-pillar-card:hover{
        transform:none;
    }
}

/* =========================================================
   NO HOVER (avoid stuck hover state on touch)
   ========================================================= */

@media (hover:none){
    .home-value-card:hover,
    .home-category-preview div:hover,
    .stock-product-card:hover,
    .service-card:hover,
    .about-pillar-card:hover{
        box-shadow:inherit;
    }
}

/* =========================================================
   REDUCED MOTION / PERFORMANCE ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto!important;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        transition-delay:0ms!important;
    }
}

/* =========================================================
   PRINT SAFETY
   ========================================================= */

@media print{
    .site-header,
    .site-footer,
    .mobile-inquiry-cta,
    .home-hero__visual,
    .about-network__visual{
        display:none!important;
    }

    body{
        padding:0!important;
        background:#fff!important;
        color:#000!important;
    }

    .site-main{
        overflow:visible!important;
    }

    a{
        color:#000!important;
        text-decoration:none!important;
    }
}


/* Preserve sticky header while preventing horizontal overflow */
html,body{overflow-x:clip}