/* The Web channel keeps the existing H5 rules intact and opts into a desktop shell. */
html[data-storefront-channel="web"] body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 0;
  background: #f3f6fb;
}

html[data-storefront-channel="web"] header {
  order: 1;
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate;
  width: 100%;
  height: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}

html[data-storefront-channel="web"] .diy-site-header-main { display: flex; width: 100%; height: 64px; flex: 0 0 64px; padding: 0 max(24px, calc((100vw - 1600px) / 2)); align-items: center; justify-content: space-between; }
html[data-storefront-channel="web"] .diy-site-top-nav { display: flex; width: 100%; height: 40px; flex: 0 0 40px; align-self: stretch; padding: 0 max(24px, calc((100vw - 1600px) / 2)); align-items: center; justify-content: space-between; gap: 24px; overflow: visible; background: #f5f5f5; color: #666; font-size: 14px; line-height: 20px; }
html[data-storefront-channel="web"] .diy-site-top-nav-welcome { margin-right: auto; }
html[data-storefront-channel="web"] .diy-site-top-nav-items { display: flex; min-width: 0; margin-left: auto; align-items: center; justify-content: flex-end; }
html[data-storefront-channel="web"] .diy-site-top-nav-tools { display: flex; flex: 0 0 auto; margin-left: 12px; align-items: center; gap: 10px; line-height: 20px; }
html[data-storefront-channel="web"] .diy-site-top-nav button { position: static; display: inline-flex; width: auto; height: 24px; min-height: 24px; margin: 0; padding: 0 12px; align-items: center; justify-content: center; border: 0; border-left: 1px solid #ddd; border-radius: 0; background: transparent; color: inherit; font-size: 14px; line-height: 20px; white-space: nowrap; }
html[data-storefront-channel="web"] .diy-site-top-nav button:first-child { border-left: 0; }
html[data-storefront-channel="web"] .diy-site-top-nav--style2 { background: #343434; color: #f2f2f2; }
html[data-storefront-channel="web"] .diy-site-top-nav--style2 button { border-color: #555; }
html[data-storefront-channel="web"] .diy-site-top-nav--style3 { border-bottom: 1px solid #eee; background: #fff; color: #555; }
html[data-storefront-channel="web"] .diy-site-top-nav--style3 button { color: #c00; }

html[data-storefront-channel="web"] header button {
  font-size: 24px;
}

html[data-storefront-channel="web"] nav {
  order: 2;
  position: sticky;
  top: 64px;
  left: auto;
  right: auto;
  z-index: 20;
  width: 100%;
  height: 50px;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0 max(24px, calc((100vw - 1600px) / 2));
  overflow: visible;
  border-top: 0;
  box-shadow: 0 1px 5px #102a560d;
}

html[data-storefront-channel="web"] nav button {
  flex: 0 0 112px;
  min-width: 112px;
  max-width: 160px;
  font-size: 14px;
}

html[data-storefront-channel="web"] main {
  order: 3;
  width: min(1600px, 100%);
  max-width: 1600px;
  margin: 0 auto;
  padding: 28px 32px 72px;
}

html[data-storefront-channel="web"] main:has(> .diy-site-footer) {
  padding-bottom: 0;
}

html[data-storefront-channel="web"] .hero {
  padding: 42px 38px;
  border-radius: 18px;
}

html[data-storefront-channel="web"] .hero h1 {
  font-size: 36px;
}

html[data-storefront-channel="web"] .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

html[data-storefront-channel="web"] .product-card-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

html[data-storefront-channel="web"] .card,
html[data-storefront-channel="web"] .panel,
html[data-storefront-channel="web"] .order-card,
html[data-storefront-channel="web"] .address {
  border-radius: 16px;
}

html[data-storefront-channel="web"] .diy-data-block > .section-title,
html[data-storefront-channel="web"] .page-head {
  margin-bottom: 18px;
}

html[data-storefront-channel="web"] header.diy-site-header--style2 {
  background: #fff;
  color: #17233d;
  box-shadow: 0 1px 8px #102a5614;
}

html[data-storefront-channel="web"] header.diy-site-header--style2 button {
  color: #17233d;
}

html[data-storefront-channel="web"] header.diy-site-header--style3 {
  background: #172b4d;
  box-shadow: none;
}

html[data-storefront-channel="web"] header.diy-site-header--style4 { display: flex; height: auto; padding: 0; flex-direction: column; background: #fff; color: #1f2937; box-shadow: 0 1px 4px #10182812; }
html[data-storefront-channel="web"] header.diy-site-header--style4 .diy-site-header-main { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(320px, 680px); gap: 28px; height: 88px; flex-basis: 88px; align-items: center; }
html[data-storefront-channel="web"] header.diy-site-header--style4 .diy-site-logo { justify-self: start; color: #c00; font-size: 26px; font-weight: 700; }
html[data-storefront-channel="web"] .diy-traditional-search-wrap { position: relative; grid-column: 2; justify-self: end; width: min(100%, 680px); min-width: 0; }
html[data-storefront-channel="web"] .diy-traditional-search-wrap:focus-within { z-index: 65; }
html[data-storefront-channel="web"] .diy-traditional-search { display: flex; min-width: 0; height: 44px; gap: 4px; padding: 3px; overflow: visible; border: 1px solid #d0d5dd; border-radius: 12px; background: #fff; }
html[data-storefront-channel="web"] .diy-traditional-search input { min-width: 0; flex: 1; margin: 0; padding: 0 12px; border: 0; outline: 0; box-shadow: none; font-size: 14px; }
html[data-storefront-channel="web"] .diy-traditional-search .diy-product-type-filter { flex: 0 0 84px; }
html[data-storefront-channel="web"] .diy-traditional-search .diy-product-type-filter { order: 0; z-index: 61; }
html[data-storefront-channel="web"] .diy-traditional-search input[type="search"] { order: 1; }
html[data-storefront-channel="web"] .diy-traditional-search .diy-product-type-trigger { height: 36px; padding: 0 10px; }
html[data-storefront-channel="web"] .diy-traditional-search button { position: static; flex: 0 0 auto; width: auto; height: 36px; margin: 0; padding: 0 14px; border: 0; border-radius: 8px; background: #155eef; color: #fff; font-size: 13px; white-space: nowrap; }
html[data-storefront-channel="web"] .diy-traditional-search button { order: 3; }
html[data-storefront-channel="web"] .diy-traditional-search button.secondary { border: 1px solid #d0d5dd; background: #fff; color: #344054; }
html[data-storefront-channel="web"] .diy-traditional-search-wrap .diy-hot-keywords { position: absolute; z-index: 60; top: calc(100% + 7px); right: 0; left: 0; max-height: 0; padding: 0 10px; overflow: hidden; border: 0 solid #e4e7ec; border-radius: 10px; background: #fff; box-shadow: 0 8px 18px rgba(16,42,86,.12); opacity: 0; visibility: hidden; pointer-events: none; transition: max-height .2s ease,padding .2s ease,border-width .2s ease,opacity .2s ease,visibility .2s ease; }
html[data-storefront-channel="web"] .diy-traditional-search-wrap:focus-within:not(:has(.diy-product-type-filter[open])) .diy-hot-keywords { max-height: 120px; padding: 8px 10px; overflow: auto; border-width: 1px; opacity: 1; visibility: visible; pointer-events: auto; }
html[data-storefront-channel="web"] .diy-traditional-search-wrap .diy-hot-keyword { font-size: 12px; }
html[data-storefront-channel="web"] .diy-site-top-nav-tools .diy-traditional-cart { position: static; width: auto; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: 12px; }
html[data-storefront-channel="web"] .diy-site-top-nav-tools #diy-header-cart-slot { display: flex; align-items: center; }
html[data-storefront-channel="web"] .diy-site-top-nav-tools .diy-traditional-cart { display: inline-flex; align-items: center; gap: 3px; }
html[data-storefront-channel="web"] .diy-site-top-nav-tools .diy-traditional-cart { height: 24px; min-height: 24px; padding: 0; line-height: 20px; }
html[data-storefront-channel="web"] .diy-site-top-nav-tools .diy-traditional-cart .diy-icon { width: 14px; height: 14px; }
html[data-storefront-channel="web"] .diy-site-top-nav-tools .diy-cart-count { display: inline-grid; min-width: 16px; height: 16px; margin-left: -1px; padding: 0 4px; place-items: center; border-radius: 999px; background: #f04438; color: #fff; font-size: 10px; line-height: 1; }
html[data-storefront-channel="web"] .cart-selection { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
html[data-storefront-channel="web"] .cart-selection-info { display: flex; min-width: 0; align-items: center; gap: 16px; }
html[data-storefront-channel="web"] .cart-selection-info label { display: inline-flex; align-items: center; gap: 7px; }
html[data-storefront-channel="web"] .cart-bulk-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
html[data-storefront-channel="web"] .cart-bulk-actions button { width: auto; min-height: 34px; padding: 0 13px; font-size: 13px; }
html[data-storefront-channel="web"] .diy-site-top-nav-tools .diy-account-entry { gap: 4px; }
html[data-storefront-channel="web"] .diy-site-top-nav-tools .diy-account-entry button,
html[data-storefront-channel="web"] .diy-site-top-nav-tools .diy-account-entry a,
html[data-storefront-channel="web"] .diy-site-top-nav-tools .diy-account-menu summary { padding: 4px 8px; border: 0; border-left: 1px solid #ddd; border-radius: 0; color: inherit; font-size: 12px; }
html[data-storefront-channel="web"] .diy-site-top-nav-tools .diy-account-entry button,
html[data-storefront-channel="web"] .diy-site-top-nav-tools .diy-account-entry a,
html[data-storefront-channel="web"] .diy-site-top-nav-tools .diy-account-menu summary { display: inline-flex; height: 24px; min-height: 24px; align-items: center; gap: 4px; padding: 0 8px; font-size: 14px; line-height: 20px; }
html[data-storefront-channel="web"] header.diy-site-header--style4 .diy-account-entry button,
html[data-storefront-channel="web"] header.diy-site-header--style4 .diy-account-entry a,
html[data-storefront-channel="web"] header.diy-site-header--style4 .diy-account-menu summary { border-color: #d1d5db; color: #374151; }

html[data-storefront-channel="web"] .diy-site-logo img {
  display: block;
  width: auto;
  max-width: 160px;
  max-height: 38px;
  object-fit: contain;
}

html[data-storefront-channel="web"] .diy-site-nav {
  gap: 0;
  height: 50px;
  overflow: visible;
}

html[data-storefront-channel="web"] .diy-site-nav--style4 { gap: 12px; }

html[data-storefront-channel="web"] .diy-site-menu {
  position: relative;
  display: flex;
  height: 100%;
  align-items: stretch;
}

html[data-storefront-channel="web"] .diy-site-nav--style4 .diy-site-menu > button {
  display: inline-flex;
  width: auto;
  height: 100%;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 220px;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 12px;
  white-space: nowrap;
}

html[data-storefront-channel="web"] .diy-site-menu-icon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

html[data-storefront-channel="web"] .diy-site-menu-icon .diy-icon {
  display: block;
  width: 1em;
  height: 1em;
}

html[data-storefront-channel="web"] .diy-site-menu-caret {
  display: inline-flex;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  font-size: 12px;
  line-height: 1;
}

html[data-storefront-channel="web"] .diy-site-menu-caret .diy-icon {
  display: block;
  width: 12px;
  height: 12px;
  fill: currentColor;
}

html[data-storefront-channel="web"] #commerce-locale[hidden] { display: none !important; }
header #network { display: none !important; }
header #commerce-locale { display: none; }
header.diy-site-header #commerce-locale:not([hidden]) { display: block; }

html[data-storefront-channel="web"] .diy-site-submenu {
  position: absolute;
  z-index: 50;
  top: 100%;
  left: 0;
  display: none;
  min-width: 168px;
  padding: 6px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px #102a5620;
}

html[data-storefront-channel="web"] .diy-site-menu:hover .diy-site-submenu,
html[data-storefront-channel="web"] .diy-site-menu:focus-within .diy-site-submenu,
html[data-storefront-channel="web"] .diy-site-menu.is-open .diy-site-submenu {
  display: grid;
  gap: 2px;
}

html[data-storefront-channel="web"] .diy-site-menu:hover,
html[data-storefront-channel="web"] .diy-site-menu:focus-within,
html[data-storefront-channel="web"] .diy-site-menu.is-open {
  z-index: 51;
}

html[data-storefront-channel="web"] .diy-site-header-tools {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 16px;
}
html[data-storefront-channel="web"] .diy-site-header-tools #diy-header-cart-slot { display: flex; align-items: center; }
html[data-storefront-channel="web"] .diy-site-header-tools .diy-traditional-cart { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; }
html[data-storefront-channel="web"] .diy-site-header-tools .diy-traditional-cart .diy-icon { width: 16px; height: 16px; }
html[data-storefront-channel="web"] .diy-site-header-tools .diy-cart-count { display: inline-grid; min-width: 16px; height: 16px; padding: 0 4px; place-items: center; border-radius: 999px; background: #f04438; color: #fff; font-size: 10px; line-height: 1; }

html[data-storefront-channel="web"] #diy-account-entry {
  position: relative;
  flex: 0 0 auto;
}

html[data-storefront-channel="web"] .diy-account-entry {
  display: flex;
  align-items: center;
  gap: 12px;
}

html[data-storefront-channel="web"] .diy-account-entry button,
html[data-storefront-channel="web"] .diy-account-entry a,
html[data-storefront-channel="web"] .diy-account-menu summary {
  padding: 7px 10px;
  border: 1px solid #ffffff55;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

html[data-storefront-channel="web"] .diy-account-menu summary {
  cursor: pointer;
  list-style: none;
}

html[data-storefront-channel="web"] .diy-account-menu summary::-webkit-details-marker {
  display: none;
}

html[data-storefront-channel="web"] .diy-account-menu summary span {
  padding: 0;
  background: transparent;
}

html[data-storefront-channel="web"] .diy-account-menu summary .diy-account-caret {
  display: inline-flex;
  width: 12px;
  height: 12px;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

html[data-storefront-channel="web"] .diy-account-caret .diy-icon { display: block; width: 12px; height: 12px; fill: currentColor; }

html[data-storefront-channel="web"] .diy-account-menu-items {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  right: 0;
  display: none;
  min-width: 184px;
  padding: 7px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px #102a5620;
  color: #17233d;
}

html[data-storefront-channel="web"] .diy-account-menu[open] .diy-account-menu-items {
  display: grid;
  gap: 8px;
}

html[data-storefront-channel="web"] .diy-account-profile { display: flex; align-items: center; gap: 10px; padding: 10px 9px 8px; border-bottom: 1px solid #eef1f5; }
html[data-storefront-channel="web"] .diy-account-profile > img,
html[data-storefront-channel="web"] .diy-account-avatar-fallback { display: inline-flex; width: 38px; height: 38px; flex: 0 0 38px; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: #eaf1ff; color: #155eef; object-fit: cover; }
html[data-storefront-channel="web"] .diy-account-avatar-fallback .diy-icon { width: 20px; height: 20px; }
html[data-storefront-channel="web"] .diy-account-profile-copy { display: grid; min-width: 0; gap: 3px; }
html[data-storefront-channel="web"] .diy-account-profile-copy strong,
html[data-storefront-channel="web"] .diy-account-profile-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-storefront-channel="web"] .diy-account-profile-copy small { color: #667085; font-size: 11px; }
html[data-storefront-channel="web"] .diy-account-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 7px 4px 9px; border-bottom: 1px solid #eef1f5; }
html[data-storefront-channel="web"] .diy-account-assets > div { display: grid; justify-items: center; gap: 2px; }
html[data-storefront-channel="web"] .diy-account-assets strong { color: #17233d; font-size: 13px; }
html[data-storefront-channel="web"] .diy-account-assets small { color: #667085; font-size: 11px; }

html[data-storefront-channel="web"] .diy-account-menu-items button {
  width: 100%;
  min-height: 36px;
  padding: 9px 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  text-align: left;
}

html[data-storefront-channel="web"] .diy-account-menu-items button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  line-height: 1.35;
  text-align: left;
}

html[data-storefront-channel="web"] .diy-account-menu-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  color: #667085;
}

html[data-storefront-channel="web"] .diy-account-menu-icon .diy-icon {
  display: block;
  width: 16px;
  height: 16px;
}

html[data-storefront-channel="web"] .diy-account-menu-items button:hover {
  background: #f2f4f7;
}

html[data-storefront-channel="web"] .diy-site-submenu button {
  display: grid;
  grid-template-columns: 1em minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 6px;
  background: transparent;
  text-align: left;
}

html[data-storefront-channel="web"] .diy-site-submenu .diy-site-menu-icon { display: inline-flex; width: 1em; height: 1em; align-items: center; justify-content: center; }
html[data-storefront-channel="web"] .diy-site-submenu .diy-site-menu-icon .diy-icon { width: 1em; height: 1em; }
html[data-storefront-channel="web"] .diy-site-submenu .diy-site-menu-icon--placeholder { visibility: hidden; }

html[data-storefront-channel="web"] .diy-site-submenu button:hover {
  background: #f2f4f7;
}

html[data-storefront-channel="web"] .diy-site-footer {
  display: grid;
  gap: 14px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 28px;
  padding: 28px max(32px, calc((100vw - 1600px) / 2 + 32px));
  border-top: 1px solid #e4e7ec;
  background: #fff;
  color: #344054;
}

html[data-storefront-channel="web"] .diy-site-footer-brand {
  display: flex;
  min-width: 120px;
  align-items: center;
  font-size: 18px;
}

html[data-storefront-channel="web"] .diy-site-footer-brand img {
  display: block;
  max-width: 160px;
  max-height: 36px;
  object-fit: contain;
}

html[data-storefront-channel="web"] .diy-site-footer-links {
  display: flex;
  position: static;
  order: initial;
  width: auto;
  height: auto;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
  overflow: visible;
  border: 0;
  box-shadow: none;
}

html[data-storefront-channel="web"] .diy-site-footer-links a,
html[data-storefront-channel="web"] .diy-site-footer-links button {
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
  text-decoration: none;
}

html[data-storefront-channel="web"] .diy-site-footer-links a:hover,
html[data-storefront-channel="web"] .diy-site-footer-links button:hover {
  color: #155eef;
}

html[data-storefront-channel="web"] .diy-site-footer small {
  color: #98a2b3;
}

html[data-storefront-channel="web"] .diy-site-footer--style1 {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

html[data-storefront-channel="web"] .diy-site-footer--style2 {
  justify-items: center;
  text-align: center;
}

html[data-storefront-channel="web"] .diy-site-footer--style2 .diy-site-footer-links {
  justify-content: center;
}

html[data-storefront-channel="web"] .diy-site-footer--style3 {
  background: #172b4d;
  color: #fff;
}

html[data-storefront-channel="web"] .diy-site-footer--style3 small {
  color: #cbd5e1;
}

@media (max-width: 980px) {
  html[data-storefront-channel="web"] .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html[data-storefront-channel="web"] .product-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  html[data-storefront-channel="web"] main {
    padding: 20px 16px 56px;
  }

  html[data-storefront-channel="web"] header,
  html[data-storefront-channel="web"] nav {
    padding-left: 16px;
    padding-right: 16px;
  }

  html[data-storefront-channel="web"] .diy-site-top-nav { gap: 10px; padding: 0 16px; }
  html[data-storefront-channel="web"] .diy-site-top-nav-items { overflow-x: auto; }
  html[data-storefront-channel="web"] .diy-site-top-nav button { padding: 0 8px; }

  html[data-storefront-channel="web"] header.diy-site-header--style4 .diy-site-header-main { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 48px 40px; gap: 4px 10px; height: 104px; flex-basis: 104px; padding-top: 6px; padding-bottom: 6px; }
  html[data-storefront-channel="web"] header.diy-site-header--style4 .diy-site-logo { font-size: 21px; }
  html[data-storefront-channel="web"] header.diy-site-header--style4 .diy-traditional-search-wrap { grid-column: 1 / -1; grid-row: 2; }
  html[data-storefront-channel="web"] header.diy-site-header--style4 .diy-site-header-tools { grid-column: 2; grid-row: 1; gap: 6px; }
  html[data-storefront-channel="web"] header.diy-site-header--style4 .diy-account-entry { gap: 4px; }
  html[data-storefront-channel="web"] header.diy-site-header--style4 .diy-account-entry button,
  html[data-storefront-channel="web"] header.diy-site-header--style4 .diy-account-entry a,
  html[data-storefront-channel="web"] header.diy-site-header--style4 .diy-account-menu summary { padding: 6px; font-size: 11px; }
  html[data-storefront-channel="web"] header.diy-site-header--style4 .diy-traditional-cart { height: 32px; padding: 0 8px; font-size: 11px; }
  html[data-storefront-channel="web"] nav.diy-site-nav--style4.diy-site-nav--fixed { top: 104px; }
  html[data-storefront-channel="web"] nav.diy-site-nav--style4.diy-site-nav--with-top-nav.diy-site-nav--fixed { top: 144px; }

  html[data-storefront-channel="web"] .diy-site-header-tools {
    gap: 8px;
  }

  html[data-storefront-channel="web"] header #network {
    display: none;
  }

  html[data-storefront-channel="web"] .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  html[data-storefront-channel="web"] .product-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-storefront-channel="web"] .hero {
    padding: 30px 24px;
  }

  html[data-storefront-channel="web"] .hero h1 {
    font-size: 30px;
  }

  html[data-storefront-channel="web"] .diy-site-footer {
    padding: 24px 16px;
  }

  html[data-storefront-channel="web"] .diy-site-footer--style1 {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

html[data-storefront-channel="web"] header.diy-site-header--not-fixed,
html[data-storefront-channel="web"] nav.diy-site-nav--not-fixed { position: static; top: auto; }
html[data-storefront-channel="web"] header.diy-site-header--fixed { position: sticky; top: 0; }
html[data-storefront-channel="web"] nav.diy-site-nav--fixed { position: sticky; top: 64px; }
html[data-storefront-channel="web"] nav.diy-site-nav--style4.diy-site-nav--fixed { top: 88px; }
html[data-storefront-channel="web"] nav.diy-site-nav--with-top-nav.diy-site-nav--fixed { top: 104px; }
html[data-storefront-channel="web"] nav.diy-site-nav--style4.diy-site-nav--with-top-nav.diy-site-nav--fixed { top: 128px; }

@media (max-width: 700px) {
  html[data-storefront-channel="web"] nav.diy-site-nav--style4.diy-site-nav--fixed { top: 104px; }
  html[data-storefront-channel="web"] nav.diy-site-nav--style4.diy-site-nav--with-top-nav.diy-site-nav--fixed { top: 144px; }
}

html[data-storefront-channel="web"] .diy-search-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

html[data-storefront-channel="web"] .diy-search-main input {
  min-width: 0;
  flex: 1;
  margin: 0;
  padding: 11px 12px;
  border: 0;
  box-shadow: none;
  font-size: 13px;
}

html[data-storefront-channel="web"] .diy-search-main .diy-search-icon {
  position: static;
  flex: 0 0 auto;
  margin-left: 7px;
  font-size: 20px;
  line-height: 1;
}

html[data-storefront-channel="web"] .diy-product-type-filter {
  flex: 0 0 76px;
  width: 76px;
  max-width: 76px;
}

html[data-storefront-channel="web"] .diy-product-type-trigger {
  min-height: 40px;
  justify-content: center;
  padding: 10px 8px;
}

html[data-storefront-channel="web"] .diy-product-type-label {
  width: 100%;
  text-align: center;
}

html[data-storefront-channel="web"] .diy-search-main button {
  position: static;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 8px 16px;
  font-size: 12px;
}

html[data-storefront-channel="web"] .diy-search-main .diy-product-type-option {
  position: static;
  flex: none;
  width: 100%;
  margin: 0;
  padding: 9px 18px;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  text-align: left;
  background: transparent;
  color: #344054;
}
html[data-storefront-channel="web"] .diy-search-main .diy-product-type-option:hover,
html[data-storefront-channel="web"] .diy-search-main .diy-product-type-option[aria-checked="true"] { background: #f2f4f7; color: #344054; }

@media (max-width: 640px) {
  html[data-storefront-channel="web"] .cart-selection { align-items: flex-start; flex-direction: column; }
  html[data-storefront-channel="web"] .cart-selection-info { align-items: flex-start; flex-direction: column; gap: 6px; }
  html[data-storefront-channel="web"] .cart-bulk-actions { width: 100%; flex-wrap: wrap; }
}

html[data-storefront-channel="web"] .diy-product-type-filter > .diy-product-type-menu {
  left: 0;
  width: 76px;
  min-width: 76px;
  padding: 6px;
}

html[data-storefront-channel="web"] .diy-product-type-filter > .diy-product-type-menu > .diy-product-type-option {
  width: auto;
  padding: 9px 8px;
  text-align: center;
}

html[data-storefront-channel="web"] .diy-search--style4 {
  position: relative;
  z-index: 4;
  border-color: #d0d5dd;
  transition: border-radius .18s ease, box-shadow .18s ease;
}

html[data-storefront-channel="web"] .diy-search--style4:focus-within {
  border-color: #d0d5dd;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  box-shadow: none;
}

html[data-storefront-channel="web"] .diy-search--style4 input:focus {
  outline: none;
  box-shadow: none;
}

html[data-storefront-channel="web"] .diy-search--style4 .diy-hot-keywords {
  position: absolute;
  z-index: 5;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  max-height: 0;
  padding: 0 10px;
  overflow: hidden;
  border: 0 solid #e4e7ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(16, 42, 86, .12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: max-height .2s ease, padding .2s ease, border-width .2s ease, opacity .2s ease, visibility .2s ease;
}

html[data-storefront-channel="web"] .diy-search--style4:has(.diy-search-main input:focus) .diy-hot-keywords {
  max-height: 120px;
  padding: 8px 10px;
  overflow: auto;
  border-width: 1px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html[data-storefront-channel="web"] .address-list { gap: 18px; }
html[data-storefront-channel="web"] .address-region-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html[data-storefront-channel="web"] .address-region-field { min-width: 0; color: #667085; font-size: 12px; }
html[data-storefront-channel="web"] .address-region-field .field { margin-top: 5px; }
html[data-storefront-channel="web"] .merchant-application-form { display: grid; gap: 8px; }
html[data-storefront-channel="web"] .merchant-application-form h2,
html[data-storefront-channel="web"] .merchant-application-form p { margin-bottom: 4px; }
html[data-storefront-channel="web"] .merchant-application-form label { display: grid; gap: 3px; color: #344054; font-size: 13px; font-weight: 600; }
html[data-storefront-channel="web"] .merchant-application-form .field { margin: 3px 0 8px; font-weight: 400; }
html[data-storefront-channel="web"] .merchant-application-form small,
html[data-storefront-channel="web"] .merchant-application-status .hint { color: #667085; font-size: 12px; font-weight: 400; }
html[data-storefront-channel="web"] .merchant-admin-link { display: inline-block; width: auto; margin-top: 8px; padding: 10px 16px; text-decoration: none; }
html[data-storefront-channel="web"] .account-center-menu button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
html[data-storefront-channel="web"] .account-center-icon { display: inline-flex; width: 22px; color: #667085; }
html[data-storefront-channel="web"] .account-center-icon .diy-icon { width: 18px; height: 18px; }
html[data-storefront-channel="web"] .account-member { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 1.1fr); gap: 24px; margin-bottom: 18px; }
html[data-storefront-channel="web"] .member-identity { display: flex; align-items: center; gap: 16px; min-width: 0; }
html[data-storefront-channel="web"] .member-profile-assets { align-self: stretch; margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; background: #ffffff16; color: #fff; }
html[data-storefront-channel="web"] .member-profile-assets span { color: #ffffffc7; }
html[data-storefront-channel="web"] .avatar-picker { position: relative; flex: 0 0 auto; overflow: hidden; cursor: pointer; }
html[data-storefront-channel="web"] .avatar-picker img { width: 100%; height: 100%; object-fit: cover; }
html[data-storefront-channel="web"] .avatar-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
html[data-storefront-channel="web"] .avatar-picker small { position: absolute; right: 0; bottom: 0; left: 0; padding: 3px 0; background: #10182899; color: #fff; font-size: 10px; text-align: center; }
html[data-storefront-channel="web"] .account-center-menu { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; overflow: visible; background: transparent; box-shadow: none; }
html[data-storefront-channel="web"] .account-center-menu button { min-height: 94px; display: flex; flex-direction: column; justify-content: center; gap: 8px; border: 1px solid #e9eef5; border-radius: 14px; background: #fff; text-align: center; }
html[data-storefront-channel="web"] .account-center-menu button b { display: none; }
html[data-storefront-channel="web"] .account-center-menu .account-center-icon { width: auto; justify-content: center; color: #155eef; }
html[data-storefront-channel="web"] .account-center-menu .account-center-icon .diy-icon { width: 22px; height: 22px; }
html[data-storefront-channel="web"] .account-logout { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 14px; border: 0; border-radius: 12px; background: #e5484d; color: #fff; font-weight: 700; }
html[data-storefront-channel="web"] .account-logout .account-center-icon { width: auto; color: #fff; }
html[data-storefront-channel="h5"] .account-member { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin: 4px 0 14px; padding: 18px; border-radius: 18px; }
html[data-storefront-channel="h5"] .member-identity { display: flex; min-width: 0; align-items: center; gap: 12px; }
html[data-storefront-channel="h5"] .member-identity > div { min-width: 0; }
html[data-storefront-channel="h5"] .avatar-picker { position: relative; width: 58px; height: 58px; flex: 0 0 58px; overflow: hidden; cursor: pointer; }
html[data-storefront-channel="h5"] .avatar-picker img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
html[data-storefront-channel="h5"] .avatar-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
html[data-storefront-channel="h5"] .avatar-picker small { position: absolute; right: 0; bottom: 0; left: 0; padding: 3px 0; background: #10182899; color: #fff; font-size: 10px; text-align: center; }
html[data-storefront-channel="h5"] .account-assets { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 12px 8px; border-radius: 12px; background: #ffffff16; color: #fff; }
html[data-storefront-channel="h5"] .account-assets > div { min-width: 0; }
html[data-storefront-channel="h5"] .account-assets strong { color: #fff; font-size: 15px; }
html[data-storefront-channel="h5"] .account-assets span { color: #ffffffc7; }
html[data-storefront-channel="h5"] .account-center-menu { overflow: hidden; }
html[data-storefront-channel="h5"] .account-center-menu button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; min-height: 52px; align-items: center; gap: 10px; padding: 12px 14px; text-align: left; }
html[data-storefront-channel="h5"] .account-center-icon { display: inline-flex; width: 22px; align-items: center; justify-content: center; color: #667085; }
html[data-storefront-channel="h5"] .account-center-icon .diy-icon { width: 18px; height: 18px; }
html[data-storefront-channel="h5"] .account-logout { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 12px; border: 0; border-radius: 12px; background: #fff; color: #e5484d; font-weight: 600; }
html[data-storefront-channel="h5"] .account-logout .account-center-icon { width: auto; color: #e5484d; }
@media (max-width: 700px) {
  html[data-storefront-channel="web"] .account-member { grid-template-columns: 1fr; gap: 14px; }
  html[data-storefront-channel="web"] .member-profile-assets { padding: 12px; }
  html[data-storefront-channel="web"] .account-center-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  html[data-storefront-channel="web"] .account-center-menu button { min-height: 78px; }
}
@media (max-width: 620px) { html[data-storefront-channel="web"] .address-region-fields { grid-template-columns: 1fr; gap: 0; } }

.auth-modal-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(16, 24, 40, .52); }
.auth-modal { position: relative; width: min(100%, 440px); max-height: min(90vh, 760px); padding: 28px; overflow: auto; border: 1px solid #eaecf0; border-radius: 18px; background: #fff; box-shadow: 0 24px 72px rgba(16, 24, 40, .24); }
.auth-modal h1 { margin: 0; font-size: 24px; }
.auth-modal > .hint { margin: 6px 0 18px; }
.auth-modal-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; color: #667085; font-size: 26px; line-height: 1; }
.auth-form { display: grid; gap: 10px; }
.auth-form .field, .auth-field-label .field { width: 100%; margin: 0; }
.auth-field-label { display: grid; gap: 5px; color: #475467; font-size: 13px; }
html[data-storefront-channel="h5"] .auth-modal .auth-field-label select.field { min-height: 44px; padding: 10px 40px 10px 12px; border: 1px solid #d0d5dd; border-radius: 12px; appearance: none; background-color: #fff; background-image: linear-gradient(45deg, transparent 50%, #667085 50%), linear-gradient(135deg, #667085 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; color: #17233d; cursor: pointer; }
html[data-storefront-channel="h5"] .auth-modal .auth-field-label select.field:focus { border-color: #155eef; outline: 0; box-shadow: 0 0 0 3px #155eef1a; }
html[data-storefront-channel="h5"] .auth-modal .auth-field-label select.field option { background: #fff; color: #17233d; }
.auth-captcha-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.auth-captcha-row .field { grid-column: 1 / -1; }
.auth-remember, .auth-agreement-consent { display: flex; align-items: flex-start; gap: 8px; color: #475467; font-size: 13px; line-height: 1.6; }
.auth-login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; }
.auth-remember input, .auth-agreement-consent input { flex: 0 0 auto; margin: 3px 0 0; accent-color: #155eef; }
.auth-agreement-consent { margin: 2px 0; }
.auth-inline-link, .auth-mode-link button { padding: 0; border: 0; background: transparent; color: #155eef; cursor: pointer; font: inherit; }
.auth-mode-link { margin: 14px 0 0; color: #667085; text-align: center; font-size: 14px; }
.auth-agreement-backdrop { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(16, 24, 40, .62); }
.auth-agreement-modal { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; width: min(100%, 620px); max-height: min(86vh, 760px); padding: 26px; overflow: hidden; border: 1px solid #eaecf0; border-radius: 16px; background: #fff; box-shadow: 0 24px 72px rgba(16, 24, 40, .28); }
.auth-agreement-modal h2 { margin: 0; padding-right: 28px; color: #101828; font-size: 20px; }
.auth-agreement-content { min-height: 0; overflow: auto; color: #475467; font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.auth-agreement-modal > .primary { justify-self: end; min-width: 100px; }
.auth-disabled { padding: 14px; border-radius: 8px; background: #f2f4f7; color: #667085; }
@media (max-width: 560px) { .auth-modal { padding: 24px 18px; } .auth-agreement-modal { padding: 22px 18px; } }
@media (max-width: 560px) {
  html[data-storefront-channel="web"] .diy-search-main { gap: 4px; }
  html[data-storefront-channel="web"] .diy-product-type-filter { flex-basis: 76px; width: 76px; max-width: 76px; }
  html[data-storefront-channel="web"] .diy-search-main button { padding-right: 12px; padding-left: 12px; }
}

html[data-storefront-channel="web"] .web-toast-region {
  position: fixed;
  z-index: 3000;
  top: 20px;
  left: 50%;
  display: grid;
  width: min(440px, calc(100vw - 32px));
  gap: 9px;
  transform: translateX(-50%);
  pointer-events: none;
}

html[data-storefront-channel="web"] .toast.toast--web {
  position: relative;
  top: auto;
  left: auto;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 13px 18px 15px;
  overflow: hidden;
  transform: translateY(-8px) scale(.98);
  border: 1px solid #e5eaf2;
  border-radius: 15px;
  background: rgba(255, 255, 255, .98);
  color: #17233d;
  box-shadow: 0 16px 42px rgba(16, 42, 86, .16), 0 2px 8px rgba(16, 42, 86, .06);
  opacity: 0;
  animation: web-toast-enter .24s cubic-bezier(.2, .8, .2, 1) forwards;
  backdrop-filter: blur(12px);
}

html[data-storefront-channel="web"] .toast--web .toast-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #ecfdf3;
  color: #039855;
}

html[data-storefront-channel="web"] .toast--web .toast-icon svg { width: 21px; height: 21px; }
html[data-storefront-channel="web"] .toast--web .toast-copy { display: grid; min-width: 0; gap: 2px; }
html[data-storefront-channel="web"] .toast--web .toast-copy strong { color: #101828; font-size: 14px; font-weight: 700; line-height: 1.35; }
html[data-storefront-channel="web"] .toast--web .toast-message { overflow-wrap: anywhere; color: #475467; font-size: 13px; line-height: 1.45; }
html[data-storefront-channel="web"] .toast--web .toast-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #eaf0f8; }
html[data-storefront-channel="web"] .toast--web .toast-progress::after { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, #12b76a, #67d9a0); content: ""; animation: web-toast-progress 2.8s linear forwards; }
html[data-storefront-channel="web"] .toast--web.is-leaving { animation: web-toast-leave .2s ease-in forwards; }
html[data-storefront-channel="web"] .toast.toast--web.toast--auth { border-color: #d6e4ff; }
html[data-storefront-channel="web"] .toast--auth .toast-icon { background: #eff6ff; color: #155eef; }
html[data-storefront-channel="web"] .toast--auth .toast-progress::after { background: linear-gradient(90deg, #155eef, #84adff); animation-duration: 3.6s; }

@keyframes web-toast-enter { to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes web-toast-leave { to { transform: translateY(-6px) scale(.99); opacity: 0; } }
@keyframes web-toast-progress { to { transform: scaleX(0); } }

@media (max-width: 560px) {
  html[data-storefront-channel="web"] .web-toast-region { top: 12px; width: calc(100vw - 24px); }
  html[data-storefront-channel="web"] .toast.toast--web { min-height: 62px; padding: 11px 14px 13px; }
}

html[data-storefront-channel="web"] .diy-site-top-nav button { border-radius: 0; }
html[data-storefront-channel="web"] .auth-modal-close:focus-visible { outline: none; box-shadow: none; }
html[data-storefront-channel="web"] .diy-carousel-arrow,
html[data-storefront-channel="web"] .diy-carousel-indicators button,
html[data-storefront-channel="web"] .product-favorite,
html[data-storefront-channel="web"] .product-image-viewer-close,
html[data-storefront-channel="web"] .live-message-form .live-emoji-toggle,
html[data-storefront-channel="web"] .live-web-share-icon,
html[data-storefront-channel="web"] .live-product .live-product-buy,
html[data-storefront-channel="web"] .live-mobile-actions .live-mobile-cart,
html[data-storefront-channel="web"] .live-mobile-actions .live-mobile-share,
html[data-storefront-channel="web"] .live-h5-bottom .live-message-form .live-h5-send,
html[data-storefront-channel="web"] .live-h5-current-close,
html[data-storefront-channel="web"] .live-message-form .live-reply-draft button,
html[data-storefront-channel="web"] .live-h5-bottom .live-message-form .live-reply-draft button,
html[data-storefront-channel="web"] .live-web-input-shell > .live-web-send,
html[data-storefront-channel="web"] .live-h5-input-shell > .live-h5-send { border-radius: 50%; }
html[data-storefront-channel="web"] .diy-carousel-indicator-style--line .diy-carousel-indicators button { border-radius: 2px; }