:root{
  --fti:#242D63;
  --fti-deep:#151C46;
  --fti-mid:#313B78;
  --fti-light:#4E5A9B;
  --paper:#F2F3F0;
  --paper2:#E5E7E3;
  --ink:#18203F;
  --muted:#687087;
  --white:#FFFFFF;
  --sun:#D89B55;
  --line:rgba(36,45,99,.15);
  --shadow:0 28px 80px rgba(14,21,58,.16);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--fti-deep);font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);touch-action:manipulation;user-select:none}
button{font:inherit;color:inherit}
button:focus{outline:none}
#app,.screen{width:100%;height:100%}
.screen{display:none;position:absolute;inset:0}
.screen.active{display:block}

/* ATTRACT MODE */
#attract{overflow:hidden;background:var(--fti)}
#attract video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.03) brightness(.73)}
.attractOverlay{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(21,28,70,.36) 0%,rgba(21,28,70,.12) 40%,rgba(21,28,70,.88) 100%),
  linear-gradient(90deg,rgba(36,45,99,.62),transparent 48%,rgba(21,28,70,.26))}
.attractBrand{position:absolute;top:7%;left:6.5%;display:flex;align-items:center;gap:22px;color:white}
.ftiMark,.topMark{display:grid;place-items:center;border:2px solid currentColor;font-family:"Segoe UI",Arial,sans-serif;font-weight:700;letter-spacing:1px}
.ftiMark{width:92px;height:92px;font-size:36px;color:white}
.ftiName{font-family:"Segoe UI",Arial,sans-serif;font-weight:600;font-size:31px;letter-spacing:3px}
.ftiSub{font-size:13px;letter-spacing:6px;margin-top:7px;opacity:.82}
.attractCopy{position:absolute;left:7%;right:7%;bottom:25%;color:white}
.micro{font-size:15px;font-weight:700;letter-spacing:5px;text-transform:uppercase}
.micro.blue{color:var(--fti-light)}
.attractCopy .micro{color:#D9DCEB}
.attractCopy h1{font-family:"Segoe UI",Arial,sans-serif;font-weight:500;font-size:clamp(44px,5vw,70px);line-height:1.12;letter-spacing:.5px;margin:20px 0 28px}
.capabilities{display:flex;align-items:center;gap:18px;font-size:15px;font-weight:600;letter-spacing:2px}
.capabilities i{width:6px;height:6px;border-radius:50%;background:var(--sun)}
.touchCta{position:absolute;left:7%;right:7%;bottom:8%;height:112px;border:1px solid rgba(255,255,255,.36);border-radius:16px;background:rgba(36,45,99,.78);backdrop-filter:blur(12px);color:white;font-size:19px;font-weight:700;letter-spacing:4px;display:flex;align-items:center;justify-content:center;gap:24px;box-shadow:0 18px 44px rgba(0,0,0,.2)}
.pulse{width:26px;height:26px;border-radius:50%;border:2px solid white;position:relative}
.pulse:after{content:"";position:absolute;inset:-10px;border:1px solid rgba(255,255,255,.45);border-radius:50%;animation:pulse 1.8s infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:0}40%{opacity:1}100%{transform:scale(1.55);opacity:0}}

/* CATALOG */
#catalog{background:var(--paper)}
.topbar{height:120px;padding:0 48px;display:grid;grid-template-columns:90px 1fr 90px;align-items:center;background:var(--fti);color:white;box-shadow:0 8px 30px rgba(21,28,70,.18);position:relative;z-index:10}
.topLogo{display:flex;align-items:center;justify-content:center;gap:18px}
.topMark{width:50px;height:50px;font-size:20px}
.topLogo b{display:block;font-family:"Segoe UI",Arial,sans-serif;font-size:22px;letter-spacing:2px;font-weight:600}
.topLogo small{display:block;font-size:9px;letter-spacing:4px;margin-top:4px;opacity:.76}
.roundBtn{width:62px;height:62px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:white;font-size:29px}
.catalogBody{height:calc(100% - 120px);padding:50px 48px 64px;overflow:hidden}
.view{height:100%;display:none}
.view.active{display:block}
.pageIntro h2,.sectionHeader h2{font-family:"Segoe UI",Arial,sans-serif;font-weight:500;color:var(--fti);font-size:56px;line-height:1.05;margin:12px 0}
.pageIntro p{font-size:20px;color:var(--muted);margin:0 0 34px;max-width:760px;line-height:1.5}

/* BRANDS */
.brandGrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;height:calc(100% - 190px)}
.brandCard{position:relative;min-height:230px;border:1px solid var(--line);border-radius:22px;background:white;overflow:hidden;text-align:left;padding:30px;box-shadow:0 12px 34px rgba(36,45,99,.08)}
.brandCard:before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--accent)}
.brandCard .copy{position:relative;z-index:2;width:57%}
.brandCard strong{font-family:"Segoe UI",Arial,sans-serif;font-weight:600;color:var(--fti);font-size:34px;display:block}
.brandCard small{color:var(--muted);font-size:14px;letter-spacing:1.2px;display:block;margin-top:8px;line-height:1.3}
.brandCard em{font-style:normal;color:var(--fti);font-size:13px;font-weight:700;letter-spacing:2px;display:block;margin-top:24px}
.brandHero{position:absolute;right:6px;bottom:-12px;width:44%;height:92%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 14px 18px rgba(24,32,63,.18));transform:rotate(1deg)}
.brandNumber{position:absolute;right:20px;top:16px;font-family:"Segoe UI",Arial,sans-serif;font-size:44px;color:rgba(36,45,99,.06);z-index:1}

/* PRODUCTS */
.sectionHeader{display:flex;align-items:flex-start;gap:28px;margin-bottom:30px}
.sectionHeader.compact{margin-bottom:20px}
.backBtn{height:60px;border:1px solid var(--line);background:white;border-radius:14px;padding:0 22px;color:var(--fti);font-weight:700;letter-spacing:1.6px;box-shadow:0 8px 24px rgba(36,45,99,.06)}
.sectionHeader h2{margin:8px 0 0}
.productGrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;height:calc(100% - 115px);overflow:auto;padding:2px 2px 14px}
.productCard{position:relative;border:1px solid var(--line);border-radius:22px;background:white;min-height:430px;padding:24px;text-align:left;box-shadow:0 12px 34px rgba(36,45,99,.08);display:grid;grid-template-rows:1fr auto;overflow:hidden}
.productImageWrap{position:relative;min-height:300px;display:grid;place-items:center;background:linear-gradient(180deg,#FAFAF8 0%,#ECEEEA 100%);border-radius:18px;overflow:hidden}
.productImageWrap:after{content:"";position:absolute;left:18%;right:18%;bottom:15px;height:20px;border-radius:50%;background:rgba(36,45,99,.12);filter:blur(12px)}
.productCard img{position:relative;z-index:2;max-width:83%;max-height:290px;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(24,32,63,.20))}
.productCard strong{display:block;font-family:"Segoe UI",Arial,sans-serif;font-size:27px;color:var(--fti);font-weight:600;margin-top:18px}
.productCard span{display:block;color:var(--muted);font-size:14px;margin-top:7px}
.productCard em{font-style:normal;color:var(--fti);font-size:13px;font-weight:700;letter-spacing:1.5px;display:block;margin-top:13px}

/* DETAIL */
.detailLayout{height:calc(100% - 105px);display:grid;grid-template-columns:47% 1fr;gap:32px}
.heroPack{position:relative;border-radius:24px;background:linear-gradient(160deg,#FFFFFF,#E6E8E4);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow)}
.heroPack:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(36,45,99,.04),transparent 55%)}
.packHalo{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(78,90,155,.14) 0%,rgba(78,90,155,.04) 48%,transparent 72%)}
.heroPack img{position:relative;z-index:2;max-width:78%;max-height:78%;object-fit:contain;filter:drop-shadow(0 28px 24px rgba(24,32,63,.24))}
.detailInfo{overflow:auto;padding:6px 4px 10px}
.detailDescription{font-size:20px;line-height:1.55;color:#505970;margin:0 0 25px}
.formatTabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.formatTab{border:1px solid var(--line);background:white;border-radius:100px;padding:12px 17px;color:var(--fti);font-size:13px;font-weight:700;letter-spacing:1px}
.formatTab.active{background:var(--fti);color:white;border-color:var(--fti)}
.specPanel{border-radius:22px;background:white;border:1px solid var(--line);overflow:hidden;box-shadow:0 12px 34px rgba(36,45,99,.07)}
.specTitle{background:var(--fti);color:white;padding:22px 24px;font-family:"Segoe UI",Arial,sans-serif;font-size:26px}
.specRow{display:grid;grid-template-columns:42% 1fr;gap:18px;padding:17px 24px;border-top:1px solid var(--line);align-items:center}
.specRow span{font-size:12px;font-weight:700;letter-spacing:1.5px;color:#8A91A3}
.specRow b{font-size:16px;color:var(--ink);font-weight:600}

/* COMPANY */
.companyHero{background:var(--fti);color:white;border-radius:24px;padding:42px;display:grid;grid-template-columns:1fr 180px;gap:30px;align-items:center}
.companyHero h3{font-family:"Segoe UI",Arial,sans-serif;font-size:40px;font-weight:500;margin:0 0 18px;line-height:1.15}
.companyHero p{font-size:17px;line-height:1.55;margin:0;color:#DDE0EF}
.companyMonogram{width:150px;height:150px;border:2px solid rgba(255,255,255,.55);display:grid;place-items:center;font-family:"Segoe UI",Arial,sans-serif;font-size:52px;margin:auto}
.companyGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.companyGrid article{background:white;border:1px solid var(--line);border-radius:18px;padding:27px}
.companyGrid strong{display:block;color:var(--fti);font-size:18px;letter-spacing:1.5px}
.companyGrid span{display:block;color:var(--muted);margin-top:8px;font-size:15px}
.contactStrip{margin-top:22px;background:#DDE0EA;border-radius:16px;padding:24px;display:flex;justify-content:space-between;gap:20px;color:var(--fti);font-weight:700;font-size:14px}

/* IDLE */
.idleHint{position:absolute;right:28px;bottom:22px;padding:10px 16px;background:rgba(36,45,99,.9);color:white;border-radius:999px;font-size:12px;letter-spacing:.5px;opacity:0;transition:.25s;pointer-events:none}
.idleHint.show{opacity:1}

/* smaller screens / landscape preview */
@media (max-aspect-ratio: 9/16){
  .brandCard{min-height:210px}
}
@media (max-width:800px){
  .catalogBody{padding-left:28px;padding-right:28px}
  .topbar{padding-left:28px;padding-right:28px}
}

/* Official FTI logo */
.attractLogoImg{display:block;width:min(68vw,720px);height:auto;object-fit:contain;object-position:left center}
.topLogoImg{display:block;width:min(48vw,420px);max-height:72px;height:auto;object-fit:contain}


/* === V2 TEXT-ONLY BRANDS PAGE OVERRIDE === */
.brandGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(4,1fr);
  gap:18px;
  height:calc(100% - 190px);
}
.brandCard{
  position:relative;
  min-height:0;
  border:1px solid rgba(36,45,99,.14);
  border-radius:22px;
  background:
    radial-gradient(circle at 82% 18%, rgba(36,45,99,.055), transparent 34%),
    linear-gradient(145deg,#ffffff 0%,#f4f5f2 100%);
  overflow:hidden;
  text-align:left;
  padding:30px 34px;
  box-shadow:0 12px 34px rgba(36,45,99,.07);
  display:flex;
  align-items:center;
}
.brandCard:before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:7px;
  background:var(--accent);
}
.brandCard:after{
  content:"";
  position:absolute;
  right:26px;
  top:50%;
  width:54px;
  height:1px;
  background:rgba(36,45,99,.16);
}
.brandCard .copy{
  position:relative;
  z-index:2;
  width:68%;
  padding-left:4px;
}
.brandCard strong{
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:34px;
  line-height:1;
  font-weight:600;
  color:var(--fti);
  display:block;
  letter-spacing:.01em;
}
.brandCard small{
  display:block;
  margin-top:9px;
  color:var(--muted);
  font-size:14px;
  letter-spacing:.7px;
}
.brandCard em{
  display:inline-block;
  margin-top:18px;
  color:var(--fti);
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  font-style:normal;
}
.brandNumber{
  position:absolute;
  top:16px;
  right:22px;
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:28px;
  color:rgba(36,45,99,.10);
  z-index:1;
}
.brandMonogram{
  position:absolute;
  right:30px;
  bottom:22px;
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:58px;
  line-height:1;
  color:rgba(36,45,99,.075);
  letter-spacing:-3px;
  font-weight:700;
}
.brandHero{display:none !important;}
.brandCard:last-child:nth-child(odd){
  grid-column:1 / span 2;
}
.brandCard:last-child:nth-child(odd) .copy{
  width:48%;
}
.brandCard:last-child:nth-child(odd):after{
  width:90px;
}
.brandCard:last-child:nth-child(odd) .brandMonogram{
  font-size:72px;
}

/* centered home branding + compact QR */
#attract .heroLogo,#attract .coverLogo{left:50%!important;right:auto!important;transform:translateX(-50%)!important;margin:0 auto!important}
.attractTop{justify-content:center!important;text-align:center!important}
.homeQr{position:absolute;right:30px;bottom:28px;z-index:12;display:flex;align-items:center;gap:11px;padding:9px 13px 9px 9px;border-radius:15px;background:rgba(7,22,49,.84);border:1px solid rgba(255,255,255,.24);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.homeQrCode{width:82px;height:82px;border-radius:9px;overflow:hidden;background:#fff;flex:0 0 82px}
.homeQrCode img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center}
.homeQrText{display:flex;flex-direction:column;gap:3px;color:#fff;text-align:left}
.homeQrText strong{font-size:11px;letter-spacing:1.7px;font-weight:800}.homeQrText span{font-size:10px;opacity:.78}

/* Home screen correction: centered official logo */
#attract .attractBrand{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(76vw,760px);
  justify-content:center;
  text-align:center;
}
#attract .attractLogoImg{
  width:100%;
  max-width:720px;
  object-position:center center;
  margin:0 auto;
}
/* QR: clean QR only + compact scan label */
#attract .homeQrCode img{object-fit:contain;object-position:center center;}


/* === FIXED PRODUCT CARD SIZES ===
   Product cards no longer stretch vertically when a brand has only 1–2 items.
   Card proportions stay close to the 5-product BACIO layout.
*/
.productGrid{
  grid-template-columns:1fr 1fr !important;
  grid-auto-rows:430px !important;
  align-content:start !important;
  height:calc(100% - 115px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  gap:22px !important;
}
.productCard{
  height:430px !important;
  min-height:430px !important;
  max-height:430px !important;
}
.productImageWrap{
  min-height:300px !important;
  height:300px !important;
}
.productCard img{
  max-height:270px !important;
  max-width:80% !important;
}

/* Product detail: keep the photo panel compact instead of stretching to screen height */
.detailLayout{
  height:auto !important;
  max-height:720px !important;
  min-height:0 !important;
  align-items:start !important;
}
.heroPack{
  height:720px !important;
  min-height:720px !important;
  max-height:720px !important;
}
.heroPack img{
  max-height:520px !important;
  max-width:82% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
}
.detailInfo{
  max-height:720px !important;
  height:auto !important;
  overflow-y:auto !important;
}


/* === FTI CORPORATE TYPOGRAPHY ===
   Unified clean sans-serif typography to match the corporate website/logo style.
*/
html,body,button{font-family:"Segoe UI",Arial,sans-serif !important;}
.ftiMark,.topMark,.ftiName,.topLogo b,
.attractCopy h1,.pageIntro h2,.sectionHeader h2,
.brandCard strong,.brandNumber,.brandMonogram,
.productCard strong,.specTitle,.companyHero h3,.companyMonogram{
  font-family:"Segoe UI",Arial,sans-serif !important;
}
.pageIntro h2,.sectionHeader h2,.companyHero h3,.attractCopy h1{
  font-weight:300 !important;
  letter-spacing:-.02em;
}
.brandCard strong,.productCard strong,.topLogo b,.ftiName{
  font-weight:500 !important;
  letter-spacing:.01em;
}
.micro,.brandCard em,.productCard em,.backBtn,.formatTab,.touchCta,
.companyGrid strong,.specRow span{
  font-family:"Segoe UI",Arial,sans-serif !important;
  font-weight:600;
}


/* === Product photo + automatic 360° view === */
.detailMedia{
  position:relative;z-index:2;width:94%;height:88%;
  display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:14px;align-items:center;
}
.detailMediaItem{
  position:relative;height:100%;min-width:0;display:grid;place-items:center;
  border-radius:18px;overflow:hidden;background:rgba(255,255,255,.48);
}
.detailMediaItem[hidden]{display:none !important;}
.detailMediaItem img{
  max-width:92% !important;max-height:88% !important;width:auto !important;height:auto !important;
  object-fit:contain !important;filter:drop-shadow(0 22px 20px rgba(24,32,63,.22));
}
.detail360Wrap video{
  width:100%;height:100%;object-fit:contain;background:#fff;display:block;
}
.view360Label{
  position:absolute;right:12px;bottom:12px;z-index:4;padding:7px 11px;border-radius:999px;
  background:rgba(36,45,99,.88);color:#fff;font-size:12px;font-weight:700;letter-spacing:1px;
}
.heroPack:has(.detail360Wrap[hidden]) .detailMedia{grid-template-columns:1fr;grid-template-rows:1fr;}

/* === 360 layout v2: photo card above, separate 360 card below === */
.heroPack{
  height:720px !important;
  min-height:720px !important;
  max-height:720px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  display:block !important;
}
.heroPack:before,.heroPack .packHalo{display:none !important;}
.detailMedia{
  position:relative !important;
  width:100% !important;
  height:720px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:470px 232px !important;
  gap:18px !important;
  align-items:stretch !important;
}
.detailMediaItem{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:linear-gradient(160deg,#FFFFFF,#E6E8E4) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow) !important;
  display:grid !important;
  place-items:center !important;
}
.detailMediaItem:first-child{position:relative;}
.detailMediaItem:first-child:before{
  content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(78,90,155,.14) 0%,rgba(78,90,155,.04) 48%,transparent 72%);
}
.detailMediaItem img{
  position:relative !important;
  z-index:2 !important;
  max-width:82% !important;
  max-height:410px !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  filter:drop-shadow(0 28px 24px rgba(24,32,63,.24)) !important;
}
.detail360Wrap{
  background:#fff !important;
}
.detail360Wrap video{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  background:#fff !important;
  display:block !important;
}
.view360Label{
  right:14px !important;bottom:12px !important;
}
.heroPack:has(.detail360Wrap[hidden]) .detailMedia{
  grid-template-rows:720px !important;
}
.heroPack:has(.detail360Wrap[hidden]) .detailMediaItem img{
  max-height:520px !important;
}

/* === Product detail layout v3: photo matches specs height; full 360 card below === */
.detailLayout{
  max-height:none !important;
  overflow:visible !important;
}
.heroPack{
  height:890px !important;
  min-height:890px !important;
  max-height:none !important;
}
.detailMedia{
  height:890px !important;
  grid-template-rows:500px 370px !important;
  gap:20px !important;
}
.detailMediaItem img{
  max-height:445px !important;
  max-width:82% !important;
}
.detail360Wrap{
  min-height:370px !important;
  height:370px !important;
}
.detail360Wrap video{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}
.heroPack:has(.detail360Wrap[hidden]){
  height:720px !important;
  min-height:720px !important;
}
.heroPack:has(.detail360Wrap[hidden]) .detailMedia{
  height:720px !important;
  grid-template-rows:720px !important;
}

/* === 360 layout v4: guarantee the entire square rotation video is visible === */
.detailMedia{
  grid-template-rows:500px 390px !important;
  height:910px !important;
}
.heroPack{
  height:910px !important;
  min-height:910px !important;
}
.detail360Wrap{
  height:390px !important;
  min-height:390px !important;
  padding:22px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.detail360Wrap video{
  width:82% !important;
  height:82% !important;
  max-width:82% !important;
  max-height:82% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  margin:auto !important;
  transform:none !important;
}

/* === Product detail layout v5: upper half 50/50, lower half full-width 360 === */
.detailLayout{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  grid-template-rows:500px 500px !important;
  gap:22px 28px !important;
  align-items:stretch !important;
  overflow:visible !important;
}
.heroPack{
  grid-column:1 !important;
  grid-row:1 !important;
  width:100% !important;
  height:500px !important;
  min-height:500px !important;
  max-height:500px !important;
  display:block !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.detailMedia{
  width:100% !important;
  height:500px !important;
  display:block !important;
}
.detailMedia .detailMediaItem{
  width:100% !important;
  height:500px !important;
  min-height:500px !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:linear-gradient(160deg,#FFFFFF,#E6E8E4) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow) !important;
  display:grid !important;
  place-items:center !important;
}
.detailMedia .detailMediaItem img{
  max-width:84% !important;
  max-height:445px !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
}
.detailInfo{
  grid-column:2 !important;
  grid-row:1 !important;
  height:500px !important;
  min-height:500px !important;
  max-height:500px !important;
  overflow:auto !important;
  padding:6px 4px 10px !important;
  box-sizing:border-box !important;
}
.detail360Wrap{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
  width:100% !important;
  height:500px !important;
  min-height:500px !important;
  max-height:500px !important;
  padding:18px !important;
  box-sizing:border-box !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow) !important;
  position:relative !important;
  display:grid !important;
  place-items:center !important;
}
.detail360Wrap[hidden]{display:none !important;}
.detail360Wrap video{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  transform:none !important;
  display:block !important;
}
.detail360Wrap .view360Label{
  position:absolute !important;
  right:18px !important;
  bottom:16px !important;
}
/* No 360: keep only the balanced upper 50/50 row. */
.detailLayout:not(:has(.detail360Wrap:not([hidden]))){
  grid-template-rows:500px !important;
}

/* === Product detail layout v6: more room for specs + large full 360 area === */
.detailLayout{
  grid-template-rows:560px 620px !important;
  gap:24px 28px !important;
}
.heroPack,
.detailMedia,
.detailMedia .detailMediaItem{
  height:560px !important;
  min-height:560px !important;
  max-height:560px !important;
}
.detailMedia .detailMediaItem img{
  max-width:86% !important;
  max-height:505px !important;
}
.detailInfo{
  height:560px !important;
  min-height:560px !important;
  max-height:560px !important;
  overflow:visible !important;
  padding:4px 2px 0 !important;
}
.detailDescription{
  margin-bottom:16px !important;
  line-height:1.42 !important;
}
.formatTabs{margin-bottom:14px !important;}
.specPanel{margin-bottom:0 !important;}
.detail360Wrap{
  height:620px !important;
  min-height:620px !important;
  max-height:620px !important;
  padding:14px !important;
}
.detail360Wrap video{
  width:auto !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}
.detailLayout:not(:has(.detail360Wrap:not([hidden]))){
  grid-template-rows:560px !important;
}

/* === Product detail layout v7: 360 panel fills all remaining screen height === */
#detailView.active{
  height:100% !important;
  overflow:hidden !important;
}
#detailView .detailLayout{
  height:calc(100% - 105px) !important;
  min-height:0 !important;
  max-height:none !important;
  grid-template-rows:560px minmax(0,1fr) !important;
  gap:24px 28px !important;
  overflow:hidden !important;
}
#detailView .detail360Wrap{
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  align-self:stretch !important;
}
#detailView .detail360Wrap video{
  width:auto !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
}
#detailView .detailLayout:not(:has(.detail360Wrap:not([hidden]))){
  grid-template-rows:560px !important;
  height:auto !important;
}

/* === v8: clean product/360 cards — keep rounded corners, remove outer shadows === */
#detailView .detailMedia .detailMediaItem,
#detailView .detail360Wrap{
  box-shadow:none !important;
}

/* === v10: product family cards — keep VIEW DETAILS fully visible === */
.productGrid{
  grid-auto-rows:455px !important;
}
.productCard{
  height:455px !important;
  min-height:455px !important;
  max-height:455px !important;
}

/* === V11 company info polish === */
.homeIconBtn{display:grid;place-items:center;padding:0;line-height:0}
.homeIcon{width:25px;height:25px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.companyMonogram{border:0;background:transparent}
.companyMonogram img{display:block;width:118px;height:118px;object-fit:contain;margin:auto}
.contactStrip span{display:flex;align-items:center;gap:9px;white-space:nowrap}
.contactIcon{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* === V13: product -> format -> detail navigation === */
.formatGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:455px;
  align-content:start;
  gap:22px;
  height:calc(100% - 115px);
  overflow-y:auto;
  overflow-x:hidden;
  padding-bottom:12px;
}
.formatCard{
  position:relative;
  height:455px;
  min-height:455px;
  max-height:455px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  padding:24px;
  text-align:left;
  display:grid;
  grid-template-rows:1fr auto;
  overflow:hidden;
  box-shadow:0 12px 34px rgba(36,45,99,.06);
}
.formatImageWrap{
  position:relative;
  height:300px;
  min-height:300px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#FAFAF8 0%,#ECEEEA 100%);
  border-radius:18px;
  overflow:hidden;
}
.formatImageWrap:after{
  content:"";
  position:absolute;
  left:18%;right:18%;bottom:15px;height:20px;
  border-radius:50%;background:rgba(36,45,99,.10);filter:blur(12px);
}
.formatImageWrap img{
  position:relative;z-index:2;
  max-width:80%;max-height:270px;width:auto;height:auto;
  object-fit:contain;
  filter:drop-shadow(0 16px 18px rgba(24,32,63,.18));
}
.formatCardCopy strong{
  display:block;
  margin-top:17px;
  color:var(--fti);
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:25px;
  font-weight:500;
  line-height:1.12;
}
.formatCardCopy span{
  display:block;color:var(--muted);font-size:13px;margin-top:7px;letter-spacing:.4px;
}
.formatCardCopy em{
  display:block;margin-top:12px;color:var(--fti);font-size:13px;font-weight:700;
  letter-spacing:1.5px;font-style:normal;
}
.selectedFormatOnly{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  cursor:default;
}
/* Product family page now leads to formats. */
.productCard em{white-space:nowrap;}


/* === V14: cleaner product title / format treatment === */
#detailView .sectionHeader.compact > div{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
#detailView #detailTitle{
  margin-bottom:7px;
}
.detailFormatLabel{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:22px;
  color:var(--fti);
  font-family:"Segoe UI",Arial,sans-serif;
}
.detailFormatLabel span{
  font-size:10px;
  font-weight:700;
  letter-spacing:2.2px;
  color:#8b93a8;
}
.detailFormatLabel strong{
  position:relative;
  padding-left:12px;
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--fti);
}
.detailFormatLabel strong:before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:1px;
  background:#b7bdca;
}
/* No format selector button on the detail page. */
#detailView .formatTabs{display:none !important;}

/* === V15: product detail vertical fit ===
   Move the title area upward and reclaim vertical space for the 360 panel. */
.catalogBody:has(#detailView.active){
  padding-top:28px !important;
  padding-bottom:28px !important;
}
#detailView .sectionHeader.compact{
  margin-bottom:10px !important;
}
#detailView .sectionHeader h2{
  margin-top:0 !important;
}
#detailView #detailTitle{
  margin-bottom:4px !important;
}
#detailView .detailLayout{
  height:calc(100% - 82px) !important;
  grid-template-rows:540px minmax(0,1fr) !important;
  gap:18px 28px !important;
}
#detailView .detailLayout:not(:has(.detail360Wrap:not([hidden]))){
  grid-template-rows:540px !important;
}

/* === V16: unified vertical alignment across catalog navigation ===
   Keep page headings at the same visual level when moving between views. */
.catalogBody{
  padding-top:28px !important;
}
#productView .sectionHeader,
#formatView .sectionHeader{
  margin-top:0 !important;
}

/* === V17: clearer separation between product photo/specs and 360 panel === */
#detailView .detailLayout{
  grid-template-rows:530px minmax(0,1fr) !important;
  row-gap:30px !important;
}
#detailView .detailLayout:not(:has(.detail360Wrap:not([hidden]))){
  grid-template-rows:530px !important;
}

/* === V18: standardized product media layout === */
#detailView.active{height:100% !important;overflow:hidden !important;}
#detailView .sectionHeader.compact{margin-bottom:12px !important;}
#detailView .detailLayout{
  height:calc(100% - 78px) !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  grid-template-rows:510px minmax(0,1fr) !important;
  column-gap:28px !important;
  row-gap:28px !important;
  overflow:hidden !important;
  align-items:stretch !important;
}
#detailView .heroPack{
  grid-column:1 !important;grid-row:1 !important;
  width:100% !important;height:510px !important;min-height:510px !important;max-height:510px !important;
  margin:0 !important;padding:0 !important;border:0 !important;background:transparent !important;
  box-shadow:none !important;overflow:visible !important;
}
#detailView .detailMedia{width:100% !important;height:510px !important;margin:0 !important;display:block !important;}
#detailView .detailMedia .detailMediaItem{
  width:100% !important;height:510px !important;min-height:510px !important;max-height:510px !important;
  margin:0 !important;padding:24px !important;border-radius:24px !important;border:1px solid var(--line) !important;
  background:linear-gradient(160deg,#fff,#eef0ec) !important;box-shadow:none !important;overflow:hidden !important;
  display:grid !important;place-items:center !important;
}
#detailView .detailMedia .detailMediaItem:before{display:none !important;}
#detailView .detailMedia .detailMediaItem img,#detailView #detailImage{
  display:block !important;width:auto !important;height:auto !important;max-width:88% !important;max-height:462px !important;
  object-fit:contain !important;object-position:center center !important;margin:auto !important;transform:none !important;
  filter:drop-shadow(0 18px 18px rgba(24,32,63,.16)) !important;
}
#detailView .detailInfo{
  grid-column:2 !important;grid-row:1 !important;width:100% !important;height:510px !important;
  min-height:510px !important;max-height:510px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;
}
#detailView .specPanel{width:100% !important;height:auto !important;margin:0 !important;box-shadow:none !important;}
#detailView .detail360Wrap{
  grid-column:1 / -1 !important;grid-row:2 !important;width:100% !important;height:100% !important;
  min-height:0 !important;max-height:none !important;margin:0 !important;padding:24px !important;border-radius:24px !important;
  border:1px solid var(--line) !important;background:#fff !important;box-shadow:none !important;overflow:hidden !important;
  position:relative !important;display:grid !important;place-items:center !important;
}
#detailView .detail360Wrap[hidden]{display:none !important;}
#detailView .detail360Wrap video{
  display:block !important;width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important;
  object-fit:contain !important;object-position:center center !important;margin:0 !important;transform:none !important;background:transparent !important;
}
#detailView .detail360Wrap .view360Label{right:18px !important;bottom:16px !important;}


/* === V19: final 360 cleanup ===
   Only two changes: remove the 360 badge and keep the bottom rounded edge fully visible. */
#detailView .view360Label{display:none !important;}
#detailView .detailLayout{
  padding-bottom:20px !important;
}
#detailView .detail360Wrap{
  border-radius:24px !important;
  overflow:hidden !important;
}


/* === V21: kiosk-safe 360 video — suppress browser hover actions (PiP / Enhance) === */
#detailView .detail360Wrap video{
  pointer-events:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
}
#detailView .detail360Wrap::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  background:transparent;
  border-radius:inherit;
  pointer-events:auto;
  touch-action:manipulation;
}

/* v22: separate product name and format on format-selection cards */
.formatCardFormat{
  display:flex;align-items:center;gap:9px;margin-top:7px;
  font-family:"Segoe UI",Arial,sans-serif;line-height:1;
}
.formatCardFormat span{
  display:inline !important;margin:0 !important;color:#9A9DA9 !important;
  font-size:10px !important;font-weight:700;letter-spacing:2px !important;
}
.formatCardFormat i{width:1px;height:12px;background:#C9CBD2;display:block;}
.formatCardFormat b{
  color:var(--fti);font-size:12px;font-weight:700;letter-spacing:1.5px;
}
.formatCardCopy .formatCardSpecs{margin-top:9px;}

/* === V23: match specification panel height to product image card === */
#detailView .detailInfo{
  display:flex !important;
  align-items:stretch !important;
}
#detailView .specPanel{
  width:100% !important;
  height:510px !important;
  min-height:510px !important;
  max-height:510px !important;
  margin:0 !important;
  display:grid !important;
  grid-template-rows:auto repeat(6,1fr) !important;
  box-shadow:none !important;
}
#detailView .specTitle{
  display:flex !important;
  align-items:center !important;
}
#detailView .specRow{
  min-height:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}