:root {
  color-scheme: light;
  font-family: Inter, Segoe UI, Arial, sans-serif;
  background: #f4f3f0;
  color: #22262b;
  --flaksam-red: #ff0808;
  --flaksam-orange: #ff5a00;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

button,
input,
select {
  font: inherit;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

[hidden] {
  display: none !important;
}

.utilityBar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 7px clamp(14px, 3vw, 28px);
  background: var(--flaksam-orange);
  color: white;
  font-size: 13px;
}

.utilityBar div {
  display: flex;
  gap: 22px;
  align-items: center;
}

.utilityBar a {
  color: white;
  text-decoration: none;
}

.storeHeader {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  justify-content: stretch;
  align-items: center;
  gap: clamp(10px, 1.5vw, 18px);
  min-height: 64px;
  padding: 8px clamp(14px, 3vw, 28px);
  background: white;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}

.brand,
nav a {
  color: #22262b;
  text-decoration: none;
}

.brand {
  color: var(--flaksam-orange);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.logoBrand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: clamp(160px, 16vw, 225px);
  height: 52px;
}

.logoBrand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.headerSearch {
  display: flex;
  flex: 1 1 320px;
  max-width: 520px;
  min-width: 220px;
  gap: 0;
}

.headerSearch input {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--flaksam-red);
  border-right: 0;
  border-radius: 4px 0 0 4px;
}

.headerSearch button {
  border-radius: 0 4px 4px 0;
  background: var(--flaksam-red);
}

nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  margin-left: auto;
  white-space: nowrap;
}

nav a {
  font-size: 15px;
}

.headerLogoutButton {
  min-height: 42px;
  border: 0;
  border-radius: 4px;
  padding: 10px 18px;
  background: #eef3f1;
  color: var(--flaksam-red);
}

.headerLogoutButton:hover {
  background: #dfe9e5;
}

.navButton {
  min-height: 42px;
  border-radius: 0;
  background: white;
  color: var(--flaksam-red);
  outline: 4px solid var(--flaksam-red);
}

.navButton:hover {
  background: #fff5f5;
}

.navBox {
  border: 1px solid var(--flaksam-red);
  border-radius: 4px;
  padding: 10px 20px;
  color: var(--flaksam-red);
}

#cartBadge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--flaksam-red);
  color: white;
  font-size: 12px;
  margin-left: 4px;
}

.homeShell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 520px;
}

.categoryRail {
  position: sticky;
  top: 64px;
  z-index: 4;
  min-height: 520px;
  background:
    linear-gradient(rgba(245, 42, 32, 0.88), rgba(245, 42, 32, 0.9)),
    url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80");
  background-size: cover;
  color: white;
}

.categoryRail.collapsed {
  display: none;
}

.homeShell:has(.categoryRail.collapsed) {
  grid-template-columns: 1fr;
}

.railHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 12px;
  text-transform: uppercase;
}

.railHeader button {
  min-height: auto;
  padding: 2px 7px;
  background: transparent;
  font-size: 22px;
}

.categoryList {
  display: grid;
}

.categoryItem,
.viewAllButton {
  justify-content: flex-start;
  width: 100%;
  min-height: 48px;
  border-radius: 0;
  background: transparent;
  color: white;
  padding: 10px 14px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.categoryItem::before {
  content: "▣";
  margin-right: 10px;
}

.categoryItem:hover,
.categoryItem.active,
.viewAllButton:hover {
  background: rgba(255, 255, 255, 0.16);
}

.viewAllButton {
  display: flex;
  align-items: center;
  text-decoration: none;
  border: 4px solid rgba(255, 0, 0, 0.62);
}

.homeContent {
  padding: 18px 18px 0;
}

.promoGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 14px 30px;
}

.promoLarge,
.promoSmall,
.showcaseCard {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  min-height: 150px;
  padding: 24px;
  color: white;
  background-size: cover;
  background-position: center;
}

.promoLarge {
  grid-row: span 2;
  min-height: 304px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(255, 0, 0, 0.35)),
    url("https://images.unsplash.com/photo-1460353581641-37baddab0fa2?auto=format&fit=crop&w=1400&q=80");
}

.promoLarge p,
.promoLarge h1,
.promoSmall p,
.promoSmall h2,
.showcaseCard h2 {
  position: relative;
  z-index: 1;
  margin: 0;
}

.promoLarge h1 {
  max-width: 480px;
  margin: 8px 0 18px;
  font-size: 34px;
  line-height: 1.05;
  text-transform: uppercase;
}

.promoLarge a {
  position: relative;
  z-index: 1;
  width: fit-content;
  border-radius: 4px;
  background: var(--flaksam-red);
  color: white;
  padding: 10px 16px;
  text-decoration: none;
}

.sunglasses {
  background:
    linear-gradient(rgba(255, 87, 34, 0.16), rgba(0, 0, 0, 0.08)),
    url("https://images.unsplash.com/photo-1511499767150-a48a237f0083?auto=format&fit=crop&w=900&q=80");
}

.offer {
  background:
    linear-gradient(rgba(0, 78, 93, 0.56), rgba(0, 0, 0, 0.24)),
    url("https://images.unsplash.com/photo-1572635196237-14b3f281503f?auto=format&fit=crop&w=900&q=80");
}

.categoryShowcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 40px;
}

.showcaseCard {
  min-height: 220px;
}

.showcaseCard h2 {
  max-width: 340px;
  color: #101820;
  font-size: 30px;
}

.oil {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.72), rgba(255,255,255,0.06)),
    url("https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?auto=format&fit=crop&w=900&q=80");
}

.milk {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.76), rgba(255,255,255,0.12)),
    url("https://images.unsplash.com/photo-1550583724-b2692b85b150?auto=format&fit=crop&w=900&q=80");
}

.homeProducts {
  margin-top: 18px;
}

body.customerRoute .homeShell,
body.customerRoute .homeProducts {
  display: none;
}

.routeSection {
  display: none !important;
}

.routeSection.active {
  display: grid !important;
}

#ordersSection.routeSection.active {
  display: block !important;
}

.sectionHeader p {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  padding: 10px 16px;
  background: var(--flaksam-red);
  color: white;
  text-decoration: none;
  cursor: pointer;
}

button:hover {
  background: #d90000;
}

.section {
  width: min(1180px, calc(100% - 32px));
  margin: 30px auto;
}

.sectionHeader {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  margin-bottom: 14px;
}

.sectionHeader.compact {
  align-items: center;
}

h2 {
  margin: 0;
  font-size: 26px;
}

.sectionHeader p,
label,
.cartMeta,
.orderMeta {
  color: #69717c;
}

.noticeText {
  margin: 0 0 16px;
  border: 1px solid #ffd2d2;
  border-left: 4px solid #ff1212;
  border-radius: 6px;
  background: #fff7f7;
  color: #20242a;
  padding: 12px 14px;
  font-weight: 700;
}

select,
input {
  border: 1px solid #cfd6df;
  border-radius: 6px;
  background: white;
  padding: 9px 10px;
}

.catalogTools {
  display: flex;
  gap: 10px;
  align-items: center;
}

.catalogTools input {
  width: min(280px, 42vw);
}

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

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

.categoryTile {
  display: grid;
  gap: 12px;
  min-height: 150px;
  align-content: center;
  justify-items: center;
  border: 1px solid #e0ddd7;
  border-radius: 8px;
  background: white;
  color: #22262b;
  text-decoration: none;
}

.categoryTile span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff1f0;
  color: var(--flaksam-red);
  font-weight: 800;
}

.paginationDots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}

.paginationDots span {
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: white;
  border: 1px solid #e0ddd7;
}

.paginationDots .active {
  background: var(--flaksam-red);
  color: white;
}

.catalogPage {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.filterPanel {
  position: sticky;
  top: 94px;
  display: grid;
  gap: 14px;
}

.filterPanel h3 {
  margin: 0;
}

.filterList {
  display: grid;
  gap: 8px;
}

.rangeLabels {
  display: flex;
  justify-content: space-between;
  color: #69717c;
  font-size: 12px;
}

.sortControl {
  min-width: 230px;
}

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

.catalogProduct {
  display: grid;
  grid-template-columns: 1fr;
  background: white;
  border: 1px solid #e0ddd7;
  border-radius: 8px;
  overflow: hidden;
}

.catalogThumb {
  min-height: 170px;
  border-radius: 0;
  background: #e8ece8;
  color: #69717c;
  font-size: 34px;
  font-weight: 800;
}

.catalogBody {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.catalogBody h3,
.catalogBody p {
  margin: 0;
}

.ratingLine {
  color: #f59e0b;
  font-size: 14px;
}

.ratingLine span {
  color: #69717c;
}

.catalogPrice {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.catalogPrice s,
.catalogBody p {
  color: #69717c;
}

.catalogPrice strong {
  font-size: 18px;
}

.catalogPrice span {
  color: var(--flaksam-red);
  font-weight: 700;
}

.productCard,
.panel {
  background: white;
  border: 1px solid #e0ddd7;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.productImage {
  width: 100%;
  border: 0;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: #e8ece8;
  color: #69717c;
  border-radius: 8px 8px 0 0;
  font-weight: 700;
}

.productBody {
  padding: 14px;
}

.productBody h3 {
  margin: 0 0 8px;
}

.productBody p {
  min-height: 44px;
  margin: 0 0 12px;
  color: #69717c;
  line-height: 1.45;
}

.vendorLine {
  display: block;
  margin: -4px 0 10px;
  color: #69717c;
  font-size: 13px;
  font-weight: 700;
}

.priceLine {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.productActions,
.quantityControls,
.cartActions,
.formActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.secondaryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 6px;
  padding: 10px 16px;
  background: #eef3f1;
  color: var(--flaksam-red);
  text-decoration: none;
}

.secondaryButton:hover {
  background: #dfe9e5;
}

.dangerButton {
  background: #fff1f0;
  color: #a83f35;
}

.dangerButton:hover {
  background: #ffe0dd;
}

.quantityControls {
  margin-top: 8px;
}

.quantityControls button {
  width: 34px;
  min-height: 34px;
  padding: 0;
}

.quantityControls span {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
}

.priceLine strong {
  font-size: 18px;
}

.panel {
  padding: 16px;
}

.authSection {
  display: grid;
  justify-items: center;
}

.authPanel {
  width: min(520px, 100%);
}

.loginOptions,
.socialLogin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.socialAuthButton {
  gap: 8px;
  min-width: 132px;
  border: 1px solid #d8e0e7;
  background: #ffffff;
  color: #20242a;
}

.socialAuthButton::before {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: white;
  font-size: 13px;
  font-weight: 800;
}

.googleButton::before {
  content: "G";
  background: #ea4335;
}

.facebookButton::before {
  content: "f";
  background: #1877f2;
}

.socialAuthButton:hover {
  background: #f7fafc;
}

.checkRow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.accountShell {
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.accountMenu {
  position: sticky;
  top: 94px;
  display: grid;
  gap: 8px;
  background: white;
  border: 1px solid #e0ddd7;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.compactMenu {
  padding-top: 18px;
}

.accountMenu a,
.accountMenu button {
  justify-content: flex-start;
  width: 100%;
  border-radius: 0;
  padding: 11px 12px;
  color: var(--flaksam-red);
  text-decoration: none;
}

.accountMenu a.active,
.accountMenu a:hover {
  background: var(--flaksam-red);
  color: white;
}

.avatarCircle {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: var(--flaksam-red);
  color: white;
  font-size: 28px;
  font-weight: 800;
  background-size: cover;
  background-position: center;
}

.avatarCircle.hasImage {
  color: transparent;
}

.formImagePreview {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  border: 1px solid #edf0f4;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fbfcfd;
}

.previewAvatar {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--flaksam-red);
  color: white;
  font-weight: 800;
  background-position: center;
  background-size: cover;
}

.previewAvatar.hasImage {
  color: transparent;
}

.formImagePreview strong {
  color: #22262b;
}

.accountMenu strong,
.accountMenu span {
  text-align: center;
}

.accountMenu span {
  color: #69717c;
  font-size: 12px;
  line-height: 1.4;
}

.accountContent {
  min-height: 360px;
}

.profileDetails {
  display: grid;
  gap: 0;
  margin: 0;
}

.orderTimeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 18px;
  border: 1px solid #edf0f4;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.orderTimeline div {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 86px;
  padding: 15px 14px 14px 38px;
  border-right: 1px solid #edf0f4;
}

.orderTimeline div:last-child {
  border-right: 0;
}

.orderTimeline span {
  position: absolute;
  left: 14px;
  top: 18px;
  width: 12px;
  height: 12px;
  border: 2px solid #cfd6df;
  border-radius: 50%;
  background: white;
}

.orderTimeline .active span {
  border-color: #ff1212;
  background: #ff1212;
}

.orderTimeline strong {
  font-size: 14px;
}

.orderTimeline small {
  color: #69717c;
  font-size: 12px;
}

.profileDetails div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #edf0f4;
}

.profileDetails dt {
  color: #69717c;
  font-weight: 700;
}

.profileDetails dd {
  margin: 0;
}

.narrowForm {
  max-width: 520px;
}

.cartItem,
.orderItem {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #edf0f4;
}

.orderItem {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.cartItem:last-child,
.orderItem:last-child {
  border-bottom: 0;
}

.cartItem h3,
.orderItem h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.cartThumb {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #e8ece8;
  color: #69717c;
  font-weight: 800;
}

.cartPanel,
.checkoutPanel {
  width: min(920px, 100%);
  margin: 0 auto;
}

.cartFooter {
  display: grid;
  grid-template-columns: auto minmax(240px, 340px) auto;
  gap: 16px;
  align-items: center;
  padding-top: 16px;
}

.orderFilters {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 8px;
}

.wireTable {
  display: grid;
  margin-top: 18px;
  border: 1px solid #e0ddd7;
  border-radius: 8px;
  overflow: hidden;
}

.wireTable > div {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr 0.8fr 0.8fr 0.8fr 0.8fr;
}

.wireTable span {
  padding: 12px;
  border-bottom: 1px solid #edf0f4;
}

.wireHead {
  background: #f8fafc;
  font-weight: 800;
}

.disputeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.disputeGrid article {
  border: 1px solid #e0ddd7;
  border-radius: 8px;
  padding: 16px;
}

.disputeGrid h3,
.disputeGrid p {
  margin: 0 0 8px;
}

.imageStrip {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.imageStrip span {
  width: 86px;
  height: 70px;
  border-radius: 6px;
  background: #e8ece8;
}

form {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

fieldset {
  display: grid;
  gap: 10px;
  margin: 0;
  border: 1px solid #edf0f4;
  border-radius: 8px;
  padding: 12px;
}

legend {
  padding: 0 6px;
  color: #22262b;
  font-size: 13px;
  font-weight: 700;
}

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

.addressGrid .wide {
  grid-column: 1 / -1;
}

.accountSection {
  grid-template-columns: 1fr 420px;
}

.accountSummary {
  margin: 0;
  color: #69717c;
  line-height: 1.55;
}

#accountStatus,
#checkoutStatus {
  color: var(--flaksam-red);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.totals {
  display: grid;
  gap: 8px;
  border-top: 1px solid #edf0f4;
  padding-top: 12px;
}

.totals div {
  display: flex;
  justify-content: space-between;
}

.productDialog {
  width: min(760px, calc(100% - 28px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.28);
}

.productDialog::backdrop {
  background: rgba(17, 24, 39, 0.52);
}

.dialogClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  min-height: 34px;
  padding: 0;
  background: rgba(255, 255, 255, 0.94);
  color: #22262b;
}

.detailLayout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  overflow: hidden;
  background: white;
  border: 1px solid #e0ddd7;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.detailImage {
  min-height: 330px;
  display: grid;
  place-items: center;
  background: #e8ece8;
  color: #69717c;
  font-size: 48px;
  font-weight: 800;
}

.detailBody {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 28px;
}

.detailBody h2,
.detailBody p {
  margin: 0;
}

.detailMeta {
  color: #69717c;
  line-height: 1.55;
}

.featureList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin: 0;
}

.featureList div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px;
}

.featureList dt {
  color: #69717c;
  font-weight: 700;
}

.featureList dd {
  margin: 0;
}

.reviewsBlock {
  display: grid;
  gap: 12px;
  border-top: 1px solid #edf0f4;
  padding-top: 14px;
}

.reviewsBlock h3,
.reviewsBlock p {
  margin: 0;
}

.reviewsBlock article {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid #edf0f4;
}

.reviewsBlock span {
  color: #f59e0b;
  font-weight: 800;
}

.relatedProducts {
  margin-top: 22px;
}

.miniProduct {
  display: grid;
  gap: 8px;
  background: white;
  border: 1px solid #e0ddd7;
  border-radius: 8px;
  padding: 12px;
}

.miniProduct div {
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #e8ece8;
  color: #69717c;
  font-weight: 800;
}

.miniProduct h3,
.miniProduct p {
  margin: 0;
}

.storeFooter {
  margin-top: 34px;
  background: #dfeafa;
  color: #111827;
}

.storeFooter section {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.7fr 1.2fr;
  gap: 34px;
  padding: 28px 0;
}

.storeFooter article,
.footerSubscribe {
  display: grid;
  align-content: start;
  gap: 8px;
}

.storeFooter h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.storeFooter a,
.storeFooter p {
  margin: 0;
  color: #374151;
  font-size: 13px;
  line-height: 1.55;
  text-decoration: none;
}

.footerSubscribe {
  grid-template-columns: 1fr auto;
  gap: 0;
}

.footerSubscribe input {
  border-radius: 4px 0 0 4px;
}

.footerSubscribe button {
  border-radius: 0 4px 4px 0;
}

.supportForm {
  grid-template-columns: 1fr;
  gap: 8px;
}

.supportForm input,
.supportForm textarea,
.supportForm button {
  border-radius: 4px;
}

.supportForm textarea {
  border: 1px solid #cfd6df;
  padding: 9px 10px;
  resize: vertical;
}

.supportForm span {
  min-height: 18px;
  color: #374151;
  font-size: 13px;
}

@media (max-width: 900px) {
  .utilityBar,
  .storeHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .homeShell,
  .promoGrid,
  .categoryShowcase,
  .storeFooter section,
  .footerSubscribe,
  .productsGrid,
  .categoryTiles,
  .catalogPage,
  .catalogGrid,
  .featureList,
  .featureList div,
  .accountShell,
  .cartFooter,
  .orderFilters,
  .wireTable > div,
  .disputeGrid,
  .detailLayout {
    grid-template-columns: 1fr;
  }

  .accountMenu {
    position: static;
  }

  .filterPanel {
    position: static;
  }

  .profileDetails div,
  .cartItem,
  .orderItem {
    grid-template-columns: 1fr;
  }

  .categoryRail {
    position: static;
    min-height: auto;
  }

  .sectionHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .catalogTools,
  nav {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .catalogTools input {
    width: 100%;
  }

  .addressGrid {
    grid-template-columns: 1fr;
  }
}