/* =====================================================================
   NOAQ PRODUCTS CSS — BOXWALL / BOXPOOL / TUBEWALL / STORM ANCHOR
   ===================================================================== */

/* ---------- product-immersive.css ---------- */
:root{
  --np-blue:#0068b7;
  --np-deep:#061827;
  --np-red:#c51c25;
  --np-text:#12283e;
  --np-muted:#5f7183;
  --np-bg:#f5f7fa;
  --np-line:#dbe5ee;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.product-im-page{
  margin:0;
  overflow-x:hidden;
  background:#fff;
  color:var(--np-text);
  font-family:"Noto Sans TC",sans-serif;
}
body.product-im-page::before{display:none}
.product-im-page .site-logo img{width:130px}
.product-im-page .sticky-wrapper{z-index:2100}
.product-im-page .sticky-wrapper .site-navbar{border-top:3px solid var(--np-blue)}
.product-im-page .sticky-wrapper.is-sticky .site-navbar{
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 26px rgba(0,0,0,.08)
}
.product-im-page .sticky-wrapper.is-sticky .site-menu>li>a{color:#10283f!important}
.product-im-page .sticky-wrapper.is-sticky .site-menu>li>a:hover{color:var(--np-red)!important}

.np-wrap{width:min(1240px,calc(100% - 48px));margin:auto}
.np-center{text-align:center}
.np-kicker{
  display:inline-block;
  margin-bottom:16px;
  color:var(--np-red);
  font-size:20px;
  font-weight:900;
  letter-spacing:.15em
}
.np-title{
  margin:0;
  font-size:clamp(42px,6vw,76px);
  line-height:1.12;
  font-weight:900;
  letter-spacing:-.04em
}
.np-lead{
  max-width:820px;
  margin:24px auto 0;
  color:var(--np-muted);
  font-size:18px;
  line-height:1.9;
  font-weight:500
}
.hm-reveal{opacity:0;transform:translateY(42px);transition:opacity .9s ease,transform .9s ease}
.hm-reveal.is-visible{opacity:1;transform:none}

/* Hero */
.np-hero{
  position:relative;
  height:100svh;
  min-height:720px;
  overflow:hidden;
  background:#000
}
.np-hero-media,.np-hero-shade{position:absolute;inset:0}
.np-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.np-hero-shade{
  background:
    linear-gradient(90deg,rgba(3,14,24,.72),rgba(3,14,24,.22) 48%,rgba(3,14,24,.04)),
    linear-gradient(0deg,rgba(3,14,24,.38),transparent 55%)
}
.np-hero-copy{
  position:absolute;
  z-index:2;
  left:max(6vw,40px);
  bottom:12vh;
  max-width:860px;
  color:#fff
}
.np-hero-copy>span{
  display:block;
  color:#bfe2ff;
  font-size:18px;
  font-weight:800;
  letter-spacing:.18em;
  padding-left: 5px;
}
.np-hero-copy h1{
  margin:18px 0 20px;
  color:#fff;
  font-size:clamp(36px,5.2vw,72px);
  line-height:1.06;
  font-weight:900;
  letter-spacing:-.05em
}
.np-hero-copy p{
  margin:0;
  color:rgba(255,255,255,.88);
  font-size:clamp(20px,2.1vw,30px);
  line-height:1.55;
  font-weight:700
}
.np-hero-actions{display:flex;gap:14px;margin-top:30px}
.np-hero-actions a,.np-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 26px;
  border-radius:999px;
  font-weight:900
}
.np-hero-actions a:first-child{background:#fff;color:var(--np-deep)}
.np-hero-actions a:last-child{border:1px solid rgba(255,255,255,.65);color:#fff}
.np-scroll{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  color:#fff;
  font-size:12px;
  letter-spacing:.15em
}
.np-scroll span{display:block;width:1px;height:42px;margin:10px auto 0;background:rgba(255,255,255,.7)}

/* Sections */
.np-section{padding:140px 0}
.np-section.is-soft{background:var(--np-bg)}
.np-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:58px;
  align-items:center;
  margin-top:64px
}
.np-intro-copy h2{
  margin:0 0 24px;
  font-size:clamp(34px,4vw,52px);
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.04em
}
.np-intro-copy p{
  margin:0;
  color:var(--np-muted);
  font-size:17px;
  line-height:1.95;
  font-weight:500
}
.np-intro-media{
  overflow:hidden;
  border-radius:30px;
  background:#e9eef3
}
.np-intro-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}

/* Feature cards */
.np-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:58px
}
.np-feature-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.np-feature-card{
  overflow:hidden;
  border-radius:26px;
  background:#fff;
  box-shadow:0 12px 36px rgba(5,29,49,.08)
}
.np-feature-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  background: #fff;
  transition: transform .6s cubic-bezier(.2,.75,.25,1);
}
.np-feature-card:hover img{transform:scale(1.045)}
.np-feature-card>div{padding:26px;
text-align: center;}
.np-feature-card h3{margin:0 0 10px;font-size:24px;font-weight:900}
.np-feature-card p{margin:0;color:var(--np-muted);font-size:16px;line-height:1.8}

/* =========================
   TUBEWALL 防洪原理
========================= */

#principle.np-dark {
  background: #061827 !important;
  color: #fff;
}

#principle.np-dark .np-title {
  color: #fff !important;
}

#principle.np-dark .np-kicker {
  color: #9dd5ff !important;
}

.np-principle-single {
  max-width: 920px;
  margin-top: 52px;
  margin-bottom: 52px;
}

.np-principle-card {
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
}

.np-principle-animation {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8.8;
  overflow: hidden;
  background: #fff;
}

.np-principle-animation img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.np-water-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  opacity: 0;
  animation: npWaterRise 9s ease-in-out infinite;
}

.np-water-layer img {
  position: absolute;
  inset: 0;
}

.np-arrow-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.np-arrow-layer img {
  position: absolute;
  inset: 0;
  transform: translateY(0);
  opacity: 0;
  animation: npArrowMove 9s linear infinite;
}

.np-board-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.np-principle-caption {
  padding: 14px 22px 20px;
}

.np-principle-caption p {
  margin: 0;
  color: var(--np-muted);
  font-size: 16px;
  line-height: 1.8;
}

/* 電腦版動畫不要太大 */
@media (min-width: 768px) {
  .np-principle-single {
    max-width: 860px;
  }

  .np-principle-animation {
    aspect-ratio: 16 / 9.2;
  }
}

@media (max-width: 767px) {
  .np-principle-single {
    margin-top: 36px;
  }

  .np-principle-caption {
    padding: 12px 16px 18px;
  }

  .np-principle-caption p {
    font-size: 14px;
    line-height: 1.75;
  }
}

/* Steps */
.np-steps{display:grid;gap:18px;margin-top:58px}
.np-step{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 34px rgba(5,29,49,.07)
}
.np-step img{display:block;width:100%;height:100%;min-height:230px;object-fit:cover}
.np-step-copy{position:relative;padding:34px 38px}
.np-step-num{display:block;color:var(--np-blue);font-size:54px;line-height:1;font-weight:900}
.np-step h3{margin:12px 0 10px;font-size:25px;font-weight:900}
.np-step p{margin:0;color:var(--np-muted);font-size:16px;line-height:1.8}

/* Video / test */
.np-video{
  width:min(960px,100%);
  aspect-ratio:16/9;
  margin:46px auto 0;
  overflow:hidden;
  border-radius:26px;
  background:#000;
  box-shadow:0 26px 60px rgba(5,29,49,.16)
}
.np-video iframe{width:100%;height:100%;border:0}
.np-test-banner{
  max-width:900px;
  margin:42px auto 0;
  padding:20px 24px;
  border-radius:18px;
  background:#eaf3f9;
  color:var(--np-blue);
  text-align:center;
  font-size:20px;
  line-height:1.7;
  font-weight:900
}
.np-note{margin:14px auto 0;color:var(--np-muted);text-align:center;font-size:13px}

/* Specs */
.np-spec-card{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:42px;
  align-items:center;
  margin-top:58px;
  padding:38px;
  border-radius:30px;
  background:var(--np-bg)
}
.np-spec-card>img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border-radius:22px}
.np-spec-table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:18px;background:#fff}
.np-spec-table th,.np-spec-table td{padding:17px 18px;border-bottom:1px solid var(--np-line);font-size:16px;text-align:left}
.np-spec-table tr:last-child th,.np-spec-table tr:last-child td{border-bottom:0}
.np-spec-table th{width:34%;color:var(--np-blue);font-weight:900}

.np-table-wrap{
  width:min(1240px,calc(100% - 48px));
  margin:58px auto 0;
  padding:0;

  border:0;
  border-radius:22px;
  overflow:hidden;

  background:#fff;
  box-shadow:0 12px 36px rgba(5,29,49,.10);
}

.np-table-wide{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
}

.np-table-wide th,
.np-table-wide td{
  padding:16px 18px;
  text-align:center;

  border:0;
  border-right:1px solid #d8e4ed;
  border-bottom:1px solid #d8e4ed;
}

/* 最右側取消格線 */
.np-table-wide th:last-child,
.np-table-wide td:last-child{
  border-right:0;
}

/* 最底列取消格線 */
.np-table-wide tr:last-child td{
  border-bottom:0;
}

/* 表頭 */
.np-table-wide thead th,
.np-table-wide tr:first-child th{
  background:var(--np-deep);
  color:#fff;
  font-weight:900;
}

/* 第一欄 */
.np-table-wide td:first-child{
  background:#f1f6fa;
  color:var(--np-blue);
  font-weight:900;
}

.np-table-wide th,.np-table-wide td{padding:16px 18px;border-right:1px solid var(--np-line);border-bottom:1px solid var(--np-line);text-align:center}
.np-table-wide tr:last-child th,.np-table-wide tr:last-child td{border-bottom:0}
.np-table-wide th:last-child,.np-table-wide td:last-child{border-right:0}
.np-table-wide th{background:var(--np-deep);color:#fff;font-weight:900}
.np-table-wide td:first-child{background:#f2f7fb;color:var(--np-blue);font-weight:900}

/* Cases */
.np-case-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:58px
}
.np-case-grid a{display:block;height:240px;overflow:hidden;border-radius:18px;background:#ddd}
.np-case-grid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.np-case-grid a:hover img{transform:scale(1.05)}
.np-center-link{text-align:center;margin-top:34px}
.np-center-link a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 22px;
  border:1px solid var(--np-blue);
  border-radius:999px;
  color:var(--np-blue);
  font-weight:900
}

/* CTA */
.np-cta {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background: linear-gradient(120deg, var(--np-blue), #0b4f8c);
  color: #fff;
}

.np-cta::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -120px;
  top: -190px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow:
    0 0 0 70px rgba(255, 255, 255, .04),
    0 0 0 140px rgba(255, 255, 255, .025);
  pointer-events: none;
}
.np-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}
.np-cta h2{margin:0;color:#fff;font-size:clamp(38px,5vw,64px);font-weight:900;letter-spacing:-.04em}
.np-cta p{margin:18px 0 0;color:rgba(255,255,255,.82);font-size:18px;line-height:1.8}
.np-cta a{background:#fff;color:var(--np-blue);white-space:nowrap}
.product-im-page .g-footer__foot{border-top:0}

@media(max-width:991px){
  .np-intro-grid,.np-principle-grid,.np-spec-card{grid-template-columns:1fr}
  .np-feature-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .np-case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .product-im-page .site-logo img{width:112px}
  .np-wrap{width:min(100% - 36px,1240px)}
  .np-hero{min-height:700px}
  .np-hero-copy{left:20px;right:20px;bottom:78px}
  .np-hero-copy h1{font-size: clamp(24px, 7vw, 34px);}
  .np-hero-copy p{font-size:18px}
  .np-hero-actions{flex-direction:column}
  .np-hero-actions a{width:100%}
  .np-section{padding:90px 0}
  .np-title{font-size:42px}
  .np-lead{font-size:16px}
  .np-intro-grid{gap:30px;margin-top:44px}
  .np-intro-copy h2{font-size:38px}
  .np-feature-grid,.np-feature-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:40px}
  .np-feature-card{border-radius:18px}
  .np-feature-card img{height:170px}
  .np-feature-card>div{padding:16px 14px}
  .np-feature-card h3{font-size:18px;line-height:1.4}
  .np-feature-card p{font-size:13px;line-height:1.6}
  .np-principle-grid{gap:32px;margin-top:44px}
  .np-keyline{font-size:17px}
  .np-step{grid-template-columns:1fr}
  .np-step img{
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:1 / 1;
  object-fit:contain;
}
  .np-step-copy{padding:24px 22px}
  .np-step-num{font-size:42px}
  .np-test-banner{font-size:16px}
  .np-spec-card{padding:18px;gap:24px;border-radius:20px}
  .np-spec-table th,.np-spec-table td{padding:14px 12px;font-size:14px}
  .np-case-grid{gap:8px}
  .np-case-grid a{height:42vw;border-radius:12px}
  .np-cta-inner{display:block}
  .np-cta a{width:100%;margin-top:28px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .hm-reveal{opacity:1;transform:none}
}

@media (max-width: 767px) {

  #intro .np-intro-grid {
    display: flex;
    flex-direction: column;
  }

  #intro .np-intro-media {
    order: 1;
  }

  #intro .np-intro-copy {
    order: 2;
  }
}

@media (max-width: 767px) {
  .np-cta::before {
    width: 280px;
    height: 280px;
    right: -110px;
    top: -110px;
    box-shadow:
      0 0 0 48px rgba(255, 255, 255, .04),
      0 0 0 96px rgba(255, 255, 255, .025);
  }
}

.np-boxpool-features .np-feature-card img, .np-tubewall-features .np-feature-card img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:cover;
  display:block;
}


/* =========================
   TUBEWALL principle animation
========================= */

.np-principle-media {
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
}

.np-principle-visual {
  display: flex;
  flex-direction: column;
  height: auto;
}

.np-principle-animation {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  background: #fff;
}

.np-principle-animation img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.np-water-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  opacity: 0;
  animation: npWaterRise 9s ease-in-out infinite;
}

.np-water-layer img {
  position: absolute;
  inset: 0;
}

.np-arrow-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.np-arrow-layer img {
  position: absolute;
  inset: 0;
  transform: translateY(0);
  opacity: 0;
  animation: npArrowMove 9s linear infinite;
}

.np-board-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.np-principle-caption {
  padding:12px 22px 18px;
}

.np-principle-caption p {
  margin: 0;
  color: var(--np-muted);
  font-size: 16px;
  line-height: 1.85;
}

@keyframes npWaterRise {
  0% {
    clip-path: inset(100% 0 0 0);
    opacity: 1;
  }

  62% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  88% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  100% {
    clip-path: inset(0 0 0 0);
    opacity: 0;
  }
}

@keyframes npArrowMove {
  0%,
  50% {
    transform: translateY(0);
    opacity: 0;
  }

  52% {
    transform: translateY(0);
    opacity: 0;
  }

  54% {
    transform: translateY(0);
    opacity: 1;
  }

  62% {
    transform: translateY(28px);
    opacity: 1;
  }

  64% {
    transform: translateY(28px);
    opacity: 0;
  }

  65% {
    transform: translateY(0);
    opacity: 0;
  }

  67% {
    transform: translateY(0);
    opacity: 1;
  }

  75% {
    transform: translateY(28px);
    opacity: 1;
  }

  77% {
    transform: translateY(28px);
    opacity: 0;
  }

  78% {
    transform: translateY(0);
    opacity: 0;
  }

  80% {
    transform: translateY(0);
    opacity: 1;
  }

  88% {
    transform: translateY(28px);
    opacity: 1;
  }

  92% {
    transform: translateY(28px);
    opacity: 0;
  }

  93%,
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@media (max-width: 767px) {
  .np-principle-caption {
    padding: 16px 16px 20px;
  }

  .np-principle-caption p {
    font-size: 14px;
    line-height: 1.8;
  }
}

#principle.np-dark{
  background:#061827 !important;
  color:#fff;
}

#principle.np-dark .np-title{
  color:#fff !important;
}

#principle.np-dark .np-kicker{
  color:#9dd5ff !important;
}

#principle.np-dark .np-principle-copy p{
  color:rgba(255,255,255,.75);
}


/* TUBEWALL model specs */

.np-model-specs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:58px;
}

.np-model-spec{
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 36px rgba(5,29,49,.08);
}

.np-model-spec-head{
  padding:28px 28px 24px;
  background:var(--np-deep);
  color:#fff;
}

.np-model-spec-head span{
  display:block;
  margin-bottom:4px;
  color:#9dd5ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
}

.np-model-spec-head h3{
  margin:0;
  color:#fff;
  font-size:34px;
  line-height:1.2;
  font-weight:900;
}

.np-model-spec dl{
  margin:0;
  padding:10px 28px 22px;
}

.np-model-spec dl > div{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding:15px 0;
  border-bottom:1px solid var(--np-line);
}

.np-model-spec dl > div:last-child{
  border-bottom:0;
}

.np-model-spec dt{
  margin:0;
  color:var(--np-blue);
  font-size:14px;
  font-weight:900;
}

.np-model-spec dd{
  margin:0;
  color:var(--np-text);
  font-size:15px;
  line-height:1.6;
  text-align:right;
}


/* mobile */
@media(max-width:767px){

  .np-model-specs{
    grid-template-columns:1fr;
    gap:16px;
    margin-top:42px;
  }

  .np-model-spec{
    border-radius:20px;
  }

  .np-model-spec-head{
    padding:22px 22px 18px;
  }

  .np-model-spec-head h3{
    font-size:30px;
  }

  .np-model-spec dl{
    padding:8px 22px 16px;
  }

  .np-model-spec dl > div{
    padding:13px 0;
  }

}



/* BOXPOOL 組成板件 */
.np-boxpool-components{
  display:grid;
  grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);
  align-items:center;
  gap:18px;
  margin-top:52px;
}

.np-boxpool-component{
  display:grid;
  grid-template-columns:180px 1fr;
  align-items:center;
  gap:26px;
  min-height:210px;
  padding:24px 30px;
  border-radius:24px;
  background:#f5f8fa;
}

.np-boxpool-component-img{
  display:flex;
  align-items:center;
  justify-content:center;
  height:160px;
}

.np-boxpool-component-img img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

.np-boxpool-component-info span{
  display:block;
  margin-bottom:7px;
  color:var(--np-blue);
  font-size:13px;
  font-weight:900;
  letter-spacing:.1em;
}

.np-boxpool-component-info h3{
  margin:0;
  font-size:24px;
  line-height:1.4;
  font-weight:900;
}

.np-boxpool-plus{
  color:var(--np-blue);
  font-size:40px;
  line-height:1;
  font-weight:300;
  text-align:center;
}

.np-boxpool-qty{
  display:flex;
  align-items:baseline;
  gap:5px;
  margin:14px 0 0;
  color:var(--np-muted);
  font-size:15px;
  font-weight:700;
}

.np-boxpool-qty strong{
  color:var(--np-red);
  font-size:30px;
  line-height:1;
  font-weight:900;
}


/* 手機 */
@media(max-width:767px){

  .np-boxpool-components{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:36px;
  }

  .np-boxpool-component{
    grid-template-columns:120px 1fr;
    gap:18px;
    min-height:0;
    padding:18px;
    border-radius:18px;
  }

  .np-boxpool-component-img{
    height:115px;
  }

  .np-boxpool-component-info h3{
    font-size:19px;
  }

  .np-boxpool-plus{
    font-size:30px;
  }

  .np-boxpool-qty{
    margin-top:10px;
    font-size:13px;
  }

  .np-boxpool-qty strong{
    font-size:26px;
  }
}


/* ========================================
   Hero + CTA 按鈕動畫
   與首頁 / BOXWALL 一致
======================================== */

/* 共用動畫基礎 */
.np-hero-actions a,
.np-cta a{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    color .3s ease,
    border-color .3s ease;
}

.np-hero-actions a::before,
.np-cta a::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  transform:translateX(-102%);
  transition:transform .38s cubic-bezier(.2,.75,.25,1);
}

.np-hero-actions a:hover::before,
.np-cta a:hover::before{
  transform:translateX(0);
}


/* Hero 第一顆：藍色動畫 */
.np-hero-actions a:first-child{
  background:#fff;
  color:var(--np-deep);
}

.np-hero-actions a:first-child::before{
  background:var(--np-blue);
}

.np-hero-actions a:first-child:hover{
  color:#fff;
}


/* Hero 第二顆：白色動畫 */
.np-hero-actions a:last-child{
  background:transparent;
  border:1px solid rgba(255,255,255,.65);
  color:#fff;
}

.np-hero-actions a:last-child::before{
  background:#fff;
}

.np-hero-actions a:last-child:hover{
  color:var(--np-deep);
  border-color:#fff;
}


/* 最底部「聯絡我們」：紅色動畫 */
.np-cta a{
  background:#fff;
  color:var(--np-blue);
  white-space:nowrap;
}

.np-cta a::before{
  background:var(--np-red);
}

.np-cta a:hover{
  color:#fff;
}

.np-hero-actions a,
.np-center-link a,
.np-cta a{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    color .3s ease,
    border-color .3s ease;
}

.np-hero-actions a::before,
.np-center-link a::before,
.np-cta a::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  transform:translateX(-102%);
  transition:transform .38s cubic-bezier(.2,.75,.25,1);
}

.np-hero-actions a:hover::before,
.np-center-link a:hover::before,
.np-cta a:hover::before{
  transform:translateX(0);
}

.np-center-link a::before{
  background:var(--np-blue);
}

.np-center-link a:hover{
  color:#fff;
  border-color:var(--np-blue);
}

/* ---------- boxwall-home-style.css ---------- */
:root {
  --bw-blue:#0068b7;
  --bw-deep:#061827;
  --bw-red:#c51c25;
  --bw-text:#12283e;
  --bw-muted:#5f7183;
  --bw-bg:#f5f7fa;
  --bw-line:#dbe5ee
}

.bw-home-page .hm-hero-media img {
  width:100%;
  height:100%;
  object-fit:cover
}

.bw-home-page .hm-hero-copy {
  max-width:920px
}

.bw-home-page .hm-hero-copy h1 {
  font-size:clamp(38px,5vw,68px);
  white-space:nowrap
}

.bw-intro-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:70px
}

.bw-intro-media,.bw-intro-video {
  overflow:hidden;
  border-radius:30px;
  background:#071827;
  min-height:520px
}

.bw-intro-media img {
  width:100%;
  height:100%;
  object-fit:cover
}

.bw-intro-video {
  position:relative
}

.bw-intro-video iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0
}

.bw-features,.bw-models,.bw-cases,.bw-certifications,.bw-anchor {
  padding:140px 0
}

.bw-features {
  background:var(--bw-bg)
}

.bw-feature-card, .bw-feature-wide > article, .bw-video-card {
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(5, 29, 49, .08);
}

/* 電腦版上排 4 格 */
.bw-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 58px;
}

/* 電腦版下排 2 格 */
.bw-feature-wide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.bw-feature-card, .bw-feature-wide > article, .bw-video-card {
  min-width: 0;
  height: 100%;
}

.bw-feature-card img, .bw-feature-wide img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .75, .25, 1);
}

/* 避免影片圖片被套到文字 padding */
.bw-feature-card .bw-feature-media, .bw-video-card .bw-feature-media {
  position: relative;
  padding: 0 !important;
  overflow: hidden;
}

/* 只讓文字區有 padding */
.bw-feature-card > div:not(.bw-feature-media), .bw-feature-wide article > div:not(.bw-feature-media) {
  padding: 26px;
}

.bw-feature-card h3, .bw-feature-wide h3 {
  font-size: 24px;
  font-weight: 900;
  margin: 0 0 10px;
  color: var(--bw-text);
}

.bw-feature-card p, .bw-feature-wide p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--bw-muted);
  margin: 0;
}

.bw-feature-card:hover img, .bw-feature-wide article:hover img, .bw-video-card:hover img {
  transform: scale(1.045);
}

/* 手機版：2、2、1、1 */
@media (max-width: 767px) {
  .bw-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 36px;
  }
  .bw-feature-wide {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
  }
  .bw-feature-card img {
    height: 150px;
  }
  .bw-feature-wide img {
    height: 240px;
  }
  .bw-feature-card > div:not(.bw-feature-media),   .bw-feature-wide article > div:not(.bw-feature-media) {
    padding: 16px;
  }
  .bw-feature-card h3 {
    font-size: 18px;
    line-height: 1.4;
  }
  .bw-feature-wide h3 {
    font-size: 22px;
  }
  .bw-feature-card p {
    font-size: 13px;
    line-height: 1.6;
  }
  .bw-feature-wide p {
    font-size: 15px;
  }
}

.bw-video-card {
  position:relative;
  color:#fff
}

.bw-video-card:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(2,18,32,.72),transparent 60%)
}

.bw-video-card span {
  position:absolute;
  z-index:2;
  left:28px;
  bottom:24px;
  font-size:22px;
  font-weight:900;
  color:#fff
}

.bw-principle .hm-why-image {
  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  padding: 30px;
}

.bw-principle .hm-why-image img {
  object-fit:contain
}

.bw-models {
  background:#fff
}

.bw-model-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:60px
}

.bw-model-tabs button {
  border:1px solid var(--bw-line);
  background:#fff;
  color:var(--bw-text);
  padding:19px 22px;
  border-radius:999px;
  font-size:17px;
  font-weight:900;
  transition:.3s
}

.bw-model-tabs button.active {
  background:var(--bw-blue);
  border-color:var(--bw-blue);
  color:#fff
}

.bw-model-panel {
  display:none;
  grid-template-columns:1.05fr .95fr;
  gap:58px;
  align-items:start;
  margin-top:42px;
  padding:38px;
  border-radius:30px;
  background:var(--bw-bg)
}

.bw-model-panel.active {
  display:grid
}

.bw-model-gallery > .bw-main-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 22px;
  background: #fff;
}

.bw-thumbs {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:10px
}

.bw-thumbs button {
  padding:0;
  border:2px solid transparent;
  border-radius:10px;
  overflow:hidden;
  background:none
}

.bw-thumbs button:first-child {
  border-color:var(--bw-blue)
}

.bw-thumbs img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
}

.bw-model-copy {
  padding-top:24px
}

.bw-model-copy>span {
  font-size:16px;
  letter-spacing:.15em;
  font-weight:900;
  color:var(--bw-red)
}

.bw-model-copy h3 {
  font-size:44px;
  font-weight:900;
  margin:12px 0 28px
}

.bw-model-copy table {
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:18px;
  overflow:hidden
}

.bw-model-copy th,.bw-model-copy td {
  padding:17px 18px;
  border-bottom:1px solid var(--bw-line);
  font-size:16px
}

.bw-model-copy tr:last-child th,.bw-model-copy tr:last-child td {
  border-bottom:0
}

.bw-model-copy th {
  width:32%;
  color:var(--bw-blue);
  font-weight:900
}

.bw-model-actions {
  display:flex;
  gap:12px;
  margin-top:26px
}

.bw-model-actions a,.bw-anchor-card a,.bw-center-link a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 22px;
  border-radius:999px;
  font-weight:900
}

.bw-model-actions a:first-child {
  background:var(--bw-blue);
  color:#fff
}

.bw-model-actions a:last-child {
  border:1px solid var(--bw-blue);
  color:var(--bw-blue)
}

.bw-anchor {
  padding-top:0
}

.bw-anchor-card {
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border-radius:30px;
  background:var(--bw-deep);
  color:#fff
}

.bw-anchor-card>div {
  padding:64px
}

.bw-anchor-card span {
  font-size:16px;
  letter-spacing:.15em;
  color:#9dd5ff;
  font-weight:800
}

.bw-anchor-card h2 {
  font-size:44px;
  line-height:1.2;
  font-weight:900;
  color:#fff;
  margin:14px 0 18px
}

.bw-anchor-card p {
  font-size:17px;
  line-height:1.9;
  color:rgba(255,255,255,.72)
}

.bw-anchor-card a {
  margin-top:22px;
  background:#fff;
  color:var(--bw-deep)
}

.bw-anchor-card img {
  width:100%;
  height:100%;
  object-fit:cover
}

.bw-cases {
  background:#fff
}

.bw-case-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:60px
}

.bw-case-grid a {
  height:250px;
  border-radius:18px;
  overflow:hidden
}

.bw-case-grid a:nth-child(1),.bw-case-grid a:nth-child(6) {
  grid-column:span 2
}

.bw-case-grid img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s
}

.bw-case-grid a:hover img {
  transform:scale(1.045)
}

.bw-center-link {
  text-align:center;
  margin-top:34px
}

.bw-center-link a {
  border:1px solid var(--bw-blue);
  color:var(--bw-blue)
}

.bw-certifications {
  background:#fff
}

.bw-cert-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:60px
}

.bw-cert-grid article {
  background:var(--bw-bg);
  border-radius:24px;
  padding:24px;
  text-align:center;
  min-height:270px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}

.bw-cert-grid img {
  max-width:100%;
  height:150px;
  object-fit:contain
}

.bw-cert-grid h3 {
  font-size:17px;
  font-weight:900;
  margin-top:16px
}

.bw-cert-number{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.52);
  font-size:13px;
  line-height:1.6;
  letter-spacing:.02em;
}
/* =========================
   VdS主認證卡片－電腦版置中修正
========================= */

.bw-cert-main {
  grid-column: 1 / -1;

  display: grid !important;
  grid-template-columns: 220px auto;
  justify-content: center;
  align-items: center;

  column-gap: 42px;
  text-align: left !important;

  background: var(--bw-deep) !important;
  color: #fff;
}

/* VdS LOGO */
.bw-cert-main > img {
  display: block;
  width: 220px;
  max-width: 220px;
  height: 180px;
  object-fit: contain;
}

/* 右側文案不要撐滿 */
.bw-cert-main > div {
  width: fit-content;
  max-width: 430px;
  justify-self: start;
}

.bw-cert-main h3 {
  margin: 0;
  color: #fff;
  font-size: 34px;
  line-height: 1.3;
}

.bw-cert-main p {
  max-width: 430px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .7);
  line-height: 1.8;
}

@media(max-width:991px) {
  .bw-intro-grid,.bw-model-panel.active,.bw-anchor-card {
    grid-template-columns:1fr
  }
  .bw-intro-media,.bw-intro-video {
    min-height:440px
  }
  .bw-anchor-card img {
    height:430px
  }
  .bw-cert-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .bw-case-grid {
    grid-template-columns:repeat(2,1fr)
  }
}

@media (max-width: 767px) {
  .bw-home-page .hm-hero-copy h1 {
    font-size: clamp(24px, 7vw, 34px);
  }
  .bw-features,   .bw-models,   .bw-cases,   .bw-certifications,   .bw-anchor {
    padding: 90px 0;
  }
  .bw-intro-grid {
    margin-top: 45px;
  }
  .bw-intro-media,   .bw-intro-video {
    min-height: 300px;
    border-radius: 20px;
  }
  /* 手機版特色：前四格 2×2，後兩格各自滿版 */
  .bw-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .bw-feature-wide {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .bw-feature-card img {
    height: 150px;
  }
  .bw-feature-wide img {
    height: 240px;
  }
  .bw-feature-card > div:not(.bw-feature-media),   .bw-feature-wide article > div:not(.bw-feature-media) {
    padding: 16px;
  }
  .bw-feature-card h3 {
    font-size: 18px;
  }
  .bw-feature-wide h3 {
    font-size: 22px;
  }
  .bw-model-tabs {
    gap: 8px;
    margin-top: 42px;
  }
  .bw-model-tabs button {
    padding: 14px 8px;
    font-size: 13px;
  }
  .bw-model-panel {
    padding: 18px;
    border-radius: 20px;
    gap: 25px;
  }
  /*.bw-model-gallery > .bw-main-image {
    height: 300px;
  }*/
  .bw-thumbs {
    grid-template-columns: repeat(4, 1fr);
  }
  /*.bw-thumbs img {
    height: 58px;
  }*/
  .bw-model-copy {
    padding-top: 0;
  }
  .bw-model-copy h3 {
    font-size: 32px;
  }
  .bw-model-actions {
    flex-direction: column;
  }
  .bw-model-actions a {
    width: 100%;
  }
  .bw-anchor-card > div {
    padding: 34px 24px;
  }
  .bw-anchor-card h2 {
    font-size: 32px;
  }
  .bw-anchor-card img {
    height: 280px;
  }
  .bw-case-grid {
    gap: 8px;
  }
  .bw-case-grid a {
    height: 42vw;
    border-radius: 12px;
  }
  .bw-cert-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .bw-cert-grid article {
    min-height: 200px;
    padding: 14px;
  }
  .bw-cert-grid img {
    height: 110px;
  }
  @media (max-width: 767px) {
  .bw-cert-main {
    grid-template-columns: 1fr !important;
    justify-items: center;
    row-gap: 8px;
    text-align: center !important;
  }

  .bw-cert-main > img {
    width: 180px;
    max-width: 180px;
    height: 120px;
  }

  .bw-cert-main > div {
    width: 100%;
    max-width: 520px;
    justify-self: center;
  }

  .bw-cert-main h3 {
    margin-top: 0;
    font-size: 26px;
  }

  .bw-cert-main p {
    max-width: none;
    margin-top: 8px;
  }
}
  .bw-cert-main img {
    height: 130px;
  }
  .bw-cert-main h3 {
    font-size: 26px;
  }
}

/* ===== v3 refinements ===== */
.bw-compare {
  /*margin-top:72px;
  padding:54px;
  border-radius:30px;
  background:linear-gradient(135deg,#f2f7fb,#fff);
  border:1px solid var(--bw-line)*/
}

.bw-compare-head {
  text-align:center;
  max-width:820px;
  margin:0 auto 38px
}

.bw-compare-head h3 {
  font-size:clamp(30px,4vw,48px);
  font-weight:900;
  margin:0 0 14px
}

.bw-compare-head p {
  font-size:17px;
  line-height:1.8;
  color:var(--bw-muted)
}

.bw-compare-grid {
  display:grid;
  grid-template-columns:1fr 72px 1fr;
  align-items:center;
  gap:18px
}

.bw-compare-card {
  background:#fff;
  border-radius:24px;
  padding:30px;
  box-shadow:0 14px 35px rgba(5,29,49,.07)
}

.bw-compare-card.is-boxwall {
  border:2px solid var(--bw-blue)
}

.bw-compare-card.is-sandbag {
  border:1px solid #d9dde1
}

.bw-compare-label {
  font-size:26px;
  font-weight:900;
  margin-bottom:20px
}

.is-boxwall .bw-compare-label {
  color:var(--bw-blue)
}

.is-sandbag .bw-compare-label {
  color:#59636d
}

.bw-compare-card dl {
  margin:0
}

.bw-compare-card dl div {
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:15px 0;
  border-bottom:1px solid var(--bw-line)
}

.bw-compare-card dl div:last-child {
  border-bottom:0
}

.bw-compare-card dt {
  color:var(--bw-muted);
  font-weight:700
}

.bw-compare-card dd {
  margin:0;
  text-align:right;
  font-weight:900;
  color:var(--bw-text)
}

.bw-compare-vs {
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bw-deep);
  color:#fff;
  font-weight:900;
  font-size:18px;
  margin:auto
}

.bw-compare-note {
  text-align:center;
  color:var(--bw-muted);
  font-size:13px;
  margin:24px 0 0
}

.bw-feature-grid-secondary {
  margin-top:18px
}

.bw-feature-video-link {
  display:block;
  color:inherit
}

.bw-feature-video-link:hover {
  color:inherit
}

.bw-feature-media {
  position:relative;
  overflow:hidden
}

.bw-play-button {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:72px;
  height:72px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left:4px;
  background:rgba(255,255,255,.94);
  color:var(--bw-blue);
  font-size:26px;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  transition:transform .3s ease
}

.bw-feature-video-link:hover .bw-play-button {
  transform:translate(-50%,-50%) scale(1.07)
}

.bw-feature-card .bw-feature-media {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.bw-principle-stage {
  align-items:stretch
}

.bw-principle-stage .hm-why-image,.bw-principle-stage .hm-why-list {
  height:100%
}

.bw-principle-stage .hm-why-image {
  min-height:620px
}

.bw-principle-stage .hm-why-list {
  display:flex;
  flex-direction:column;
  justify-content:space-between
}

.bw-principle-stage .hm-why-list article {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.bw-model-video {
  position:relative;
  width:100%;
  padding-bottom:56.25%;
  margin-top:26px;
  border-radius:18px;
  overflow:hidden;
  background:#000
}

.bw-model-video iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0
}

.bw-family-image {
  margin-top:18px;
  border-radius:18px;
  overflow:hidden;
  background:#fff
}

.bw-family-image img {
  display:block;
  width:100%;
  height:auto
}

.bw-accessories {
  padding:140px 0;
  background:var(--bw-bg)
}

.bw-accessory-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:60px
}

.bw-accessory-grid article {
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 34px rgba(5,29,49,.07)
}

.bw-accessory-grid img {
  width:100%;
  height:260px;
  object-fit:contain;
  background:#fff;
  padding:14px
}

.bw-accessory-grid div {
  padding:22px
}

.bw-accessory-grid h3 {
  font-size:24px;
  font-weight:900;
  margin:0 0 10px
}

.bw-accessory-grid p {
  font-size:17px;
  line-height:1.75;
  color:var(--bw-muted);
  margin:0
}

.bw-accessory-note {
  text-align:center;
  color:var(--bw-muted);
  font-size:13px;
  margin-top:24px
}

.bw-applications {
  background:#eef4f8;
  border-top:1px solid var(--bw-line);
  border-bottom:1px solid var(--bw-line)
}

.bw-case-grid {
  grid-template-columns:repeat(4,1fr)
}

.bw-case-grid a,.bw-case-grid a:nth-child(1),.bw-case-grid a:nth-child(6) {
  grid-column:auto;
  height:240px
}

.bw-cert-grid {
  grid-template-columns:repeat(4,1fr)
}

.bw-cert-main {
  grid-column:1/-1
}

.bw-cert-large {
  grid-column:span 2
}

.bw-cert-small {
  grid-column:span 1
}

.bw-cert-large img {
  height:220px
}

.bw-cert-small img {
  height:140px
}

@media(max-width:991px) {
  .bw-compare-grid {
    grid-template-columns:1fr
  }
  .bw-compare-vs {
    margin:2px auto
  }
  .bw-accessory-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .bw-cert-large {
    grid-column:span 1
  }
  .bw-cert-grid {
    grid-template-columns:repeat(2,1fr)
  }
}

@media(max-width:767px) {
  .bw-compare {
    padding:28px 18px;
    margin-top:46px;
    border-radius:22px
  }
  .bw-compare-card {
    padding:22px 18px
  }
  .bw-compare-card dl div {
    font-size:14px
  }
  .bw-compare-label {
    font-size:22px
  }
  .bw-principle-stage .hm-why-image {
    min-height:360px
  }
  .bw-accessories {
    padding:90px 0
  }
  .bw-accessory-grid {
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-top:42px
  }
  .bw-accessory-grid img {
    height:180px
  }
  .bw-accessory-grid div {
    padding:16px 14px
  }
  .bw-accessory-grid h3 {
    font-size:18px
  }
  .bw-accessory-grid p {
    font-size:13px
  }
  .bw-case-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .bw-case-grid a,.bw-case-grid a:nth-child(1),.bw-case-grid a:nth-child(6) {
    height:42vw
  }
  .bw-cert-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .bw-cert-large,.bw-cert-small {
    grid-column:span 1
  }
}

/* v5: landslide case merged into equal-size case grid */
.bw-case-card {
  position:relative;
  display:block;
  overflow:hidden
}

.bw-case-caption {
  position:absolute;
  z-index:2;
  inset:auto 0 0;
  padding:58px 20px 18px;
  background:linear-gradient(0deg,rgba(3,18,31,.9),rgba(3,18,31,0));
  color:#fff
}

.bw-case-caption h3 {
  margin:0 0 4px;
  color:#fff;
  font-size:24px;
  font-weight:900
}

.bw-case-caption p {
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:13px;
  font-weight:600
}

.bw-case-featured:after {
  content:"";
  position:absolute;
  inset:0;
  border:2px solid rgba(157,213,255,.55);
  border-radius:inherit;
  pointer-events:none
}

@media(max-width:767px) {
  .bw-case-caption {
    padding:42px 12px 12px
  }
  .bw-case-caption h3 {
    font-size:17px
  }
  .bw-case-caption p {
    font-size:10px
  }
}

/* ===== v6 refinements ===== */
/* Intro: keep both media areas cinematic instead of square */
.bw-intro-grid {
  grid-template-columns:1fr 1fr;
  align-items:center
}

.bw-intro-media,.bw-intro-video {
  min-height:0;
  aspect-ratio:16/9;
  border-radius:26px
}

.bw-intro-video iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}

/* Comparison: photos first, then a three-column specification matrix */
.bw-compare {
  /*padding:54px 54px 48px*/
}

.bw-compare-visuals {
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
  gap:20px;
  align-items:center
}

.bw-compare-photo {
  position:relative;
  overflow:visible;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--bw-line);
  box-shadow:0 14px 35px rgba(5,29,49,.07);
}

.bw-compare-photo.is-boxwall {
  border:2px solid var(--bw-blue)
}

.bw-compare-photo img {
  display:block;
  width:100%;
  height:280px;
  object-fit:cover;
  border-radius:22px 22px 0 0;
}

.bw-compare-photo strong {
  display:block;
  padding:18px 20px;
  text-align:center;
  font-size:23px;
  font-weight:900;
  color:var(--bw-text)
}

.bw-compare-photo.is-boxwall strong {
  color:var(--bw-red)
}

.bw-winner {
  position:absolute;
  z-index:20;
  left:0;
  top:0;
  transform:translate(-35%,-35%);
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bw-red);
  color:#fff;
  font-size:24px;
  font-weight:900;
  line-height:1;
  clip-path:polygon(     50% 0%,     58% 9%,     69% 4%,     74% 15%,     87% 13%,     88% 26%,     100% 31%,     93% 42%,     100% 50%,     91% 58%,     96% 69%,     84% 74%,     87% 87%,     74% 85%,     69% 96%,     58% 91%,     50% 100%,     42% 91%,     31% 96%,     26% 85%,     13% 87%,     16% 74%,     4% 69%,     9% 58%,     0% 50%,     9% 42%,     0% 31%,     12% 26%,     13% 13%,     26% 15%,     31% 4%,     42% 9%   );
  filter:drop-shadow(0 8px 10px rgba(197,28,37,.35));
}

.bw-compare-table {
  margin-top:24px;
  border:1px solid var(--bw-line);
  border-radius:22px;
  overflow:hidden;
  background:#fff
}

.bw-compare-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr);
  align-items:stretch;
  border-bottom:1px solid var(--bw-line)
}

.bw-compare-row:last-child {
  border-bottom:0
}

.bw-compare-row>div {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  padding:13px 18px;
  text-align:center;
  font-size:16px;
  font-weight:800
}

.bw-compare-row>div:first-child {
  color:var(--bw-red);
  background:#f0f7fc
}

.bw-compare-row>div:nth-child(2) {
  color:var(--bw-text);
  background:#f7f8fa;
  border-left:1px solid var(--bw-line);
  border-right:1px solid var(--bw-line)
}

.bw-compare-row>div:last-child {
  color:#59636d;
  background:#fafafa
}

.bw-compare-table-head>div {
  min-height:54px;
  color:#fff!important;
  background:var(--bw-deep)!important;
  font-size:15px
}

/* Video play mark: center relative to the image only */
.bw-feature-media {
  position:relative
}

.bw-feature-media>img {
  display:block
}

.bw-play-overlay {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:3;
  pointer-events:none
}

.bw-play-overlay i {
  display:flex;
  align-items:center;
  justify-content:center;
  width:76px;
  height:76px;
  padding-left:5px;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:var(--bw-blue);
  font-size:28px;
  font-style:normal;
  box-shadow:0 14px 32px rgba(0,0,0,.22);
  transition:transform .3s ease
}

.bw-feature-video:hover .bw-play-overlay i {
  transform:scale(1.08)
}

.bw-play-mark {
  display:none!important
}

/* Six quality advantages restored */
.bw-engineering {
  padding:140px 0;
  background:linear-gradient(135deg,#0b2238,#123b63);
  color:#fff
}

.bw-engineering .hm-center h2 {
  color:#fff
}

.bw-engineering-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin-top:70px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px;
  overflow:hidden
}

.bw-engineering-grid article {
  min-height:270px;
  padding:38px 34px;
  background:rgba(6,24,39,.78)
}

.bw-engineering-grid strong {
  display:block;
  color:#8fd0ff;
  font-size:clamp(30px,3vw,46px);
  line-height:1.1;
  font-weight:900
}

.bw-engineering-grid h3 {
  margin:14px 0 10px;
  color:#fff;
  font-size:23px;
  font-weight:900
}

.bw-engineering-grid p {
  margin:0;
  color:rgba(255,255,255,.7);
  font-size:15px;
  line-height:1.8
}

/* Keep all product-system content inside the specification section */
.bw-spec-extras {
  margin-top:86px
}

.bw-spec-subsection {
  padding-top:72px;
  border-top:1px solid var(--bw-line)
}

.bw-spec-subsection+.bw-spec-subsection {
  margin-top:80px
}

.bw-subsection-title {
  max-width:820px;
  margin:0 auto 46px;
  text-align:center
}

.bw-subsection-title>span {
  display:inline-block;
  margin-bottom:12px;
  color:var(--bw-red);
  font-size:20px;
  font-weight:900;
  letter-spacing:.14em
}

.bw-subsection-title h3 {
  margin: 0;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.04em;
}

@media (max-width: 767px) {
  .bw-subsection-title h3 {
    font-size: 42px;
  }
}

.bw-subsection-title p {
  margin:18px auto 0;
  color:var(--bw-muted);
  font-size:16px;
  line-height:1.8
}

.bw-accessory-grid-three {
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:0
}

.bw-accessory-grid h4 {
  font-size:24px;
  font-weight:900;
  margin:0 0 10px
}

.bw-anchor-inline .bw-anchor-card {
  width:100%
}

.bw-anchor-inline .bw-anchor-card h3 {
  font-size:44px;
  line-height:1.2;
  font-weight:900;
  color:#fff;
  margin:14px 0 18px
}

/* Applications title follows the centered section-title system */
.bw-applications .hm-section-title {
  margin-left:auto;
  margin-right:auto;
  text-align:center
}

@media(max-width:991px) {
  .bw-intro-grid {
    grid-template-columns:1fr
  }
  .bw-intro-media,.bw-intro-video {
    aspect-ratio:16/9
  }
  .bw-engineering-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .bw-accessory-grid-three {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media(max-width:767px) {
  .bw-intro-media,.bw-intro-video {
    min-height:0;
    aspect-ratio:16/9
  }
  .bw-compare {
    padding:28px 14px 26px
  }
  .bw-compare-visuals {
    grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);
    gap:7px
  }
  .bw-compare-photo {
    border-radius:15px
  }
  .bw-compare-photo img {
    height:34vw;
    min-height:120px;
    border-radius:13px 13px 0 0;
  }
  .bw-compare-photo strong {
    padding:12px 5px;
    font-size:15px
  }
  .bw-compare-vs {
    width:38px;
    height:38px;
    font-size:12px
  }
  .bw-winner {
    left:0;
    top:0;
    right:auto;
    width:48px;
    height:48px;
    font-size:16px;
    transform:translate(-25%,-25%);
  }
  .bw-compare-table {
    margin-top:14px;
    border-radius:15px
  }
  .bw-compare-row {
    grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr)
  }
  .bw-compare-row>div {
    min-height:55px;
    padding:8px 5px;
    font-size:12px;
    line-height:1.35
  }
  .bw-compare-table-head>div {
    font-size:11px;
    min-height:46px
  }
  .bw-compare-note {
    font-size:11px;
    line-height:1.6
  }
  .bw-play-overlay i {
    width:58px;
    height:58px;
    font-size:21px
  }
  .bw-engineering {
    padding:90px 0
  }
  .bw-engineering-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
    margin-top:44px;
    border-radius:20px
  }
  .bw-engineering-grid article {
    min-height:0;
    padding:20px 16px
  }
  .bw-engineering-grid strong {
    font-size:27px
  }
  .bw-engineering-grid h3 {
    font-size:18px
  }
  .bw-engineering-grid p {
    font-size:12px;
    line-height:1.65
  }
  .bw-spec-extras {
    margin-top:62px
  }
  .bw-spec-subsection {
    padding-top:54px
  }
  .bw-spec-subsection+.bw-spec-subsection {
    margin-top:58px
  }
  .bw-accessory-grid-three {
    grid-template-columns:1fr;
    gap:12px
  }
  .bw-accessory-grid-three img {
    height:240px
  }
  .bw-anchor-inline .bw-anchor-card h3 {
    font-size:31px
  }
}

@media(max-width:420px) {
  .bw-engineering-grid article {
    min-height:220px;
    padding:22px 14px
  }
  .bw-engineering-grid strong {
    font-size:24px
  }
}

/* =========================================================
   Feature layout safeguard
   Desktop: 4 + 2
   Mobile: 2 + 2 + 1 + 1
========================================================= */
.bw-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bw-feature-wide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
  .bw-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bw-feature-wide {
    grid-template-columns: 1fr;
  }
}


/* =========================
   防洪原理動畫
========================= */

.bw-principle-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 100%;
  height: auto;
}

.bw-principle-animation {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
}

.bw-principle-animation img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 洪水層：在後面，由下往上淹 */
.bw-water-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  opacity: 0;
  animation: bwWaterRise 7s ease-in-out infinite;
}

.bw-water-layer img {
  position: absolute;
  inset: 0;
}

/* 箭頭層：在中間，反覆往下壓 */
.bw-arrow-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  animation: bwArrowCycle 7s ease-in-out infinite;
}

.bw-arrow-layer img {
  position: absolute;
  inset: 0;
  animation: bwArrowMove 1.8s ease-in-out infinite;
}

/* 板子永遠在最前面 */
.bw-board-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* 文字 */
.bw-principle-description {
  padding: 22px 8px 0;
}

.bw-principle-description p {
  margin: 0;
  color: var(--bw-muted);
  font-size: 16px;
  line-height: 1.9;
}

/* 洪水由下往上 */
@keyframes bwWaterRise {
  /* 一開始立即從底部出現 */
  0% {
    clip-path: inset(100% 0 0 0);
    opacity: 1;
  }

  /* 緩慢往上積淹 */
  62% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  /* 完整水位停留 */
  88% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  /* 最後淡出 */
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 0;
  }
}

/* 箭頭只在洪水出現後才顯示 */
@keyframes bwArrowCycle {
  /* 等洪水上升一段後才顯示 */
  0%,
  50% {
    opacity: 0;
  }

  56%,
  86% {
    opacity: 1;
  }

  /* 跟洪水一起淡出 */
  100% {
    opacity: 0;
  }
}

/* 箭頭重複由上往下壓 */
@keyframes bwArrowMove {
  0% {
    transform: translateY(-22px);
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  72% {
    transform: translateY(14px);
    opacity: 1;
  }

  100% {
    transform: translateY(24px);
    opacity: 0;
  }
}


@media (max-width: 767px) {
  .bw-principle-description {
    padding: 16px 0 0;
  }

  .bw-principle-description p {
    font-size: 14px;
    line-height: 1.8;
  }
}


/* =========================
   NOAQ Family橫式照片
========================= */

.bw-noaq-family {
  width: 100%;
  margin-top: 70px;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
}

.bw-noaq-family img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* =========================================================
   BOXWALL與傳統沙包比較：獨立區塊
========================================================= */
.bw-compare-section {
  padding: 140px 0;
  background: #fff;
}

.bw-compare-section .bw-compare {
  margin-top: 0;
}

.bw-compare-head .hm-kicker {
  margin-bottom: 14px;
}

.bw-compare-lead {
  max-width: 760px;
  margin: 18px auto 0;
  color: var(--bw-muted);
  font-size: 17px;
  line-height: 1.9;
}

.bw-compare-basis {
  display: inline-block;
  margin: 18px auto 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: #eaf3f9;
  color: var(--bw-blue);
  font-size: 14px;
  font-weight: 800;
}

@media (max-width: 767px) {
  .bw-compare-section {
    padding: 90px 0;
  }

  .bw-compare-lead {
    font-size: 15px;
    line-height: 1.75;
  }

  .bw-compare-basis {
    margin-top: 14px;
    font-size: 12px;
  }
}


.bw-anchor-card a,
.bw-center-link a{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.bw-anchor-card a::before,
.bw-center-link a::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--bw-blue);
  transform:translateX(-102%);
  transition:transform .38s cubic-bezier(.2,.75,.25,1);
}

.bw-anchor-card a:hover::before,
.bw-center-link a:hover::before{
  transform:translateX(0);
}

.bw-anchor-card a:hover,
.bw-center-link a:hover{
  color:#fff;
  border-color:var(--bw-blue);
}


/* =====================================================================
   BOXWALL v1 — spec alignment
   ===================================================================== */
@media(min-width:768px){
  .bw-model-copy{
    padding-top:0 !important;
    align-self:start;
  }

  .bw-model-copy h3{
    margin-top:0 !important;
  }
}

@media(max-width:767px){

  .page-storm-anchor .np-intro-copy h2{
    font-size:28px !important;
    line-height:1.3 !important;
  }

}

@media(max-width:767px){

  .page-storm-anchor #specs .np-title{
    font-size:28px !important;
    line-height:1.3 !important;
  }

}

@media(max-width:767px){

  .page-storm-anchor .np-video{
    width:92% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .page-storm-anchor .np-video iframe{
    width:100% !important;
    display:block;
  }

}


/* =====================================================================
   BOXWALL BW52 / BW102 floating full-page mode switch — v2
   Fixed in one position from hero to footer; no scroll-position change.
   ===================================================================== */
.bw-home-page{
  overflow-anchor:none;
}

.bw-home-page .bw-hero-version{
  display:none;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.bw-home-page .bw-hero-version.is-active{display:block}
.bw-home-page .bw-version-content{display:none}
.bw-home-page .bw-version-content.is-active{display:block}
.bw-home-page .bw-accessory-version{display:none}
.bw-home-page .bw-accessory-version.is-active{display:block}

/* Fade only: no translate, so switching does not look like the page moved. */
.bw-home-page .bw-variable-section,
.bw-home-page .bw-hero-version.is-active,
.bw-home-page .bw-model-panels,
.bw-home-page .bw-accessory-version.is-active{
  opacity:1;
  transition:opacity .24s ease;
}
.bw-home-page.bw-is-switching .bw-variable-section,
.bw-home-page.bw-is-switching .bw-hero-version.is-active,
.bw-home-page.bw-is-switching .bw-model-panels,
.bw-home-page.bw-is-switching .bw-accessory-version.is-active{
  opacity:0;
}

/* Desktop: same lower-right position from the first screen onward. */
.bw-mode-switcher,
.bw-mode-switcher.is-fixed{
  position:fixed;
  z-index:900;
  right:24px;
  top:auto;
  bottom:92px;
  transform:none;
  width:276px;
  padding:8px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:22px;
  background:rgba(6,24,39,.68);
  box-shadow:0 16px 40px rgba(0,0,0,.20);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.bw-mode-option{
  appearance:none;
  position:relative;
  width:100%;
  min-height:78px;
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  align-items:center;
  gap:12px;
  border:1px solid transparent;
  border-radius:15px;
  padding:8px;
  background:transparent;
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.bw-mode-option + .bw-mode-option{margin-top:6px}
.bw-mode-option:hover{
  background:rgba(0,104,183,.52);
  border-color:rgba(255,255,255,.20);
}
.bw-mode-option.is-active{
  background:rgba(0,104,183,.92);
  border-color:rgba(255,255,255,.36);
  color:#fff;
  box-shadow:0 7px 20px rgba(0,0,0,.18);
}
.bw-mode-option.is-active:after{
  display:none;
}
.bw-mode-option img{
  display:block;
  width:72px;
  height:62px;
  object-fit:contain;
  object-position:center;
  background:rgba(255,255,255,.94);
  border-radius:12px;
  padding:6px;
}
.bw-mode-option span{
  display:block;
  min-width:0;
  white-space:nowrap;
}
.bw-mode-option strong{
  display:inline;
  font-size:17px;
  line-height:1.2;
  font-weight:900;
  white-space:nowrap;
}
.bw-mode-option em{
  display:inline;
  margin-left:8px;
  font-size:13px;
  line-height:1.2;
  font-style:normal;
  font-weight:700;
  opacity:.82;
  white-space:nowrap;
}

/* Change spec order visually, not by appendChild; avoids browser scroll anchoring. */
.bw-home-page[data-bw-mode="bw102"] .bw-model-tabs [data-model="bw102"]{order:1}
.bw-home-page[data-bw-mode="bw102"] .bw-model-tabs [data-model="bw52"]{order:2}
.bw-home-page[data-bw-mode="bw52"] .bw-model-tabs [data-model="bw52"]{order:1}
.bw-home-page[data-bw-mode="bw52"] .bw-model-tabs [data-model="bw102"]{order:2}

.bw-bulkbag-placeholder{background:#eef2f5;min-height:300px;display:flex;flex-direction:column;justify-content:space-between}
.bw-bulkbag-placeholder-inner{min-height:250px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#71808e;font-size:30px;font-weight:900;letter-spacing:.08em}
.bw-bulkbag-placeholder-inner small{font-size:11px;font-weight:600;letter-spacing:0;margin-top:8px}

/* Usage examples: compact neutral-gray product note.
   Keep every case card as an image card; the note sits inside the image
   so it does not disturb the grid height. */
.bw-case-grid .bw-case-card{
  position:relative;
  display:block;
  overflow:hidden;
}

.bw-case-grid .bw-case-card > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.bw-case-meta{
  padding:0;
}

.bw-case-product-tag{
  position:absolute;
  z-index:3;
  left:10px;
  bottom:10px;
  display:inline-block;
  min-height:0;
  padding:5px 8px;
  border-radius:4px;
  background:rgba(236,239,241,.94);
  color:#626f7a;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
}

/* First landslide case keeps its original title,
   while the product name uses the same gray note style as the other cards. */
.bw-case-featured .bw-case-caption{
  position:absolute;
  z-index:2;
  inset:auto 0 0;
  padding:64px 14px 42px;
  background:linear-gradient(0deg,rgba(3,18,31,.72),rgba(3,18,31,0));
  color:#fff;
  pointer-events:none;
}

.bw-case-featured .bw-case-caption h3{
  margin:0;
  color:#fff;
  font-size:22px;
  font-weight:900;
  line-height:1.2;
}

.bw-case-featured .bw-case-product-tag{
  left:14px;
  bottom:12px;
}

@media(max-width:767px){
  .bw-case-product-tag{
    left:7px;
    bottom:7px;
    padding:4px 6px;
    font-size:9px;
  }

  .bw-case-featured .bw-case-caption{
    padding:46px 9px 34px;
  }

  .bw-case-featured .bw-case-caption h3{
    font-size:16px;
  }

  .bw-case-featured .bw-case-product-tag{
    left:9px;
    bottom:8px;
  }
}

@media(min-width:768px){
  .bw-home-page .hm-hero-copy{max-width:760px;padding-right:20px}
  .bw-home-page .hm-hero-copy h1{font-size:clamp(34px,4.1vw,58px);white-space:nowrap}
}

/* Mobile: same fixed/following behaviour, kept lower on screen. */
@media(max-width:767px){
  .bw-mode-switcher,
  .bw-mode-switcher.is-fixed{
    position:fixed;
    z-index:900;
    top:auto;
    left:12px;
    right:12px;
    bottom:16px;
    width:auto;
    transform:none;
    padding:5px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    border-radius:16px;
    background:rgba(6,24,39,.78);
  }
  .bw-mode-option{
    min-height:58px;
    grid-template-columns:46px minmax(0,1fr);
    gap:6px;
    padding:5px 7px 5px 5px;
    border-radius:11px;
  }
  .bw-mode-option + .bw-mode-option{margin-top:0}
  .bw-mode-option.is-active:after{display:none}
  .bw-mode-option img{width:44px;height:44px;padding:4px;border-radius:8px}
  .bw-mode-option span{white-space:nowrap}
  .bw-mode-option strong{display:block;font-size:13px;white-space:nowrap}
  .bw-mode-option em{display:block;margin:2px 0 0;font-size:10px;white-space:nowrap}
  .bw-home-page .bw-hero .hm-hero-copy{bottom:126px}
  .bw-home-page .bw-hero .hm-scroll{bottom:82px}
  .bw-bulkbag-placeholder{min-height:220px}
  .bw-bulkbag-placeholder-inner{min-height:180px;font-size:24px}
}


/* BW102產品特色：下排3格 */
.bw-feature-wide-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.bw-feature-wide-3 > article,
.bw-feature-wide-3 > a{
  width:100%;
  min-width:0;
}


/* 手機改成單欄 */
@media(max-width:767px){

  .bw-feature-wide-3{
    grid-template-columns:1fr;
    gap:14px;
  }

}

@media(max-width:767px){

  .bw-feature-grid article img{
    height:220px !important;
    object-fit:cover;
  }

}


/* =====================================================================
   BOXWALL accessories hover/tap swap — desktop hover / mobile tap
   ===================================================================== */
.desktop-accessory-help{display:inline}
.mobile-accessory-help{display:none}

.bw-accessory-card{
  display:flex;
  flex-direction:column;
}

.bw-accessory-media{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:#fff;
  cursor:pointer;
  text-align:left;
}

.bw-accessory-media img{
  display:block;
  width:100%;
  height:260px;
  object-fit:contain;
  background:#fff;
  padding:14px;
  transition:transform .32s ease, opacity .22s ease;
}

.bw-accessory-media:hover img{
  transform:scale(1.015);
}

/* Hint is below the image, never over the product photo */
.bw-accessory-hint{
  display:block;
  width:100%;
  min-height:34px;
  padding:8px 10px 0;
  color:#71808e;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  text-align:center;
  pointer-events:none;
}

.bw-accessory-media.is-toggled .bw-accessory-hint,
.bw-accessory-media:hover .bw-accessory-hint{
  color:var(--bw-blue);
}

/* Connection image is square; when shown, fill the whole media area */
.bw-accessory-media.is-cover img{
  object-fit:cover;
  padding:0;
}

.bw-accessory-version{display:none}
.bw-accessory-version.is-active{display:block}

/* BOXPOOL extension: same layout, different NOAQ blue to distinguish from Storm Anchor */
.bw-extension-card{
  background:var(--bw-blue);
}

.bw-extension-card span{
  color:rgba(255,255,255,.72);
}

.bw-extension-card h3,
.bw-extension-card p{
  color:#fff;
}

.bw-extension-card p{
  color:rgba(255,255,255,.78);
}

.bw-extension-card a{
  background:#fff;
  color:var(--bw-blue);
}

.bw-anchor-inline .bw-anchor-card + .bw-anchor-card{
  margin-top:24px;
}

@media(max-width:767px){
  .desktop-accessory-help{display:none}
  .mobile-accessory-help{display:inline}

  .bw-subsection-title p{
    max-width:320px;
  }

  .bw-accessory-media img{
    height:180px;
  }

  .bw-accessory-hint{
    min-height:30px;
    padding:6px 6px 0;
    font-size:10px;
  }

  .bw-anchor-inline .bw-anchor-card + .bw-anchor-card{
    margin-top:16px;
  }
}


/* Boxpool extension card: use deep navy hover fill so the button remains distinct
   from the NOAQ-blue card background. */
.bw-extension-card a::before{
  background:var(--bw-deep);
}

.bw-extension-card a:hover{
  color:#fff;
  border-color:var(--bw-deep);
}


/* =====================================================================
   BOXWALL accessory interaction v3
   Square image stage + top-right label + fade-only image swapping
   ===================================================================== */

.bw-accessory-media{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  padding:0 !important;
  border:0 !important;
  background:#fff;
  cursor:default !important;
  outline:none !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent;
}

.bw-accessory-media:focus,
.bw-accessory-media:active,
.bw-accessory-media:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}

.bw-accessory-media img{
  display:block;
  width:100% !important;
  height:100% !important;
  aspect-ratio:1 / 1;
  object-fit:cover !important;
  object-position:center;
  padding:0 !important;
  margin:0;
  opacity:1;
  transform:none !important;
  transition:opacity .18s ease !important;
}

.bw-accessory-media:hover img{
  transform:none !important;
}

.bw-accessory-media.is-fading img{
  opacity:0;
}

/* Connection image: square full-bleed, no side white space */
.bw-accessory-media.is-cover img{
  object-fit:cover !important;
  padding:0 !important;
}

.bw-accessory-hint{
  position:absolute !important;
  z-index:2;
  top:10px;
  right:10px;
  left:auto !important;
  bottom:auto !important;
  width:auto !important;
  min-height:0 !important;
  max-width:calc(100% - 20px);
  padding:6px 9px !important;
  border-radius:5px;
  background:rgba(6,24,39,.78);
  color:#fff !important;
  font-size:11px;
  font-weight:800;
  line-height:1.25;
  text-align:left;
  white-space:nowrap;
  pointer-events:none;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.bw-accessory-media:hover .bw-accessory-hint,
.bw-accessory-media.is-toggled .bw-accessory-hint{
  background:rgba(0,104,183,.9);
  color:#fff !important;
}

@media(max-width:767px){
  .bw-accessory-grid-three{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .bw-accessory-hint{
    top:7px;
    right:7px;
    max-width:calc(100% - 14px);
    padding:5px 7px !important;
    font-size:9px;
    white-space:normal;
  }
}


/* =====================================================================
   Boxwall accessories refinements v4
   - image inset from card edge
   - hint chip top-right
   - mobile side-board uses 2-up static layout
   ===================================================================== */
.bw-subsection-title p{
  font-size: 13px;
}

.bw-accessory-grid-three{
  gap: 24px;
}

.bw-accessory-card{
  display:flex;
  flex-direction:column;
}

.bw-accessory-media,
.bw-accessory-media-static{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  padding:10px !important;
  border:0 !important;
  border-radius:18px;
  background:#f5f8fb;
  cursor:default !important;
  outline:none !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent;
}

.bw-accessory-media:focus,
.bw-accessory-media:focus-visible,
.bw-accessory-media:active{
  outline:none !important;
  box-shadow:none !important;
}

.bw-accessory-media img,
.bw-accessory-media-static img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center;
  border-radius:12px;
  background:#fff;
  opacity:1;
  transform:none !important;
  transition:opacity .18s ease !important;
}

.bw-accessory-media.is-fading img{
  opacity:0;
}

.bw-accessory-media:hover img{
  transform:none !important;
}

.bw-accessory-hint{
  position:absolute !important;
  z-index:2;
  top:18px;
  right:18px;
  left:auto !important;
  bottom:auto !important;
  width:auto !important;
  min-height:0 !important;
  max-width:calc(100% - 36px);
  padding:6px 10px !important;
  border-radius:6px;
  background:rgba(6,24,39,.82);
  color:#fff !important;
  font-size:13px !important;
  font-weight:800;
  line-height:1.25;
  text-align:left;
  white-space:nowrap;
  pointer-events:none;
}

.bw-accessory-media.is-toggled .bw-accessory-hint,
.bw-accessory-media:hover .bw-accessory-hint,
.bw-accessory-media-static .bw-accessory-hint{
  background:rgba(0,104,183,.92);
  color:#fff !important;
}

.bw-side-pair{
  display:block;
}

.bw-accessory-media-static{
  display:none;
}

@media(max-width:767px){
  .bw-accessory-grid-three{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  .bw-accessory-card-side{
    grid-column:1 / -1;
  }

  .bw-side-pair{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .bw-accessory-media-side{
    pointer-events:none;
  }

  .bw-accessory-media-side .bw-accessory-hint{
    display:none;
  }

  .bw-accessory-media-static{
    display:block;
  }

  .bw-accessory-hint{
    top:14px;
    right:14px;
    max-width:calc(100% - 28px);
    padding:5px 8px !important;
    font-size:13px !important;
    white-space:normal;
  }
}


/* === v5 accessory card refinement === */
.bw-accessory-grid-three{
  gap: 22px;
}
.bw-accessory-card{
  overflow: hidden;
}
.bw-accessory-media,
.bw-accessory-media-static,
.bw-accessory-media-mobile-static{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 18px;
  background: transparent !important;
  cursor: default !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}
.bw-accessory-media:focus,
.bw-accessory-media:active,
.bw-accessory-media:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
.bw-accessory-media img,
.bw-accessory-media-static img,
.bw-accessory-media-mobile-static img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center;
  background: transparent !important;
  border-radius: 14px;
  padding: 0 !important;
  transform: none !important;
  transition: opacity .18s ease !important;
}
.bw-accessory-media:hover img{
  transform: none !important;
}
.bw-accessory-media.is-cover img,
.bw-accessory-media-static-connect img{
  object-fit: cover !important;
}
.bw-accessory-hint{
  position: absolute !important;
  top: 14px;
  right: 14px;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-height: 0 !important;
  max-width: calc(100% - 28px);
  padding: 6px 10px !important;
  border-radius: 7px;
  background: rgba(47,64,82,.92);
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
}
.bw-accessory-media.is-toggled .bw-accessory-hint,
.bw-accessory-media:hover .bw-accessory-hint,
.bw-accessory-media-static .bw-accessory-hint,
.bw-accessory-media-mobile-static .bw-accessory-hint{
  color: #fff !important;
}
.bw-side-mobile{ display: none; }
.bw-side-desktop{ display: block; }
.bw-side-pair-mobile{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media(max-width:767px){
  .bw-accessory-grid-three{
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
  }
  .bw-side-desktop{ display: none; }
  .bw-side-mobile{ display: block; grid-column: 1 / -1; }
  .bw-accessory-hint{
    top: 12px;
    right: 12px;
    max-width: calc(100% - 24px);
    padding: 5px 8px !important;
    font-size: 13px !important;
    white-space: normal;
  }
}


/* =====================================================================
   v6 Boxpool extension card refinement
   Same NOAQ family, but visually distinct from Storm Anchor.
   ===================================================================== */
.bw-extension-card{
  background:
    linear-gradient(135deg,#0b78c7 0%,#0068b7 58%,#05578f 100%) !important;
}

.bw-extension-card span{
  color:rgba(255,255,255,.78) !important;
}

.bw-extension-card h3{
  color:#fff !important;
}

.bw-extension-card p{
  color:rgba(255,255,255,.82) !important;
}

.bw-extension-card a{
  background:#fff !important;
  color:var(--blue) !important;
  border:1px solid rgba(255,255,255,.92) !important;
}

.bw-extension-card a::before{
  background:var(--deep) !important;
}

.bw-extension-card a:hover{
  color:#fff !important;
  border-color:var(--deep) !important;
}


/* =====================================================================
   v7 accessory mobile/right-side badge tweaks
   ===================================================================== */
/* Remove left static label on mobile side-board pair */
@media(max-width:767px){
  .bw-side-mobile .bw-side-pair-mobile > .bw-accessory-media-mobile-static:first-child .bw-accessory-hint{
    display:none !important;
  }
}

/* Right-side connect image keeps blue badge all the time */
.bw-accessory-media-static-connect .bw-accessory-hint,
.bw-accessory-media-mobile-static.bw-accessory-media-static-connect .bw-accessory-hint{
  background:rgba(0,104,183,.95) !important;
  color:#fff !important;
}

/* Keep mobile side-pair labels compact */
@media(max-width:767px){
  .bw-side-mobile .bw-accessory-hint{
    font-size:13px !important;
  }
}


/* =====================================================================
   v8 BOXWALL accessories mobile refinement
   - labels sit above images, not on top of them
   - consistent rounded corners
   - connection badge stays blue
   ===================================================================== */
@media(max-width:767px){

  .bw-accessory-media,
  .bw-accessory-media-mobile-static{
    aspect-ratio:auto !important;
    padding:0 10px 10px !important;
    overflow:visible !important;
    border-radius:18px !important;
    background:transparent !important;
    display:flex !important;
    flex-direction:column;
  }

  .bw-accessory-media img,
  .bw-accessory-media-mobile-static img{
    order:2;
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1;
    object-fit:contain !important;
    border-radius:14px !important;
    overflow:hidden;
    background:#fff !important;
  }

  .bw-accessory-media.is-cover img,
  .bw-accessory-media-static-connect img{
    object-fit:cover !important;
    border-radius:14px !important;
  }

  .bw-accessory-hint{
    position:static !important;
    order:1;
    align-self:flex-end;
    width:auto !important;
    max-width:100% !important;
    margin:0 0 7px 0 !important;
    padding:6px 9px !important;
    border-radius:6px !important;
    background:rgba(47,64,82,.92) !important;
    color:#fff !important;
    font-size:13px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }

  /* no label above the left static side-board image */
  .bw-side-mobile .bw-side-pair-mobile > .bw-accessory-media-mobile-static:first-child .bw-accessory-hint{
    display:none !important;
  }

  /* right connection image label is always NOAQ blue */
  .bw-side-mobile .bw-accessory-media-static-connect .bw-accessory-hint{
    display:inline-flex !important;
    background:rgba(0,104,183,.96) !important;
    color:#fff !important;
  }

  .bw-side-pair-mobile{
    align-items:start;
  }
}


/* =====================================================================
   v9 FINAL BOXWALL accessory mobile layout
   ===================================================================== */
@media(max-width:767px){

  /* Interactive inner / outer corner cards */
  .bw-accessory-card > .bw-accessory-media{
    display:grid !important;
    grid-template-rows:auto auto !important;
    gap:8px !important;
    aspect-ratio:auto !important;
    padding:0 10px 10px !important;
    overflow:visible !important;
    background:transparent !important;
    border-radius:0 !important;
  }

  .bw-accessory-card > .bw-accessory-media > .bw-accessory-hint{
    position:static !important;
    grid-row:1 !important;
    justify-self:end !important;
    align-self:auto !important;
    display:inline-flex !important;
    width:auto !important;
    max-width:100% !important;
    margin:0 !important;
    padding:6px 9px !important;
    border-radius:6px !important;
    background:#35485a !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    transform:none !important;
  }

  .bw-accessory-card > .bw-accessory-media > img{
    position:static !important;
    grid-row:2 !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    object-fit:contain !important;
    border-radius:14px !important;
    background:#fff !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
  }

  .bw-accessory-card > .bw-accessory-media.is-cover > img{
    object-fit:cover !important;
  }

  /* Mobile side-board pair: two clean, equal square images */
  .bw-side-mobile .bw-side-pair-mobile{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    align-items:end !important;
  }

  .bw-side-mobile .bw-accessory-media-mobile-static{
    display:grid !important;
    grid-template-rows:auto auto !important;
    gap:8px !important;
    aspect-ratio:auto !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .bw-side-mobile .bw-accessory-media-mobile-static > img{
    position:static !important;
    grid-row:2 !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    object-fit:contain !important;
    border-radius:14px !important;
    overflow:hidden !important;
    background:#fff !important;
    margin:0 !important;
    padding:0 !important;
  }

  .bw-side-mobile .bw-accessory-media-static-connect > img{
    object-fit:cover !important;
    border-radius:14px !important;
  }

  /* no label at all on the left side-board image */
  .bw-side-mobile .bw-side-pair-mobile > .bw-accessory-media-mobile-static:first-child > .bw-accessory-hint{
    display:none !important;
  }

  /* connection label is a separate blue row above the right image */
  .bw-side-mobile .bw-accessory-media-static-connect > .bw-accessory-hint{
    position:static !important;
    grid-row:1 !important;
    justify-self:end !important;
    display:inline-flex !important;
    width:auto !important;
    max-width:100% !important;
    margin:0 !important;
    padding:6px 9px !important;
    border-radius:6px !important;
    background:#0068b7 !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    transform:none !important;
  }
}


/* =====================================================================
   v10 BOXWALL accessory mobile fixes
   ===================================================================== */
@media(max-width:767px){

  /* Prevent outer card/container from cutting the rounded image corners */
  .bw-accessory-card,
  .bw-accessory-card > .bw-accessory-media,
  .bw-side-mobile .bw-accessory-media-mobile-static{
    overflow:visible !important;
  }

  .bw-accessory-card > .bw-accessory-media > img,
  .bw-side-mobile .bw-accessory-media-mobile-static > img{
    border-radius:14px !important;
    overflow:hidden !important;
  }

  /* Connection image: badge returns to overlay at top-right of the image */
  .bw-side-mobile .bw-accessory-media-static-connect{
    position:relative !important;
    display:block !important;
    padding:0 !important;
    overflow:visible !important;
  }

  .bw-side-mobile .bw-accessory-media-static-connect > img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    object-fit:cover !important;
    border-radius:14px !important;
    overflow:hidden !important;
  }

  .bw-side-mobile .bw-accessory-media-static-connect > .bw-accessory-hint{
    position:absolute !important;
    z-index:2 !important;
    top:8px !important;
    right:8px !important;
    left:auto !important;
    bottom:auto !important;
    display:inline-flex !important;
    width:auto !important;
    max-width:calc(100% - 16px) !important;
    margin:0 !important;
    padding:6px 9px !important;
    border-radius:6px !important;
    background:#0068b7 !important;
    color:#fff !important;
    font-size:13px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
}