/* ============================================================
   HEDA SHELVES
   SLAT WALL HARDWARE TOOL DISPLAY RACK
   MODEL: SWDR01

   Complete Product Description
   Scoped CSS / Responsive / Native HEDA Inquiry
   ============================================================ */

.hswdr01 {
  --sw-navy:#172e43;
  --sw-blue:#155b9e;
  --sw-blue-2:#246db4;
  --sw-blue-soft:#eaf2f9;
  --sw-ink:#25323b;
  --sw-muted:#65737b;
  --sw-line:#dfe6e9;
  --sw-soft:#f4f7f8;
  --sw-white:#ffffff;
  --sw-orange:#e79736;

  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#fff;
  color:var(--sw-ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.75;
  container:hswdr01-page / inline-size;
}

.hswdr01,
.hswdr01 *,
.hswdr01 *::before,
.hswdr01 *::after {
  box-sizing:border-box;
}

.hswdr01 h2,
.hswdr01 h3,
.hswdr01 h4,
.hswdr01 p,
.hswdr01 figure {
  margin:0;
  padding:0;
}

.hswdr01 h2,
.hswdr01 h3,
.hswdr01 h4 {
  color:inherit;
  font-family:inherit;
  font-weight:700;
  line-height:1.22;
  letter-spacing:-.025em;
}

.hswdr01 p {
  line-height:1.86;
}

.hswdr01 img {
  display:block;
  max-width:100%;
  height:auto;
  border:0;
}

.hswdr01 a {
  text-decoration:none;
}

.hswdr01 .sw-wrap {
  width:calc(100% - 64px);
  max-width:1180px;
  margin:0 auto;
}

.hswdr01 .sw-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:var(--sw-blue);
  font-size:11px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.hswdr01 .sw-eyebrow::before {
  content:"";
  display:block;
  flex:0 0 23px;
  width:23px;
  height:2px;
  background:currentColor;
}

.hswdr01 .sw-heading {
  font-size:clamp(29px,3.3vw,44px);
  line-height:1.17;
  letter-spacing:-1.2px;
}

.hswdr01 .sw-copy {
  color:var(--sw-muted);
  font-size:15px;
  line-height:1.9;
}

/* ============================================================
   OFFICIAL HEDA GET QUOTE NOW POPUP
   ============================================================ */

.hswdr01 .sw-quote.themes_box_inquiry_button_alert {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:22px;
  width:auto !important;
  max-width:100%;
  min-height:52px;
  padding:14px 25px !important;
  background:var(--sw-blue) !important;
  border:1px solid var(--sw-blue) !important;
  border-radius:2px !important;
  color:#ffffff !important;
  font-family:inherit;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.5 !important;
  letter-spacing:.55px;
  text-align:center;
  text-decoration:none !important;
  text-transform:uppercase;
  box-shadow:none !important;
  cursor:pointer;
  white-space:normal;
  transition:background .2s ease;
}

.hswdr01 .sw-quote.themes_box_inquiry_button_alert:hover {
  background:#104879 !important;
  border-color:#104879 !important;
  color:#fff !important;
}

.hswdr01 .sw-arrow {
  font-size:20px;
  font-weight:400;
  line-height:1;
}

/* ============================================================
   01 | EDITORIAL INTRODUCTION
   ============================================================ */

.hswdr01 .sw-hero {
  padding:73px 0 0;
  background:#eef3f7;
}

.hswdr01 .sw-intro {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:65px;
  align-items:end;
  margin-bottom:48px;
}

.hswdr01 .sw-intro .sw-eyebrow {
  margin-bottom:24px;
}

.hswdr01 .sw-intro h2 {
  max-width:770px;
  color:var(--sw-navy);
  font-size:clamp(38px,4.65vw,60px);
  line-height:1.09;
  letter-spacing:-2px;
}

.hswdr01 .sw-intro h2 span {
  color:var(--sw-blue);
}

.hswdr01 .sw-intro-right {
  min-width:0;
}

.hswdr01 .sw-intro-right p {
  margin-bottom:21px;
  color:#5a6c78;
  font-size:14.5px;
  line-height:1.92;
}

.hswdr01 .sw-intro-meta {
  display:flex;
  flex-wrap:wrap;
  gap:11px 20px;
  padding-top:18px;
  border-top:1px solid #cfdae2;
}

.hswdr01 .sw-intro-meta span {
  color:#5e7080;
  font-size:10px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.hswdr01 .sw-intro-meta strong {
  color:var(--sw-navy);
  font-size:11px;
}

/* ============================================================
   HERO SHOWCASE
   ============================================================ */

.hswdr01 .sw-hero-showcase {
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:stretch;
  gap:0;
}

.hswdr01 .sw-main-photo {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:580px;
  padding:29px;
  background:#fff;
}

.hswdr01 .sw-main-picture {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  min-height:0;
  width:100%;
}

.hswdr01 .sw-main-picture img {
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
}

.hswdr01 .sw-image-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  width:100%;
  gap:12px;
  margin-top:17px;
  padding-top:16px;
  border-top:1px solid var(--sw-line);
  color:#64737b;
  font-size:10px;
  font-weight:700;
  letter-spacing:.65px;
  line-height:1.6;
  text-transform:uppercase;
}

.hswdr01 .sw-image-caption strong {
  color:var(--sw-blue);
}

.hswdr01 .sw-hero-panel {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:45px 40px;
  background:var(--sw-navy);
  color:#fff;
}

.hswdr01 .sw-groove-mark {
  display:flex;
  flex-direction:column;
  gap:11px;
  width:100%;
  max-width:270px;
  margin-bottom:33px;
}

.hswdr01 .sw-groove-mark span {
  display:block;
  height:3px;
  background:#8cb6dc;
  opacity:.8;
}

.hswdr01 .sw-groove-mark span:nth-child(2) {
  width:87%;
}

.hswdr01 .sw-groove-mark span:nth-child(3) {
  width:72%;
}

.hswdr01 .sw-hero-panel h3 {
  max-width:360px;
  margin-bottom:28px;
  color:#fff;
  font-size:clamp(25px,2.7vw,35px);
  line-height:1.2;
  letter-spacing:-.6px;
}

.hswdr01 .sw-hero-panel h3 span {
  color:#a8d1f3;
}

.hswdr01 .sw-hero-facts {
  margin-bottom:32px;
  border-top:1px solid rgba(255,255,255,.24);
}

.hswdr01 .sw-hero-fact {
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:13px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.2);
}

.hswdr01 .sw-hero-fact > span {
  color:#a9ccec;
  font-size:11px;
  font-weight:700;
}

.hswdr01 .sw-hero-fact strong {
  display:block;
  margin-bottom:5px;
  color:#fff;
  font-size:14px;
  line-height:1.5;
}

.hswdr01 .sw-hero-fact p {
  color:#bfcfda;
  font-size:12px;
  line-height:1.8;
}

.hswdr01 .sw-hero-panel .sw-quote {
  align-self:flex-start;
  background:#fff !important;
  border-color:#fff !important;
  color:var(--sw-navy) !important;
}

.hswdr01 .sw-hero-panel .sw-quote:hover {
  background:#dcecf9 !important;
  border-color:#dcecf9 !important;
  color:var(--sw-navy) !important;
}

/* ============================================================
   02 | HORIZONTAL SLATWALL SYSTEM
   ============================================================ */

.hswdr01 .sw-system {
  padding:108px 0 112px;
  background:#fff;
}

.hswdr01 .sw-system-top {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  align-items:end;
  gap:60px;
  margin-bottom:47px;
}

.hswdr01 .sw-system-top .sw-eyebrow {
  margin-bottom:20px;
}

.hswdr01 .sw-system-top .sw-copy {
  max-width:480px;
}

.hswdr01 .sw-system-grid {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:stretch;
  gap:24px;
}

.hswdr01 .sw-system-primary {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width:0;
  padding:36px 34px;
  background:var(--sw-blue);
  color:#fff;
}

.hswdr01 .sw-system-primary > span {
  color:#b8ddf7;
  font-size:11px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:1px;
  text-transform:uppercase;
}

.hswdr01 .sw-system-primary h3 {
  margin-top:70px;
  margin-bottom:18px;
  color:#fff;
  font-size:30px;
  line-height:1.18;
}

.hswdr01 .sw-system-primary p {
  color:#d2e5f3;
  font-size:13.5px;
  line-height:1.92;
}

.hswdr01 .sw-system-rows {
  border-top:2px solid var(--sw-navy);
}

.hswdr01 .sw-system-row {
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:17px;
  padding:23px 0;
  border-bottom:1px solid var(--sw-line);
}

.hswdr01 .sw-system-row > span {
  color:var(--sw-blue);
  font-size:12px;
  font-weight:700;
}

.hswdr01 .sw-system-row h3 {
  margin-bottom:9px;
  font-size:18px;
}

.hswdr01 .sw-system-row p {
  color:#697780;
  font-size:13px;
  line-height:1.88;
}

/* ============================================================
   03 | ORIGINAL FACTORY PHOTOGRAPHS
   STRICTLY SYMMETRICAL CARDS
   ============================================================ */

.hswdr01 .sw-views {
  padding:100px 0 108px;
  background:#f1f5f7;
}

.hswdr01 .sw-views-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.83fr);
  align-items:end;
  gap:62px;
  margin-bottom:41px;
}

.hswdr01 .sw-views-head .sw-eyebrow {
  margin-bottom:19px;
}

.hswdr01 .sw-views-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}

.hswdr01 .sw-view-card {
  display:grid;
  grid-template-rows:390px minmax(0,1fr);
  min-width:0;
  height:100%;
  background:#fff;
  overflow:hidden;
}

.hswdr01 .sw-view-image {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:390px;
  min-height:0;
  padding:17px;
  overflow:hidden;
  background:#e4edf3;
}

.hswdr01 .sw-view-image img {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
}

.hswdr01 .sw-view-body {
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  padding:28px 29px 33px;
  border-top:1px solid var(--sw-line);
}

.hswdr01 .sw-view-index {
  display:block;
  margin-bottom:12px;
  color:var(--sw-blue);
  font-size:10px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:1px;
  text-transform:uppercase;
}

.hswdr01 .sw-view-body h3 {
  margin-bottom:13px;
  font-size:22px;
}

.hswdr01 .sw-view-body p {
  color:#66757e;
  font-size:13.5px;
  line-height:1.9;
}

.hswdr01 .sw-photo-note {
  margin-top:24px;
  padding-left:16px;
  border-left:3px solid var(--sw-orange);
  color:#69767d;
  font-size:12px;
  line-height:1.85;
}

/* ============================================================
   04 | CONSTRUCTION FROM TOP TO BASE
   ============================================================ */

.hswdr01 .sw-build {
  padding:105px 0 110px;
  background:#fff;
}

.hswdr01 .sw-build-head {
  max-width:780px;
  margin-bottom:43px;
}

.hswdr01 .sw-build-head .sw-eyebrow {
  margin-bottom:20px;
}

.hswdr01 .sw-build-head .sw-heading {
  margin-bottom:22px;
}

.hswdr01 .sw-build-list {
  border-top:2px solid var(--sw-navy);
}

.hswdr01 .sw-build-row {
  display:grid;
  grid-template-columns:58px minmax(0,.88fr) minmax(0,1.12fr);
  gap:28px;
  align-items:start;
  padding:29px 0;
  border-bottom:1px solid var(--sw-line);
}

.hswdr01 .sw-build-index {
  color:var(--sw-blue);
  font-size:12px;
  font-weight:700;
  letter-spacing:.7px;
}

.hswdr01 .sw-build-row h3 {
  font-size:20px;
  line-height:1.32;
}

.hswdr01 .sw-build-row p {
  color:#66757c;
  font-size:13.5px;
  line-height:1.87;
}

/* ============================================================
   05 | MERCHANDISING AREAS
   ============================================================ */

.hswdr01 .sw-merch {
  padding:102px 0 110px;
  background:var(--sw-navy);
  color:#fff;
}

.hswdr01 .sw-merch-top {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:end;
  gap:65px;
  margin-bottom:42px;
}

.hswdr01 .sw-merch .sw-eyebrow {
  margin-bottom:20px;
  color:#a9cfee;
}

.hswdr01 .sw-merch .sw-heading {
  color:#fff;
}

.hswdr01 .sw-merch-intro {
  color:#c5d3df;
  font-size:14px;
  line-height:1.9;
}

.hswdr01 .sw-merch-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:1px;
  border:1px solid #506477;
  background:#506477;
}

.hswdr01 .sw-merch-card {
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:33px 29px 38px;
  background:#20394e;
}

.hswdr01 .sw-merch-index {
  display:block;
  margin-bottom:46px;
  color:#a7d2f2;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
}

.hswdr01 .sw-merch-card h3 {
  margin-bottom:15px;
  color:#fff;
  font-size:20px;
}

.hswdr01 .sw-merch-card p {
  color:#c2d0db;
  font-size:13px;
  line-height:1.9;
}

.hswdr01 .sw-merch-note {
  margin-top:24px;
  padding:17px 20px;
  border-left:3px solid var(--sw-orange);
  background:rgba(255,255,255,.065);
  color:#c5d4dc;
  font-size:12px;
  line-height:1.85;
}

/* ============================================================
   06 | PRODUCT REFERENCE AND CUSTOM OPTIONS
   ============================================================ */

.hswdr01 .sw-options {
  padding:104px 0 110px;
  background:#fff;
}

.hswdr01 .sw-options-layout {
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  align-items:start;
  gap:clamp(40px,7vw,88px);
}

.hswdr01 .sw-options-intro .sw-eyebrow {
  margin-bottom:20px;
}

.hswdr01 .sw-options-intro .sw-heading {
  margin-bottom:25px;
}

.hswdr01 .sw-options-intro .sw-copy {
  max-width:430px;
}

.hswdr01 .sw-options-notice {
  margin-top:29px;
  padding:20px 21px;
  background:#edf3f7;
  border-left:3px solid var(--sw-blue);
}

.hswdr01 .sw-options-notice strong {
  display:block;
  margin-bottom:9px;
  font-size:13px;
  color:#293b48;
}

.hswdr01 .sw-options-notice p {
  color:#657781;
  font-size:12px;
  line-height:1.85;
}

.hswdr01 .sw-table-wrap {
  min-width:0;
}

.hswdr01 .sw-table {
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  table-layout:fixed;
  text-align:left;
}

.hswdr01 .sw-table th,
.hswdr01 .sw-table td {
  padding:18px 16px;
  border:0;
  border-bottom:1px solid var(--sw-line);
  text-align:left;
  vertical-align:top;
  line-height:1.82;
}

.hswdr01 .sw-table tr:first-child th,
.hswdr01 .sw-table tr:first-child td {
  border-top:3px solid var(--sw-navy);
}

.hswdr01 .sw-table th {
  width:37%;
  color:#293b46;
  font-size:13px;
  font-weight:700;
}

.hswdr01 .sw-table td {
  color:#63737d;
  font-size:13px;
  overflow-wrap:anywhere;
}

.hswdr01 .sw-table td strong {
  color:#213442;
  font-weight:700;
}

.hswdr01 .sw-table-note {
  display:block;
  margin-top:5px;
  color:#82919b;
  font-size:11px;
  line-height:1.7;
}

/* ============================================================
   07 | CUSTOM PROJECT PLANNING
   ============================================================ */

.hswdr01 .sw-project {
  padding:100px 0 108px;
  background:#edf3f7;
}

.hswdr01 .sw-project-head {
  max-width:770px;
  margin-bottom:43px;
}

.hswdr01 .sw-project-head .sw-eyebrow {
  margin-bottom:20px;
}

.hswdr01 .sw-project-head .sw-heading {
  margin-bottom:23px;
}

.hswdr01 .sw-project-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:18px;
}

.hswdr01 .sw-project-card {
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:18px;
  align-items:start;
  min-width:0;
  height:100%;
  padding:30px 28px 33px;
  background:#fff;
}

.hswdr01 .sw-project-card > span {
  color:var(--sw-blue);
  font-size:12px;
  font-weight:700;
}

.hswdr01 .sw-project-card h3 {
  margin-bottom:10px;
  font-size:17px;
}

.hswdr01 .sw-project-card p {
  color:#667681;
  font-size:13px;
  line-height:1.87;
}

/* ============================================================
   08 | FINAL CTA
   ============================================================ */

.hswdr01 .sw-final {
  padding:87px 0 93px;
  background:var(--sw-navy);
  color:#fff;
  border-top:4px solid var(--sw-blue-2);
}

.hswdr01 .sw-final-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:54px;
  align-items:center;
}

.hswdr01 .sw-final .sw-eyebrow {
  margin-bottom:20px;
  color:#a8d1f0;
}

.hswdr01 .sw-final h2 {
  max-width:760px;
  margin-bottom:21px;
  color:#fff;
  font-size:clamp(29px,3.3vw,43px);
  line-height:1.2;
  letter-spacing:-1px;
}

.hswdr01 .sw-final p {
  max-width:715px;
  color:#c5d4df;
  font-size:14px;
  line-height:1.9;
}

.hswdr01 .sw-final-action {
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* ============================================================
   CONTAINER RESPONSIVENESS
   Follows Actual Description Width
   ============================================================ */

@container hswdr01-page (max-width:980px) {
  .hswdr01 .sw-intro {
    grid-template-columns:minmax(0,1fr);
    gap:23px;
  }

  .hswdr01 .sw-intro h2 {
    max-width:810px;
    font-size:clamp(38px,5.5cqw,57px);
  }

  .hswdr01 .sw-intro-right {
    max-width:750px;
  }

  .hswdr01 .sw-hero-showcase {
    grid-template-columns:minmax(0,1fr);
  }

  .hswdr01 .sw-main-photo {
    min-height:0;
    padding:26px;
  }

  .hswdr01 .sw-main-picture img {
    max-height:510px;
  }

  .hswdr01 .sw-hero-panel {
    padding:39px;
  }

  .hswdr01 .sw-hero-panel h3 {
    max-width:700px;
  }

  .hswdr01 .sw-groove-mark {
    margin-bottom:23px;
  }
}

@container hswdr01-page (max-width:820px) {
  .hswdr01 .sw-system-top,
  .hswdr01 .sw-system-grid,
  .hswdr01 .sw-views-head,
  .hswdr01 .sw-merch-top,
  .hswdr01 .sw-options-layout {
    grid-template-columns:minmax(0,1fr);
    gap:29px;
  }

  .hswdr01 .sw-system-primary h3 {
    margin-top:30px;
  }

  .hswdr01 .sw-build-row {
    grid-template-columns:42px minmax(0,1fr);
    gap:14px;
  }

  .hswdr01 .sw-build-row p {
    grid-column:2;
  }

  .hswdr01 .sw-merch-grid {
    grid-template-columns:minmax(0,1fr);
  }

  .hswdr01 .sw-merch-card {
    padding:28px;
  }

  .hswdr01 .sw-merch-index {
    margin-bottom:24px;
  }

  .hswdr01 .sw-final-layout {
    grid-template-columns:minmax(0,1fr);
    gap:31px;
  }

  .hswdr01 .sw-final-action {
    justify-content:flex-start;
  }
}

@container hswdr01-page (max-width:670px) {
  .hswdr01 .sw-wrap {
    width:calc(100% - 40px);
  }

  .hswdr01 .sw-views-grid {
    grid-template-columns:minmax(0,1fr);
    gap:19px;
  }

  .hswdr01 .sw-view-card {
    grid-template-rows:360px minmax(0,1fr);
  }

  .hswdr01 .sw-view-image {
    height:360px;
  }

  .hswdr01 .sw-project-grid {
    grid-template-columns:minmax(0,1fr);
    gap:13px;
  }
}

@container hswdr01-page (max-width:500px) {
  .hswdr01 .sw-wrap {
    width:calc(100% - 34px);
  }

  .hswdr01 .sw-heading {
    font-size:29px;
    letter-spacing:-.7px;
  }

  .hswdr01 .sw-copy {
    font-size:14px;
  }

  .hswdr01 .sw-hero {
    padding-top:54px;
  }

  .hswdr01 .sw-intro {
    margin-bottom:35px;
  }

  .hswdr01 .sw-intro h2 {
    font-size:clamp(34px,8.5cqw,44px);
    letter-spacing:-1.3px;
  }

  .hswdr01 .sw-intro-right p {
    font-size:14px;
  }

  .hswdr01 .sw-main-photo {
    padding:15px;
  }

  .hswdr01 .sw-main-picture img {
    max-height:430px;
  }

  .hswdr01 .sw-image-caption {
    font-size:9px;
  }

  .hswdr01 .sw-hero-panel {
    padding:31px 24px;
  }

  .hswdr01 .sw-hero-panel h3 {
    font-size:26px;
  }

  .hswdr01 .sw-system,
  .hswdr01 .sw-views,
  .hswdr01 .sw-build,
  .hswdr01 .sw-merch,
  .hswdr01 .sw-options,
  .hswdr01 .sw-project {
    padding-top:68px;
    padding-bottom:74px;
  }

  .hswdr01 .sw-system-primary {
    padding:29px 25px;
  }

  .hswdr01 .sw-system-primary h3 {
    font-size:26px;
  }

  .hswdr01 .sw-system-row {
    gap:12px;
    padding:20px 0;
  }

  .hswdr01 .sw-system-row h3 {
    font-size:17px;
  }

  .hswdr01 .sw-view-card {
    grid-template-rows:290px minmax(0,1fr);
  }

  .hswdr01 .sw-view-image {
    height:290px;
    padding:12px;
  }

  .hswdr01 .sw-view-body {
    padding:24px 24px 29px;
  }

  .hswdr01 .sw-view-body h3 {
    font-size:19px;
  }

  .hswdr01 .sw-build-row {
    padding:23px 0;
  }

  .hswdr01 .sw-build-row h3 {
    font-size:18px;
  }

  .hswdr01 .sw-merch-card {
    padding:25px 23px;
  }

  .hswdr01 .sw-merch-card h3 {
    font-size:18px;
  }

  .hswdr01 .sw-table th,
  .hswdr01 .sw-table td {
    padding:15px 10px;
    font-size:12px;
  }

  .hswdr01 .sw-table th {
    width:39%;
  }

  .hswdr01 .sw-options-notice {
    padding:18px;
  }

  .hswdr01 .sw-project-card {
    grid-template-columns:29px minmax(0,1fr);
    gap:12px;
    padding:24px 22px;
  }

  .hswdr01 .sw-final {
    padding:68px 0;
  }

  .hswdr01 .sw-final h2 {
    font-size:29px;
  }

  .hswdr01 .sw-quote.themes_box_inquiry_button_alert {
    width:100% !important;
  }
}

@container hswdr01-page (max-width:380px) {
  .hswdr01 .sw-wrap {
    width:calc(100% - 28px);
  }

  .hswdr01 .sw-intro h2 {
    font-size:32px;
  }

  .hswdr01 .sw-heading {
    font-size:27px;
  }

  .hswdr01 .sw-hero-panel {
    padding:27px 20px;
  }
}

/* VIEWPORT FALLBACK */

@media (max-width:700px) {
  .hswdr01 .sw-wrap {
    width:calc(100% - 34px);
  }

  .hswdr01 .sw-intro,
  .hswdr01 .sw-hero-showcase,
  .hswdr01 .sw-system-top,
  .hswdr01 .sw-system-grid,
  .hswdr01 .sw-views-head,
  .hswdr01 .sw-views-grid,
  .hswdr01 .sw-merch-top,
  .hswdr01 .sw-merch-grid,
  .hswdr01 .sw-options-layout,
  .hswdr01 .sw-project-grid,
  .hswdr01 .sw-final-layout {
    grid-template-columns:minmax(0,1fr);
  }

  .hswdr01 .sw-final-action {
    justify-content:flex-start;
  }
}