/* FTIG universal responsive layer — phones, tablets, laptops, desktop/touch displays */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}
html,body{height:100%;height:100dvh;overscroll-behavior:none;-webkit-text-size-adjust:100%;}
body{position:fixed;inset:0;padding:0;}
#app,.screen{width:100%;height:100%;height:100dvh;}
img,video{-webkit-user-drag:none;}
button,a{-webkit-touch-callout:none;touch-action:manipulation;}

/* PWA / notched devices */
.topbar{
  padding-left:max(28px,var(--safe-left));
  padding-right:max(28px,var(--safe-right));
  padding-top:var(--safe-top);
  height:calc(96px + var(--safe-top));
}
.catalogBody{
  height:calc(100dvh - 96px - var(--safe-top));
  padding-bottom:max(24px,var(--safe-bottom)) !important;
}
.attractBrand{top:calc(5% + var(--safe-top));}
.touchCta{bottom:max(5%,calc(18px + var(--safe-bottom)));}
.homeQr{bottom:max(18px,var(--safe-bottom));}

/* Large desktop / 4K kiosk: prevent comically oversized UI while filling screen. */
@media (min-width:1500px){
  .catalogBody{max-width:1800px;margin:0 auto;width:100%;}
  .brandGrid,.productGrid,.formatGrid{gap:24px;}
}

/* Tablet portrait */
@media (min-width:700px) and (max-width:1499px) and (orientation:portrait){
  .topbar{grid-template-columns:72px 1fr 72px;}
  .roundBtn{width:56px;height:56px;}
  .catalogBody{padding:24px 30px 32px !important;}
  .pageIntro h2,.sectionHeader h2{font-size:clamp(38px,5vw,48px);}
  .pageIntro p{font-size:17px;margin-bottom:22px;}
  .brandGrid{gap:16px;height:calc(100% - 150px);}
  .brandCard{min-height:180px;padding:24px;}
  .brandCard strong{font-size:29px;}
  .brandHero{width:40%;height:88%;}
  .productGrid{grid-auto-rows:minmax(330px,38vh) !important;gap:16px !important;height:calc(100% - 100px) !important;}
  .productCard{height:auto !important;min-height:330px !important;max-height:none !important;padding:18px;}
  .productImageWrap{height:235px !important;min-height:235px !important;}
  .productCard img{max-height:215px !important;}
  .formatGrid{gap:16px !important;}
  .formatCard{min-height:0 !important;}
  .formatImageWrap{height:235px;min-height:235px;}
  .formatImageWrap img{max-height:215px;}
  .formatCardCopy strong{font-size:21px;}

  #detailView .sectionHeader.compact{margin-bottom:8px !important;}
  #detailView .detailLayout{
    height:calc(100% - 68px) !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-rows:minmax(330px,42vh) minmax(250px,1fr) !important;
    column-gap:18px !important;row-gap:18px !important;padding-bottom:8px !important;
  }
  #detailView .heroPack,#detailView .detailMedia,#detailView .detailMedia .detailMediaItem,
  #detailView .detailInfo,#detailView .specPanel{height:100% !important;min-height:0 !important;max-height:none !important;}
  #detailView .detailMedia .detailMediaItem{padding:18px !important;}
  #detailView .detailMedia .detailMediaItem img,#detailView #detailImage{max-height:90% !important;max-width:88% !important;}
  #detailView .specTitle{padding:14px 18px;font-size:20px;}
  #detailView .specRow{padding-left:18px;padding-right:18px;}
  #detailView .specRow span{font-size:10px;}
  #detailView .specRow b{font-size:14px;}
  #detailView .detail360Wrap{padding:14px !important;}
  .companyHero{padding:30px;grid-template-columns:1fr 120px;}
  .companyHero h3{font-size:32px;}
  .companyMonogram{width:110px;height:110px;}
  .companyGrid article{padding:20px;}
}

/* Tablet / laptop landscape */
@media (min-width:900px) and (max-width:1499px) and (orientation:landscape){
  .catalogBody{padding:22px 30px 26px !important;overflow:hidden;}
  .pageIntro h2,.sectionHeader h2{font-size:40px;}
  .brandGrid{grid-template-columns:repeat(3,1fr);height:calc(100% - 135px);overflow:auto;}
  .brandCard{min-height:190px;}
  .productGrid{grid-template-columns:repeat(3,1fr) !important;grid-auto-rows:320px !important;height:calc(100% - 90px) !important;}
  .productCard{height:320px !important;min-height:320px !important;max-height:320px !important;}
  .productImageWrap{height:205px !important;min-height:205px !important;}
  .productCard img{max-height:185px !important;}
  .formatGrid{grid-template-columns:repeat(3,1fr) !important;overflow:auto;}
  .formatImageWrap{height:205px;min-height:205px;}
  .formatImageWrap img{max-height:185px;}
  #detailView .detailLayout{
    height:calc(100% - 65px) !important;
    grid-template-columns:35% 35% 30% !important;
    grid-template-rows:minmax(0,1fr) !important;
    gap:16px !important;padding-bottom:0 !important;
  }
  #detailView .heroPack{grid-column:1 !important;grid-row:1 !important;}
  #detailView .detailInfo{grid-column:2 !important;grid-row:1 !important;}
  #detailView .detail360Wrap{grid-column:3 !important;grid-row:1 !important;}
  #detailView .heroPack,#detailView .detailMedia,#detailView .detailMedia .detailMediaItem,
  #detailView .detailInfo,#detailView .specPanel,#detailView .detail360Wrap{height:100% !important;min-height:0 !important;max-height:none !important;}
  #detailView .detailMedia .detailMediaItem{padding:14px !important;}
  #detailView .detailMedia .detailMediaItem img,#detailView #detailImage{max-height:88% !important;max-width:90% !important;}
  #detailView .detail360Wrap{padding:10px !important;}
  #detailView .specTitle{padding:12px 15px;font-size:18px;}
  #detailView .specRow{padding-left:15px;padding-right:15px;gap:8px;}
  #detailView .specRow span{font-size:9px;}
  #detailView .specRow b{font-size:12px;}
}

/* Phones — portrait */
@media (max-width:699px){
  html,body{overflow:hidden;}
  .topbar{
    height:calc(70px + var(--safe-top));
    grid-template-columns:48px 1fr 48px;
    padding-left:max(14px,var(--safe-left));padding-right:max(14px,var(--safe-right));
  }
  .topLogoImg{max-width:min(62vw,280px) !important;max-height:45px !important;}
  .roundBtn{width:42px;height:42px;font-size:22px;}
  .catalogBody{
    height:calc(100dvh - 70px - var(--safe-top));
    padding:18px max(14px,var(--safe-right)) max(18px,var(--safe-bottom)) max(14px,var(--safe-left)) !important;
    overflow:auto !important;
  }
  .view{height:auto;min-height:100%;overflow:visible;}
  .pageIntro h2,.sectionHeader h2{font-size:32px;line-height:1.05;margin:6px 0;}
  .pageIntro p{font-size:14px;line-height:1.4;margin-bottom:16px;}
  .micro{font-size:10px;letter-spacing:3px;}
  .sectionHeader{gap:12px;margin-bottom:16px;align-items:flex-start;}
  .sectionHeader.compact{margin-bottom:12px !important;}
  .backBtn{height:44px;padding:0 13px;border-radius:11px;font-size:11px;flex:0 0 auto;}

  .brandGrid,.productGrid,.formatGrid{
    display:grid !important;grid-template-columns:1fr !important;gap:12px !important;height:auto !important;overflow:visible !important;padding-bottom:18px !important;
  }
  .brandCard{min-height:140px !important;padding:20px;border-radius:17px;}
  .brandCard .copy{width:66%;}
  .brandCard strong{font-size:25px;}
  .brandCard small{font-size:12px;}
  .brandCard em{font-size:11px;margin-top:16px;}
  .brandNumber{font-size:34px;}
  .brandHero{width:35%;height:82%;}

  .productCard,.formatCard{height:auto !important;min-height:0 !important;max-height:none !important;padding:14px !important;border-radius:17px !important;}
  .productImageWrap,.formatImageWrap{height:min(48vh,330px) !important;min-height:220px !important;border-radius:14px !important;}
  .productCard img,.formatImageWrap img{max-height:90% !important;max-width:88% !important;}
  .productCard strong,.formatCardCopy strong{font-size:22px;}

  /* Detail becomes a scrollable vertical stack on phones. */
  .catalogBody:has(#detailView.active){overflow:auto !important;padding-top:14px !important;}
  #detailView.active{height:auto !important;min-height:100% !important;overflow:visible !important;}
  #detailView .detailLayout{
    height:auto !important;display:grid !important;grid-template-columns:1fr !important;grid-template-rows:auto auto auto !important;
    gap:14px !important;overflow:visible !important;padding-bottom:22px !important;
  }
  #detailView .heroPack{grid-column:1 !important;grid-row:1 !important;height:min(55vh,420px) !important;min-height:300px !important;max-height:none !important;}
  #detailView .detailMedia,#detailView .detailMedia .detailMediaItem{height:100% !important;min-height:300px !important;max-height:none !important;}
  #detailView .detailMedia .detailMediaItem{padding:16px !important;}
  #detailView .detailMedia .detailMediaItem img,#detailView #detailImage{max-height:min(48vh,370px) !important;max-width:88% !important;}
  #detailView .detailInfo{grid-column:1 !important;grid-row:2 !important;height:auto !important;min-height:0 !important;max-height:none !important;overflow:visible !important;}
  #detailView .specPanel{height:auto !important;min-height:0 !important;max-height:none !important;display:block !important;}
  #detailView .specTitle{padding:15px 16px;font-size:19px;}
  #detailView .specRow{padding:13px 16px !important;grid-template-columns:42% 1fr;}
  #detailView .specRow span{font-size:10px;}
  #detailView .specRow b{font-size:13px;}
  #detailView .detail360Wrap{grid-column:1 !important;grid-row:3 !important;height:min(72vw,420px) !important;min-height:270px !important;padding:10px !important;}

  .companyHero{grid-template-columns:1fr !important;padding:22px;border-radius:18px;gap:18px;}
  .companyHero h3{font-size:28px;}
  .companyHero p{font-size:14px;}
  .companyMonogram{width:90px;height:90px;margin:0;}
  .companyGrid{grid-template-columns:1fr;gap:10px;margin-top:12px;}
  .companyGrid article{padding:17px;}
  .contactStrip{flex-direction:column;padding:17px;gap:12px;margin-top:12px;}

  /* Attract screen phone composition */
  .attractBrand{left:6%;right:6%;top:calc(5% + var(--safe-top));}
  .attractLogoImg{width:min(86vw,560px) !important;height:auto !important;}
  .attractCopy{left:6%;right:6%;bottom:24%;}
  .attractCopy h1{font-size:clamp(30px,9vw,44px);margin:14px 0 18px;}
  .capabilities{gap:8px;font-size:9px;letter-spacing:1px;flex-wrap:wrap;}
  .touchCta{left:6%;right:6%;height:74px;font-size:13px;letter-spacing:2px;gap:14px;border-radius:14px;}
  .pulse{width:20px;height:20px;}
  .homeQr{display:none !important;}
  .idleHint{right:12px;bottom:max(10px,var(--safe-bottom));}
}

/* Small landscape phones: use a compact, scrollable layout. */
@media (max-height:520px) and (orientation:landscape){
  .topbar{height:58px;padding-top:0;grid-template-columns:44px 1fr 44px;}
  .roundBtn{width:38px;height:38px;}
  .topLogoImg{max-height:38px !important;}
  .catalogBody{height:calc(100dvh - 58px);padding:12px 18px 16px !important;overflow:auto !important;}
  .pageIntro h2,.sectionHeader h2{font-size:28px;}
  .brandGrid,.productGrid,.formatGrid{height:auto !important;overflow:visible !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .brandCard{min-height:130px !important;}
  #detailView .detailLayout{height:auto !important;grid-template-columns:1fr 1fr !important;grid-template-rows:auto auto !important;overflow:visible !important;}
  #detailView .heroPack,#detailView .detailInfo{height:310px !important;min-height:310px !important;max-height:none !important;}
  #detailView .detail360Wrap{grid-column:1/-1 !important;grid-row:2 !important;height:360px !important;}
}

@media (hover:none){button:hover{transform:none !important;}.detail360Wrap::after{pointer-events:none !important;}}
@media (prefers-reduced-motion:reduce){.pulse:after{animation:none;}}