/* ==========================================================================
   BILINK INTERNATIONAL — responsive
   Breakpoints: 1440 / 1200 / 1024 / 768 / 480 / 390 / 360
   ========================================================================== */

@media (max-width:1440px){
  :root{--maxw:1320px}
}

/* ------------------------------------------------------------- <= 1200 --- */
@media (max-width:1200px){
  :root{--sp-7:96px;--sp-8:130px}
  .nav{gap:16px}
  .nav a{font-size:.68rem;letter-spacing:.12em}
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .catalogue{grid-template-columns:232px 1fr}
  .cat--lead{grid-column:1/7;grid-row:1/span 2}
  .cat--tall{grid-column:7/13;grid-row:1/span 2}
  .cat--stackA{grid-column:1/7;grid-row:3}
  .cat--stackB{grid-column:7/13;grid-row:3}
  .cat--wide{grid-row:4}
  .hero__body{grid-column:1/9}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .admin-shell{grid-template-columns:212px 1fr}
}

/* ------------------------------------------------------------- <= 1024 --- */
@media (max-width:1024px){
  :root{--header-h:72px;--sp-6:64px;--sp-7:80px}
  .nav{display:none}
  .burger{display:grid;place-items:center}
  .header-actions .btn-quote{display:none}

  .hero__inner{min-height:auto;padding-block:40px 40px}
  .hero__body{grid-column:1/13}
  .hero__meta{grid-column:1/13;border-left:0;border-top:1px solid #35646A;padding:24px 0 0;
    grid-template-columns:repeat(3,1fr);display:grid;margin-top:46px}

  .phero__title{grid-column:1/13}
  .phero__aside{grid-column:1/13;padding-top:22px;border-top:1px solid var(--hairline-dark);margin-top:24px}

  .section-head{gap:20px}
  .section-head__title{grid-column:1/13}
  .section-head__aside{grid-column:1/13}

  .split__media,.split--rev .split__media{grid-column:1/13;order:1}
  .split__body,.split--rev .split__body{grid-column:1/13;order:2}

  .globe__body,.globe__art{grid-column:1/13}
  .factrow{grid-template-columns:repeat(2,1fr);gap:26px}

  .pdp__gallery,.pdp__info{grid-column:1/13;position:static}
  .rfq__form,.rfq__summary{grid-column:1/13;position:static}
  .contact-grid__info,.contact-grid__form{grid-column:1/13}

  .step{grid-template-columns:60px 1fr;gap:20px}
  .step__note{grid-column:2/3;border-left:0;border-top:1px solid var(--hairline);padding:14px 0 0}
  .section-dark .step__note{border-color:var(--hairline-dark)}

  .catalogue{grid-template-columns:1fr}
  .filters{position:static;display:none;border:1px solid var(--hairline);background:var(--white);
    padding:var(--sp-3);border-radius:var(--radius);margin-bottom:var(--sp-3)}
  .filters.is-open{display:grid}
  .filters-toggle{display:inline-flex}

  .footer-cta__t,.footer-cta__a{grid-column:1/13}
  .footer-cta__a{justify-content:flex-start;margin-top:26px}
  .footer-cols{grid-template-columns:repeat(3,1fr);gap:30px}
  .footer-about{grid-column:1/-1}

  .admin-shell{grid-template-columns:1fr}
  .admin-side{flex-direction:row;align-items:center;gap:16px;overflow-x:auto;padding:14px 16px}
  .admin-side nav{grid-auto-flow:column;gap:6px}
  .admin-side__foot{margin:0 0 0 auto;flex:none}
  .admin-side__foot .btn{white-space:nowrap}
}

/* -------------------------------------------------------------- <= 768 --- */
@media (max-width:768px){
  :root{--fs-body:1.0625rem;--sp-5:44px;--sp-6:56px;--sp-7:68px;--sp-8:92px}
  .product-grid,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .res-grid{grid-template-columns:repeat(2,1fr)}
  .catmix{gap:14px}
  .cat--lead,.cat--tall,.cat--stackA,.cat--stackB,.cat--wide{grid-column:1/13;grid-row:auto;min-height:280px}
  .form-grid{grid-template-columns:1fr}
  .hero__meta{grid-template-columns:repeat(2,1fr);gap:18px}
  .drawer{width:100%;border-left:0}
  .sticky-cta{display:flex}
  body.has-sticky-cta{padding-bottom:78px}
  .gallery__thumbs{grid-template-columns:repeat(3,1fr)}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .stat dd{font-size:1.9rem}
  .spec-table th{width:46%}
  .search-result{grid-template-columns:52px 1fr}
  .search-result img{width:52px;height:40px}
  .search-result .go{display:none}
}

/* -------------------------------------------------------------- <= 480 --- */
@media (max-width:480px){
  :root{--gutter:18px;--header-h:66px;--fs-label:.7rem}
  .product-grid,.grid-3,.grid-2,.res-grid{grid-template-columns:1fr}
  .brand__name span{letter-spacing:.24em;font-size:.55rem}
  .enquiry-btn{padding:10px 12px}
  .enquiry-btn .txt{display:none}
  .hero__actions .btn{width:100%}
  .hero__meta{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:repeat(2,1fr)}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .mobile-menu nav a{font-size:1.3rem;padding:15px 0}
  .factrow{grid-template-columns:1fr}
  .flow{gap:8px}
  .flow span{padding:9px 12px}
  .result-bar{flex-direction:column;align-items:flex-start;gap:12px}
  .modal__foot{flex-direction:column-reverse}
  .modal__foot .btn{width:100%}
  .login-card{padding:26px 20px}
}

/* -------------------------------------------------------------- <= 390 --- */
@media (max-width:390px){
  :root{--gutter:15px}
  .brand__name b{font-size:.94rem}
  .btn{padding:14px 18px}
  .drawer-item{grid-template-columns:62px 1fr;gap:11px}
  .drawer-item img{width:62px;height:48px}
  .stat-grid{grid-template-columns:1fr}
  .gallery__thumbs{gap:7px}
}

/* -------------------------------------------------------------- <= 360 --- */
@media (max-width:360px){
  :root{--gutter:13px}
  .brand__mark{width:65px;height:40px}
  .brand__name span{display:none}
  .header-actions{gap:5px}
  .icon-btn{width:38px;height:38px}
  .search-field input{font-size:1.15rem}
  .footer-cols{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- print -- */
@media print{
  .site-header,.site-footer,.drawer,.drawer-scrim,.sticky-cta,.search-overlay,.mobile-menu,.demo-banner{display:none !important}
  body{background:#fff;color:#000}
  .hero,.phero,.section-dark{background:#fff !important;color:#000 !important}
}

/* ------------------------------------- products dropdown / range pages --- */
/* The Products item carries a chevron; tighten the nav rhythm a touch at
   laptop widths so the header row never exceeds the viewport. */
@media (max-width:1500px) and (min-width:1201px){
  .nav{gap:clamp(12px,1.3vw,22px)}
}
/* Laptop widths: the header row carries logo, eight nav items, search,
   enquiry and quote. Drop the enquiry label (icon + count stay, exactly as
   on phones) and tighten spacing so the row always fits. */
@media (max-width:1366px) and (min-width:1025px){
  .site-header__bar{gap:clamp(12px,1.6vw,24px)}
  .enquiry-btn{padding:11px 12px}
  .enquiry-btn .txt{display:none}
  .header-actions{gap:6px}
  .header-actions .btn-quote{padding-inline:16px}
}
@media (max-width:1200px) and (min-width:1025px){
  .nav{gap:13px}
  .nav a,.nav-drop__btn{font-size:.64rem;letter-spacing:.1em}
  .brand__mark,.site-header.is-scrolled .brand__mark{width:104px}
}
@media (max-width:1024px){
  .nav-drop{display:none}
}
@media (max-width:768px){
  .range-tabs{gap:7px}
  .range-tab{padding:8px 13px;font-size:.66rem}
  .range-bar{gap:10px}
}
@media (max-width:480px){
  .variant-table th,.variant-table td{padding:9px 8px}
  .m-drop__btn{font-size:1.3rem;padding:15px 0}
}
@media (max-width:1100px) and (min-width:1025px){
  .nav{gap:10px}
  .nav a,.nav-drop__btn{letter-spacing:.08em}
  .site-header__bar{gap:10px}
}
/* process steps: let long words wrap rather than push the grid sideways */
.step > *{min-width:0;overflow-wrap:anywhere}
@media (max-width:480px){
  .step{grid-template-columns:44px minmax(0,1fr);gap:14px}
}
/* phones & small tablets: sections become one swipeable row instead of a
   screen-high wall of chips */
@media (max-width:768px){
  .range-tabs{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 10px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - 28px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - 28px),transparent 100%)
  }
  .range-tabs::-webkit-scrollbar{display:none}
  .range-tab{flex:none;scroll-snap-align:start;white-space:nowrap}
}