@font-face {
      font-family: Be Vietnam Pro;
      src: url('../fonts/be-vietnam-pro-400.ttf') format('truetype');
      font-weight: 400;
      font-display: swap
    }

    @font-face {
      font-family: Be Vietnam Pro;
      src: url('../fonts/be-vietnam-pro-500.ttf') format('truetype');
      font-weight: 500;
      font-display: swap
    }

    @font-face {
      font-family: Be Vietnam Pro;
      src: url('../fonts/be-vietnam-pro-600.ttf') format('truetype');
      font-weight: 600;
      font-display: swap
    }

    @font-face {
      font-family: Be Vietnam Pro;
      src: url('../fonts/be-vietnam-pro-700.ttf') format('truetype');
      font-weight: 700;
      font-display: swap
    }

    :root {
      --blue: #1465cb;
      --blue-hover: #0c51ac;
      --ink: #242b32;
      --muted: #69717a;
      --line: #e4e7ea;
      --light: #f3f8fe;
      --warm: #f6f4ef
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 24px
    }

    body {
      margin: 0;
      background: #fff;
      color: var(--ink);
      font-family: 'Be Vietnam Pro', Arial, sans-serif;
      font-size: 16px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased
    }

    body.dialog-open {
      overflow: hidden
    }

    button,
    input,
    select,
    textarea {
      font: inherit
    }

    button {
      cursor: pointer
    }

    button:disabled {
      cursor: default;
      opacity: .6
    }

    a {
      color: inherit;
      text-decoration: none
    }

    a:hover {
      color: var(--blue);
      text-decoration: none
    }

    img {
      max-width: 100%;
      display: block
    }

    button,
    a,
    input,
    select,
    summary {
      touch-action: manipulation
    }

    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    summary:focus-visible {
      outline: 3px solid #84bafa;
      outline-offset: 4px
    }

    button {
      color: inherit
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0
    }

    h1,
    h2,
    h3 {
      line-height: 1.35
    }

    button,
    input,
    select {
      border-radius: 4px
    }

    [hidden] {
      display: none !important
    }

    .shell {
      max-width: 1456px;
      margin: 0 auto;
      padding: 0 40px
    }

    .icon {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.65;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
      vertical-align: middle
    }

    .svg-library {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden
    }

    .primary,
    .outline {
      min-height: 46px;
      padding: 10px 21px;
      border: 1px solid var(--blue);
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 16px;
      border-radius: 4px
    }

    .primary {
      background: var(--blue);
      color: #fff
    }

    .primary:hover {
      background: var(--blue-hover);
      color: #fff
    }

    .outline {
      background: #fff;
      color: var(--blue);
      border-color: #c9d9ed
    }

    .outline:hover {
      border-color: var(--blue);
      background: var(--light)
    }

    .text-link {
      border: 0;
      background: none;
      color: var(--blue);
      padding: 5px 0;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 9px
    }

    .muted {
      color: var(--muted)
    }

    .small-note {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.65
    }

    .skip-link {
      position: fixed;
      top: -100px;
      left: 20px;
      background: white;
      z-index: 300;
      padding: 10px
    }

    .skip-link:focus {
      top: 10px
    }

    .topbar {
      background: #f1f6fc;
      font-size: 13px
    }

    .topbar .shell {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding-top: 7px;
      padding-bottom: 7px
    }

    .topbar a {
      color: #345b89
    }

    .masthead {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 36px;
      align-items: center;
      min-height: 103px
    }

    .brand {
      width: 252px
    }

    .header-search {
      display: flex;
      border-bottom: 1px solid #b8c3cf;
      max-width: 324px;
      min-width: 0;
      height: 43px
    }

    .header-search input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: none;
      padding: 8px 0;
      font-size: 15px;
      background: none
    }

    .header-search:focus-within {
      border-color: var(--blue)
    }

    .header-search button {
      background: none;
      border: 0;
      padding: 6px 8px;
      color: var(--blue)
    }

    .header-tools {
      display: flex;
      justify-content: flex-end;
      gap: 26px;
      align-items: center
    }

    .hotline {
      font-size: 18px;
      font-weight: 600;
      line-height: 1.45;
      white-space: nowrap
    }

    .hotline small {
      display: block;
      font-size: 12px;
      font-weight: 400;
      color: var(--muted)
    }

    .basket-button {
      background: #fff;
      border: 0;
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      font-size: 14px
    }

    .basket-button .icon {
      width: 26px;
      height: 26px
    }

    .basket-count {
      position: absolute;
      left: 17px;
      top: 0;
      background: var(--blue);
      border: 2px solid white;
      border-radius: 20px;
      color: white;
      min-width: 21px;
      height: 21px;
      font-size: 11px;
      line-height: 17px;
      text-align: center;
      padding: 0 3px
    }

    .main-nav {
      border-top: 1px solid #f0f1f2;
      border-bottom: 1px solid var(--line)
    }

    .nav-inner {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 38px;
      height: 53px
    }

    .nav-inner a,
    .nav-inner>button {
      border: 0;
      background: none;
      white-space: nowrap;
      font-size: 15px;
      padding: 8px 0
    }

    .nav-inner a:first-child {
      color: var(--blue);
      font-weight: 600
    }

    .nav-inner .custom-link {
      color: var(--blue)
    }

    .hero {
      position: relative;
      background: #f6f3ed;
      overflow: hidden
    }

    .hero-photo {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      inset: 0
    }

    .hero .shell {
      position: relative;
      min-height: 416px;
      display: flex;
      align-items: center
    }

    .hero-copy {
      width: 43%;
      max-width: 560px;
      padding: 30px 0 36px
    }

    .eyebrow {
      font-size: 13px;
      font-weight: 600;
      color: var(--blue);
      letter-spacing: 1.3px;
      text-transform: uppercase;
      margin-bottom: 14px
    }

    .hero h1 {
      font-size: 48px;
      font-weight: 500;
      letter-spacing: -1.8px;
      line-height: 1.23;
      margin-bottom: 18px
    }

    .hero h1 span {
      color: var(--blue)
    }

    .hero p {
      max-width: 385px;
      margin-bottom: 23px;
      color: #5e6368;
      font-size: 16px
    }

    .hero-caption {
      position: absolute;
      bottom: 12px;
      right: 40px;
      color: #686d71;
      font-size: 11px
    }

    .service-line {
      border-bottom: 1px solid var(--line)
    }

    .service-line .shell {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      padding-top: 19px;
      padding-bottom: 19px
    }

    .service-line a,
    .service-line button {
      display: flex;
      align-items: center;
      gap: 12px;
      border: 0;
      background: none;
      padding: 0;
      font-size: 14px
    }

    .service-line .icon {
      color: var(--blue)
    }

    .service-line b {
      font-weight: 500
    }

    .service-line span {
      color: var(--muted)
    }

    .categories {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 22px;
      padding-top: 27px;
      padding-bottom: 26px
    }

    .category {
      display: flex;
      align-items: center;
      gap: 13px;
      border: 0;
      background: none;
      padding: 8px 0;
      text-align: left;
      min-width: 0
    }

    .category-photo {
      width: 74px;
      height: 74px;
      border-radius: 50%;
      overflow: hidden;
      background: #f4f5f6;
      flex-shrink: 0
    }

    .category-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .category b {
      font-size: 15px;
      display: block;
      font-weight: 500;
      line-height: 1.5
    }

    .category small {
      display: block;
      font-size: 12px;
      margin-top: 4px;
      color: var(--muted)
    }

    .category:hover b {
      color: var(--blue)
    }

    .catalog {
      padding-top: 23px;
      border-top: 1px solid var(--line);
      padding-bottom: 44px
    }

    .section-heading {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      margin-bottom: 22px
    }

    .section-heading h2 {
      font-weight: 500;
      font-size: 29px;
      letter-spacing: -.8px;
      margin: 0 0 6px
    }

    .section-heading p {
      margin: 0;
      font-size: 14px;
      color: var(--muted)
    }

    .filter-button {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
      background: #fff;
      border: 1px solid #c9d3df;
      padding: 10px 15px;
      font-size: 14px;
      min-height: 46px
    }

    .filter-button:hover,
    .filter-button.is-active {
      border-color: var(--blue);
      color: var(--blue);
      background: var(--light)
    }

    .filter-button span {
      background: var(--blue);
      color: white;
      min-width: 20px;
      height: 20px;
      border-radius: 20px;
      font-size: 11px;
      line-height: 20px
    }

    .catalog-tools {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 16px;
      margin-bottom: 21px
    }

    .use-tabs {
      display: flex;
      gap: 7px;
      overflow: auto;
      scrollbar-width: none;
      min-width: 0
    }

    .use-tabs button {
      border: 1px solid transparent;
      background: #fff;
      padding: 7px 13px;
      font-size: 14px;
      white-space: nowrap;
      min-height: 40px
    }

    .use-tabs button.active {
      background: var(--light);
      border-color: #dceafd;
      color: var(--blue);
      font-weight: 500
    }

    .use-tabs button:hover {
      color: var(--blue)
    }

    .sorter {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: var(--muted)
    }

    .sorter select {
      background: #fff;
      border: 0;
      max-width: 190px;
      color: var(--ink);
      padding: 8px 24px 8px 2px;
      font-size: 14px
    }

    .active-filters {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      margin: -3px 0 19px;
      font-size: 13px
    }

    .filter-chip {
      border: 1px solid #cee0f7;
      background: #f4f8fd;
      border-radius: 3px;
      padding: 5px 10px;
      color: var(--blue)
    }

    .clear-all {
      background: none;
      border: 0;
      text-decoration: underline;
      color: var(--muted);
      font-size: 13px
    }

    .catalog-context {
      font-size: 13px;
      color: #59708a;
      background: #f5f9fe;
      border-left: 2px solid #91b5e3;
      padding: 10px 14px;
      margin: 0 0 18px
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 29px 20px
    }

    .product {
      min-width: 0;
      display: flex;
      flex-direction: column;
      position: relative
    }

    .product-photo {
      border: 1px solid #ebedef;
      border-radius: 4px;
      background: #f5f5f3;
      padding: 0;
      overflow: hidden;
      display: block;
      width: 100%;
      aspect-ratio: 1.14
    }

    .product-photo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform .25s ease
    }

    .product-photo:hover img {
      transform: scale(1.025)
    }

    .product-content {
      padding-top: 14px;
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .product h3 {
      font-size: 16px;
      font-weight: 400;
      margin: 0 0 4px
    }

    .product-title {
      border: 0;
      background: none;
      padding: 0;
      text-align: left;
      line-height: 1.5
    }

    .product-title:hover {
      color: var(--blue)
    }

    .product-size {
      font-size: 18px;
      letter-spacing: -.3px;
      font-weight: 600;
      line-height: 1.5;
      margin: 0 0 4px
    }

    .product-unit {
      font-size: 12px;
      color: var(--muted);
      margin: 0 0 10px
    }

    .product-price {
      font-size: 21px;
      color: var(--blue);
      font-weight: 600;
      letter-spacing: -.6px;
      line-height: 1.45;
      margin-top: auto
    }

    .product-price small {
      font-size: 12px;
      color: var(--muted);
      font-weight: 400;
      letter-spacing: 0;
      white-space: nowrap
    }

    .choose {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 13px;
      border: 1px solid #d1deec;
      background: white;
      color: var(--blue);
      width: 100%;
      min-height: 43px;
      margin-top: 12px;
      font-size: 14px;
      font-weight: 500;
      transition: background .15s, border-color .15s
    }

    .choose:hover {
      background: var(--blue);
      color: white;
      border-color: var(--blue)
    }

    .choose .icon {
      height: 17px;
      width: 17px
    }

    .catalog-end {
      text-align: center;
      margin-top: 28px
    }

    .catalog-end p {
      margin: 12px 0 0;
      font-size: 13px;
      color: var(--muted)
    }

    .empty-state {
      border: 1px solid var(--line);
      padding: 48px 20px;
      text-align: center
    }

    .empty-state h3 {
      font-size: 22px;
      font-weight: 500
    }

    .empty-state p {
      color: var(--muted);
      font-size: 15px
    }

    .empty-state .icon {
      width: 36px;
      height: 36px;
      color: var(--blue);
      margin-bottom: 18px
    }

    .extras {
      background: #f8f9fb;
      border-top: 1px solid #f0f1f2;
      border-bottom: 1px solid #f0f1f2;
      padding: 29px 0 31px
    }

    .extras-layout {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 35px;
      align-items: center
    }

    .extras-intro h2 {
      font-size: 24px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: -.5px;
      margin-bottom: 9px
    }

    .extras-intro p {
      font-size: 14px;
      color: var(--muted);
      margin: 0
    }

    .extra-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px
    }

    .extra-card {
      padding: 15px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 4px;
      display: grid;
      grid-template-columns: 82px 1fr;
      gap: 12px;
      align-items: center
    }

    .extra-card img {
      height: 82px;
      width: 82px;
      object-fit: cover;
      border-radius: 2px
    }

    .extra-card h3 {
      font-size: 14px;
      font-weight: 400;
      margin: 0 0 4px
    }

    .extra-card strong {
      font-size: 16px;
      color: var(--blue);
      font-weight: 600
    }

    .extra-card small {
      font-size: 11px;
      font-weight: 400;
      color: var(--muted)
    }

    .extra-card button {
      font-size: 13px;
      margin-top: 5px;
      text-align: left;
      padding: 0
    }

    .help-section {
      display: grid;
      grid-template-columns: 1.08fr 1fr;
      gap: 65px;
      padding-top: 48px;
      padding-bottom: 48px
    }

    .custom-block {
      display: grid;
      grid-template-columns: 1fr 180px;
      gap: 24px;
      align-items: center
    }

    .custom-block h2 {
      font-size: 29px;
      font-weight: 500;
      letter-spacing: -.8px;
      line-height: 1.38;
      margin-bottom: 12px
    }

    .custom-block p {
      font-size: 14px;
      color: var(--muted);
      margin-bottom: 18px
    }

    .custom-block img {
      width: 180px;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 4px;
      max-height: 230px;
    }

    .custom-block .eyebrow {
      margin-bottom: 11px;
      color: var(--blue);
      font-size: 12px
    }

    .guides {
      border-left: 1px solid var(--line);
      padding-left: 40px
    }

    .guides h2 {
      font-size: 21px;
      font-weight: 500;
      margin: 0 0 10px
    }

    .guides details {
      border-bottom: 1px solid var(--line);
      padding: 12px 0
    }

    .guides summary {
      list-style: none;
      font-size: 15px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px
    }

    .guides summary::-webkit-details-marker {
      display: none
    }

    .guides summary:after {
      content: '+';
      color: var(--blue);
      font-size: 22px;
      line-height: 1
    }

    .guides details[open] summary:after {
      content: '−'
    }

    .guides details p {
      font-size: 14px;
      color: var(--muted);
      margin: 12px 0 4px
    }

    .contact-band {
      border-top: 1px solid #dce8f8;
      border-bottom: 1px solid #dce8f8;
      background: #f1f7ff
    }

    .contact-band .shell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding-top: 23px;
      padding-bottom: 23px
    }

    .contact-band h2 {
      font-size: 21px;
      font-weight: 500;
      margin: 0 0 5px
    }

    .contact-band p {
      font-size: 14px;
      color: #63758a;
      margin: 0
    }

    .contact-actions {
      display: flex;
      gap: 22px;
      align-items: center;
      flex-shrink: 0
    }

    .contact-actions>a:first-child {
      font-size: 22px;
      color: var(--blue);
      font-weight: 600
    }

    .contact-actions .outline {
      background: transparent;
      font-size: 14px
    }

    footer {
      padding-top: 38px;
      background: #fff
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.7fr 1fr 1.15fr 1fr;
      gap: 45px;
      padding-bottom: 32px
    }

    .footer-brand {
      width: 222px;
      margin-bottom: 17px
    }

    .footer-grid h3 {
      font-size: 15px;
      font-weight: 600;
      margin: 0 0 16px
    }

    .footer-grid p,
    .footer-grid a,
    .footer-grid button {
      font-size: 14px;
      line-height: 1.8
    }

    .footer-grid p {
      color: var(--muted);
      margin: 0 0 10px;
      max-width: 350px
    }

    .footer-grid>div>a:not(.footer-brand),
    .footer-grid>div>button {
      display: block;
      margin-bottom: 8px;
      border: 0;
      background: none;
      padding: 0;
      text-align: left;
      color: var(--muted)
    }

    .footer-grid>div>a:hover,
    .footer-grid>div>button:hover {
      color: var(--blue)
    }

    .footer-grid .footer-phone {
      font-size: 18px !important;
      font-weight: 600;
      color: var(--blue) !important
    }

    .footer-bottom {
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding-top: 18px;
      padding-bottom: 20px;
      font-size: 12px;
      color: var(--muted)
    }

    .footer-bottom span:last-child {
      text-align: right;
      max-width: 560px
    }

    .floating-help {
      position: fixed;
      right: 18px;
      bottom: 24px;
      z-index: 8;
      display: flex;
      align-items: center;
      gap: 8px;
      background: white;
      color: var(--blue);
      border: 1px solid #c7daef;
      box-shadow: 0 4px 15px #2d507013;
      border-radius: 28px;
      padding: 11px 15px;
      font-size: 13px;
      font-weight: 500
    }

    .floating-help .icon {
      width: 18px;
      height: 18px
    }

    dialog {
      border: 0;
      padding: 0;
      color: var(--ink);
      box-shadow: -10px 0 70px #18334b15
    }

    dialog::backdrop {
      background: #23324366
    }

    dialog.drawer {
      position: fixed;
      inset: 0 0 0 auto;
      margin: 0;
      width: min(100%, 530px);
      height: 100%;
      max-height: 100%;
      max-width: 100%;
      background: #fff
    }

    dialog[open].drawer {
      display: flex;
      flex-direction: column
    }

    .dialog-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 22px 25px;
      border-bottom: 1px solid var(--line);
      gap: 20px
    }

    .dialog-header h2 {
      font-size: 21px;
      font-weight: 500;
      margin: 0
    }

    .close-dialog {
      height: 40px;
      width: 40px;
      border: 0;
      background: #f4f6f8;
      font-size: 27px;
      line-height: 1;
      flex-shrink: 0
    }

    .dialog-content {
      padding: 24px 26px;
      overflow: auto;
      flex: 1
    }

    .dialog-content p {
      font-size: 14px;
      color: var(--muted)
    }

    .dialog-footer {
      padding: 19px 26px;
      border-top: 1px solid var(--line);
      background: #fff
    }

    .dialog-footer>.primary {
      width: 100%
    }

    .dialog-footer .small-note {
      display: block;
      text-align: center;
      margin-top: 10px;
      font-size: 12px
    }

    .detail-photo {
      width: 100%;
      height: 240px;
      object-fit: contain;
      background: #f6f6f4;
      border-radius: 4px;
      margin-bottom: 20px
    }

    .detail-name {
      font-size: 22px;
      font-weight: 500;
      margin: 0 0 8px
    }

    .detail-price {
      font-size: 26px;
      font-weight: 600;
      color: var(--blue);
      margin-bottom: 17px
    }

    .detail-price small {
      font-size: 14px;
      color: var(--muted);
      font-weight: 400
    }

    .field-label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 9px
    }

    .variant-list {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 22px
    }

    .variant-list button {
      border: 1px solid #dce1e7;
      background: white;
      padding: 9px 12px;
      font-size: 14px;
      min-height: 42px
    }

    .variant-list button.selected {
      color: var(--blue);
      border-color: var(--blue);
      background: var(--light)
    }

    .quantity-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 5px 0 15px
    }

    .quantity-control {
      display: flex;
      border: 1px solid #c9d3df;
      border-radius: 4px;
      overflow: hidden
    }

    .quantity-control button {
      border: 0;
      background: #f7f9fb;
      width: 44px;
      height: 44px;
      font-size: 22px;
      border-radius: 0
    }

    .quantity-control input {
      width: 74px;
      text-align: center;
      appearance: textfield;
      -moz-appearance: textfield;
      border: 0;
      border-right: 1px solid var(--line);
      border-left: 1px solid var(--line);
      border-radius: 0
    }

    .quantity-control input::-webkit-inner-spin-button {
      appearance: none
    }

    .quick-amounts {
      display: flex;
      gap: 8px;
      margin-bottom: 20px
    }

    .quick-amounts button {
      font-size: 13px;
      padding: 5px 10px;
      background: #fff;
      border: 1px solid var(--line)
    }

    .subtotal {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      border-top: 1px solid var(--line);
      padding-top: 14px;
      margin-top: 19px;
      font-size: 15px
    }

    .subtotal strong {
      font-size: 21px;
      color: var(--blue)
    }

    .caution {
      font-size: 13px !important;
      padding: 12px 14px;
      background: #f7f9fc;
      line-height: 1.65;
      margin-top: 19px !important
    }

    .filter-fields {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 11px;
      margin: 15px 0 14px
    }

    .filter-fields label {
      font-size: 13px;
      margin: 0
    }

    .filter-fields input {
      width: 100%;
      padding: 11px 10px;
      border: 1px solid #c9d3df;
      margin-top: 7px;
      font-size: 17px;
      height: 48px
    }

    .full-select {
      width: 100%;
      padding: 11px 12px;
      border: 1px solid #c9d3df;
      background: white;
      min-height: 48px;
      margin-bottom: 22px;
      font-size: 15px
    }

    .filter-subtitle {
      font-size: 17px;
      font-weight: 500;
      margin-top: 26px;
      margin-bottom: 9px
    }

    .filter-reset {
      background: none;
      border: 0;
      color: var(--muted);
      text-decoration: underline;
      font-size: 14px;
      margin: 0 auto 14px;
      display: block
    }

    .form-error {
      font-size: 13px !important;
      color: #bb3333 !important;
      margin: 9px 0 !important
    }

    .cart-row {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 15px;
      padding: 17px 0;
      border-bottom: 1px solid var(--line)
    }

    .cart-row:first-child {
      padding-top: 0
    }

    .cart-row img {
      width: 72px;
      height: 72px;
      object-fit: cover;
      border-radius: 3px
    }

    .cart-row h3 {
      font-size: 15px;
      font-weight: 500;
      margin: 0 0 3px
    }

    .cart-row p {
      font-size: 13px;
      margin: 0 0 8px
    }

    .cart-row-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px
    }

    .cart-row-bottom strong {
      font-size: 16px;
      color: var(--blue)
    }

    .cart-row .quantity-control button {
      width: 30px;
      height: 32px;
      font-size: 18px
    }

    .cart-row .quantity-control input {
      width: 42px;
      font-size: 14px
    }

    .cart-remove {
      border: 0;
      background: none;
      font-size: 12px;
      color: var(--muted);
      text-decoration: underline;
      padding: 4px 0;
      margin-top: 8px
    }

    .cart-empty {
      text-align: center;
      padding: 60px 0
    }

    .cart-empty .icon {
      width: 48px;
      height: 48px;
      color: #9bb4cf;
      margin-bottom: 20px
    }

    .cart-empty h3 {
      font-size: 22px;
      font-weight: 500
    }

    .cart-sum {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      font-size: 17px;
      margin-bottom: 13px
    }

    .cart-sum strong {
      color: var(--blue);
      font-size: 23px
    }

    .quote-result {
      border: 1px solid #d4e2f3;
      background: var(--light);
      padding: 17px;
      font-size: 14px;
      line-height: 1.8;
      white-space: pre-line;
      border-radius: 4px;
      margin-top: 20px
    }

    .info-dialog {
      margin: auto;
      width: min(92%, 580px);
      max-height: 86vh;
      border-radius: 6px
    }

    .info-dialog .dialog-content {
      max-height: 65vh
    }

    .info-dialog .dialog-content p {
      font-size: 16px;
      line-height: 1.8
    }

    .toast-note {
      position: fixed;
      left: 50%;
      bottom: 25px;
      transform: translateX(-50%);
      max-width: calc(100% - 32px);
      width: max-content;
      padding: 12px 20px;
      background: #fff;
      border: 1px solid #c4d8ee;
      box-shadow: 0 5px 28px #203a5322;
      color: #234a78;
      border-radius: 5px;
      z-index: 150;
      font-size: 14px
    }

    @media(min-width:1700px) {
      .hero .shell {
        min-height: 475px
      }

      .hero-copy {
        width: 41%
      }

      .hero h1 {
        font-size: 52px
      }
    }

    @media(max-width:1199px) {
      .shell {
        padding-left: 28px;
        padding-right: 28px
      }

      .masthead {
        gap: 20px
      }

      .brand {
        width: 225px
      }

      .hotline {
        font-size: 16px
      }

      .header-tools {
        gap: 20px
      }

      .basket-label {
        display: none
      }

      .nav-inner {
        gap: 27px
      }

      .hero .shell {
        min-height: 370px
      }

      .hero h1 {
        font-size: 39px
      }

      .hero-copy {
        width: 43%
      }

      .hero p {
        font-size: 15px;
        max-width: 310px
      }

      .hero-photo {
        object-position: 55% center
      }

      .categories {
        gap: 13px
      }

      .category-photo {
        width: 59px;
        height: 59px
      }

      .category {
        gap: 9px
      }

      .category b {
        font-size: 13px
      }

      .category small {
        font-size: 11px
      }

      .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 27px 18px
      }

      .service-line span {
        display: none
      }

      .extras-layout {
        grid-template-columns: 220px 1fr;
        gap: 20px
      }

      .extra-card {
        display: block;
        padding: 12px
      }

      .extra-card img {
        float: left;
        margin-right: 10px;
        width: 58px;
        height: 64px
      }

      .extra-card button {
        display: block
      }

      .custom-block {
        grid-template-columns: 1fr
      }

      .custom-block img {
        display: none
      }

      .help-section {
        gap: 40px
      }

      .footer-grid {
        gap: 28px
      }

      .sorter>span {
        display: none
      }
    }

    @media(max-width:899px) {
      .header-search {
        max-width: 240px
      }

      .brand {
        width: 192px
      }

      .hotline {
        display: none
      }

      .masthead {
        min-height: 85px;
        grid-template-columns: 1fr auto 1fr;
        gap: 18px
      }

      .nav-inner {
        gap: 24px;
        justify-content: flex-start;
        overflow: auto;
        height: 50px;
        scrollbar-width: none
      }

      .nav-inner a,
      .nav-inner>button {
        font-size: 14px
      }

      .hero .shell {
        min-height: 345px
      }

      .hero h1 {
        font-size: 35px;
        letter-spacing: -1px
      }

      .hero-copy {
        width: 46%;
        padding: 30px 0
      }

      .hero p {
        max-width: 260px;
        font-size: 14px
      }

      .hero-photo {
        object-position: 51% center
      }

      .hero .eyebrow {
        font-size: 11px;
        letter-spacing: .9px
      }

      .hero .primary {
        font-size: 14px;
        min-height: 44px
      }

      .categories {
        gap: 12px
      }

      .category {
        display: block;
        text-align: center
      }

      .category-photo {
        width: 76px;
        height: 76px;
        margin: 0 auto 10px
      }

      .category small {
        display: none
      }

      .category b {
        font-size: 13px
      }

      .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .catalog-tools {
        flex-wrap: wrap;
        gap: 10px
      }

      .use-tabs {
        width: 100%
      }

      .sorter {
        margin-left: auto
      }

      .section-heading h2 {
        font-size: 26px
      }

      .extras-layout {
        display: block
      }

      .extras-intro {
        margin-bottom: 20px
      }

      .extras-intro h2 {
        font-size: 23px;
        display: inline
      }

      .extras-intro p {
        display: inline;
        margin-left: 8px
      }

      .extra-card img {
        float: none;
        width: 100%;
        height: 115px;
        object-fit: contain;
        margin: 0 0 12px
      }

      .help-section {
        gap: 25px
      }

      .guides {
        padding-left: 25px
      }

      .custom-block h2 {
        font-size: 25px
      }

      .contact-band .shell {
        align-items: flex-start
      }

      .contact-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-end
      }

      .contact-actions>a:first-child {
        font-size: 19px
      }

      .footer-grid {
        grid-template-columns: 1.4fr 1fr;
        gap: 24px 48px
      }

      .footer-bottom {
        display: block
      }

      .footer-bottom span {
        display: block
      }

      .footer-bottom span:last-child {
        text-align: left;
        margin-top: 7px
      }

      .floating-help span {
        display: none
      }

      .floating-help {
        padding: 13px;
        right: 13px;
        bottom: 18px
      }
    }

    @media(max-width:599px) {
      html {
        scroll-padding-top: 12px
      }

      .shell {
        padding-left: 18px;
        padding-right: 18px
      }

      .topbar .shell {
        justify-content: center;
        padding-top: 6px;
        padding-bottom: 6px;
        font-size: 11px
      }

      .topbar .top-right {
        display: none
      }

      .masthead {
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding-top: 19px;
        padding-bottom: 14px;
        min-height: 0
      }

      .brand {
        grid-column: 1;
        grid-row: 1;
        width: 210px
      }

      .header-tools {
        grid-column: 2;
        grid-row: 1
      }

      .header-search {
        grid-column: 1/-1;
        grid-row: 2;
        max-width: none;
        height: 42px;
        background: #f6f8fa;
        border: 1px solid #e6ebf0;
        border-radius: 4px
      }

      .header-search input {
        padding-left: 12px;
        font-size: 14px
      }

      .header-search button {
        padding: 7px 12px
      }

      .nav-inner {
        gap: 24px;
        height: 46px
      }

      .nav-inner a,
      .nav-inner>button {
        font-size: 13px
      }

      .hero .shell {
        min-height: 435px;
        align-items: flex-start
      }

      .hero-copy {
        width: 100%;
        max-width: none;
        padding: 27px 0 0;
        z-index: 1
      }

      .hero h1 {
        font-size: 33px;
        line-height: 1.2;
        letter-spacing: -1px;
        margin-bottom: 11px
      }

      .hero h1 br {
        display: none
      }

      .hero h1 span {
        display: block
      }

      .hero p {
        font-size: 14px;
        max-width: 285px;
        margin-bottom: 14px;
        line-height: 1.7
      }

      .hero .eyebrow {
        font-size: 10px;
        margin-bottom: 9px
      }

      .hero .primary {
        padding: 9px 15px;
        min-height: 42px;
        font-size: 14px
      }

      .hero-photo {
        height: 220px;
        top: auto;
        bottom: 0;
        object-fit: cover;
        object-position: 100% 70%;
        width: 100%;
        transform: scale(1.22);
        transform-origin: bottom right
      }

      .hero-caption {
        bottom: 7px;
        right: 12px;
        font-size: 9px
      }

      .service-line .shell {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding-top: 15px;
        padding-bottom: 15px
      }

      .service-line a,
      .service-line button {
        flex-direction: column;
        text-align: center;
        gap: 6px;
        font-size: 11px;
        line-height: 1.5
      }

      .service-line .icon {
        width: 21px;
        height: 21px
      }

      .categories {
        gap: 14px;
        overflow-x: auto;
        grid-template-columns: repeat(5, 87px);
        padding-top: 22px;
        padding-bottom: 20px;
        scrollbar-width: none
      }

      .category-photo {
        width: 70px;
        height: 70px
      }

      .category b {
        font-size: 12px
      }

      .category {
        padding: 0
      }

      .catalog {
        padding-top: 23px;
        padding-bottom: 29px
      }

      .section-heading {
        margin-bottom: 17px;
        gap: 13px;
        align-items: flex-start
      }

      .section-heading h2 {
        font-size: 24px;
        letter-spacing: -.6px;
        margin-bottom: 5px
      }

      .section-heading p {
        font-size: 12px;
        max-width: 225px
      }

      .filter-button {
        font-size: 12px;
        min-height: 41px;
        padding: 8px 10px;
        gap: 6px;
        white-space: normal;
        line-height: 1.4
      }

      .filter-button .icon {
        width: 17px;
        height: 17px
      }

      .filter-button>span {
        display: none
      }

      .filter-button-text {
        max-width: 58px
      }

      .catalog-tools {
        padding-bottom: 9px;
        margin-bottom: 17px;
        gap: 4px
      }

      .use-tabs {
        gap: 3px
      }

      .use-tabs button {
        padding: 7px 10px;
        font-size: 12px;
        min-height: 36px
      }

      .sorter select {
        font-size: 12px;
        max-width: 165px
      }

      .active-filters {
        gap: 6px;
        font-size: 12px
      }

      .catalog-context {
        font-size: 12px
      }

      .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px 13px
      }

      .product-content {
        padding-top: 11px
      }

      .product h3 {
        font-size: 14px
      }

      .product-size {
        font-size: 16px;
        letter-spacing: -.5px
      }

      .product-unit {
        font-size: 11px;
        margin-bottom: 7px
      }

      .product-price {
        font-size: 19px;
        letter-spacing: -.7px
      }

      .product-price small {
        font-size: 10px;
        letter-spacing: 0
      }

      .choose {
        font-size: 13px;
        min-height: 42px;
        gap: 9px;
        margin-top: 9px
      }

      .product-photo {
        aspect-ratio: 1.08
      }

      .catalog-end .outline {
        font-size: 14px
      }

      .catalog-end p {
        font-size: 11px
      }

      .extras {
        padding-top: 24px;
        padding-bottom: 25px
      }

      .extras-intro h2 {
        display: block;
        font-size: 23px
      }

      .extras-intro p {
        display: block;
        margin: 5px 0 0;
        font-size: 13px
      }

      .extra-grid {
        grid-template-columns: 1fr;
        gap: 10px
      }

      .extra-card {
        display: grid;
        grid-template-columns: 78px 1fr;
        padding: 12px;
        gap: 15px
      }

      .extra-card img {
        width: 78px;
        height: 78px;
        margin: 0
      }

      .extra-card h3 {
        font-size: 15px
      }

      .extra-card button {
        font-size: 13px;
        margin-top: 5px
      }

      .help-section {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 32px;
        padding-bottom: 32px
      }

      .custom-block {
        grid-template-columns: 1fr 115px;
        gap: 16px
      }

      .custom-block img {
        display: block;
        width: 115px
      }

      .custom-block h2 {
        font-size: 23px
      }

      .custom-block p {
        font-size: 13px
      }

      .custom-block .primary {
        font-size: 13px;
        padding: 10px 13px
      }

      .guides {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: 24px
      }

      .guides h2 {
        font-size: 21px
      }

      .guides summary {
        font-size: 14px
      }

      .contact-band .shell {
        display: block;
        padding-top: 22px;
        padding-bottom: 22px
      }

      .contact-band h2 {
        font-size: 20px
      }

      .contact-band p {
        font-size: 13px
      }

      .contact-actions {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        gap: 12px
      }

      .contact-actions .outline {
        font-size: 12px;
        padding: 9px 12px;
        min-height: 42px
      }

      .contact-actions>a:first-child {
        font-size: 19px
      }

      footer {
        padding-top: 29px
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px 18px;
        padding-bottom: 22px
      }

      .footer-grid>div:first-child {
        grid-column: 1/-1
      }

      .footer-brand {
        width: 210px
      }

      .footer-grid h3 {
        font-size: 14px;
        margin-bottom: 12px
      }

      .footer-grid p,
      .footer-grid a,
      .footer-grid button {
        font-size: 13px
      }

      .footer-grid .footer-phone {
        font-size: 15px !important
      }

      .footer-grid>div:last-child {
        grid-column: 1/-1
      }

      .footer-bottom {
        font-size: 11px;
        padding-bottom: 65px
      }

      .dialog-header {
        padding: 17px 19px
      }

      .dialog-header h2 {
        font-size: 19px
      }

      .dialog-content {
        padding: 21px 20px
      }

      .dialog-footer {
        padding: 16px 20px
      }

      .detail-photo {
        height: 210px
      }

      .detail-name {
        font-size: 21px
      }

      .detail-price {
        font-size: 25px
      }

      .dialog-content .detail-name {
        margin-top: 0
      }

      .toast-note {
        font-size: 13px;
        bottom: 20px;
        padding: 11px 14px
      }

      .info-dialog .dialog-content p {
        font-size: 15px
      }
    }

    /* Keep both logos proportional when their containers shrink. */
    .brand,
    .footer-brand {
      display: block;
      max-width: 100%
    }

    .brand img,
    .footer-brand img {
      width: 100%;
      height: auto
    }

    /* Keep the live site typography aligned with the approved design values. */
    .service-line a,
    .service-line button,
    .custom-block p,
    .extras-intro p,
    .contact-band p,
    .footer-grid p,
    .footer-grid a,
    .footer-grid button {
      font-size: 14px
    }

    .guides details p,
    .dialog-content p {
      font-size: 14px
    }

    .eyebrow {
      font-size: 13px
    }

    @media(max-width:899px) {
      .category b {
        font-size: 13px
      }

      .hero p {
        font-size: 15px
      }

      .hero .eyebrow {
        font-size: 11px
      }

      .extras-intro p {
        display: block;
        margin: 6px 0 0
      }
    }

    @media(max-width:599px) {
      .topbar .shell {
        font-size: 11px
      }

      .hero .shell {
        min-height: 435px
      }

      .hero-photo {
        height: 220px;
        transform: scale(1.22);
        object-position: 100% 70%
      }

      .hero h1 {
        font-size: 33px
      }

      .hero p {
        font-size: 14px;
        max-width: 285px
      }

      .hero .eyebrow {
        font-size: 10px;
        letter-spacing: .9px
      }

      .nav-inner a,
      .nav-inner>button,
      .use-tabs button,
      .filter-button,
      .sorter select,
      .choose,
      .category b {
        font-size: 13px
      }

      .section-heading p {
        font-size: 12px
      }

      .categories {
        grid-template-columns: repeat(5, 87px)
      }

      .service-line a,
      .service-line button {
        font-size: 11px
      }

      .product h3 {
        font-size: 14px
      }

      .product-size {
        font-size: 16px
      }

      .product-unit,
      .product-price small {
        font-size: 11px
      }

      .product-price {
        font-size: 19px
      }

      .product-price small {
        display: block;
        margin-top: 2px
      }

      .choose {
        min-height: 42px
      }

      .catalog-end p,
      .active-filters,
      .catalog-context,
      .footer-bottom {
        font-size: 11px
      }

      .custom-block p,
      .guides summary,
      .contact-band p,
      .footer-grid p,
      .footer-grid a,
      .footer-grid button {
        font-size: 13px
      }

      .custom-block .primary,
      .contact-actions .outline {
        font-size: 13px
      }

      .custom-block {
        grid-template-columns: 1fr 115px
      }

      .custom-block img {
        width: 115px;
        height: 208px
      }

      .custom-block .primary .icon {
        display: inline-flex
      }

      .extra-card h3 {
        font-size: 15px
      }

      .extra-card button {
        font-size: 13px
      }

      .dialog-content .caution {
        font-size: 13px !important
      }
    }

    @media(prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      * {
        transition: none !important;
        animation: none !important
      }
    }

    .filter-button-text {
      font-weight: 400
    }

    .dialog-form {
      display: contents
    }

    .noscript-note {
      padding-top: 20px;
      padding-bottom: 20px
    }

    .footer-warehouse {
      font-weight: 500;
      color: var(--ink)
    }