/* Container sizes & specifications page */

/* general purpose spec sheet */
.gp-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; padding-bottom: 26px; border-bottom: 2px solid var(--navy); }
.gp-head h2 { margin-top: 12px; font-size: clamp(34px, 3.8vw, 50px); }
.gp-title { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; color: var(--navy); padding: 10px 18px 10px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--blue-soft); }
.gp-title svg { width: 30px; height: 30px; color: var(--blue-deep); flex: none; }
.spec-sheet { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); }
.spec-row { display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.spec-row--wide { grid-column: 1 / -1; grid-template-columns: minmax(150px, calc(19% - 9px)) 1fr; }
.spec-row dt { font-family: var(--font-head); font-weight: 600; font-size: 17px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; color: var(--navy); }
.spec-row dd { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 900px) {
  .gp-head { grid-template-columns: 1fr; justify-items: start; }
  .spec-sheet { grid-template-columns: 1fr; }
  .spec-row, .spec-row--wide { grid-template-columns: 1fr; gap: 6px; }
}

/* signature: dimension diagram */
.dims { overflow: hidden; scroll-margin-top: 80px; }
.dims::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 60% at 60% 35%, rgba(79,163,209,.18), transparent 70%); pointer-events: none; }
.dims-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; }
.dims-head h2 { margin-top: 12px; color: var(--white); font-size: clamp(34px, 3.8vw, 50px); }
.dims .size-chips { margin-top: 0; }
.dims .size-chip:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.dims-stage { display: grid; grid-template-columns: 3fr 1fr; gap: clamp(16px, 3vw, 40px); align-items: end; margin-top: clamp(32px, 4vw, 52px); padding: clamp(18px, 3vw, 36px); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(4,7,7,.22); }
.dx-fig { margin: 0; min-width: 0; }
.dx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dx-fig figcaption { margin-top: 6px; font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); text-align: center; }
.dx-body { fill: rgba(79,163,209,.1); stroke: var(--blue); stroke-width: 2.5; }
.dx-corr { fill: url(#dx-rib); }
.dx-inner { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; stroke-dasharray: 7 6; }
.dx-cast { fill: var(--blue); }
.dx-bar { fill: none; stroke: rgba(79,163,209,.7); stroke-width: 2.5; }
.dx-ground { stroke: rgba(255,255,255,.22); stroke-width: 1.5; }
.dx-dim { fill: none; stroke: var(--white); stroke-width: 1.6; }
.dx-txt { fill: var(--white); font-family: var(--font-head); font-weight: 600; font-size: 26px; letter-spacing: .04em; }
.dx-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 4px 0 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.dx-legend .k { display: inline-block; width: 26px; height: 0; border-top: 2.5px solid var(--blue); }
.dx-legend .k--dash { border-top: 1.5px dashed rgba(255,255,255,.7); }
.dx-legend > span:not(.k) { display: inline-flex; align-items: center; gap: 10px; margin-right: 14px; }

.dx-read { margin: clamp(20px, 3vw, 28px) 0 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; overflow: hidden; }
.dx-read > div { background: var(--navy); padding: 16px 16px 18px; min-width: 0; }
.dx-read dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.dx-read dd { margin: 6px 0 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.1; color: var(--white); }
.dx-read .dx-name dd { color: var(--blue); }

.dims-table { margin-top: clamp(28px, 4vw, 44px); color: var(--text); }
.dims-table table.data td, .dims-table table.data thead th { transition: background-color .35s, color .35s; }
.dims-table table.data thead th.is-col { background: var(--blue); color: var(--ink); }
.dims-table table.data td.is-col { background: var(--blue-soft); color: var(--navy); font-weight: 600; }

@media (max-width: 1100px) { .dx-read { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dx-read .dx-name { grid-column: span 1; } }
@media (max-width: 760px) {
  .dims-stage { grid-template-columns: 1fr; }
  .dx-fig--end { max-width: 190px; justify-self: center; width: 100%; }
  .dx-txt { font-size: 50px; }
  .dx-fig--end .dx-txt { font-size: 34px; }
  .dx-read { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-read .dx-name { grid-column: 1 / -1; }
}

/* other container types (two accordion stacks) */
.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }
.types-col { min-width: 0; }
.types-h { margin: 12px 0 24px; font-size: clamp(28px, 2.8vw, 38px); }
.types-list { max-width: none; }
.types-list .faq-a .checks { margin: 12px 0; }
.types-list .faq-a .link-arrow { font-size: 16px; }
.types-actions { grid-column: 1 / -1; margin-top: 8px; padding-top: 32px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .types { grid-template-columns: 1fr; } }
.dims-table:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }