/* ============================================================
   7Kicks — full stylesheet (de-inlined)
   Fonts + globals + one class per original inline style block.
   Hover states reproduce the original style-hover attributes.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap");

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  color: #0a0a0a;
  background: #0a0a0a;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

@keyframes mq {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes mqr {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-16px);
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

details > summary {
  list-style: none;
  cursor: pointer;
}

details > summary::-webkit-details-marker {
  display: none;
}

details[open] .bchev {
  transform: rotate(45deg);
}

.bchev {
  transition: transform 0.2s ease;
}

#b-shell #nav-links {
  display: flex;
}

#b-shell #burger {
  display: none;
}

#b-shell #bottom-nav {
  display: none;
}

/* ---- Section styles (one class per original inline block) ---- */
.k001 {
  background: #0a0a0a;
  overflow-x: hidden;
}

.k002 {
  background: #d8ff3e;
  border-bottom: 2.5px solid #0a0a0a;
  overflow: hidden;
  white-space: nowrap;
}

.k003 {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding: 8px 0;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0a0a0a;
  animation: mq 22s linear infinite;
  will-change: transform;
}

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

.k005 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b2e;
  animation: blink 1s steps(1) infinite;
}

.k006 {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #0a0a0a;
  border-bottom: 2.5px solid #d8ff3e;
}

.k007 {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px);
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

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

.k009 {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 2px solid #d8ff3e;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: #d8ff3e;
  border-radius: 3px;
}

.k010 {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  font-family: "Anton", sans-serif;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.k011 {
  background: #d8ff3e;
  color: #0a0a0a;
  padding: 1px 8px;
  border-radius: 4px;
  transform: rotate(-3deg);
  display: inline-block;
}

.k012 {
  gap: 30px;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
}

.k013 {
  text-decoration: none;
  color: #d8ff3e;
  display: flex;
  align-items: center;
  gap: 6px;
}

.k014 {
  text-decoration: none;
  color: #ffffff;
}

.k015 {
  text-decoration: none;
  color: #ff3b2e;
}

.k016 {
  align-items: center;
  gap: 9px;
  border: 2px solid #2a2a2a;
  border-radius: 3px;
  padding: 8px 13px;
  display: flex;
}

.k017 {
  border: none;
  outline: none;
  background: transparent;
  font-family: "Space Mono";
  font-size: 11px;
  letter-spacing: 0.1em;
  width: 90px;
  color: #fff;
}

.k018 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #fff;
  text-decoration: none;
  background: #d8ff3e;
  border-radius: 3px;
}

.k019 {
  position: absolute;
  top: -7px;
  right: -7px;
  background: #ff3b2e;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  min-width: 19px;
  height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0a0a0a;
}

.k020 {
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 54px 54px;
}

.k021 {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 68px) clamp(16px, 4vw, 56px) 0;
}

.k022 {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

.k023 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d8ff3e;
  border: 1.5px solid #2a2a2a;
  padding: 6px 12px;
  border-radius: 3px;
}

.k024 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(62px, 9.2vw, 138px);
  line-height: 0.8;
  text-transform: uppercase;
  margin: 20px 0 0;
  letter-spacing: 0.005em;
  color: #fff;
}

.k025 {
  display: block;
  color: transparent;
  -webkit-text-stroke: 2px #fff;
}

.k026 {
  display: inline-block;
  background: #d8ff3e;
  color: #0a0a0a;
  padding: 0 12px;
  transform: rotate(-1.5deg);
  margin: 8px 0;
  border: 3px solid #0a0a0a;
  box-shadow: 7px 7px 0 #ff3b2e;
}

.k027 {
  display: block;
  color: #fff;
}

.k028 {
  margin: 26px 0 0;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.5;
  color: #b9b9b9;
  max-width: 430px;
}
@media (min-width: 768px) {
  .k028 {
    margin-bottom: 30px;
  }
}
.k029 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.k030 {
  text-decoration: none;
  background: #d8ff3e;
  color: #0a0a0a;
  border: 2.5px solid #0a0a0a;
  box-shadow: 6px 6px 0 #ffffff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 3px;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.k030:hover {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 #ffffff;
}

.k031 {
  text-decoration: none;
  background: transparent;
  color: #fff;
  border: 2.5px solid #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 26px;
  border-radius: 3px;
  transition:
    background 0.15s,
    color 0.15s;
}

.k031:hover {
  background: #fff;
  color: #0a0a0a;
}

.k032 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  font-family: "Space Mono";
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #888;
}

.k033 {
  color: #d8ff3e;
}

.k034 {
  color: #fff;
  font-weight: 700;
}

.k035 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0 40px;
}

.k036 {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 4;
  width: 108px;
  height: 108px;
}

.k037 {
  width: 100%;
  height: 100%;
  animation: spin 9s linear infinite;
}

.k038 {
  font-family: "Space Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.k039 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.k040 {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #d8ff3e;
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
}

.k041 {
  position: relative;
  width: min(100%, 420px);
  background: #d8ff3e;
  border: 3px solid #0a0a0a;
  border-radius: 6px;
  box-shadow: 12px 12px 0 #ff3b2e;
  padding: 14px;
  animation: floaty 5s ease-in-out infinite;
}

.k042 {
  position: absolute;
  top: -14px;
  right: 16px;
  z-index: 3;
  background: #ff3b2e;
  color: #fff;
  font-family: "Space Mono";
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 11px;
  border: 2px solid #0a0a0a;
  border-radius: 3px;
  transform: rotate(4deg);
}

.k043 {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 3px;
}

.k044 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 0 4px;
}

.k045 {
  margin: 0;
  font-family: "Anton";
  font-size: 22px;
  text-transform: uppercase;
  color: #0a0a0a;
  line-height: 1;
}

.k046 {
  margin: 4px 0 0;
  font-family: "Space Mono";
  font-size: 11px;
  color: #0a0a0a;
  letter-spacing: 0.04em;
}

.k047 {
  text-align: right;
}

.k048 {
  margin: 0;
  font-weight: 800;
  font-size: 19px;
  color: #0a0a0a;
}

.k049 {
  margin: 0;
  font-size: 12px;
  color: #0a0a0a;
  text-decoration: line-through;
  opacity: 0.55;
}

.k050 {
  margin-top: clamp(28px, 4vw, 52px);
  background: #fff;
  border-top: 2.5px solid #d8ff3e;
  border-bottom: 2.5px solid #d8ff3e;
  overflow: hidden;
  white-space: nowrap;
}

.k051 {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  font-family: "Anton";
  font-size: clamp(28px, 4vw, 52px);
  text-transform: uppercase;
  color: #0a0a0a;
  animation: mqr 18s linear infinite;
  will-change: transform;
}

.k052 {
  padding: 10px 0;
}

.k053 {
  color: #d8ff3e;
  -webkit-text-stroke: 1.5px #0a0a0a;
}

.k054 {
  background: #0a0a0a;
  padding: clamp(50px, 7vw, 92px) 0;
}

.k055 {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px);
}

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

.k057 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 5.5vw, 72px);
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}

.k058 {
  font-family: "Space Mono";
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #777;
}

.k059 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.k060 {
  position: relative;
  display: block;
  background: #d8ff3e;
  border: 2.5px solid #0a0a0a;
  border-radius: 5px;
  padding: 22px;
  min-height: 200px;
  text-decoration: none;
  color: #0a0a0a;
  overflow: hidden;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

.k060:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 #fff;
}

.k061 {
  font-family: "Space Mono";
  font-size: 12px;
  font-weight: 700;
}

.k062 {
  font-family: "Anton";
  font-size: 34px;
  text-transform: uppercase;
  margin: 60px 0 0;
  line-height: 0.9;
}

.k063 {
  font-family: "Space Mono";
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.k064 {
  position: relative;
  display: block;
  background: #1a1a1a;
  border: 2.5px solid #2e2e2e;
  border-radius: 5px;
  padding: 22px;
  min-height: 200px;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

.k064:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 #d8ff3e;
  border-color: #d8ff3e;
}

.k065 {
  font-family: "Space Mono";
  font-size: 12px;
  font-weight: 700;
  color: #777;
}

.k066 {
  font-family: "Space Mono";
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #d8ff3e;
}

.k067 {
  position: relative;
  display: block;
  background: #fff;
  border: 2.5px solid #0a0a0a;
  border-radius: 5px;
  padding: 22px;
  min-height: 200px;
  text-decoration: none;
  color: #0a0a0a;
  overflow: hidden;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

.k067:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 #d8ff3e;
}

.k068 {
  position: relative;
  display: block;
  background: #ff3b2e;
  border: 2.5px solid #0a0a0a;
  border-radius: 5px;
  padding: 22px;
  min-height: 200px;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

.k068:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 #0a0a0a;
}

.k069 {
  position: absolute;
  top: 18px;
  right: 18px;
  background: #d8ff3e;
  color: #0a0a0a;
  font-family: "Space Mono";
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  border: 1.5px solid #0a0a0a;
}

.k070 {
  background: #d8ff3e;
  border-top: 2.5px solid #0a0a0a;
  border-bottom: 2.5px solid #0a0a0a;
  padding: clamp(46px, 6vw, 84px) 0;
}

.k071 {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}

.k072 {
  position: relative;
}

.k073 {
  position: absolute;
  z-index: 3;
  top: -16px;
  left: -10px;
  background: #ff3b2e;
  color: #fff;
  font-family: "Anton";
  font-size: 18px;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 2.5px solid #0a0a0a;
  border-radius: 3px;
  transform: rotate(-5deg);
}

.k074 {
  background: #fff;
  border: 3px solid #0a0a0a;
  border-radius: 6px;
  box-shadow: 12px 12px 0 #0a0a0a;
  padding: 14px;
}

.k075 {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 3px;
}

.k076 {
  font-family: "Space Mono";
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #0a0a0a;
}

.k077 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(38px, 5.5vw, 76px);
  line-height: 0.86;
  text-transform: uppercase;
  margin: 14px 0 0;
  color: #0a0a0a;
}

.k078 {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #1a1a1a;
  max-width: 440px;
  font-weight: 500;
}

.k079 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 20px;
}

.k080 {
  font-family: "Anton";
  font-size: 40px;
  color: #0a0a0a;
}

.k081 {
  font-size: 18px;
  color: #0a0a0a;
  text-decoration: line-through;
  opacity: 0.5;
}

.k082 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.k083 {
  text-decoration: none;
  background: #0a0a0a;
  color: #d8ff3e;
  border: 2.5px solid #0a0a0a;
  box-shadow: 6px 6px 0 #ff3b2e;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: 3px;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.k083 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.k083 svg {
  display: block;
  flex-shrink: 0;
  margin: 0;
}
.k083:hover {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 #ff3b2e;
}

.k084 {
  text-decoration: none;
  background: transparent;
  color: #0a0a0a;
  border: 2.5px solid #0a0a0a;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 26px;
  border-radius: 3px;
}

.k085 {
  position: relative;
  background: #0a0a0a;
  padding: clamp(50px, 7vw, 92px) 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 54px 54px;
}

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

.k087 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Space Mono";
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d8ff3e;
  border: 1.5px solid #2a2a2a;
  padding: 6px 12px;
  border-radius: 3px;
  margin-bottom: 18px;
}

.k088 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 5.5vw, 72px);
  line-height: 0.9;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}

.k089 {
  background: #d8ff3e;
  color: #0a0a0a;
  padding: 0 10px;
  display: inline-block;
  transform: rotate(-1.5deg);
  border: 3px solid #0a0a0a;
  box-shadow: 5px 5px 0 #ff3b2e;
}

.k090 {
  font-family: "Space Mono";
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #777;
  max-width: 240px;
  text-align: right;
}

.k091 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.k092 {
  background: #1a1a1a;
  border: 2.5px solid #2e2e2e;
  border-radius: 5px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    border-color 0.15s;
}

.k092:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 #d8ff3e;
  border-color: #d8ff3e;
}

.k093 {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 4px;
  background: #d8ff3e;
  border: 2.5px solid #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.k094 {
  margin: 0;
  font-family: "Anton";
  font-size: 22px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}

.k095 {
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #999;
}

.k096 {
  background: #d8ff3e;
  border: 2.5px solid #0a0a0a;
  border-radius: 5px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

.k096:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 #ff3b2e;
}

.k097 {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 4px;
  background: #0a0a0a;
  border: 2.5px solid #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.k098 {
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #1a1a1a;
  font-weight: 500;
}

.k099 {
  background: #fff;
  padding: clamp(50px, 7vw, 92px) 0;
}

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

.k101 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 5.5vw, 64px);
  line-height: 0.9;
  text-transform: uppercase;
  margin: 0;
  color: #0a0a0a;
}

.k102 {
  text-decoration: none;
  font-family: "Space Mono";
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0a0a0a;
  border: 2px solid #0a0a0a;
  padding: 11px 16px;
  border-radius: 3px;
}

.k102:hover {
  background: #d8ff3e;
}

.k103 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.k104 {
  background: #fff;
  border: 2.5px solid #0a0a0a;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease;
}

.k104:hover {
  transform: translate(-4px, -4px) rotate(-1deg);
  box-shadow: 9px 9px 0 #0a0a0a;
}

.k105 {
  position: relative;
  background: #f1efe7;
  border-bottom: 2.5px solid #0a0a0a;
}

.k106 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: #d8ff3e;
  color: #0a0a0a;
  font-family: "Space Mono";
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 9px;
  border: 1.5px solid #0a0a0a;
  border-radius: 3px;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.k107 {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
}

.k108 {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.k109 {
  margin: 0;
  font-family: "Anton";
  font-size: 19px;
  text-transform: uppercase;
  color: #0a0a0a;
  line-height: 1;
}

.k110 {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: auto;
}

.k111 {
  font-weight: 800;
  font-size: 17px;
  color: #0a0a0a;
}

.k112 {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.k113 {
  font-family: "Space Mono";
  font-size: 10px;
  font-weight: 700;
  color: #ff3b2e;
}

.k114 {
  margin-top: 2px;
  width: 100%;
  border: 2px solid #0a0a0a;
  background: #0a0a0a;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 11px;
  border-radius: 3px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.k114:hover {
  background: #d8ff3e;
  color: #0a0a0a;
}

.k115 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: #ff3b2e;
  color: #fff;
  font-family: "Space Mono";
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 9px;
  border: 1.5px solid #0a0a0a;
  border-radius: 3px;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.k116 {
  background: #0a0a0a;
  padding: clamp(50px, 7vw, 90px) 0;
  border-top: 2.5px solid #d8ff3e;
}

.k117 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0 0 36px;
  color: #fff;
}

.k118 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.k119 {
  border: 2.5px solid #2a2a2a;
  border-radius: 5px;
  padding: 24px;
}

.k120 {
  font-family: "Anton";
  font-size: clamp(40px, 5vw, 60px);
  color: #d8ff3e;
  margin: 0;
  line-height: 1;
}

.k121 {
  margin: 10px 0 0;
  font-weight: 800;
  color: #fff;
  font-size: 15px;
}

.k122 {
  margin: 5px 0 0;
  font-size: 13px;
  color: #999;
}

.k123 {
  background: #fff;
  padding: clamp(46px, 6vw, 80px) 0;
  overflow: hidden;
}

.k124 {
  max-width: 1320px;
  margin: 0 auto 26px;
  padding: 0 clamp(16px, 4vw, 56px);
}

.k125 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 72px);
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
  color: #0a0a0a;
}

.k126 {
  background: #d8ff3e;
  padding: 0 8px;
}

.k127 {
  overflow: hidden;
  white-space: nowrap;
}

.k128 {
  display: inline-flex;
  gap: 18px;
  padding: 6px clamp(16px, 4vw, 56px);
  animation: mq 30s linear infinite;
  will-change: transform;
}

.k129 {
  white-space: normal;
  flex: none;
  width: 330px;
  background: #f4f2ea;
  border: 2.5px solid #0a0a0a;
  border-radius: 5px;
  padding: 20px;
}

.k130 {
  color: #ff3b2e;
  letter-spacing: 2px;
}

.k131 {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #1a1a1a;
}

.k132 {
  margin: 16px 0 0;
  font-family: "Space Mono";
  font-size: 12px;
  color: #0a0a0a;
}

.k133 {
  white-space: normal;
  flex: none;
  width: 330px;
  background: #d8ff3e;
  border: 2.5px solid #0a0a0a;
  border-radius: 5px;
  padding: 20px;
}

.k134 {
  color: #0a0a0a;
  letter-spacing: 2px;
}

.k135 {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #0a0a0a;
  font-weight: 500;
}

.k136 {
  white-space: normal;
  flex: none;
  width: 330px;
  background: #0a0a0a;
  border: 2.5px solid #0a0a0a;
  border-radius: 5px;
  padding: 20px;
}

.k137 {
  color: #d8ff3e;
  letter-spacing: 2px;
}

.k138 {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}

.k139 {
  margin: 14px 0 0;
  font-family: "Space Mono";
  font-size: 12px;
  color: #d8ff3e;
}

.k140 {
  background: #d8ff3e;
  border-top: 2.5px solid #0a0a0a;
  border-bottom: 2.5px solid #0a0a0a;
  padding: clamp(50px, 7vw, 88px) 0;
}

.k141 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.k142 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.k143 {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 5px;
  background: #0a0a0a;
  border: 2.5px solid #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 5px 5px 0 #ff3b2e;
}

.k144 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 5.5vw, 72px);
  line-height: 0.9;
  text-transform: uppercase;
  margin: 0;
  color: #0a0a0a;
}

.k145 {
  margin: 6px 0 0;
  font-family: "Space Mono";
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #0a0a0a;
}

.k146 {
  text-decoration: none;
  background: #0a0a0a;
  color: #d8ff3e;
  border: 2.5px solid #0a0a0a;
  box-shadow: 6px 6px 0 #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}

.k146:hover {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 #fff;
}

.k147 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.k148 {
  position: relative;
  display: block;
  border: 2.5px solid #0a0a0a;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

.k148:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 #0a0a0a;
}

.k149 {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.65);
}

.k150 {
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
  border-top: 2.5px solid #d8ff3e;
}

.k151 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.32;
}

.k152 {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(60px, 9vw, 120px) clamp(16px, 4vw, 56px);
}

.k153 {
  font-family: "Space Mono";
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d8ff3e;
}

.k154 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(44px, 8vw, 116px);
  line-height: 0.84;
  text-transform: uppercase;
  margin: 16px 0 0;
  color: #fff;
  max-width: 13ch;
}

.k155 {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #cfcfcf;
  max-width: 520px;
}

.k156 {
  display: inline-block;
  margin-top: 30px;
  text-decoration: none;
  background: #d8ff3e;
  color: #0a0a0a;
  border: 2.5px solid #0a0a0a;
  box-shadow: 6px 6px 0 #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: 3px;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}

.k156:hover {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 #fff;
}

.k157 {
  background: #fff;
  padding: clamp(50px, 7vw, 90px) 0;
}

.k158 {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}

.k159 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 5.5vw, 60px);
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0 0 30px;
  color: #0a0a0a;
}

.k160 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.k161 {
  border: 2.5px solid #0a0a0a;
  border-radius: 4px;
  background: #fff;
  padding: 0 18px;
}

.k162 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0;
  font-weight: 800;
  font-size: 15.5px;
  color: #0a0a0a;
  text-transform: uppercase;
  font-family: "Space Mono";
  letter-spacing: 0.02em;
}

.k163 {
  flex: none;
  font-size: 22px;
  line-height: 1;
  color: #0a0a0a;
}

.k164 {
  margin: 0;
  padding: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #444;
}

.k165 {
  background: #d8ff3e;
  border-top: 2.5px solid #0a0a0a;
  border-bottom: 2.5px solid #0a0a0a;
}

.k166 {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(34px, 4vw, 52px) clamp(16px, 4vw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.k167 {
  display: flex;
  align-items: center;
  gap: 18px;
}

.k168 {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid #0a0a0a;
}

.k169 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
  color: #0a0a0a;
}

.k170 {
  margin: 8px 0 0;
  font-size: 15px;
  color: #1a1a1a;
  max-width: 440px;
  font-weight: 500;
}

.k171 {
  text-decoration: none;
  background: #0a0a0a;
  color: #fff;
  border: 2.5px solid #0a0a0a;
  box-shadow: 6px 6px 0 #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 18px 32px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}

.k171:hover {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 #fff;
}

.k172 {
  background: #0a0a0a;
  color: #cfcfcf;
}

.k173 {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) clamp(16px, 4vw, 56px) 30px;
}

.k174 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 32px;
}

.k175 {
  grid-column: 1/-1;
  max-width: 440px;
}

.k176 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Anton";
  font-size: 34px;
  color: #fff;
}

.k177 {
  background: #d8ff3e;
  color: #0a0a0a;
  padding: 1px 9px;
  border-radius: 4px;
  transform: rotate(-3deg);
  display: inline-block;
}

.k178 {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #888;
  max-width: 360px;
}

.k179 {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.k180 {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  border: 2px solid #2e2e2e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
}

.k180:hover {
  background: #d8ff3e;
  color: #0a0a0a;
  border-color: #d8ff3e;
}

.k181 {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  border: 2px solid #2e2e2e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #25d366;
  text-decoration: none;
}

.k181:hover {
  background: #25d366;
  color: #0a0a0a;
  border-color: #25d366;
}

.k182 {
  margin: 0 0 14px;
  font-family: "Space Mono";
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

.k183 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.k184 {
  text-decoration: none;
  color: #888;
}

.k185 {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 2px solid #1e1e1e;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.k186 {
  margin: 0;
  font-size: 12.5px;
  color: #666;
}

.k187 {
  margin: 0;
  font-family: "Space Mono";
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #666;
  text-transform: uppercase;
}

.k188 {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 70;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 2.5px #0a0a0a,
    6px 6px 0 #0a0a0a;
  text-decoration: none;
}

.k188:hover {
  transform: scale(1.06);
}

.k189 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 65;
  background: #0a0a0a;
  border-top: 2.5px solid #d8ff3e;
  height: 64px;
  align-items: center;
  justify-content: space-around;
  padding: 0 6px;
}

.k190 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: #d8ff3e;
  font-family: "Space Mono";
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.k191 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: #888;
  font-family: "Space Mono";
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.k192 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: #888;
  font-family: "Space Mono";
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.k193 {
  position: absolute;
  top: -3px;
  right: 8px;
  background: #ff3b2e;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  min-width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.k194 {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.6);
}

.k195 {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 91;
  width: min(86vw, 350px);
  background: #0a0a0a;
  border-right: 2.5px solid #d8ff3e;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.k196 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.k197 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Anton";
  font-size: 26px;
  color: #fff;
}

.k198 {
  width: 40px;
  height: 40px;
  border: 2px solid #2e2e2e;
  background: transparent;
  cursor: pointer;
  color: #fff;
  border-radius: 3px;
}

.k199 {
  text-decoration: none;
  color: #d8ff3e;
  font-family: "Anton";
  font-size: 26px;
  text-transform: uppercase;
  padding: 11px 0;
  border-bottom: 1px solid #1e1e1e;
}

.k200 {
  text-decoration: none;
  color: #fff;
  font-family: "Anton";
  font-size: 26px;
  text-transform: uppercase;
  padding: 11px 0;
  border-bottom: 1px solid #1e1e1e;
}

.k201 {
  text-decoration: none;
  color: #ff3b2e;
  font-family: "Anton";
  font-size: 26px;
  text-transform: uppercase;
  padding: 11px 0;
  border-bottom: 1px solid #1e1e1e;
}

.k202 {
  margin-top: auto;
  text-decoration: none;
  background: #25d366;
  color: #fff;
  border: 2.5px solid #0a0a0a;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 15px;
  border-radius: 4px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

/* ---- Responsive ---- */
@media (max-width: 880px) {
  #b-shell #nav-links {
    display: none !important;
  }

  #b-shell #header-extra {
    display: none !important;
  }

  #b-shell #burger {
    display: inline-flex !important;
  }

  #b-shell #hero-grid {
    grid-template-columns: 1fr !important;
  }

  #b-shell #drop-grid {
    grid-template-columns: 1fr !important;
  }

  #b-shell #bottom-nav {
    display: flex !important;
  }

  #b-shell {
    padding-bottom: 64px;
  }

  #b-shell #hero-h1 {
    font-size: clamp(58px, 19vw, 120px) !important;
  }
}

/* ============================================================
   7KICKS HERO (main banner) — MOBILE RESPONSIVE
   The hero is a single Swiper "custom HTML" slide. Its desktop
   2-column layout forces the slide to ~1186px, which then gets
   clipped to the phone width. The pasted markup has no #b-shell
   wrapper, so the old #b-shell rules above never applied.
   Here we constrain the slide and stack the hero on <1024px.
   ============================================================ */
@media (max-width: 1023px) {
  .banner .swiper-slide {
    width: 100% !important;
    max-width: 100vw !important;
  }
  .custom-html-slide {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .k020 {
    width: 100% !important;
  }
  .k021 {
    max-width: 100% !important;
    padding: 24px 16px 0 !important;
  }
  /* stack hero; show the product card first, then the text */
  #hero-grid,
  .k022 {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  .k022 .k035 {
    order: -1 !important;
  }
  .k022 > div:first-child {
    order: 0 !important;
  }
  #hero-h1,
  .k024 {
    font-size: clamp(44px, 13vw, 66px) !important;
  }
  .k035 {
    padding: 8px 0 24px !important;
  }
  .k041 {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
  /* smaller spinning stamp so it doesn't overflow the card */
  .k036 {
    width: 84px !important;
    height: 84px !important;
    top: -4px !important;
    left: -4px !important;
  }
  /* also stack the "drop of the week" 2-column block */
  #drop-grid,
  .k071 {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Image placeholders (were <image-slot>; drop real <img> in here) ---- */
.img-slot {
  background: #f1efe7
    repeating-linear-gradient(
      45deg,
      transparent 0 10px,
      rgba(0, 0, 0, 0.035) 10px 20px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.img-slot::after {
  content: attr(data-ph);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a9a9a;
  text-align: center;
  padding: 10px;
}

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

#drawer {
  display: none;
}

@media (max-width: 880px) {
  #drawer.open {
    display: flex;
  }
}

/* ---- Mobile drawer wrapper ---- */
.drawer-wrap {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
}

/* ============================================================
   7KICKS HEADER  —  monarque theme (header.luxury-header)
   CSS-only. Collapses the theme's two header rows (utility-bar +
   main-header) into one 7Kicks row on desktop:
      [ yellow ticker ]
      [ logo | nav | search · account · cart ]
   Targets the live theme classes (.utility-bar / .main-header /
   .desktop-nav / .badge-icon-btn ...). The old .app-bar-main and
   .menu-bar rules that used to live here targeted a different
   theme and never applied, so they were removed.
   ============================================================ */

:root {
  --k-yellow: #d8ff3e;
  --k-black: #0a0a0a;
  --k-red: #ff3b2e;
  /* keeps mobile burger / search / cart icons visible on the black bar */
  --header-accent: #fff;
}

/* ---- Header shell ---- */
header.luxury-header {
  background: var(--k-black) !important;
  border-bottom: 2.5px solid var(--k-yellow) !important;
}

.k146 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.k124 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* ---- Announcement ticker (wraps the .k002 marquee) ---- */
.notice {
  padding: 0 !important;
  background: var(--k-yellow) !important;
  border-bottom: 2.5px solid var(--k-black) !important;
  overflow: hidden !important;
}

/* ---- Nav links ---- */
.desktop-nav .nav-link {
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #fff !important;
  padding: 0 !important;
}
.desktop-nav .space-x-6 > div:first-child .nav-link {
  color: var(--k-yellow) !important;
}
.desktop-nav .space-x-6 > div:last-child .nav-link {
  color: var(--k-red) !important;
}
.desktop-nav .nav-link:hover {
  opacity: 0.8 !important;
}

/* ---- Search box ---- */
.utility-icons .search-container {
  border: 2px solid #2a2a2a !important;
  border-radius: 3px !important;
  height: 42px !important; /* match the cart square height */
  padding: 0 12px !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
/* keep the search box always visible (theme hides it until hover) */
.utility-icons .search-container .input-container {
  display: block !important;
  width: 104px !important;
  order: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* drop the 1px line the theme slides in under the box on hover */
.utility-icons .search-container::before {
  display: none !important;
}
/* magnifier sits on the LEFT of the field */
.utility-icons .search-container .search-icon {
  order: 1 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.utility-icons .search-container #desktop-search-bar {
  color: #fff !important;
  font-family: "Space Mono", monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.utility-icons .search-container #desktop-search-bar::placeholder {
  color: #888 !important;
  opacity: 1 !important;
}
.utility-icons .search-container .search-icon svg {
  color: #888 !important;
  stroke: #888 !important;
}
/* Stop the search field from auto-focusing on page load.
   The theme ships the desktop search input with an `autofocus` attribute, but it
   normally keeps the field visibility:hidden until you open it, so autofocus is a
   no-op. The rule above ("keep the search box always visible") makes the field
   focusable at load, which lets the browser act on that autofocus — jumping the
   cursor into search and popping the keyboard on mobile.
   A field that is visibility:hidden can't be focused, and native autofocus only
   fires once, at load. So we hold the input hidden for the first moment of the
   page load (via the animation's backwards-fill during the delay), which makes
   the browser skip the autofocus, then reveal it. The base state stays `visible`,
   so if animations are ever disabled the field is still shown and usable. */
@keyframes pysn-search-defer-focus {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}
.utility-icons .search-container #desktop-search-bar {
  visibility: visible;
  /* 0.1s delay = long enough to skip the page-load autofocus, short enough that
     the field appears almost instantly (minimal flicker). */
  animation: pysn-search-defer-focus 0.01s linear 0.1s backwards;
}

/* ---- Account icon (white on black) ---- */
.utility-icons > button.icon-button svg {
  color: #fff !important;
  stroke: #fff !important;
}

/* ---- Cart: yellow square + dark bag + red badge ---- */
.utility-icons .badge-icon-btn {
  width: 42px !important;
  height: 42px !important;
  background: var(--k-yellow) !important;
  border-radius: 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.utility-icons .badge-icon-btn svg {
  color: var(--k-black) !important;
  stroke: var(--k-black) !important;
}
.utility-icons .badge-icon-count {
  background: var(--k-red) !important;
  color: #fff !important;
  border: 2px solid var(--k-black) !important;
  font-weight: 800 !important;
  top: -7px !important;
  right: -7px !important;
  min-width: 19px !important;
  height: 19px !important;
}

/* Clicking the cart goes straight to the cart page: the cart button
   already routes to /cart-detail on click; hiding the hover preview
   popup means only the navigation happens. */
.cart-preview {
  display: none !important;
}

/* ---- Desktop (>=1024): single 7Kicks row ---- */
@media (min-width: 1024px) {
  /* fixed ticker height so the nav overlay lines up with the logo row */
  .notice {
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
  }

  .utility-bar {
    display: block !important;
    padding: 0 !important;
    background: var(--k-black) !important;
  }
  .utility-bar-content {
    max-width: 1320px;
    margin: 0 auto !important;
    padding: 0 clamp(16px, 4vw, 40px) !important;
    min-height: 66px !important;
    justify-content: space-between !important;
    gap: 16px;
    position: relative;
  }
  /* drop the empty left spacer so the logo sits on the left */
  .utility-bar-content > .w-full:first-child {
    display: none !important;
  }
  .utility-bar .beauty-link {
    flex: none !important;
  }
  .utility-bar .beauty-link .logo {
    height: 40px !important;
    width: auto !important;
  }
  .utility-icons {
    gap: 12px !important;
    flex: none !important;
    width: auto !important;
  }

  /* pull the nav row up and overlay it on the logo row, just after the logo */
  .main-header {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 40px !important; /* = ticker height */
    height: 66px !important;
    max-width: 1320px;
    margin: 0 auto !important;
    padding: 0 clamp(16px, 4vw, 40px) !important;
    justify-content: flex-start !important;
    background: transparent !important;
    pointer-events: none !important; /* clicks pass through to logo/icons */
    z-index: 2;
  }
  .main-header .desktop-nav {
    pointer-events: auto !important;
    margin-left: 84px !important; /* clear the logo */
  }
  .main-header .desktop-nav .space-x-6 {
    gap: 2px !important;
  }
}

/* Roomy desktops (>=1280): center the menu in the bar.
   Below this the nav is too wide to center without hitting the
   icons, so it stays left-after-logo (the 1024 rule above).
   The header.luxury-header prefix raises specificity so this always
   wins over the theme's / earlier flex-start rule regardless of order. */
@media (min-width: 1280px) {
  header.luxury-header .main-header {
    justify-content: center !important;
  }
  header.luxury-header .main-header .desktop-nav {
    margin-left: 0 !important;
  }
}

/* ============================================================
   7KICKS MOBILE HEADER  (burger + cart)
   The theme renders these plain white; style them like the
   reference: yellow-outlined burger, yellow cart square, red badge.
   These elements are desktop-hidden, so no media query needed.
   ============================================================ */
.mobile-menu-button {
  width: 42px !important;
  height: 42px !important;
  border: 2px solid var(--k-yellow) !important;
  border-radius: 3px !important;
  background: transparent !important;
}
.mobile-menu-button svg {
  stroke: var(--k-yellow) !important;
  color: var(--k-yellow) !important;
}
/* push the cart to the far right of the mobile header */
.mobile-header-icons {
  margin-left: auto !important;
}
/* reference has no search icon in the mobile header — remove this
   rule if you want to keep the mobile search toggle */
.mobile-header-icons .sh-header-search-icon {
  display: none !important;
}
.mobile-header-icons .badge-icon-btn {
  width: 42px !important;
  height: 42px !important;
  background: var(--k-yellow) !important;
  border-radius: 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.mobile-header-icons .badge-icon-btn svg {
  stroke: var(--k-black) !important;
  color: var(--k-black) !important;
}
.mobile-header-icons .badge-icon-count {
  background: var(--k-red) !important;
  color: #fff !important;
  border: 2px solid var(--k-black) !important;
  font-weight: 800 !important;
  top: -7px !important;
  right: -7px !important;
  min-width: 19px !important;
  height: 19px !important;
}

/* ============================================================
   7KICKS MOBILE MENU DRAWER  (theme .mobile-menu)
   Dark drawer to match the 7Kicks reference: 7KICKS mark, close X,
   Anton uppercase links (New Drops = yellow, Sale = red).
   ============================================================ */
.mobile-menu,
.mobile-menu .mobile-menu-content {
  background: var(--k-black) !important;
}
.mobile-menu {
  border-right: 2.5px solid var(--k-yellow) !important;
}

/* Header row: 7KICKS mark (rebuilt from the empty span) + close X */
.mobile-menu .mobile-submenu-header {
  background: var(--k-black) !important;
  border-bottom: 1px solid #1e1e1e !important;
  padding: 16px 22px !important;
}
.mobile-menu .mobile-submenu-header > span:first-child {
  display: inline-block !important;
  width: 130px !important;
  height: 38px !important;
  font-size: 0 !important;
  background: url("https://cdn2.clevup.in/520413/7-1784880580742.png?height=200&format=webp")
    left center / contain no-repeat !important;
}
.mobile-menu .mobile-submenu-header > span:first-child::before,
.mobile-menu .mobile-submenu-header > span:first-child::after {
  content: none !important;
}
.mobile-menu .close-button {
  width: 40px;
  height: 40px;
  border: 2px solid #2e2e2e !important;
  border-radius: 3px;
  color: #fff !important;
}

/* Menu links */
.mobile-menu .mobile-menu-items {
  padding: 14px 0 !important;
}
.mobile-menu .mobile-menu-item {
  font-family: "Anton", sans-serif !important;
  font-size: 26px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  padding: 11px 22px !important;
  border-bottom: 1px solid #1e1e1e !important;
}
.mobile-menu .mobile-menu-item span {
  color: inherit !important;
}
.mobile-menu .mobile-menu-items > li:first-child .mobile-menu-item {
  color: var(--k-yellow) !important;
}
.mobile-menu .mobile-menu-items > li:last-child .mobile-menu-item {
  color: var(--k-red) !important;
}

/* Footer */
.mobile-menu .mobile-menu-footer {
  background: var(--k-black) !important;
  border-top: 1px solid #1e1e1e !important;
}
.mobile-menu .mobile-menu-footer .ac-popup-item,
.mobile-menu .beauty-link-mobile {
  color: #fff !important;
}

/* ============================================================
   7KICKS — GPT FIXES
   1) Product image style like k104 card
   2) Category cards updated with required category names
   3) Logo/header left aligned
   4) FAQ visual polish (auto-close requires JS shared separately)
   ============================================================ */

/* ---------- Product card image: same brutal card feel as .k104 ---------- */
.product-card-image-container {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #f1efe7 !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease !important;
}

.product-card-image-container:hover {
  transform: translate(-4px, -4px) rotate(-1deg) !important;
  box-shadow: 9px 9px 0 #0a0a0a !important;
}

.product-card-image-container .product-card-image.main-image,
.product-card-image-container img.product-card-image.main-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 14px !important;
  background: #f1efe7 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* card text block: horizontal breathing room so the title/price
   aren't flush against the card border */
.product-card-info {
  padding: 12px 14px 14px !important;
}

/* ---------- Product carousel prev/next arrows → 7Kicks brutalist ----------
   Scoped to .product-swiper (home rows + related products); the PDP gallery
   swiper has no nav buttons so it's untouched. */
.product-swiper .swiper-button-prev,
.product-swiper .swiper-button-next {
  width: 46px !important;
  height: 46px !important;
  top: 50% !important;
  margin-top: 0 !important;
  transform: translateY(-50%) !important;
  background: var(--k-yellow, #d8ff3e) !important;
  color: var(--k-black, #0a0a0a) !important;
  border: 2.5px solid var(--k-black, #0a0a0a) !important;
  border-radius: 3px !important;
  box-shadow: 3px 3px 0 var(--k-black, #0a0a0a) !important;
  transition:
    transform 0.12s,
    box-shadow 0.12s !important;
}
.product-swiper .swiper-button-prev {
  left: 8px !important;
}
.product-swiper .swiper-button-next {
  right: 8px !important;
}
/* the chevron glyph (Swiper draws it via ::after) */
.product-swiper .swiper-button-prev::after,
.product-swiper .swiper-button-next::after {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--k-black, #0a0a0a) !important;
}
.product-swiper .swiper-button-prev:hover,
.product-swiper .swiper-button-next:hover {
  transform: translateY(-50%) translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--k-black, #0a0a0a) !important;
}
.product-swiper .swiper-button-prev.swiper-button-disabled,
.product-swiper .swiper-button-next.swiper-button-disabled {
  opacity: 0.35 !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
  cursor: default !important;
}

/* ============================================================
   7KICKS — REVIEWS "WHAT THE SQUAD SAYS"  ·  matches the reference
   Reference (#p-shell): a FULL-WIDTH WHITE section, dark Anton
   heading, a 240px dark stat card (lime score, red stars, lime
   offset shadow) + a grid of review cards alternating cream / lime
   / dark, each with red / ink / lime stars. CSS-only.
   ============================================================ */
/* white band, content centred to 1320 (reference section bg:#fff) */
.sh-pc-rev-ctn {
  margin-top: clamp(40px, 5vw, 72px) !important;
}
.product-review-root {
  max-width: 1320px !important;
  margin: 0 auto !important;
  color: #0a0a0a !important;
}

/* heading -> dark Anton with a lime highlight (reference "squad says." motif) */
.product-review-heading {
  display: inline-block !important;
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(30px, 5vw, 56px) !important;
  line-height: 0.92 !important;
  text-transform: uppercase !important;
  color: var(--k-black, #0a0a0a) !important;
  background: var(--k-yellow, #d8ff3e) !important;
  padding: 2px 10px !important;
  margin-bottom: 28px !important;
}

/* reference grid: 240px stat card | 1fr review cards */
.product-review-root > .product-review-list {
  gap: clamp(24px, 4vw, 48px) !important;
  align-items: flex-start !important;
}
.product-review-summary {
  flex: 0 0 240px !important;
  max-width: 240px !important;
}

/* ---- STAT CARD ---- reference #reviews-sum */
.product-review-summary {
  background: var(--k-black, #0a0a0a) !important;
  border: 2.5px solid var(--k-black, #0a0a0a) !important;
  border-radius: 5px !important;
  box-shadow: 8px 8px 0 var(--k-yellow, #d8ff3e) !important;
  padding: 26px !important;
  text-align: center !important;
}
.product-review-summary-info {
  display: block !important;
}
.product-review-summary .rating-stars {
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}
/* big score -> lime Anton 64px (reference .rev-big) */
.product-review-summary .star-text {
  font-family: "Anton", sans-serif !important;
  font-size: clamp(44px, 6vw, 64px) !important;
  font-weight: 400 !important;
  color: var(--k-yellow, #d8ff3e) !important;
  line-height: 1 !important;
}
/* stat-card stars -> red */
.product-review-summary .front-star svg,
.product-review-summary .front-star svg * {
  stroke: var(--k-red, #ff3b2e) !important;
}
/* hide per-rating bars (reference stat card has none) */
.product-review-ratings-box {
  display: none !important;
}
.product-review-subtext,
.product-review-num-of-rating {
  font-family: "Space Mono", monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--k-muted, #888) !important;
}
.product-review-no-review {
  color: #fff !important;
  font-weight: 800 !important;
}
.product-review-empty-subtext {
  color: var(--k-muted, #888) !important;
}

/* Write A Review -> ink outline button (dark-on-white section) */
.product-review-review-btn,
.product-review-review-btn.sh-outlined-button,
.product-review-review-btn .MuiButton-root {
  background: transparent !important;
  color: var(--k-yellow, #d8ff3e) !important;
  border: 2.5px solid var(--k-yellow, #d8ff3e) !important;
  border-radius: 3px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition:
    background 0.12s,
    color 0.12s !important;
}
.product-review-review-btn:hover,
.product-review-review-btn.sh-outlined-button:hover {
  background: var(--k-yellow, #d8ff3e) !important;
  color: var(--k-black, #0a0a0a) !important;
}

/* ---- REVIEW CARDS grid ---- reference: repeat(auto-fit,minmax(240px,1fr)) */
.product-review-list .product-review-list > div > div {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}
/* each review = bordered card; default (1st of every 3) = cream */
.review-card-root {
  border: 2.5px solid var(--k-black, #0a0a0a) !important;
  border-radius: 5px !important;
  padding: 20px !important;
  margin: 0 !important;
  background: #f4f2ea !important;
}
/* hide the theme's divider lines between reviews */
.sh-pc-rev-ctn hr,
.review-card-root hr,
.product-review-list hr,
.product-review-list [class*="margin-line"] {
  display: none !important;
}

/* cream/lime card text -> dark */
.review-card-name,
.review-card-title {
  color: var(--k-black, #0a0a0a) !important;
  font-weight: 800 !important;
}
.review-card-subtext {
  color: #0a0a0a !important;
  font-family: "Space Mono", monospace !important;
  font-size: 12px !important;
}
.review-card-description {
  color: #1a1a1a !important;
  line-height: 1.5 !important;
}
.review-card-profile-img {
  background: var(--k-black, #0a0a0a) !important;
  border: 2px solid var(--k-black, #0a0a0a) !important;
}
.review-card-profile-img svg {
  color: var(--k-yellow, #d8ff3e) !important;
}
/* cream card stars -> red */
.review-card-root .front-star svg,
.review-card-root .front-star svg * {
  stroke: var(--k-red, #ff3b2e) !important;
}

/* 2nd of every 3 -> LIME card, ink stars */
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 2)
  .review-card-root {
  background: var(--k-yellow, #d8ff3e) !important;
}
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 2)
  .review-card-root
  .front-star
  svg,
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 2)
  .review-card-root
  .front-star
  svg
  * {
  stroke: var(--k-black, #0a0a0a) !important;
}

/* 3rd of every 3 -> DARK card, light text, lime stars */
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-root {
  background: var(--k-black, #0a0a0a) !important;
}
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-name,
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-title {
  color: #fff !important;
}
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-description {
  color: #ffffff !important;
}
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-subtext {
  color: var(--k-yellow, #d8ff3e) !important;
}
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-root
  .front-star
  svg,
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-root
  .front-star
  svg
  * {
  stroke: var(--k-yellow, #d8ff3e) !important;
}

/* stack on small screens */
@media (max-width: 768px) {
  .product-review-root > .product-review-list {
    flex-direction: column !important;
  }
  .product-review-summary {
    flex-basis: auto !important;
    max-width: none !important;
    width: 100% !important;
  }
}

/* view-all link -> ink */
.reviews-list-viewAll {
  color: var(--k-black, #0a0a0a) !important;
  font-weight: 700 !important;
}

/* Make native product cards follow 7Kicks brutal style if theme uses these generic classes */
.product-card,
.pr-card,
.product-card-root {
  background: #fff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease !important;
}

.product-card:hover,
.pr-card:hover,
.product-card-root:hover {
  transform: translate(-4px, -4px) rotate(-1deg) !important;
  box-shadow: 9px 9px 0 #0a0a0a !important;
}

/* ---------- Logo left align ---------- */
.app-bar-main .MuiToolbar-root {
  justify-content: flex-start !important;
  gap: 18px !important;
}

.app-bar-main .title,
.app-bar-main .logo,
.app-bar-main .store-logo,
#b-shell .k010,
#b-shell .k008 {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

.app-bar-main .search-container,
.app-bar-main #search-box,
.app-bar-main .input-container {
  margin-left: auto !important;
}

#b-shell .k007 {
  justify-content: flex-start !important;
}

#b-shell #nav-links,
#b-shell .k012 {
  margin-left: 28px !important;
  margin-right: auto !important;
}

#b-shell .k016,
#b-shell .k018 {
  margin-left: 0 !important;
}

/* ---------- Category section: 9 category cards from reference image ---------- */
.cat-card-list,
.category-card-list,
.category-list,
.categories-list,
.category-grid,
.cat-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 28px 22px !important;
  align-items: start !important;
  background: #ffffff !important;
}

.cat-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  min-width: 0 !important;
  padding: 0 !important;
  color: #0a0a0a !important;
  text-decoration: none !important;
}

/* Hide any extra categories after the 9 required names */
.cat-card:nth-child(n + 10) {
  display: none !important;
}

.cat-card-img,
.cat-card .cat-card-img,
.cat-card-img-semi-rounded,
.cat-card .cat-card-img-semi-rounded {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px !important;
  margin: 0 auto !important;
  display: block !important;
}

.cat-card-letter-container {
  width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  padding: 10px 4px 0 !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 0 !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Visual replacement names from the uploaded reference image */
.cat-card-letter-container::after {
  display: block !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-size: clamp(13px, 1.2vw, 18px) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.cat-card:nth-child(1) .cat-card-letter-container::after {
  content: "TRAVIS SCOTT" !important;
}
.cat-card:nth-child(2) .cat-card-letter-container::after {
  content: "LOW DUNKS" !important;
}
.cat-card:nth-child(3) .cat-card-letter-container::after {
  content: "RETRO 4" !important;
}
.cat-card:nth-child(4) .cat-card-letter-container::after {
  content: "AIR JORDAN'S" !important;
}
.cat-card:nth-child(5) .cat-card-letter-container::after {
  content: "LEATHER SHOES" !important;
}
.cat-card:nth-child(6) .cat-card-letter-container::after {
  content: "AIR FORCE'S" !important;
}
.cat-card:nth-child(7) .cat-card-letter-container::after {
  content: "ADIDAS" !important;
}
.cat-card:nth-child(8) .cat-card-letter-container::after {
  content: "NB 550" !important;
}
.cat-card:nth-child(9) .cat-card-letter-container::after {
  content: "CONVERSE" !important;
}

/* If the theme renders category names in common text elements, hide old text visually */
.cat-card .cat-card-name,
.cat-card .cat-card-title,
.cat-card .category-name,
.cat-card .category-title,
.cat-card .cat-title {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  margin: 0 !important;
}

/* Also style custom 7Kicks category blocks if they are used instead of native category cards */
.k059 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.k060,
.k064,
.k067,
.k068 {
  min-height: 190px !important;
}

/* ---------- FAQ visual fix ---------- */
.k157 {
  background: #ffffff !important;
  padding-top: clamp(42px, 5vw, 70px) !important;
  padding-bottom: clamp(42px, 5vw, 70px) !important;
}

.k161,
details {
  overflow: hidden !important;
}

.k162,
details > summary {
  cursor: pointer !important;
}

details[open] .k163,
details[open] .bchev {
  transform: rotate(45deg) !important;
}

/* ---------- Responsive category fixes ---------- */
@media (max-width: 1024px) {
  .cat-card-list,
  .category-card-list,
  .category-list,
  .categories-list,
  .category-grid,
  .cat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px 16px !important;
  }

  .k059 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .product-card-image-container .product-card-image.main-image,
  .product-card-image-container img.product-card-image.main-image {
    padding: 10px !important;
  }

  .cat-card-list,
  .category-card-list,
  .category-list,
  .categories-list,
  .category-grid,
  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 12px !important;
  }

  .cat-card-img,
  .cat-card .cat-card-img,
  .cat-card-img-semi-rounded,
  .cat-card .cat-card-img-semi-rounded {
    aspect-ratio: 16 / 10 !important;
    padding: 6px !important;
  }

  .cat-card-letter-container {
    padding-top: 8px !important;
  }

  .cat-card-letter-container::after {
    font-size: 12px !important;
    white-space: normal !important;
  }

  .k059 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .app-bar-main .MuiToolbar-root {
    justify-content: flex-start !important;
  }

  .app-bar-main .title {
    margin-right: auto !important;
  }
}

@media (max-width: 420px) {
  .cat-card-letter-container::after {
    font-size: 11px !important;
  }
}
/* ============================================================
   7KICKS — PRODUCT DETAIL PAGE (PDP)
   Maps the live monarque product page onto the 7Kicks
   neo-brutalist reference. CSS-only, no markup changes.

   Palette : ink #0A0A0A · paper #fff · lime #D8FF3E · red #FF3B2E
             sand #F1EFE7 · panel #1A1A1A · line #2E2E2E · muted #888
   Fonts   : Anton (display) · Hanken Grotesk (body) · Space Mono (mono)
   Note    : on the black canvas, borders that sit dark-on-dark use
             the grey --k-line; ink borders are only used where the
             element itself is light (gallery image, lime buttons,
             the active lime chip) — exactly as the reference does.
   ============================================================ */
:root {
  --k-sand: #f1efe7;
  --k-panel: #1a1a1a;
  --k-line: #2e2e2e;
  --k-muted: #888888;
}

/* ---------- Grid canvas — capped & centered like the reference (maxw 1320) ---------- */
.product-detail-grid {
  background: var(--k-black) !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  gap: clamp(26px, 4vw, 60px) !important;
}
@media (min-width: 768px) {
  .product-detail-grid > * {
    align-self: flex-start !important;
  }
  /* reference pdp-grid = 1.05fr / .95fr → gallery ~52%, info ~48%
     (stops the image ballooning to 67% of a wide screen) */
  .product-image-container {
    width: 52% !important;
  }
  .product-info-container {
    width: 50% !important;
  }
}

/* base light text for everything inside the info column
   (specific elements re-colour themselves below) */

.product-info-container,
.product-info,
.product-info-header {
  color: #eaeaea !important;
}
.product-info-container {
  background: #1a1a1a !important;
  /* margin: 0px 0px; */
  padding: 0px -20px;
}

/* ---------- Gallery ---------- */
.product-image-container {
  margin: 0 0 8px 0 !important;
}
/* Frame the OUTER image cell (reference #g-img), NOT the per-slide wrapper —
   the wrapper sits inside the swiper's overflow:hidden, which clips the
   offset shadow. Framing the container keeps the lime 12px right+bottom
   shadow fully visible. */
.main-image-container {
  background: var(--k-sand) !important;
  border: 3px solid var(--k-black) !important;
  border-radius: 6px !important;
  box-shadow: 12px 12px 0 var(--k-yellow) !important;
  overflow: hidden !important;
  max-width: 560px !important;
}
/* multi-image case: leave room to the right so the shadow shows, cap size */
.main-image-container.imaget-dots-available {
  max-width: 520px !important;
  padding-left: 0 !important;
}
/* space the thumbnail rail from the framed image (reference gap 14px) */
.image-gallery-layout {
  gap: 14px !important;
}
/* per-slide wrapper no longer carries the frame */
.main-image-wrapper {
  background: var(--k-sand) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
/* kill the grey gradient veil the theme lays over the image */
.main-image-wrapper::before,
.thumbnail::before {
  display: none !important;
}
.main-image {
  background: var(--k-sand) !important;
  object-fit: contain !important;
  padding: 18px !important;
}
/* zoom button → dark chip */
.zoom-button {
  background: rgba(10, 10, 10, 0.65) !important;
  border-radius: 3px !important;
  pointer-events: auto !important;
}
.zoom-icon {
  color: #fff !important;
}

/* thumbnails → 74px squares, grey border, lime when active */
.thumbnails-container {
  width: 84px !important;
  gap: 10px !important;
}
.thumbnail {
  width: 74px !important;
  height: 74px !important;
  border: 2px solid var(--k-line) !important;
  border-radius: 4px !important;
  background: var(--k-sand) !important;
  overflow: hidden !important;
}
.thumbnail.active {
  border: 3px solid var(--k-yellow) !important;
}
.thumbnail-image {
  object-fit: contain !important;
  padding: 4px !important;
}
.swiper-pagination-bullet {
  background: #555 !important;
}
.swiper-pagination-bullet-active {
  background: var(--k-yellow) !important;
}

/* ---------- Title block ---------- */
/* brand → lime tilted pill */
.product-badge {
  width: fit-content !important;
  background: var(--k-yellow) !important;
  color: var(--k-black) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border: 2px solid var(--k-black) !important;
  border-radius: 3px !important;
  transform: rotate(-2deg) !important;
}
/* title — matches reference #p-shell h1: Anton clamp(36px,5vw,62px)/.9 */
.product-title {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(36px, 5vw, 62px) !important;
  line-height: 0.9 !important;
  letter-spacing: 0.005em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 10px 0 0 !important;
}
/* price — reference: Anton clamp(38px,5vw,56px), line-height 1 */
.product-price {
  font-family: "Anton", sans-serif !important;
  font-size: clamp(38px, 5vw, 56px) !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: 1 !important;
}
.product-mrp-price {
  color: var(--k-muted) !important;
  font-size: 20px !important;
  align-self: center !important;
}
/* discount → red badge (reference "Save ₹X" — flat, not tilted) */
.product-discount {
  align-self: center !important;
}
.product-discount span {
  display: inline-block !important;
  background: var(--k-red) !important;
  color: #fff !important;
  font-family: "Space Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
  border: 2px solid var(--k-black) !important;
  border-radius: 3px !important;
}
/* SKU / MRP note — reference: Space Mono 11px #777 */
.product-sku {
  font-family: "Space Mono", monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  color: var(--k-muted-2, #777) !important;
}

/* ---------- Variant chips ---------- */
/* reference "Select size (UK)": Hanken weight 800, 13px, .06em */
.variant-field-label {
  color: #fff !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.variant-field-label span {
  color: var(--k-yellow) !important;
  opacity: 1 !important;
}
.variant-values-list {
  gap: 9px !important;
}

/* text / size chips → dark panel; lime + red shadow when selected
   (reference .chip: min-width 58, padding 12px 14px, mono 13/700) */
.variant-chip.type-text {
  min-width: 58px !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 12px 14px !important;
  background: var(--k-panel) !important;
  color: #fff !important;
  border: 2.5px solid var(--k-line) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  transition:
    transform 0.12s,
    box-shadow 0.12s,
    background 0.12s !important;
}
.variant-chip.type-text .variant-label-text {
  font-family: "Space Mono", monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.variant-chip.type-text:hover:not(.sold-out) {
  transform: translate(2px, 2px) !important;
  border-color: var(--k-yellow) !important;
}
.variant-chip.type-text.selected {
  background: var(--k-yellow) !important;
  color: var(--k-black) !important;
  border-color: var(--k-black) !important;
  box-shadow: 3px 3px 0 var(--k-red) !important;
  transform: none !important;
}
/* colour / image chips → grey ring, lime ring when selected */
.variant-chip.type-color,
.variant-chip.type-image {
  border: 2.5px solid var(--k-line) !important;
  box-shadow: none !important;
}
.variant-chip.type-color.selected,
.variant-chip.type-image.selected {
  border-color: var(--k-yellow) !important;
  box-shadow:
    0 0 0 2px var(--k-black),
    3px 3px 0 var(--k-red) !important;
}

/* size-chart trigger link */
.variants-info-fieldctn a,
.size-chart-btn {
  color: var(--k-yellow) !important;
}

/* ---------- Quantity dropdown ---------- */
.quantity-label {
  color: #fff !important;
  font-family: "Space Mono", monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.quantity-dropdown {
  width: 120px !important;
  height: 54px !important;
  background: var(--k-panel) !important;
  border: 2.5px solid var(--k-line) !important;
  border-radius: 3px !important;
  color: #fff !important;
}
/* reference qty uses Anton numerals */
.quantity-dropdown .MuiSelect-select {
  color: #fff !important;
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
}
.quantity-dropdown .MuiSvgIcon-root,
.quantity-dropdown .MuiSelect-icon {
  color: var(--k-yellow) !important;
}
.quantity-dropdown fieldset {
  border: none !important;
}

/* ---------- Action buttons ----------
   Reference mapping (exact):
     Add to cart  = LIME  bg / ink text / white 6px offset shadow
     Buy it now   = RED   bg / white text / lime  6px offset shadow
   Both are solid brutalist buttons (the theme's inline "secondary"
   outline on add-to-cart is overridden). */
.action-buttons {
  gap: 12px !important;
}

/* shared brutalist button shape */
.add-to-bag-button,
.buy-now-button {
  border: 2.5px solid var(--k-black) !important;
  border-radius: 3px !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  height: 54px !important;
  transition:
    transform 0.12s,
    box-shadow 0.12s !important;
}
/* Add to cart → lime primary */
.add-to-bag-button {
  background: var(--k-yellow) !important;
  color: var(--k-black) !important;
  box-shadow: 6px 6px 0 #fff !important;
}
.add-to-bag-button:hover {
  background: var(--k-yellow) !important;
  color: var(--k-black) !important;
  transform: translate(3px, 3px) !important;
  box-shadow: 2px 2px 0 #fff !important;
  opacity: 1 !important;
}
/* Buy now → red with lime offset shadow */
.buy-now-button {
  background: var(--k-red) !important;
  color: #fff !important;
  box-shadow: 6px 6px 0 var(--k-yellow) !important;
}
.buy-now-button:hover {
  background: var(--k-red) !important;
  color: #fff !important;
  transform: translate(3px, 3px) !important;
  box-shadow: 2px 2px 0 var(--k-yellow) !important;
  opacity: 1 !important;
}
/* whatsapp enquiry → green ghost */
.pr-card-action-enquiry {
  border: 2px solid var(--k-line) !important;
  color: #25d366 !important;
  border-radius: 3px !important;
  height: 54px !important;
}
.pr-card-action-enquiry:hover {
  background: #25d366 !important;
  color: var(--k-black) !important;
  border-color: #25d366 !important;
}

/* ---------- Accordions (Highlights / Features / Details) ---------- */
.details-accordion {
  background: var(--k-panel) !important;
  border: 2.5px solid var(--k-line) !important;
  border-radius: 4px !important;
  padding: 0 18px !important;
  overflow: hidden !important;
}
.details-toggle {
  color: #fff !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 16px 0 !important;
}
.toggle-icon {
  color: var(--k-yellow) !important;
}
.details-content,
.details-accordion revert-tailwind-container,
.details-content * {
  color: #c9c9c9 !important;
}
.features-table-name,
.sh-product-features-name {
  color: #fff !important;
  font-weight: 600 !important;
}
.features-table-value,
.sh-product-features-value {
  color: #b9b9b9 !important;
}

/* delivery estimate block on dark */
.delivery-estimate-root,
.delivery-estimate-root * {
  color: #cfcfcf !important;
}
.delivery-estimate-root input {
  background: var(--k-panel) !important;
  border: 2px solid var(--k-line) !important;
  color: #fff !important;
}

/* wishlist icon visible on dark */
.product-info-header .wishlist-icon,
.product-info-header svg {
  color: #fff !important;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb,
.breadcrumb a,
.breadcrumb span {
  color: var(--k-muted) !important;
}
.breadcrumb a:hover {
  color: var(--k-yellow) !important;
}

/* ---------- Mobile sticky buy bar ---------- */
.mobile-bottom-bar {
  background: var(--k-black) !important;
  border-top: 2.5px solid var(--k-yellow) !important;
  padding: 10px clamp(12px, 4vw, 16px) !important;
}
@media (max-width: 768px) {
  .mobile-bottom-bar .add-to-bag-button,
  .mobile-bottom-bar .buy-now-button {
    height: 46px !important;
  }
  .mobile-bottom-bar .add-to-bag-button {
    box-shadow: 3px 3px 0 #fff !important;
  }
  .mobile-bottom-bar .buy-now-button {
    box-shadow: 3px 3px 0 var(--k-yellow) !important;
  }
  .mobile-bottom-bar .add-to-bag-button:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0 #fff !important;
  }
  .mobile-bottom-bar .buy-now-button:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0 var(--k-yellow) !important;
  }
  /* smaller offset shadow on the framed gallery for small screens */
  .main-image-container,
  .main-image-container.imaget-dots-available {
    max-width: 100% !important;
    box-shadow: 6px 6px 0 var(--k-yellow) !important;
  }
}

/* ============================================================
   7KICKS — CHECKOUT (cart-detail) PAGE  ·  CSS-only restyle
   Maps the "Checkout Standalone" brutalist reference onto the
   live monarque cart-detail DOM. No markup changes.
   Palette: cream #F1EFE7 · ink #0A0A0A · lime #D8FF3E ·
            red #FF3B2E · green #1F8A3B  (fonts already imported)
   Scope: .sh-cart-details-page-desk (desktop) +
          .sh-cart-detail-page-mob (mobile) so nothing leaks.
   ============================================================ */

/* ---------- Page shell: cream background ---------- */
.page-container.sh-cart-details-page-desk,
.sh-cart-detail-page-mob {
  background: #f1efe7 !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  color: #0a0a0a !important;
}
.sh-cart-details-page-desk,
.sh-cart-detail-page-mob {
  --k-ink: #0a0a0a;
  --k-lime: #d8ff3e;
  --k-red: #ff3b2e;
}

/* ---------- Breadcrumb heading (Cart > Review) ---------- */
/* container: center-align so the badge + shadow sit on the h1 baseline */
.sh-cart-details-page-desk > .MuiGrid-item:first-child > div {
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.sh-cart-details-page-desk > .MuiGrid-item:first-child h1,
.sh-cart-details-page-desk > .MuiGrid-item:first-child span {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.6vw, 28px) !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
}
.sh-cart-details-page-desk > .MuiGrid-item:first-child h1 {
  color: #0a0a0a !important;
}
/* "REVIEW ORDER" → lime badge: black border + red offset shadow, tilted */
.sh-cart-details-page-desk > .MuiGrid-item:first-child span {
  display: inline-block !important;
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  border: 2.5px solid #0a0a0a !important;
  box-shadow: 5px 5px 0 #ff3b2e !important;
  padding: 2px 10px !important;
  transform: rotate(-1deg) !important;
  line-height: 1.05 !important;
}

/* ---------- Cards (all sections + coupon box) ---------- */
.sh-cart-details-page-desk .custom-card,
.sh-cart-detail-page-mob .custom-card,
.sh-cart-details-page-desk .cart-item-root,
.sh-cart-detail-page-mob .cart-item-root,
.sh-cart-details-page-desk .cart-summary-root,
.sh-cart-detail-page-mob .cart-summary-root,
.sh-cart-details-page-desk .cart-items-cart-items,
.sh-cart-detail-page-mob .cart-items-cart-items {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.08) !important;
}
.sh-cart-details-page-desk .custom-card,
.sh-cart-detail-page-mob .custom-card {
  padding: 24px !important;
}

/* Coupon box — dashed brutalist frame like the reference coupon card */
.sh-cart-details-page-desk .cart-details-desktop-box.universal-border {
  background: #ffffff !important;
  border: 2.5px dashed #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  padding: 20px 22px !important;
  margin-bottom: 24px !important;
}

/* ---------- Section headings → Anton + lime accent bar ---------- */
.sh-cart-details-page-desk .cart-items-section-heading,
.sh-cart-detail-page-mob .cart-items-section-heading,
.sh-cart-details-page-desk .cart-summary-section-heading,
.sh-cart-detail-page-mob .cart-summary-section-heading,
.sh-cart-details-page-desk .coupon-apply-section-heading,
.sh-cart-detail-page-mob .coupon-apply-section-heading,
.sh-cart-details-page-desk .address-details-card-header,
.sh-cart-detail-page-mob .address-details-card-header,
.sh-cart-details-page-desk .delivery-options-card-header,
.sh-cart-detail-page-mob .delivery-options-card-header,
.sh-cart-details-page-desk
  div.custom-info-card-header
  > .custom-info-card-header,
.sh-cart-detail-page-mob
  div.custom-info-card-header
  > .custom-info-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
  margin-bottom: 4px !important;
}
.sh-cart-details-page-desk .cart-items-section-heading::before,
.sh-cart-detail-page-mob .cart-items-section-heading::before,
.sh-cart-details-page-desk .cart-summary-section-heading::before,
.sh-cart-detail-page-mob .cart-summary-section-heading::before,
.sh-cart-details-page-desk .coupon-apply-section-heading::before,
.sh-cart-detail-page-mob .coupon-apply-section-heading::before,
.sh-cart-details-page-desk .address-details-card-header::before,
.sh-cart-detail-page-mob .address-details-card-header::before,
.sh-cart-details-page-desk .delivery-options-card-header::before,
.sh-cart-detail-page-mob .delivery-options-card-header::before,
.sh-cart-details-page-desk
  div.custom-info-card-header
  > .custom-info-card-header::before,
.sh-cart-detail-page-mob
  div.custom-info-card-header
  > .custom-info-card-header::before {
  content: "" !important;
  flex: none !important;
  width: 9px !important;
  height: 20px !important;
  background: #d8ff3e !important;
  border: 2px solid #0a0a0a !important;
}

/* keep the "already a user? / Sign In" line small + body font */
.sh-cart-details-page-desk .custom-info-card-login,
.sh-cart-detail-page-mob .custom-info-card-login {
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-size: 13px !important;
  text-transform: none !important;
  color: #6b6858 !important;
  display: block !important;
}
.sh-cart-details-page-desk .custom-info-card-action-btn,
.sh-cart-detail-page-mob .custom-info-card-action-btn,
.sh-cart-details-page-desk .add-address-card-action-btn,
.sh-cart-detail-page-mob .add-address-card-action-btn {
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #ff3b2e !important;
}

/* authenticated customer details → name + phone as bordered chips.
   DOM: .flex.gap-6.sm:gap-12 holds the name chip and (nested) phone chip,
   each a .flex.items-center.gap-2 (icon + <h6>). Colon in the tailwind
   class is escaped as \: in the selector. */
.sh-cart-details-page-desk .flex.gap-6.sm\:gap-12,
.sh-cart-detail-page-mob .flex.gap-6.sm\:gap-12 {
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.sh-cart-details-page-desk .flex.gap-6.sm\:gap-12 .flex.items-center.gap-2,
.sh-cart-detail-page-mob .flex.gap-6.sm\:gap-12 .flex.items-center.gap-2 {
  background: #f1efe7 !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 4px !important;
  padding: 9px 14px !important;
  gap: 10px !important;
}
.sh-cart-details-page-desk .flex.gap-6.sm\:gap-12 .flex.items-center.gap-2 h6,
.sh-cart-detail-page-mob .flex.gap-6.sm\:gap-12 .flex.items-center.gap-2 h6 {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #0a0a0a !important;
  margin: 0 !important;
}
.sh-cart-details-page-desk .flex.gap-6.sm\:gap-12 .flex.items-center.gap-2 svg,
.sh-cart-detail-page-mob .flex.gap-6.sm\:gap-12 .flex.items-center.gap-2 svg {
  color: #0a0a0a !important;
  fill: #0a0a0a !important;
}
/* the phone group wrapper shouldn't add its own gap around the single chip */
.sh-cart-details-page-desk
  .flex.gap-6.sm\:gap-12
  .flex.items-center.gap-3.flex-wrap,
.sh-cart-detail-page-mob
  .flex.gap-6.sm\:gap-12
  .flex.items-center.gap-3.flex-wrap {
  gap: 0 !important;
}

/* ---------- Delivery options ---------- */
.sh-cart-details-page-desk .delivery-options-card-label,
.sh-cart-detail-page-mob .delivery-options-card-label {
  font-weight: 700 !important;
  color: #0a0a0a !important;
}
.sh-cart-details-page-desk .delivery-options-card-muted,
.sh-cart-detail-page-mob .delivery-options-card-muted {
  color: #6b6858 !important;
}
.sh-cart-details-page-desk .delivery-options-card-checked,
.sh-cart-detail-page-mob .delivery-options-card-checked,
.sh-cart-details-page-desk .address-details-card-checked,
.sh-cart-detail-page-mob .address-details-card-checked {
  color: #0a0a0a !important;
}

/* ---------- Address list ---------- */
.sh-cart-details-page-desk .address-details-card-note,
.sh-cart-detail-page-mob .address-details-card-note {
  color: #8a8779 !important;
}
.sh-cart-details-page-desk .address-details-card-box,
.sh-cart-detail-page-mob .address-details-card-box {
  border: 2.5px solid #d9d6c8 !important;
  border-radius: 5px !important;
  padding: 14px 16px !important;
  margin-top: 14px !important;
}
.sh-cart-details-page-desk .address-details-card-address,
.sh-cart-detail-page-mob .address-details-card-address {
  color: #0a0a0a !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
.sh-cart-details-page-desk .address-details-card-address:first-child,
.sh-cart-detail-page-mob .address-details-card-address:first-child {
  font-weight: 800 !important;
}
.sh-cart-details-page-desk .address-details-card-index,
.sh-cart-detail-page-mob .address-details-card-index {
  color: #6b6858 !important;
  font-weight: 800 !important;
}
/* dividers between addresses become the soft brand line */
.sh-cart-details-page-desk .address-details-scroll-box .MuiDivider-root,
.sh-cart-detail-page-mob .address-details-scroll-box .MuiDivider-root {
  border-color: #e7e4d8 !important;
}

/* Add Address button (OutlinedButton) → ink / lime mono pill */
.sh-cart-details-page-desk
  .address-details-card-header
  ~ *
  .outlined-button__btn,
.sh-cart-details-page-desk .outlined-button__btn,
.sh-cart-detail-page-mob .outlined-button__btn {
  background: #0a0a0a !important;
  color: #d8ff3e !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ---------- Coupon applied state ---------- */
.sh-cart-details-page-desk .coupon-apply-applied-coupon,
.sh-cart-detail-page-mob .coupon-apply-applied-coupon {
  color: #4a4739 !important;
}
.sh-cart-details-page-desk .coupon-apply-applied-coupon > span,
.sh-cart-detail-page-mob .coupon-apply-applied-coupon > span {
  font-family: "Anton", sans-serif !important;
  letter-spacing: 0.03em !important;
  background: #d8ff3e !important;
  border: 2px solid #0a0a0a !important;
  padding: 0 7px !important;
}
.sh-cart-details-page-desk .coupon-apply-coupon-note,
.sh-cart-detail-page-mob .coupon-apply-coupon-note {
  color: #1f8a3b !important;
  font-weight: 700 !important;
}
.sh-cart-details-page-desk .coupon-apply-action-btn,
.sh-cart-detail-page-mob .coupon-apply-action-btn {
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #ff3b2e !important;
}

/* ---------- Cart items ---------- */
.sh-cart-details-page-desk .cart-items-cart-items,
.sh-cart-detail-page-mob .cart-items-cart-items {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* item card: ink frame + soft brutal shadow */
.sh-cart-details-page-desk .cart-item-root,
.sh-cart-detail-page-mob .cart-item-root {
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.08) !important;
  margin: 14px 0 !important;
}
/* thumbnail: cream tile, ink border */
.sh-cart-details-page-desk .cart-item-cover,
.sh-cart-detail-page-mob .cart-item-cover {
  width: 84px !important;
  height: 84px !important;
  flex: none !important;
  background: #f1efe7 !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
}
.sh-cart-details-page-desk .cart-item-cover img,
.sh-cart-detail-page-mob .cart-item-cover img {
  object-fit: contain !important;
  padding: 6px !important;
}
/* title: heavy body weight, ink, wrapped in a bordered tag */
.sh-cart-details-page-desk .cart-item-text,
.sh-cart-detail-page-mob .cart-item-text {
  display: inline-block !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  color: #0a0a0a !important;
  background: #f1efe7 !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 4px !important;
  padding: 5px 10px !important;
}
/* price: Anton, SOLID BLACK — force onto the Typography and every child
   (MUI sx + the free-item <span>s otherwise leak theme/secondary colour) */
.sh-cart-details-page-desk .cart-item-primary,
.sh-cart-detail-page-mob .cart-item-primary,
.sh-cart-details-page-desk .cart-item-primary *,
.sh-cart-detail-page-mob .cart-item-primary * {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  color: #0a0a0a !important;
}
/* struck-through original price on free/BXGY items stays muted + smaller */
.sh-cart-details-page-desk .cart-item-primary span[style*="line-through"],
.sh-cart-detail-page-mob .cart-item-primary span[style*="line-through"] {
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-size: 13px !important;
  color: #8a8779 !important;
}
/* remove: red mono caps */
.sh-cart-details-page-desk .cart-item-remove-txt,
.sh-cart-detail-page-mob .cart-item-remove-txt {
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #ff3b2e !important;
}

/* ---------- Quantity stepper (– value +) ---------- */
.sh-cart-details-page-desk .pr-plus-minus-button,
.sh-cart-detail-page-mob .pr-plus-minus-button {
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 30px !important;
}
.sh-cart-details-page-desk .pr-plus-minus-button-icon-left,
.sh-cart-detail-page-mob .pr-plus-minus-button-icon-left,
.sh-cart-details-page-desk .pr-plus-minus-icon-right,
.sh-cart-detail-page-mob .pr-plus-minus-icon-right {
  width: 26px !important;
  height: 100% !important;
  margin: 0 !important;
  font-family: "Anton", sans-serif !important;
  font-size: 18px !important;
}
.sh-cart-details-page-desk .pr-plus-minus-button-icon-left,
.sh-cart-detail-page-mob .pr-plus-minus-button-icon-left {
  background: #0a0a0a !important;
  color: #d8ff3e !important;
}
.sh-cart-details-page-desk .pr-plus-minus-icon-right,
.sh-cart-detail-page-mob .pr-plus-minus-icon-right {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
}
.sh-cart-details-page-desk .pr-plus-minus-button-text,
.sh-cart-detail-page-mob .pr-plus-minus-button-text {
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  color: #0a0a0a !important;
}

/* ---------- Bill details ---------- */
.sh-cart-details-page-desk .cart-summary-root,
.sh-cart-detail-page-mob .cart-summary-root {
  padding: 6px 18px 14px !important;
}
.sh-cart-details-page-desk .cart-summary-label,
.sh-cart-detail-page-mob .cart-summary-label {
  font-size: 14px !important;
  color: #6b6858 !important;
}
.sh-cart-details-page-desk .cart-summary-value,
.sh-cart-detail-page-mob .cart-summary-value {
  font-weight: 700 !important;
  color: #0a0a0a !important;
}
.sh-cart-details-page-desk .cart-summary-root .MuiDivider-root,
.sh-cart-detail-page-mob .cart-summary-root .MuiDivider-root {
  border-color: #e7e4d8 !important;
}
/* Coupon-discount amount in green */
.sh-cart-details-page-desk #sh-coupon-discount-price .cart-summary-value,
.sh-cart-detail-page-mob #sh-coupon-discount-price .cart-summary-value {
  color: #1f8a3b !important;
}
/* Payable row = last two grid cells → Anton, big */
.sh-cart-details-page-desk
  .cart-summary-root
  > .MuiGrid-item:nth-last-child(2)
  .cart-summary-label,
.sh-cart-detail-page-mob
  .cart-summary-root
  > .MuiGrid-item:nth-last-child(2)
  .cart-summary-label {
  font-family: "Anton", sans-serif !important;
  font-size: 20px !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}
.sh-cart-details-page-desk
  .cart-summary-root
  > .MuiGrid-item:last-child
  .cart-summary-value,
.sh-cart-detail-page-mob
  .cart-summary-root
  > .MuiGrid-item:last-child
  .cart-summary-value {
  font-family: "Anton", sans-serif !important;
  font-size: 24px !important;
  color: #0a0a0a !important;
}
.sh-cart-details-page-desk .cart-summary-delivery-savemsg,
.sh-cart-detail-page-mob .cart-summary-delivery-savemsg {
  color: #6b6858 !important;
}

/* ---------- Savings + earn banners ---------- */
.sh-cart-details-page-desk .cart-summary-savings-cont,
.sh-cart-detail-page-mob .cart-summary-savings-cont {
  background: #eaf6ea !important;
  border: 2px solid #1f8a3b !important;
  border-radius: 5px !important;
  color: #1c6b30 !important;
}
.sh-cart-details-page-desk .cart-summary-earn-cont,
.sh-cart-detail-page-mob .cart-summary-earn-cont {
  background: #ffffff !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 5px !important;
}

/* ---------- Continue button (desktop) ----------
   NOTE: SolidButton passes classes={{ label }}, but this is MUI v5,
   which removed the Button `label` slot — the text renders directly
   in the root. So font/colour MUST be set on the ROOT, otherwise the
   label stays theme-white + tiny (the bug in the "before" screenshot). */
.sh-cart-details-page-desk .cart-details-button-root {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  box-shadow: 6px 6px 0 #ff3b2e !important;
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 16px !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease !important;
}
.sh-cart-details-page-desk .cart-item-primary,
.sh-cart-details-page-desk .cart-item-primary * {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  color: #0a0a0a !important;
}
.sh-cart-details-page-desk .cart-details-button-root:hover {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  transform: translate(3px, 3px) !important;
  box-shadow: 2px 2px 0 #ff3b2e !important;
}
.sh-cart-details-page-desk .cart-details-button-root.Mui-disabled,
.sh-cart-details-page-desk .cart-details-button-root:disabled {
  background: #e5e2d6 !important;
  color: #a9a693 !important;
  border-color: #c5c2b3 !important;
  box-shadow: none !important;
}
/* label span too, in case a theme build renders one */
.sh-cart-details-page-desk .cart-details-button-label {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: inherit !important;
}
/* sticky footer strip behind the button → cream, not white */
.sh-cart-details-page-desk > .MuiGrid-item:nth-child(3) > div:last-child {
  background: #f1efe7 !important;
}
.sh-cart-details-page-desk .flex.gap-6.sm\:gap-12 .flex.items-center.gap-2 {
  background: #f1efe7 !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 4px !important;
  padding: 9px 14px !important;
  gap: 10px !important;
}

/* ---------- Continue / place-order button (mobile footer) ---------- */
.sh-cart-detail-page-mob .checkout-buttons-footer {
  background: #f1efe7 !important;
  border-top: 2.5px solid #0a0a0a !important;
}
.sh-cart-detail-page-mob .checkout-buttons-footer .solid-button__btn {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  box-shadow: 4px 4px 0 #ff3b2e !important;
  font-family: "Anton", sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.sh-cart-detail-page-mob .cart-details-mobile-divider {
  background: #0a0a0a !important;
  height: 2.5px !important;
}
.sh-cart-details-page-desk > .MuiGrid-item:first-child span {
  display: inline-block !important;
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  border: 2.5px solid #0a0a0a !important;
  box-shadow: 5px 5px 0 #ff3b2e !important;
  padding: 2px 10px !important;
  transform: rotate(-1deg) !important;
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sh-cart-details-page-desk .cart-item-cover,
  .sh-cart-detail-page-mob .cart-item-cover {
    width: 60px !important;
    height: 60px !important;
  }
}
main:has(.sh-cart-details-page-desk),
main:has(.sh-cart-detail-page-mob) {
  background: rgb(241, 239, 231);
}
.sh-cart-details-page-desk .cart-details-button-root {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  border: 2.5px solid #0a0a0a !important;
  box-shadow: 6px 6px 0 #ff3b2e !important;
  font-family: "Anton", sans-serif !important;
  font-size: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 16px !important;
}

/* ============================================================
   ITEM (n) + BILL DETAILS headings pulled INSIDE their boxes.
   The heading is a separate element ABOVE the card in the markup,
   so we turn the heading into the box's top "lid" (border on 3
   sides, no bottom) and drop the card's top border/margin — the
   two merge into one enclosed box. Right-only shadow on the lid +
   right/bottom shadow on the body keep one continuous shadow.
   Must sit AFTER the earlier card/cart-items rules to win. */

/* ---- BILL DETAILS ---- */
.sh-cart-details-page-desk .cart-summary-section-heading,
.sh-cart-detail-page-mob .cart-summary-section-heading {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-bottom: none !important;
  border-radius: 5px 5px 0 0 !important;
  padding: 16px 18px 10px !important;
  margin: 0 !important;
  box-shadow: 5px 0 0 rgba(10, 10, 10, 0.08) !important;
}
.sh-cart-details-page-desk .cart-summary-root,
.sh-cart-detail-page-mob .cart-summary-root {
  border-top: none !important;
  border-radius: 0 0 5px 5px !important;
  margin-top: 0 !important;
}

/* ---- ITEM (n) ---- heading = lid, container = box, items = rows */
.sh-cart-details-page-desk .cart-items-section-heading,
.sh-cart-detail-page-mob .cart-items-section-heading {
  position: static !important;
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-bottom: none !important;
  border-radius: 5px 5px 0 0 !important;
  padding: 16px 18px 10px !important;
  margin: 0 !important;
  box-shadow: 5px 0 0 rgba(10, 10, 10, 0.08) !important;
}
.sh-cart-details-page-desk .cart-items-cart-items,
.sh-cart-detail-page-mob .cart-items-cart-items {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-top: none !important;
  border-radius: 0 0 5px 5px !important;
  box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.08) !important;
  padding: 0 12px 4px !important;
}
/* each item becomes a plain row (divider between, none on the last) */
.sh-cart-details-page-desk .cart-items-cart-items .cart-item-root,
.sh-cart-detail-page-mob .cart-items-cart-items .cart-item-root {
  border: none !important;
  border-bottom: 2px solid #e7e4d8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.sh-cart-details-page-desk
  .cart-items-cart-items
  > div:last-child
  .cart-item-root,
.sh-cart-detail-page-mob
  .cart-items-cart-items
  > div:last-child
  .cart-item-root {
  border-bottom: none !important;
}

/* ============================================================
   7KICKS — CART-REVIEW (Review Order) PAGE  ·  CSS-only restyle
   Mirrors the cart-detail design onto the review step. Shared
   components (cards, items, bill, coupon, customer) use the same
   classes; only the wrapper (.sh-cart-review-desk / -mob), the
   reversed breadcrumb, the coupon box / button classes, and the
   payment / delivery-address / shipping / wallet cards differ.
   Scope prefix uses :is() to cover desktop + mobile compactly.
   ============================================================ */

/* ---------- Page shell ---------- */
main:has(.sh-cart-review-desk),
main:has(.sh-cart-review-mob) {
  background: #f1efe7;
}
.page-container.sh-cart-review-desk,
.sh-cart-review-mob {
  background: #f1efe7 !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  color: #0a0a0a !important;
}

/* ---------- Breadcrumb (Shopping Cart > REVIEW ORDER) ---------- */
/* here the <a> = Shopping Cart (muted link back), <h1> = Review Order (active badge) */
.sh-cart-review-desk > .MuiGrid-item:first-child > div {
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.sh-cart-review-desk > .MuiGrid-item:first-child a,
.sh-cart-review-desk > .MuiGrid-item:first-child h1 {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.6vw, 28px) !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
.sh-cart-review-desk > .MuiGrid-item:first-child a {
  color: #b3b0a3 !important;
}
.sh-cart-review-desk > .MuiGrid-item:first-child h1 {
  display: inline-block !important;
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  border: 2.5px solid #0a0a0a !important;
  box-shadow: 5px 5px 0 #ff3b2e !important;
  padding: 2px 10px !important;
  transform: rotate(-1deg) !important;
  line-height: 1.05 !important;
}

/* ---------- Cards ---------- */
:is(.sh-cart-review-desk, .sh-cart-review-mob) .custom-card,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-item-root,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-summary-root,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-items-cart-items {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.08) !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .custom-card {
  padding: 24px !important;
}
/* coupon box → dashed frame */
.sh-cart-review-desk .cart-review-desktop-box.universal-border {
  background: #ffffff !important;
  border: 2.5px dashed #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  padding: 20px 22px !important;
  margin-bottom: 24px !important;
}

/* ---------- Section headings → Anton + lime accent bar ---------- */
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-items-section-heading,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-summary-section-heading,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .coupon-apply-section-heading,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .payment-options-card-header,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .delivery-address-info-header,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .shipping-options-header,
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  div.custom-info-card-header
  > .custom-info-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
  margin-bottom: 4px !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .cart-items-section-heading::before,
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .cart-summary-section-heading::before,
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .coupon-apply-section-heading::before,
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .payment-options-card-header::before,
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .delivery-address-info-header::before,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .shipping-options-header::before,
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  div.custom-info-card-header
  > .custom-info-card-header::before {
  content: "" !important;
  flex: none !important;
  width: 9px !important;
  height: 20px !important;
  background: #d8ff3e !important;
  border: 2px solid #0a0a0a !important;
}

/* notes / sub-labels muted */
:is(.sh-cart-review-desk, .sh-cart-review-mob) .payment-options-card-note,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .custom-info-card-login {
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-size: 13px !important;
  text-transform: none !important;
  color: #6b6858 !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .custom-info-card-action-btn {
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #ff3b2e !important;
}

/* authenticated customer chips (same tailwind DOM as cart-detail) */
:is(.sh-cart-review-desk, .sh-cart-review-mob) .flex.gap-6.sm\:gap-12 {
  gap: 12px !important;
  flex-wrap: wrap !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .flex.gap-6.sm\:gap-12
  .flex.items-center.gap-2 {
  background: #f1efe7 !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 4px !important;
  padding: 9px 14px !important;
  gap: 10px !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .flex.gap-6.sm\:gap-12
  .flex.items-center.gap-2
  h6 {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #0a0a0a !important;
  margin: 0 !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .flex.gap-6.sm\:gap-12
  .flex.items-center.gap-2
  svg {
  color: #0a0a0a !important;
  fill: #0a0a0a !important;
}

/* ---------- Payment options ---------- */
:is(.sh-cart-review-desk, .sh-cart-review-mob) .payment-options-card-label {
  font-weight: 700 !important;
  color: #0a0a0a !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .payment-options-card-checked {
  color: #0a0a0a !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .payment-options-card-saving {
  display: inline-block !important;
  background: #eaf6ea !important;
  border: 1.5px solid #1f8a3b !important;
  color: #1f8a3b !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  border-radius: 3px !important;
  padding: 1px 7px !important;
  margin-left: 8px !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .payment-options-card-info {
  color: #6b6858 !important;
  font-size: 12px !important;
}

/* ---------- Delivery address info ---------- */
:is(.sh-cart-review-desk, .sh-cart-review-mob) .delivery-address-info-box {
  border: 2.5px solid #d9d6c8 !important;
  border-radius: 5px !important;
  padding: 14px 16px !important;
  margin-top: 12px !important;
  background: #fbfbef !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .delivery-address-info-address {
  color: #0a0a0a !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .delivery-address-info-address:first-child {
  font-weight: 800 !important;
}

/* ---------- Shipping options ---------- */
:is(.sh-cart-review-desk, .sh-cart-review-mob) .sh-shipping-option {
  border: 2.5px solid #d9d6c8 !important;
  border-radius: 5px !important;
  padding: 12px 14px !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .shipping-options-charge {
  font-family: "Anton", sans-serif !important;
  color: #0a0a0a !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .shipping-options-desktop-time {
  color: #6b6858 !important;
}

/* ---------- Wallet apply ---------- */
:is(.sh-cart-review-desk, .sh-cart-review-mob) .wallet-apply-root,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .wallet-apply-card {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.08) !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .wallet-apply-value {
  font-family: "Anton", sans-serif !important;
  color: #0a0a0a !important;
}

/* ---------- Coupon applied state ---------- */
:is(.sh-cart-review-desk, .sh-cart-review-mob) .coupon-apply-applied-coupon {
  color: #4a4739 !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .coupon-apply-applied-coupon
  > span {
  font-family: "Anton", sans-serif !important;
  letter-spacing: 0.03em !important;
  background: #d8ff3e !important;
  border: 2px solid #0a0a0a !important;
  padding: 0 7px !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .coupon-apply-coupon-note {
  color: #1f8a3b !important;
  font-weight: 700 !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .coupon-apply-action-btn {
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #ff3b2e !important;
}

/* ---------- Cart items ---------- */
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-item-cover {
  width: 84px !important;
  height: 84px !important;
  flex: none !important;
  background: #f1efe7 !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-item-cover img {
  object-fit: contain !important;
  padding: 6px !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-item-text {
  display: inline-block !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  color: #0a0a0a !important;
  background: #f1efe7 !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 4px !important;
  padding: 5px 10px !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-item-primary,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-item-primary * {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  color: #0a0a0a !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .cart-item-primary
  span[style*="line-through"] {
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-size: 13px !important;
  color: #8a8779 !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-item-remove-txt {
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #ff3b2e !important;
}

/* ---------- Quantity stepper ---------- */
:is(.sh-cart-review-desk, .sh-cart-review-mob) .pr-plus-minus-button {
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 30px !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .pr-plus-minus-button-icon-left,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .pr-plus-minus-icon-right {
  width: 26px !important;
  height: 100% !important;
  margin: 0 !important;
  font-family: "Anton", sans-serif !important;
  font-size: 18px !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .pr-plus-minus-button-icon-left {
  background: #0a0a0a !important;
  color: #d8ff3e !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .pr-plus-minus-icon-right {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .pr-plus-minus-button-text {
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  color: #0a0a0a !important;
}

/* ---------- Bill details ---------- */
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-summary-root {
  padding: 6px 18px 14px !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-summary-label {
  font-size: 14px !important;
  color: #6b6858 !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-summary-value {
  font-weight: 700 !important;
  color: #0a0a0a !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .cart-summary-root
  .MuiDivider-root {
  border-color: #e7e4d8 !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  #sh-coupon-discount-price
  .cart-summary-value {
  color: #1f8a3b !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .cart-summary-root
  > .MuiGrid-item:nth-last-child(2)
  .cart-summary-label {
  font-family: "Anton", sans-serif !important;
  font-size: 20px !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .cart-summary-root
  > .MuiGrid-item:last-child
  .cart-summary-value {
  font-family: "Anton", sans-serif !important;
  font-size: 24px !important;
  color: #0a0a0a !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-summary-delivery-savemsg {
  color: #6b6858 !important;
}

/* ---------- Savings + earn banners ---------- */
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-summary-savings-cont {
  background: #eaf6ea !important;
  border: 2px solid #1f8a3b !important;
  border-radius: 5px !important;
  color: #1c6b30 !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-summary-earn-cont {
  background: #ffffff !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 5px !important;
}

/* ---------- Place-order button ---------- */
.sh-cart-review-desk .cart-review-button-root {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  box-shadow: 6px 6px 0 #ff3b2e !important;
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 16px !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease !important;
}
.sh-cart-review-desk .cart-review-button-root:hover {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  transform: translate(3px, 3px) !important;
  box-shadow: 2px 2px 0 #ff3b2e !important;
}
.sh-cart-review-desk .cart-review-button-root.Mui-disabled,
.sh-cart-review-desk .cart-review-button-root:disabled {
  background: #e5e2d6 !important;
  color: #a9a693 !important;
  border-color: #c5c2b3 !important;
  box-shadow: none !important;
}
.sh-cart-review-desk .cart-review-button-label {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: inherit !important;
}

/* ---------- ITEM (n) + BILL DETAILS headings pulled INSIDE their boxes ---------- */
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-summary-section-heading,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-items-section-heading {
  position: static !important;
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-bottom: none !important;
  border-radius: 5px 5px 0 0 !important;
  padding: 16px 18px 10px !important;
  margin: 0 !important;
  box-shadow: 5px 0 0 rgba(10, 10, 10, 0.08) !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-summary-root {
  border-top: none !important;
  border-radius: 0 0 5px 5px !important;
  margin-top: 0 !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-items-cart-items {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-top: none !important;
  border-radius: 0 0 5px 5px !important;
  box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.08) !important;
  padding: 0 12px 4px !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .cart-items-cart-items
  .cart-item-root {
  border: none !important;
  border-bottom: 2px solid #e7e4d8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
:is(.sh-cart-review-desk, .sh-cart-review-mob)
  .cart-items-cart-items
  > div:last-child
  .cart-item-root {
  border-bottom: none !important;
}

/* ---------- Mobile bits ---------- */
.sh-cart-review-mob .cart-review-section-title {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}
.sh-cart-review-mob .cart-review-mobile-divider {
  background: #0a0a0a !important;
  height: 2.5px !important;
}

/* ============================================================
   7KICKS — ACCOUNT + ORDERS PAGES  ·  CSS-only restyle
   The account desktop shell is just .page-container (no unique
   class), so it is scoped via :has() on stable inner classes:
   .menu-container (sidebar), .orders-container, .profile-details-form-card.
   Brings the dark theme onto the cream / brutalist 7KICKS look.
   ============================================================ */

/* ---------- Page background (cream) ---------- */
main:has(.menu-container),
main:has(.orders-container),
main:has(.profile-details-form-card),
main:has(.listArea) {
  background: #f1efe7 !important;
}
.page-container:has(.menu-container) {
  background: #f1efe7 !important;
  color: #0a0a0a !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
}
/* content column: swap the thin grey rule for an ink divider */
.page-container:has(.menu-container) .flex-1 {
  border-left: 2.5px solid #0a0a0a !important;
}

/* ---------- Sidebar menu ---------- */
.menu-container .menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
/* inactive item */
.menu-container a.side-menu-item {
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
  border: 2.5px solid transparent !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  transition:
    border-color 0.12s ease,
    background 0.12s ease !important;
}
.menu-container a.side-menu-item:hover {
  border-color: #0a0a0a !important;
  background: #ffffff !important;
}
/* the active <a> becomes a lime block with ink border + red shadow */
.menu-container a.side-menu-header {
  display: block !important;
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  box-shadow: 4px 4px 0 #ff3b2e !important;
}
/* the wrapper div also carries .side-menu-header when active — flatten it
   so we don't get a box-in-a-box */
.menu-container .menu > div.side-menu-header {
  background: transparent !important;
  color: inherit !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Sign Out button → ink / lime brutalist */
.menu-container .side-menu-signout,
.menu-container .side-menu-signout.outlined-button__btn {
  background: #0a0a0a !important;
  color: #d8ff3e !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 4px 4px 0 #ff3b2e !important;
  margin-top: 28px !important;
}
.menu-container .side-menu-signout span {
  color: #d8ff3e !important;
}
.menu-container .side-menu-signout:hover {
  background: #0a0a0a !important;
}
.menu-container .side-menu-signout:hover span {
  color: #d8ff3e !important;
}

/* ---------- Profile Details ---------- */
/* heading row: "Profile Details" (Anton) + "Delete Account" (red mono) */
.profile-details-layout > div:first-child > .MuiTypography-root:first-child {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}
.sh-profile-delete {
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #ff3b2e !important;
}
/* the form card */
.profile-details-form-card {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.08) !important;
  padding: 28px !important;
}
.profile-details-form-card .MuiOutlinedInput-notchedOutline {
  border-color: #c9c6b8 !important;
}
.profile-details-form-card .MuiInputBase-input {
  color: #0a0a0a !important;
}
.profile-details-form-card .MuiInputBase-input:disabled {
  -webkit-text-fill-color: #6b6858 !important;
}
/* Edit Profile / Save (OutlinedButton) → ink / lime pill */
.profile-details-edit-section .outlined-button__btn {
  background: #0a0a0a !important;
  color: #d8ff3e !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.profile-details-edit-section .outlined-button__btn:hover {
  background: #0a0a0a !important;
}

/* ---------- Orders ---------- */
main:has(.order-list-item-root) {
  background: #f1efe7 !important;
}
.order-list-item-root {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.08) !important;
  margin-bottom: 16px !important;
}
/* the inner universal-border wrapper → soft line, no double frame */
.order-list-item-root .universal-border {
  border-color: #e7e4d8 !important;
  box-shadow: none !important;
}
.order-list-item-primarytxt {
  color: #0a0a0a !important;
  font-weight: 800 !important;
}
.order-list-item-secondarytxt {
  color: #6b6858 !important;
}
.order-list-item-image {
  background: #f1efe7 !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 5px !important;
}
.order-list-item-labelattribute {
  color: #4a4739 !important;
}

/* ---------- Mobile account (LoggedIn list) ---------- */
main:has(.listArea) .bg {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.08) !important;
  padding: 16px !important;
}
main:has(.listArea) .profileImg {
  background: #d8ff3e !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 50% !important;
}
main:has(.listArea) .listItem {
  background: #ffffff !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 5px !important;
  margin-bottom: 10px !important;
}
main:has(.listArea) .listText {
  color: #0a0a0a !important;
  font-weight: 700 !important;
}
main:has(.listArea) .phone {
  color: #6b6858 !important;
}

/* ============================================================
   7KICKS — STATIC / CONTENT PAGES  ·  CSS-only restyle
   about-us, contact-us, blog, and CMS pages (privacy-policy /
   terms / etc.). These render inside the dark .page-container,
   so we flip them to the cream / brutalist look. Scoped via
   :has() on each page's stable class so nothing else is touched.
   ============================================================ */

/* ---------- Page backgrounds → cream ---------- */
main:has(.sh-aboutus-page),
main:has(.contact-main-heading),
main:has(.sh-shoopy-html-page),
main:has(.ck-content),
main:has(.sh-blog-author-name),
main:has(.lg\:w-\[64vw\]) {
  background: #f1efe7 !important;
}
/* blog/CMS content sits on the black <body>; cover it (this wrapper
   is present on the blog list even when there are no posts) */
.page-container:has(.lg\:w-\[64vw\]) {
  background: #f1efe7 !important;
}
.sh-aboutus-page,
.page-container:has(.contact-main-heading),
.page-container:has(.sh-shoopy-html-page),
.page-container:has(.ck-content),
.page-container:has(.sh-blog-author-name) {
  background: #f1efe7 !important;
  color: #0a0a0a !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
}

/* ---------- About Us ---------- */
.sh-aboutus-page .MuiTypography-root {
  color: #0a0a0a !important;
}
.about-our-story .MuiTypography-h6 {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  color: #0a0a0a !important;
}
.about-description,
.about-description * {
  color: #1a1a1a !important;
}

/* ---------- Contact Us ---------- */
.contact-main-heading {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}
.contact-sub-heading {
  color: #6b6858 !important;
}
.contact-heading {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}
.contact-text {
  color: #1a1a1a !important;
}
.contact-icon {
  color: #0a0a0a !important;
}

/* ---------- CMS pages (privacy-policy / terms / etc.) ---------- */
.sh-shoopy-html-page {
  color: #0a0a0a !important;
}
/* the content wrapper (border-0 md:border …) → white brutalist card */
.sh-shoopy-html-page .border-inherit {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.08) !important;
}
.sh-shoopy-html-page h1 {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}
.ck-content,
.ck-content * {
  color: #1a1a1a !important;
}
.ck-content a {
  color: #1f5fd8 !important;
}

/* ---------- Blog ---------- */
.sh-blog-author-name {
  color: #0a0a0a !important;
}
/* blog list post cards → white ink-bordered cards */
main:has(.sh-blog-author-name) .flex.flex-col.space-y-8 > .border-0.md\:border {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.08) !important;
  overflow: hidden !important;
  margin-bottom: 4px !important;
}
main:has(.sh-blog-author-name) h2 {
  color: #0a0a0a !important;
}

/* ============================================================
   7KICKS — Contact "Drop us message" form card + Reviews page
   ============================================================ */

/* ---------- Contact Us form card ---------- */
.contact-form-card {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.08) !important;
  padding: 28px !important;
}
.contact-form-card .MuiOutlinedInput-notchedOutline {
  border-color: #c9c6b8 !important;
}
.contact-form-card .MuiInputBase-input {
  color: #0a0a0a !important;
}
.contact-form-card .MuiInputLabel-root.Mui-focused,
.contact-form-card
  .MuiOutlinedInput-root.Mui-focused
  .MuiOutlinedInput-notchedOutline {
  border-color: #0a0a0a !important;
  color: #0a0a0a !important;
}
.contact-divider {
  border: none !important;
  border-top: 2px solid #e7e4d8 !important;
}
/* Submit → lime brutalist button.
   Scoped under .contact-form-card (2 classes) so the red shadow beats
   MUI's .MuiButton-disableElevation { box-shadow:none !important }. */
.contact-form-card .contact-custom-button,
.contact-form-card .contact-custom-button.outlined-button__btn {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  box-shadow: 6px 6px 0 #ff3b2e !important;
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-top: 24px !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease !important;
}
.contact-form-card .contact-custom-button:hover,
.contact-form-card .contact-custom-button.outlined-button__btn:hover {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  transform: translate(3px, 3px) !important;
  box-shadow: 2px 2px 0 #ff3b2e !important;
}

/* ---------- Reviews & Ratings page ---------- */
main:has(.sh-reviews-and-ratings) {
  background: #f1efe7 !important;
}
.sh-reviews-and-ratings {
  background: #f1efe7 !important;
  color: #0a0a0a !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
}
.reviews-and-rating-heading {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}
.reviews-and-rating-card,
.profile-review-card-root {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.08) !important;
  margin-bottom: 16px !important;
}
.profile-review-card-name {
  color: #0a0a0a !important;
  font-weight: 800 !important;
}
.profile-review-card-title {
  color: #0a0a0a !important;
  font-weight: 700 !important;
}
.profile-review-description,
.profile-review-card-subtext,
.profile-review-card-status {
  color: #6b6858 !important;
}
.profile-review-card-prod-img {
  border: 2px solid #0a0a0a !important;
  border-radius: 5px !important;
  background: #f1efe7 !important;
}
.profile-review-card-delete {
  color: #ff3b2e !important;
}

/* ============================================================
   7KICKS — Addresses page + Add/Edit Address modal
   Modal is scoped via :has(.addressform-input-field) so only the
   address dialogs are touched (BottomSheet is shared site-wide).
   ============================================================ */

/* ---------- Add / Edit Address modal (dialog) ---------- */
.bottom-sheet-body:has(.addressform-input-field) {
  border: 2.5px solid #0a0a0a !important;
  border-radius: 6px !important;
  box-shadow: 8px 8px 0 rgba(10, 10, 10, 0.14) !important;
}
.bottom-sheet-body:has(.addressform-input-field) .bottom-sheet-head {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}
.add-address-modal-note {
  color: #6b6858 !important;
}
.add-address-modal-action-btn {
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #ff3b2e !important;
}
/* form inputs */
.bottom-sheet-body:has(.addressform-input-field)
  .MuiOutlinedInput-notchedOutline {
  border-color: #c9c6b8 !important;
}
.bottom-sheet-body:has(.addressform-input-field) .MuiInputBase-input,
.bottom-sheet-body:has(.addressform-input-field) .MuiSelect-select {
  color: #0a0a0a !important;
}
/* Save Address (SolidButton) → lime brutalist. The long selector beats
   MUI's .MuiButton-disableElevation{box-shadow:none!important}. */
.bottom-sheet-body:has(.addressform-input-field) .solid-button__btn {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  box-shadow: 6px 6px 0 #ff3b2e !important;
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease !important;
}
.bottom-sheet-body:has(.addressform-input-field) .solid-button__btn:hover {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  transform: translate(3px, 3px) !important;
  box-shadow: 2px 2px 0 #ff3b2e !important;
}

/* ---------- Addresses page ---------- */
.desk-addresses-title {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}
/* "Add Address" (OutlinedButton, shown when addresses exist) → ink/lime */
.desk-addresses-root .outlined-button__btn {
  background: #0a0a0a !important;
  color: #d8ff3e !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
/* empty-state (GhostScreen) — scoped to addresses only */
.desk-addresses-root .ghost-screnn-container .title {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}
.desk-addresses-root .ghost-screnn-container .sub-text {
  color: #6b6858 !important;
}
.desk-addresses-root .ghost-screnn-container .solid-button__btn {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  box-shadow: 6px 6px 0 #ff3b2e !important;
  font-family: "Anton", sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.desk-addresses-root .ghost-screnn-container .solid-button__btn:hover {
  background: #d8ff3e !important;
  transform: translate(3px, 3px) !important;
  box-shadow: 2px 2px 0 #ff3b2e !important;
}

/* saved address cards */
.address-card {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.08) !important;
}
.address,
.address-phone {
  color: #0a0a0a !important;
}

/* delete-address dialog */
.desk-deleteadddesctxt {
  color: #0a0a0a !important;
  font-weight: 700 !important;
}
.desk-cancelbtn {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  font-family: "Space Mono", monospace !important;
  text-transform: uppercase !important;
}
.desk-deletebtn {
  background: #ff3b2e !important;
  color: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  font-family: "Space Mono", monospace !important;
  text-transform: uppercase !important;
}

/* ---------- Saved address card: name + Edit Address button ---------- */
.address-header {
  color: #0a0a0a !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}
.address-header-idx {
  color: #6b6858 !important;
  font-weight: 800 !important;
}
.address-card .address-editbtn {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 4px !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
.address-card .address-editbtn svg {
  color: #0a0a0a !important;
  width: 16px !important;
  height: 16px !important;
}
.address-card .address-editbtn:hover {
  background: #0a0a0a !important;
  color: #d8ff3e !important;
}
.address-card .address-editbtn:hover svg {
  color: #d8ff3e !important;
}

/* ============================================================
   7KICKS — Cart note (settings.cart_note) styled as the COD note.
   The store's Cart Note renders inside <revert-tailwind-container>
   in CartSummary (cart-detail + cart-review). Style it like the
   reference .cod-note: red left accent, red mono title, muted body.
   ============================================================ */
.sh-cart-details-page-desk revert-tailwind-container,
.sh-cart-detail-page-mob revert-tailwind-container,
.sh-cart-review-desk revert-tailwind-container,
.sh-cart-review-mob revert-tailwind-container {
  display: block !important;
  border-left: 3px solid #ff3b2e !important;
  padding: 6px 0 6px 16px !important;
  margin-top: 10px !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #6b6858 !important;
}
/* body paragraphs / spans → muted, readable (override inline red) */
.sh-cart-details-page-desk revert-tailwind-container p,
.sh-cart-detail-page-mob revert-tailwind-container p,
.sh-cart-review-desk revert-tailwind-container p,
.sh-cart-review-mob revert-tailwind-container p,
.sh-cart-details-page-desk revert-tailwind-container span,
.sh-cart-detail-page-mob revert-tailwind-container span,
.sh-cart-review-desk revert-tailwind-container span,
.sh-cart-review-mob revert-tailwind-container span {
  color: #6b6858 !important;
  margin: 0 !important;
}
/* first-line heading (strong/b/h1-6) → red Space Mono caps */
.sh-cart-details-page-desk
  revert-tailwind-container
  :is(strong, b, h1, h2, h3, h4, h5, h6),
.sh-cart-detail-page-mob
  revert-tailwind-container
  :is(strong, b, h1, h2, h3, h4, h5, h6),
.sh-cart-review-desk
  revert-tailwind-container
  :is(strong, b, h1, h2, h3, h4, h5, h6),
.sh-cart-review-mob
  revert-tailwind-container
  :is(strong, b, h1, h2, h3, h4, h5, h6) {
  display: block !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #ff3b2e !important;
  margin-bottom: 6px !important;
}

/* Fallback COD note: if the store has NO Cart Note set, show it via CSS.
   Attached to the Bill Details container (NORMAL flow) — NOT the sticky
   Continue/Order button — so it scrolls with the page instead of sticking
   to the viewport (that was the scroll glitch). Rendered on cart-detail +
   cart-review. Guarded by :not(:has(revert-tailwind-container)) so it never
   duplicates a real Cart Note. (Preferred: set it in the Cart Note field.) */
:is(.sh-cart-details-page-desk, .sh-cart-review-desk):not(
    :has(revert-tailwind-container)
  )
  div:has(> #sh-bill-details-card)::after {
  content: "HEY! LOOK HERE\A\A If you select cash on delivery payment method, you will have to pay the shipping charges in advance and that is because many customers refuse to accept the parcel at the time of delivery after placing the order without any valid reason. Due to which we suffer loss in shipping. This helps us avoid unnecessary expenses and maintain efficiency in our operations.";
  display: block;
  white-space: pre-line;
  text-align: left;
  border-left: 3px solid #ff3b2e;
  padding: 6px 0 10px 16px;
  margin: 14px 0 4px;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #6b6858;
}

.product-review-root {
  max-width: 1320px !important;
  margin: 0 auto !important;
  color: #0a0a0a !important;
}

/* heading -> dark Anton with a lime highlight (reference "squad says." motif) */
.product-review-heading {
  display: inline-block !important;
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(30px, 5vw, 56px) !important;
  line-height: 0.92 !important;
  text-transform: uppercase !important;
  color: var(--k-black, #0a0a0a) !important;
  background: var(--k-yellow, #d8ff3e) !important;
  padding: 2px 10px !important;
  margin-bottom: 28px !important;
}

/* reference grid: 240px stat card | 1fr review cards */
.product-review-root > .product-review-list {
  gap: clamp(24px, 4vw, 48px) !important;
  align-items: flex-start !important;
}
.product-review-summary {
  flex: 0 0 240px !important;
  max-width: 240px !important;
}

/* ---- STAT CARD ---- reference #reviews-sum */
.product-review-summary {
  background: var(--k-black, #0a0a0a) !important;
  border: 2.5px solid var(--k-black, #0a0a0a) !important;
  border-radius: 5px !important;
  box-shadow: 8px 8px 0 var(--k-yellow, #d8ff3e) !important;
  padding: 26px !important;
  text-align: center !important;
}
.product-review-summary-info {
  display: block !important;
}
.product-review-summary .rating-stars {
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}
/* big score -> lime Anton 64px (reference .rev-big) */
.product-review-summary .star-text {
  font-family: "Anton", sans-serif !important;
  font-size: clamp(44px, 6vw, 64px) !important;
  font-weight: 400 !important;
  color: var(--k-yellow, #d8ff3e) !important;
  line-height: 1 !important;
}
/* stat-card stars -> red */
.product-review-summary .front-star svg,
.product-review-summary .front-star svg * {
  stroke: var(--k-red, #ff3b2e) !important;
}
/* hide per-rating bars (reference stat card has none) */
.product-review-ratings-box {
  display: none !important;
}
.product-review-subtext,
.product-review-num-of-rating {
  font-family: "Space Mono", monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--k-muted, #888) !important;
}
.product-review-no-review {
  color: #fff !important;
  font-weight: 800 !important;
}
.product-review-empty-subtext {
  color: var(--k-muted, #888) !important;
}

/* Write A Review -> ink outline button (dark-on-white section) */
.product-review-review-btn,
.product-review-review-btn.sh-outlined-button,
.product-review-review-btn .MuiButton-root {
  background: transparent !important;
  color: var(--k-yellow, #d8ff3e) !important;
  border: 2.5px solid var(--k-yellow, #d8ff3e) !important;
  border-radius: 3px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition:
    background 0.12s,
    color 0.12s !important;
}
.product-review-review-btn:hover,
.product-review-review-btn.sh-outlined-button:hover {
  background: var(--k-yellow, #d8ff3e) !important;
  color: var(--k-black, #0a0a0a) !important;
}

/* ---- REVIEW CARDS grid ---- reference: repeat(auto-fit,minmax(240px,1fr)) */
.product-review-list .product-review-list > div > div {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}
/* each review = bordered card; default (1st of every 3) = cream */
.review-card-root {
  border: 2.5px solid var(--k-black, #0a0a0a) !important;
  border-radius: 5px !important;
  padding: 20px !important;
  margin: 0 !important;
  background: #f4f2ea !important;
}
/* hide the theme's divider lines between reviews */
.sh-pc-rev-ctn hr,
.review-card-root hr,
.product-review-list hr,
.product-review-list [class*="margin-line"] {
  display: none !important;
}

/* cream/lime card text -> dark */
.review-card-name,
.review-card-title {
  color: var(--k-black, #0a0a0a) !important;
  font-weight: 800 !important;
}
.review-card-subtext {
  color: #0a0a0a !important;
  font-family: "Space Mono", monospace !important;
  font-size: 12px !important;
}
.review-card-description {
  color: #1a1a1a !important;
  line-height: 1.5 !important;
}
.review-card-profile-img {
  background: var(--k-black, #0a0a0a) !important;
  border: 2px solid var(--k-black, #0a0a0a) !important;
}
.review-card-profile-img svg {
  color: var(--k-yellow, #d8ff3e) !important;
}
/* cream card stars -> red */
.review-card-root .front-star svg,
.review-card-root .front-star svg * {
  stroke: var(--k-red, #ff3b2e) !important;
}

/* 2nd of every 3 -> LIME card, ink stars */
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 2)
  .review-card-root {
  background: var(--k-yellow, #d8ff3e) !important;
}
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 2)
  .review-card-root
  .front-star
  svg,
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 2)
  .review-card-root
  .front-star
  svg
  * {
  stroke: var(--k-black, #0a0a0a) !important;
}

/* 3rd of every 3 -> DARK card, light text, lime stars */
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-root {
  background: var(--k-black, #0a0a0a) !important;
}
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-name,
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-title {
  color: #fff !important;
}
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-description {
  color: #ffffff !important;
}
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-subtext {
  color: var(--k-yellow, #d8ff3e) !important;
}
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-root
  .front-star
  svg,
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-root
  .front-star
  svg
  * {
  stroke: var(--k-yellow, #d8ff3e) !important;
}

/* stack on small screens */
@media (max-width: 768px) {
  .product-review-root > .product-review-list {
    flex-direction: column !important;
  }
  .product-review-summary {
    flex-basis: auto !important;
    max-width: none !important;
    width: 100% !important;
  }
}

/* view-all link -> ink */
.reviews-list-viewAll {
  color: var(--k-black, #0a0a0a) !important;
  font-weight: 700 !important;
}
/* ============================================================
   7KICKS — Product listing (products / categories / collections)
   All three render the shared ProductListWithFilter, which wraps
   content in .page-container (painted black by the global rule).
   Repaint cream + make the filter sidebar / sort controls readable.
   Keyed on the child .flex.lg:flex-row.gap-8 so the header
   .page-container bars stay untouched.
   ============================================================ */
/* Separate rules (NOT grouped) — a nested :has() in a selector list would
   invalidate the whole rule, so keep each on its own. */
.page-container:has(> .flex.lg\:flex-row.gap-8) {
  background: #f1efe7 !important;
}
.min-h-screen.bg-white:has(> .page-container > .flex.lg\:flex-row.gap-8) {
  background: #f1efe7 !important;
}
/* On categories/collections the wrapper also holds a breadcrumb .page-container
   (no flex grid child). Make every .page-container inside the listing wrapper
   transparent so the cream shows through everywhere (fixes the black strip). */
.min-h-screen.bg-white:has(> .page-container > .flex.lg\:flex-row.gap-8)
  > .page-container {
  background: transparent !important;
}
/* page title (All Products / category / collection name) */
.page-container:has(> .flex.lg\:flex-row.gap-8) h1 {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}
/* Filters + Sort buttons → brutalist ink pills */
.page-container:has(> .flex.lg\:flex-row.gap-8) .MuiButton-outlined {
  color: #0a0a0a !important;
  background: #ffffff !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 4px !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.page-container:has(> .flex.lg\:flex-row.gap-8) .MuiButton-outlined:hover {
  background: #d8ff3e !important;
}
/* filter section labels + counts → ink (were invisible on black) */
.page-container:has(> .flex.lg\:flex-row.gap-8) .MuiFormControlLabel-label,
.page-container:has(> .flex.lg\:flex-row.gap-8) label,
.page-container:has(> .flex.lg\:flex-row.gap-8) .MuiTypography-root {
  color: #0a0a0a !important;
}
/* filter checkboxes → ink */
.page-container:has(> .flex.lg\:flex-row.gap-8) .MuiCheckbox-root {
  color: #0a0a0a !important;
}
.page-container:has(> .flex.lg\:flex-row.gap-8) .MuiCheckbox-root.Mui-checked {
  color: #0a0a0a !important;
}
/* filter group dividers */
.page-container:has(> .flex.lg\:flex-row.gap-8) hr,
.page-container:has(> .flex.lg\:flex-row.gap-8) .MuiDivider-root {
  border-color: #d9d6c8 !important;
}

/* ============================================================
   7KICKS — Categories index (/categories)
   Separate component: .min-h-screen wrapper (no bg) with a
   .lg:grid-cols-4 card grid + breadcrumb .page-container.
   Cream page, brutalist white category cards, Anton heading.
   ============================================================ */
.min-h-screen:has(.grid.grid-cols-2.lg\:grid-cols-4) {
  background: #f1efe7 !important;
}
.min-h-screen:has(.grid.grid-cols-2.lg\:grid-cols-4) .page-container {
  background: transparent !important;
}
.min-h-screen:has(.grid.grid-cols-2.lg\:grid-cols-4) h2 {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}
.min-h-screen:has(.grid.grid-cols-2.lg\:grid-cols-4) h3 {
  color: #0a0a0a !important;
  font-weight: 700 !important;
}
/* category cards + CTA box → white ink-bordered cards */
.min-h-screen:has(.grid.grid-cols-2.lg\:grid-cols-4) .bg-white {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: 4px 4px 0 rgba(10, 10, 10, 0.08) !important;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease !important;
}
.min-h-screen:has(.grid.grid-cols-2.lg\:grid-cols-4) .grid > .bg-white:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 8px 8px 0 #0a0a0a !important;
}
/* CTA "View all products" (SolidButton) → lime brutalist */
.min-h-screen:has(.grid.grid-cols-2.lg\:grid-cols-4) .solid-button__btn {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  box-shadow: 5px 5px 0 #ff3b2e !important;
  font-family: "Anton", sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   7KICKS — EQUAL-HEIGHT PRODUCT CARDS (listing grid)
   The listing is a Tailwind `grid` whose wrapper divs stretch to
   the tallest card in the row, but .product-card sits content-tall
   inside them, so cards with a rating row look taller. Make each
   card fill its cell and pin the price to the bottom so every card
   in a row is the same height. CSS-only.
   ============================================================ */
.grid > div:has(> .product-card) {
  height: 100% !important;
}
.grid > div:has(> .product-card) > .product-card {
  height: 100% !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.grid > div:has(> .product-card) > .product-card > .product-card-link {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
/* info grows to fill; price row pinned to the bottom (reference .k108/.k110) */
.product-card-info {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.product-card-info > .flex:last-child {
  margin-top: auto !important;
}

/* every row the same height too → all cards identical across the grid */
.grid:has(> div > .product-card) {
  grid-auto-rows: 1fr !important;
}

/* ============================================================
   7KICKS — PRODUCT LISTING polish (buttons + text)
   Toolbar buttons (Filters / Hide filters / sort) -> brutalist;
   card titles -> Anton uppercase; prices bold; filter text tidy.
   CSS-only, scoped to listing classes.
   ============================================================ */

/* ---- toolbar buttons: Filters / Hide filters / Newest First ---- */
.sort-list-btn,
.filter-icon-btn-mobile,
.mob-hide-lg > button.universal-btn-style {
  border: 2px solid #0a0a0a !important;
  border-radius: 3px !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transition:
    background 0.12s,
    color 0.12s,
    box-shadow 0.12s !important;
}
.sort-list-btn:hover,
.filter-icon-btn-mobile:hover,
.mob-hide-lg > button.universal-btn-style:hover {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  box-shadow: 3px 3px 0 #0a0a0a !important;
}

/* ---- card title -> Anton uppercase (reference .k109) ---- */
.product-card-name {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  color: #0a0a0a !important;
}
/* price -> bold ink; mrp muted strike (reference .k111/.k112) */
.product-card-price {
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #0a0a0a !important;
}
.product-card-mrp-price {
  color: #999 !important;
}

/* ---- filter sidebar text ---- */
/* section headings: Category / Price Range / Brand / Size */
.coll-ctn > button:first-child,
.coll-ctn > div:first-child,
.filter-section-title,
.category-filter-title {
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
/* checkbox labels + counts */
.sh-ftr-label {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #0a0a0a !important;
}
.sh-ftr-label span {
  color: #999 !important;
  font-weight: 400 !important;
}

/* Go button in price filter -> brutalist */
.price-filter-go {
  background: #0a0a0a !important;
  color: #d8ff3e !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 3px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ============================================================
   7KICKS — REVIEWS empty-state polish + many-reviews tidy
   ============================================================ */
/* empty state ("No Customer Reviews"): wider, roomier panel */
.product-review-summary:has(.product-review-no-review) {
  flex-basis: 340px !important;
  max-width: 340px !important;
  padding: 38px 28px !important;
}
.product-review-no-review {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 12px 0 0 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.01em !important;
}
.product-review-empty-subtext {
  font-family: "Space Mono", monospace !important;
  font-size: 12px !important;
  color: #888 !important;
  margin: 8px 0 2px !important;
  line-height: 1.5 !important;
}
/* dim the empty stars on the dark card */
.product-review-summary .back-star svg {
  stroke: #444 !important;
}
.product-review-summary:has(.product-review-no-review)
  .product-review-review-btn {
  margin-top: 18px !important;
  width: 100% !important;
}
/* many reviews: cards wrap in a tidy grid, tops aligned, readable quote */
.review-card-description {
  display: -webkit-box !important;
  -webkit-line-clamp: 6 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* equal-height review cards per row so a long review doesn't look ragged */
.product-review-list .product-review-list > div > div {
  align-items: stretch !important;
}
.product-review-list .product-review-list > div > div > div {
  height: 100% !important;
}
.review-card-root {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ---- empty reviews: centre the panel (no lopsided white void) ---- */
.product-review-root > .product-review-list:has(.product-review-no-review) {
  justify-content: center !important;
  align-items: center !important;
}
/* the review-cards column is empty when there are no reviews → collapse it */
.product-review-root
  > .product-review-list:has(.product-review-no-review)
  > .product-review-list {
  display: none !important;
}
.product-review-summary:has(.product-review-no-review) {
  flex: 0 1 460px !important;
  max-width: 460px !important;
  width: 100% !important;
  margin: 6px auto 0 !important;
}

/* empty reviews: centre the heading too (matches the centred panel) */
.product-review-root:has(.product-review-no-review) {
  text-align: center !important;
}

/* ============================================================
   7KICKS — /account/address-form (full-page Add Address)
   HeadlessContainer's <main> has no background, so the black
   <body> shows through. Make it cream + brand the header, inputs
   and the fixed Save bar. Scoped via main:has(.addressform-*) so
   it only affects this full-page form (the modal portals outside
   <main>, so it's untouched). Covers mobile AND desktop.
   ============================================================ */
main:has(.addressform-input-field),
main:has(.addressform-field) {
  background: #f1efe7 !important;
  min-height: calc(100vh - 64px) !important;
}
/* headless top bar → 7KICKS black + lime accent */
.headless-luxury-header {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-bottom: 2.5px solid #d8ff3e !important;
}
.headless-luxury-header span {
  color: #ffffff !important;
  font-family: "Anton", sans-serif !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}
.headless-luxury-header svg {
  color: #d8ff3e !important;
}
/* form inputs */
main:has(.addressform-input-field) .MuiOutlinedInput-notchedOutline {
  border-color: #c9c6b8 !important;
}
main:has(.addressform-input-field) .MuiInputBase-input,
main:has(.addressform-input-field) .MuiSelect-select {
  color: #0a0a0a !important;
}
/* fixed bottom Save bar + button */
main:has(.addressform-input-field) .fixed.bottom-0 {
  background: #f1efe7 !important;
  border-top: 2.5px solid #0a0a0a !important;
  box-shadow: none !important;
}
main:has(.addressform-input-field) .solid-button__btn {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 4px !important;
  box-shadow: 4px 4px 0 #ff3b2e !important;
  font-family: "Anton", sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   7KICKS — HERO mobile sequence (.k022)
   Desired top→bottom on mobile: badge · heading · description ·
   PRODUCT CARD · buttons · reviews. The card (.k035) is a sibling
   of the text column, so flatten the text column with
   display:contents and order everything into one flex column.
   ============================================================ */
@media (max-width: 880px) {
  .k022 {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  /* unwrap the (class-less) text column so its children sit beside the card */
  .k022 > div:not(.k035) {
    display: contents !important;
  }
  /* explicit sequence */
  .k022 .k023 {
    order: 1 !important;
  } /* badge  */
  .k022 .k024 {
    order: 2 !important;
  } /* heading */
  .k022 .k028 {
    order: 3 !important;
  } /* description */
  .k022 > .k035 {
    order: 4 !important;
  } /* product card */
  .k022 .k029 {
    order: 5 !important;
  } /* buttons */
  .k022 .k032 {
    order: 6 !important;
  } /* reviews row */
}

/* ============================================================
   7KICKS — "The Retro 84 Pack" title (.k077) single line on mobile
   Markup hard-breaks it with <br> ("The Retro"<br>"84 Pack").
   Drop the break + nowrap so it sits on one line on mobile.
   (Desktop keeps the reference 2-line treatment.)
   ============================================================ */
@media (max-width: 880px) {
  .k077 br {
    display: none !important;
  }
  .k077 {
    white-space: nowrap !important;
  }
}

/* hero mobile: left-align the heading (grid's align-items:center was
   centring items horizontally once it became a flex column) */
@media (max-width: 880px) {
  .k022 {
    align-items: stretch !important;
  }
  .k024 {
    text-align: left !important;
  }
}

/* reviews: the INNER list wrapper inherits display:flex from the theme,
   which collapses the card grid to its 240px min (1 column). Force it to
   block so the grid fills the width and lays cards out 3-across. */
.product-review-list .product-review-list {
  display: block !important;
  width: 100% !important;
}
.product-review-list .product-review-list > div,
.product-review-list .product-review-list > div > div {
  width: 100% !important;
}

/* mobile: clearer gap between the stat card and the review list
   (the card's 8px lime shadow was eating the small default gap) */
@media (max-width: 768px) {
  .product-review-root > .product-review-list {
    gap: 34px !important;
  }
}

/* ============================================================
   7KICKS — category cards: slightly rectangular + image-ready
   Homepage "Pick your…" section cards (.k060/.k064/.k067/.k068).
   Make them a portrait rectangle (was ~square) and push the text
   to the bottom so the top area is free for a category image.
   ============================================================ */
.k060,
.k064,
.k067,
.k068 {
  aspect-ratio: 4 / 5 !important; /* slightly rectangular (portrait) */
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
/* number stays top; name + shop-now sink to the bottom */
.k060 > .k062,
.k064 > .k062,
.k067 > .k062,
.k068 > .k062 {
  margin-top: auto !important;
}

/* red category column: its hover shadow was black (8px 8px 0 #0A0A0A),
   invisible on the black page — give it a visible lime shadow so it
   matches the other columns. */
.k068:hover {
  box-shadow: 8px 8px 0 var(--k-yellow, #d8ff3e) !important;
}

/* ============================================================
   7KICKS — Checkout / cart-review: item thumbnail fully filled
   The thumbnail next to the item name was object-fit:contain with
   6px padding (leaving sand gaps around it). Fill it edge-to-edge
   with no padding.
   ============================================================ */
.sh-cart-details-page-desk .cart-item-cover img,
.sh-cart-detail-page-mob .cart-item-cover img,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-item-cover img {
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
}
/* Checkout / cart-review: item thumbnail fully filled, no padding */
.sh-cart-details-page-desk .cart-item-cover img,
.sh-cart-detail-page-mob .cart-item-cover img,
:is(.sh-cart-review-desk, .sh-cart-review-mob) .cart-item-cover img {
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
}
/* ============================================================
   7KICKS — second announcement/marquee bar (.k050) full-bleed
   It sits inside the hero wrapper (inset ~40px); break it out to
   span the full viewport width, edge to edge.
   ============================================================ */
.k050,
.k002 {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}
/* .k002 (top lime ticker) needs the SAME full-bleed anchoring as .k050:
   inside the banner Swiper it otherwise becomes content-width and
   viewport-centred, so its track's right edge falls short at the -50%
   point and blank space appears on the right. width:100vw + the breakout
   makes it a fixed, left-anchored, full-width overflow:hidden window (its
   base overflow:hidden clips the long track), so the repeated text fills
   the whole bar. */
/* The 100vw breakout above only gives .k050 a full-width layout BOX — the
   real live DOM wraps the pasted 7Kicks HTML as a single slide inside the
   theme's BANNER SWIPER, and several of those wrappers clip/pad the band:

     main > .banner.page-container (max-width 1600)
          > .banner-root .px-4/.md:px-10   (16/40px padding + overflow-x:hidden)  ← inset
          > .swiper                         (overflow-x:hidden)                    ← clips
          > .swiper-wrapper > .swiper-slide > .custom-html-slide
          > section.k020 (overflow-x:hidden) > .k050

   A child can't escape an overflow:hidden ancestor by positioning, so un-clip
   AND un-pad that whole chain. Scoped with :has(.k050); this banner holds a
   single slide (the entire page), so removing the swiper's overflow is safe —
   there are no sibling slides to leak. section.k020 keeps its own
   overflow-x:hidden (left full-width) which trims the 100vw band's ~7px
   over-reach back to the viewport edges → true edge-to-edge, no horizontal
   scrollbar. Inner content stays centred via .k021/.k055 (their own max-width).
   Verified on the live store (demo-72417.localhost:3021) via elementFromPoint. */
.page-container:has(.k002, .k050),
.banner-root:has(.k002, .k050),
.swiper:has(.k002, .k050),
.swiper-wrapper:has(.k002, .k050),
.swiper-slide:has(.k002, .k050),
.custom-html-slide:has(.k002, .k050) {
  max-width: 100% !important;
  overflow: visible !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   7KICKS — top live-ticker (.k003) seamless infinite loop
   The track holds two identical copies and animates translateX(-50%).
   With flex `gap`, the 26px space sits only BETWEEN the two copies
   (none after the 2nd), so -50% lands ~13px (half a gap) short of the
   seam → a visible jump on every loop. Moving the 26px spacing onto
   each child's right margin makes both copies — including their
   trailing space — identical, so -50% aligns exactly and the loop is
   gap-free. (The bottom .k051 marquee already bakes its spacing into
   the text, so it is seamless as-is.)
   ============================================================ */
.k003 {
  gap: 0 !important;
}
.k003 > * {
  margin-right: 26px !important;
}

/* ============================================================
   7KICKS — announcement bars ALWAYS fill the width (no blank gap)
   Each bar animates translateX(0 → -50%), so at the -50% point the
   visible viewport is only covered if ONE HALF of the track is wider
   than the screen. One copy of the text (~1110px top / ~1255px bottom)
   is narrower than a desktop viewport → blank space swept in on the
   right at each loop.
   FIX (needs the matching HTML change): repeat the content 6× instead
   of 2× in each track (`.k003` and `.k051`). Half the track is then
   3 copies (~3.3k top / ~3.8k bottom px) — wider than any desktop /
   ultrawide screen — so the text always fills edge to edge.
   Because a cycle now travels 3 copies instead of 1, slow each
   animation 3× so the SCROLL SPEED stays exactly as before. */
.k003 {
  animation-duration: 66s !important; /* top ticker: was 22s (×3 for 6 copies) */
}
.k051 {
  animation-duration: 54s !important; /* bottom marquee: was 18s (×3 for 6 copies) */
}

/* ============================================================
   7KICKS — reviews marquee (.k128) seamless infinite loop, always
   filled, + a per-card "View Reviews" CTA → /products.
   Same family of fixes as the ticker bars:
   • flex `gap:18px` sat only BETWEEN the two halves → move it onto each
     card's right margin so both halves incl. trailing space are identical
     and translateX(-50%) aligns exactly (no jump).
   • the HTML now holds 16 cards = 2 identical halves of 8 (was 6 mixed
     cards). Half a track (8 × 348px ≈ 2840px) is wider than any desktop /
     ultrawide screen, so the cards always fill the row — no whitespace.
   • duration 30s → 80s keeps the SAME scroll speed (a cycle now travels
     8 cards instead of 3).
   Cards become flex columns so the CTA pins to the bottom (equal heights).
   NEEDS the matching HTML: top .k146 button removed from .k124; each card
   gets <a class="k-rev" href="/products">View Reviews →</a>. */
.k128 {
  gap: 0 !important;
  animation-duration: 80s !important;
}
.k128 > * {
  margin-right: 18px !important;
}
.k129,
.k133,
.k136 {
  display: flex !important;
  flex-direction: column !important;
}
.k-rev {
  margin-top: auto;
  align-self: flex-start;
  text-decoration: none;
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
  border: 2px solid currentColor;
  border-radius: 3px;
  transition:
    background 0.15s,
    color 0.15s;
}
.k129 .k-rev,
.k133 .k-rev {
  color: #0a0a0a;
}
.k136 .k-rev {
  color: #d8ff3e;
}
.k129 .k-rev:hover,
.k133 .k-rev:hover {
  background: #0a0a0a;
  color: #fff;
}
.k136 .k-rev:hover {
  background: #d8ff3e;
  color: #0a0a0a;
}

/* ============================================================
   7KICKS — product collection carousels (Best Seller / Most Wanted…)
   1) Full-width section: the wrapper caps at max-width:1600px →
      remove it so the row runs end-to-end (keeps the 40px padding).
   2) Header row: title on the left, "Shop All" on the right.
   ============================================================ */
.page-container.my-6:has(.product-collection) {
  max-width: 100% !important;
}
.collection-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

/* ============================================================
   7KICKS — product card → "MOST WANTED" reference look
   Card keeps its ink outline; the image drops its own outline and
   gets only a bottom separator line; image is a perfect square with
   no side padding; %-off badge red; clean hover lift.
   (ADD-TO-CART button + BEST SELLER/HOT badges are not in the live
   card markup — those need a component change, not CSS.)
   ============================================================ */
.product-card {
  background: #fff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  overflow: hidden !important;
}
/* image area: square, sand, NO outline, only a bottom separator */
.product-card-image-container {
  aspect-ratio: 1 / 1 !important;
  background: #f1efe7 !important;
  border: none !important;
  border-bottom: 2.5px solid #0a0a0a !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.product-card-image-container:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* image fills the square width, no side padding (full sneaker shown) */
.product-card-image-container .product-card-image.main-image,
.product-card-image-container img.product-card-image.main-image {
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
/* %-off badge → red brutalist badge (reference .k113/.k115: red fill,
   ink border, Space Mono 700, rotated). Inset from the corner so the
   border + tilt read as an intentional sticker, not a flush block. */
.product-card-discount {
  top: 10px !important;
  left: 170px !important;
  right: 0px !important;
  background: #ff3b2e !important;
  color: #fff !important;
  font-family: "Space Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 5px 9px !important;
  border: 1.5px solid #0a0a0a !important;
  border-radius: 3px !important;
  transform: rotate(-3deg) !important;
  line-height: 1 !important;
}

/* product tag — the theme hardcodes the literal "New" text on every card
   (.product-card-tag <span>); CSS can't relabel it reliably, and the store
   doesn't want a "New" sticker, so hide it entirely. (The red "% OFF"
   .product-card-discount badge is separate and stays.) */
.product-card-tag {
  display: none !important;
}

/* card body: consistent vertical rhythm between name / rating / price
   (reference .k108 gap:8px) */
.product-card-info {
  gap: 8px !important;
}

/* clean brutalist hover lift on the whole card (reference .k104:hover) */
.product-card:hover {
  transform: translate(-4px, -4px) rotate(-1deg) !important;
  box-shadow: 9px 9px 0 #0a0a0a !important;
}

/* ============================================================
   7KICKS — "MOST WANTED" best-sellers section (.k099)
   It's a custom-HTML home section, and Shoopy wraps it in a padded
   .page-container — so the white band was inset by the 40px gutters
   (not edge-to-edge) and, on wide screens, auto-fill reserved an
   empty grid column on the right (cards looked clustered left).
   1) Full-bleed the white section edge-to-edge (100vw break-out,
      same pattern as .k050) while the inner .k055 keeps its
      max-width and stays centred.
   2) auto-fit (not auto-fill) so a 4-card row fills the width
      instead of leaving an empty column.
   3) Heading + "All best sellers" link → on-brand 7Kicks styling.
   ============================================================ */
.k099 {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}
/* content stays contained + centred (belt-and-braces vs theme cascade) */
.k099 .k055 {
  width: 100% !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* cards fill the row — collapse the empty auto-fill track */
.k099 .k103 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}
/* heading → crisp 7Kicks Anton (win over the monarque theme's h2 styles) */
.k099 .k101 {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  color: #0a0a0a !important;
}
/* "All best sellers" link → lime brutalist CTA (matches the site's
   button language: lime fill, ink border, offset shadow, press hover) */
.k099 .k102 {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 3px !important;
  box-shadow: 4px 4px 0 #0a0a0a !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 18px !important;
  transition:
    transform 0.12s,
    box-shadow 0.12s !important;
}
.k099 .k102:hover {
  background: #d8ff3e !important;
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 #0a0a0a !important;
}
/* ============================================================
   7KICKS — native "Most wanted" product-collection carousel
   (.product-collection). This is the theme's own product carousel
   (Swiper), NOT the .k099 custom-HTML section. Its cards were huge
   (~3 across) on a black band with a tiny heading. Make it read like
   the 7Kicks best-sellers reference:
   1) white full-bleed band (the .section wrapper spans full width);
   2) content contained + centred (override the earlier max-width:100%);
   3) 4 cards per row on desktop / 2 on mobile — slide width is
      calc(100%/--product-in-row-desktop), so just set that var;
   4) big Anton heading + lime brutalist "Shop All" CTA.
   NB: scoped to .product-collection, so it styles every single-row
   product carousel on the store consistently.
   ============================================================ */
.section:has(.product-collection) {
  background: #ffffff !important;
}
.page-container.my-6:has(.product-collection) {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* generous vertical breathing room (reference .k099: clamp(50px,7vw,92px) 0) */
  padding-top: clamp(50px, 7vw, 92px) !important;
  padding-bottom: clamp(50px, 7vw, 92px) !important;
}
/* 4-up desktop / 2-up mobile (the theme reads these vars for slide width) */
.product-swiper {
  --product-in-row-desktop: 4 !important;
  --product-in-row-mobile: 2 !important;
}
/* collection heading → 7Kicks Anton, exact reference .k101 size.
   width:min-content forces each word onto its own line ("MOST" / "WANTED")
   to mirror the reference's hard <br> (which we can't add via CSS). */
.product-collection .heading-title {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 5.5vw, 64px) !important;
  line-height: 0.9 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
  width: min-content !important;
}
/* 30px gap between the header (heading + link) and the card row (reference .k100) */
.product-collection .collection-header {
  margin-bottom: 30px !important;
}
/* "Shop All" link → outlined ink pill matching the reference .k102
   "ALL BEST SELLERS →" (transparent fill, 2px ink border, Space Mono,
   hover fills lime). The visible label is swapped to the reference
   wording via ::after (CSS-only; the real <a> text stays "Shop All"). */
.product-collection .shop-all-link {
  display: inline-block !important;
  background: transparent !important;
  color: #0a0a0a !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 0 !important; /* hide the real "Shop All" text */
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 11px 16px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.15s !important;
}
.product-collection .shop-all-link::after {
  content: "All best sellers ->";
  font-size: 12px !important;
}
.product-collection .shop-all-link:hover {
  background: #d8ff3e !important;
}

/* ============================================================
   7KICKS — hero rotating-stamp arrow (.k040)
   The centre badge holds the "↗" (U+2197) character. On iOS Safari
   that codepoint renders as a COLOR EMOJI (blue rounded square) instead
   of the intended dark text arrow on the lime circle. Hide the glyph
   and paint a crisp ink arrow as an inline SVG so it's identical on
   every platform (no reliance on emoji/variation-selector behaviour).
   ============================================================ */
.k040 {
  font-size: 24px !important;
  /* color: transparent !important; */
  background-color: #d8ff3e !important;
  /* background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='8 7 17 7 17 16'/%3E%3C/svg%3E) !important; */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
}

/* ============================================================
   7KICKS — PRODUCT PAGE (PDP) tweaks (2026-07-15)
   Only the parts achievable with CSS on this store (no theme/JS).
   ============================================================ */

/* (1) Gallery: bigger photo, no lime shadow / sand frame — just a clean
   black outline hugging the product image. Remove the size caps so it
   fills a wider gallery column. */
@media (min-width: 768px) {
  .product-image-container {
    width: 58% !important;
  }
  /* theme's column-gap was 3.6rem (~58px) → too wide between gallery & info */
  .product-detail-grid {
    gap: 28px !important;
    column-gap: 28px !important;
  }
}
.main-image-container,
.main-image-container.imaget-dots-available {
  background: #fff !important;
  border: 2.5px solid var(--k-black) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  max-width: none !important;
  padding-left: 0 !important;
}
.main-image-wrapper {
  background: #fff !important;
}
.main-image {
  background: #fff !important;
  padding: 10px !important;
}
@media (max-width: 768px) {
  .main-image-container,
  .main-image-container.imaget-dots-available {
    max-width: 100% !important;
    box-shadow: none !important;
  }
}

/* (2) Image scroll indicator (swiper pagination) — active dot green → black */
.swiper-pagination-bullet-active {
  background: var(--k-black) !important;
}

/* (5) Buy Now button → single line "BUY IT NOW — COD AVAILABLE ⚡".
   Hide the theme's "Buy Now" text and rebuild the label inline; the bolt
   is a text-presentation glyph so it can be tinted lime. */
.buy-now-button .uppercase {
  font-size: 0 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  line-height: 1.1 !important;
}
.buy-now-button .uppercase::before {
  content: "Buy It Now — COD Available";
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.buy-now-button .uppercase::after {
  content: "\26A1\FE0E";
  font-size: 15px;
  line-height: 1;
  color: #d8ff3e;
}
/* the mobile sticky-bar button is narrow (~174px) — shorten to one line */
@media (max-width: 768px) {
  .mobile-bottom-bar .buy-now-button .uppercase {
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }
  .mobile-bottom-bar .buy-now-button .uppercase::before {
    content: "Buy Now — COD";
    font-size: 12px;
    letter-spacing: 0.02em;
  }
  .mobile-bottom-bar .buy-now-button .uppercase::after {
    font-size: 13px;
  }
}

/* (8) Reviews grid. IMPORTANT: the theme nests TWO `.product-review-list`
   elements — the OUTER is a flex row [summary box | reviews column], the
   INNER holds the review cards. Only grid the INNER one (descendant
   selector), or the outer's summary+list get split into columns (broken).
   auto-fill keeps single/few reviews card-sized (not stretched) and gives
   3–4 columns once the wall fills, and self-adjusts down on narrow screens. */
.product-review-list .product-review-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 14px !important;
  align-content: start !important;
}

/* ---- ProductImagePopup theme BASE styles (added per request so the popup is
   styled even if the theme's code-split CSS fails to load; MY fixes below win
   via source order + !important). ---- */
.product-image-popup-root {
  aspect-ratio: 1/1;
  height: 100%;
  margin: 0;
  max-height: 100%;
  position: relative;
}
@media (min-width: 960px) {
  .product-image-popup-root {
    height: 100%;
    max-width: 100%;
  }
}
.product-image-popup-action {
  background-color: hsla(0, 0%, 100%, 0.9);
  padding: 0;
  position: absolute;
  right: 4px;
  top: 4px;
  z-index: 10;
}
@media (min-width: 960px) {
  .product-image-popup-action {
    border-radius: 4px;
    right: 10px;
    top: 10px;
  }
}
.product-image-popup-content {
  display: flex;
  padding: 0;
}
.product-image-popup-carousel {
  height: 100%;
  overflow: hidden;
  width: 100%;
}
.product-image-popup-media {
  background-color: #fff;
  cursor: pointer;
  margin-left: 50%;
  min-width: 100%;
  object-fit: cover;
  transform: translateX(-50%);
  transition: all 0.4s ease-in-out;
}
@media (max-width: 600px) {
  .product-image-popup-media {
    width: 100%;
  }
}
.product-image-popup-gallery {
  cursor: default;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  line-height: 1;
  overflow: hidden;
  position: relative;
}
.product-image-popup-gallery::-webkit-scrollbar {
  width: 0;
}
@media (min-width: 960px) {
  .product-image-popup-gallery {
    aspect-ratio: 1/1;
    justify-content: flex-start;
    overflow-y: scroll;
    position: static;
  }
}
.product-image-popup-navbtn {
  background-color: hsla(0, 0%, 100%, 0.9);
  border-radius: 4px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.product-image-popup-navbtn button {
  padding: 0;
}
.product-image-popup-indicator {
  height: 30px;
  margin: 5px;
  object-fit: cover;
  padding: 1px;
}
@media (max-width: 600px) {
  .product-image-popup-indicator {
    height: auto;
    object-fit: cover;
    width: 50px;
  }
}
.product-image-popup-indicators {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  left: 10px;
  max-height: 290px;
  overflow: overlay;
  position: absolute;
  top: 10px;
  width: 40px;
}
.product-image-popup-indicators::-webkit-scrollbar {
  display: none;
}
@media (max-width: 600px) {
  .product-image-popup-indicators {
    bottom: 60px;
    flex-direction: row;
    height: 60px;
    right: 10px;
    top: unset;
    width: unset;
  }
  .product-image-popup-indicators::after,
  .product-image-popup-indicators::before {
    content: "";
    flex: 1;
  }
}

/* Review / image lightbox (ProductImagePopup, a MUI Dialog). The theme sizes
   the image `min-width:100%; object-fit:cover` inside a forced 1:1 box — a
   pan-zoom meant for product shots — so a TALL portrait review photo blows up
   and overflows the modal (breaks the UI). Make the popup size to its content
   and the image FIT fully within the viewport. */
/* Large, WIDE photo-viewer box (fixed size). Dark bg so a portrait photo's
   letterbox reads as intentional framing, not empty white. Block containers of
   concrete size + image width/height:100% object-fit:contain → image fills and
   centres (flex/auto here collapses it). */
.product-image-popup-root {
  aspect-ratio: auto !important;
  width: min(92vw, 1040px) !important;
  height: min(88vh, 840px) !important;
  max-width: 94vw !important;
  max-height: 92vh !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #0a0a0a !important;
}
.product-image-popup-content,
.product-image-popup-carousel,
.product-image-popup-gallery {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
  display: block !important;
  position: relative !important;
}
.product-image-popup-media {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background: transparent !important; /* let the dark modal show in the letterbox */
  margin: 0 !important;
  transform: none !important;
  cursor: default !important;
}
/* close (X) visible on the dark modal */
.product-image-popup-action svg,
.product-image-popup-action svg path {
  fill: #ffffff !important;
}
/* thumbnails → small vertical rail, top-left corner (absolute → no effect on the
   image sizing); overrides the theme's huge 1200px first-thumbnail. */
.product-image-popup-indicators {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  z-index: 6 !important;
}
.product-image-popup-indicator {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}
/* When a review/product has only ONE image, its lone thumbnail is just a
   duplicate of the big image shown in the popup → hide it (the rail only
   makes sense with 2+ images to navigate between). */
.product-image-popup-indicator:only-child {
  display: none !important;
}

/* (9) "You Might Also Cop" recommendations — cards already inherit the
   category-page .product-card styling (incl. red % badge); here we just
   restyle + relabel the heading (theme ships "You May Also Like"). */
/* breathing room above the section (theme's .my-6 = 24px was too tight
   against the reviews block above) */
.related-products {
  margin-top: 56px !important;
}
.related-products .heading-title {
  font-size: 0 !important;
}
.related-products .heading-title::before {
  content: "You Might Also Cop";
  display: inline-block;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 0.95;
}
/* ============================================================
   7KICKS — PDP RATING PILL + ACCORDION +/- + CARD ADD-TO-CART
   (2026-07-15) Theme now renders (a) a rating row under the
   product title (.product-page-rating: .rating-stars + .product-rating-value
   + .product-rating-count) and (b) an add-to-cart button on listing
   cards (.product-card-action*). Style both to the 7Kicks reference,
   and swap the accordion chevron for a lime +/- glyph. CSS-only.
   Reference values pulled from the standalone PDP + best-sellers .k114.
   ============================================================ */

/* ---------- (a) Rating pill under the product title ----------
   Reference: dark pill {bg #1A1A1A; border 2px #2e2e2e; radius 3px}
   wraps the lime stars + white mono "4.6"; the "Based on N reviews"
   count sits OUTSIDE the pill in grey mono. The theme's stars are
   <img> (color baked in via query param, not CSS-recolorable), so
   hide them and draw 5 solid lime stars with ::before. */
.product-page-rating {
  gap: 0 !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  row-gap: 8px !important;
  margin-top: 12px !important;
}
.product-page-rating .rating-stars {
  display: inline-flex !important;
  align-items: center !important;
  background: #1a1a1a !important;
  border: 2px solid #2e2e2e !important;
  border-right: 0 !important;
  border-radius: 3px 0 0 3px !important;
  padding: 6px 6px 6px 11px !important;
  line-height: 1 !important;
}
.product-page-rating .rating-stars img,
.product-page-rating .rating-stars .back-star,
.product-page-rating .rating-stars .front-star {
  display: none !important;
}
.product-page-rating .rating-stars::before {
  content: "\2605\2605\2605\2605\2605";
  color: #d8ff3e;
  letter-spacing: 1px;
  font-size: 13px;
  line-height: 1;
}
.product-page-rating .product-rating-value {
  display: inline-flex !important;
  align-items: center !important;
  font-family: "Space Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: #1a1a1a !important;
  border: 2px solid #2e2e2e !important;
  border-left: 0 !important;
  border-radius: 0 3px 3px 0 !important;
  padding: 6px 11px 6px 4px !important;
  line-height: 1 !important;
}
.product-page-rating .product-rating-count {
  font-family: "Space Mono", monospace !important;
  font-size: 12px !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-left: 14px !important;
}

/* ---------- (b) Accordion toggle: lime +/- instead of chevron ----------
   Live markup: .details-accordion > button.details-toggle (span + lucide
   .toggle-icon) [+ content when open]. Hide the chevron and render a
   Space-Mono "+" that flips to "-" when the panel is open (open == the
   accordion has a content sibling, so the button is not :only-child). */
.details-accordion .toggle-icon {
  display: none !important;
}
.details-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
.details-toggle::after {
  content: "+";
  flex: none;
  color: var(--k-yellow);
  font-family: "Space Mono", monospace;
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
}
.details-accordion > .details-toggle:not(:only-child)::after {
  content: "\2212";
}

/* ---------- (c) Listing-card add-to-cart button (reference .k114) ----------
   The theme now renders .product-card-actions > .product-card-action >
   .product-card-action-row > button.product-card-action-btn on each card.
   Card body is white, so use the ink brutalist button: solid #0A0A0A,
   white uppercase text, -> lime fill on hover. Buy-now (if enabled) is the
   inverse lime CTA. Pin the action to the card bottom so buttons align. */
.product-card-actions {
  margin-top: auto !important;
  padding-top: 10px !important;
  width: 100% !important;
}
.product-card-action {
  width: 100% !important;
}
.product-card-action-row {
  gap: 8px !important;
}
.product-card-action-btn {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  border: 2px solid #0a0a0a !important;
  background: #0a0a0a !important;
  color: #fff !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 11px !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition:
    background 0.15s,
    color 0.15s !important;
}
.product-card-action-btn:hover {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
}
/* buy-now = lime fill, hover -> ink */
.product-card-action-buy {
  background: #d8ff3e !important;
  color: #0a0a0a !important;
  border-color: #0a0a0a !important;
}
.product-card-action-buy:hover {
  background: #0a0a0a !important;
  color: #fff !important;
}
/* out-of-stock label aligns to the bottom too */
.product-card-sold-out {
  margin-top: auto !important;
  font-family: "Space Mono", monospace !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  color: #888 !important;
}

/* ============================================================
   7KICKS — PDP ACCORDION CARD polish (match reference image)
   (2026-07-15k) Open-state icon = lime X (was minus); tighter
   10px rhythm between stacked accordion cards (theme flex gap
   is 20px -> pull following cards up 10px); body copy #aaa,
   14.5px / 1.6 like the reference paragraph.
   ============================================================ */

/* open accordion shows a lime X (reference image), closed stays + */
.details-accordion > .details-toggle:not(:only-child)::after {
  content: "\00D7";
  font-size: 20px;
  font-weight: 700;
}

/* 10px gap between consecutive accordion cards (image rhythm).
   .product-info is flex-column gap:20px; a -10px top margin on any
   accordion that follows another nets out to 10px. */
.product-info > features-container + .details-accordion,
.product-info > .details-accordion + .details-accordion,
.product-info > .details-accordion + features-container,
.product-info > features-container + features-container {
  margin-top: -10px !important;
}

/* body copy inside the card: reference p = #aaa, 14.5px, 1.6 */
.details-content,
.details-content * {
  color: #aaa !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}

/* ============================================================
   7KICKS — PDP REVIEWS: 3-UP GRID (2026-07-15l)
   Cards were stacking in one narrow column: the INNER
   .product-review-list (card container) sizes to content inside
   the outer flex row, so auto-fill resolved to a single track.
   Make the outer row a real flex [summary | cards] and the inner
   list a width-filling explicit grid: 3 columns desktop
   (1 2 3 / 4 5 6), 2 tablet, 1 mobile.
   NOTE: keep the two nested .product-review-list distinct — a bare
   selector hits BOTH and chops the summary into columns (15h gotcha).
   ============================================================ */
.product-review-root > .product-review-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 18px !important;
}
.product-review-root > .product-review-list > .product-review-summary {
  /* theme makes the summary box full-width at some widths -> it eats the
     flex row and the card grid collapses to 0. Shrink-to-fit, capped. */
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 260px !important;
}
.product-review-list .product-review-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-content: start !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}
/* the theme double-wraps ALL cards in two classless divs -> they land in
   one grid track and stack. Flatten both wrappers so each card is a direct
   grid item (display:contents removes their boxes, keeps the cards). */
.product-review-list .product-review-list > div,
.product-review-list .product-review-list > div > div {
  display: contents !important;
}
.product-review-list .product-review-list .review-card-root {
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 1100px) {
  .product-review-list .product-review-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .product-review-root > .product-review-list {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .product-review-root > .product-review-list > .product-review-summary {
    max-width: none !important;
    width: 100% !important;
  }
  .product-review-list .product-review-list {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   7KICKS — PDP THUMBNAIL RAIL: plain images (2026-07-15m)
   Overrides the earlier 3173-block tile look: no cream bg, no
   border "card" glow, no padding — the photo simply fills the
   square. Selection is shown by the lime border only.
   ============================================================ */
.thumbnail {
  background: transparent !important;
  border: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.thumbnail.active {
  border: 2px solid var(--k-yellow) !important;
}
.thumbnail-image {
  object-fit: cover !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ============================================================
   7KICKS — PDP MAIN IMAGE: no cream frame (2026-07-15n)
   Overrides the earlier gallery block: the sand bg + 18px padding
   drew a white/cream frame around the photo. Photo now renders
   plain; any letterbox area blends with the page black.
   ============================================================ */
.main-image-wrapper {
  background: transparent !important;
}
.main-image {
  background: transparent !important;
  padding: 0 !important;
}

/* ============================================================
   7KICKS — REVIEWS fixes (2026-07-16a)
   1) DARK card variant (every 3rd review) was k-black bg +
      k-black border on the k-black page -> invisible (cards 3,6).
      Now a visible dark panel: #1a1a1a + #2e2e2e border (same
      recipe as the PDP accordion cards).
   2) "View all reviews" link -> lime outline BUTTON pinned to the
      right of the REVIEWS AND RATINGS heading (desktop); full-width
      button on mobile. Was ink text on black (invisible).
   3) /all-reviews page: summary panel + product header readable
      (rating number/name were ink-on-black), centered content lane.
   ============================================================ */

/* --- 1) dark review card variant: visible panel --- */
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-root {
  background: #1a1a1a !important;
  border-color: var(--k-line, #2e2e2e) !important;
}

/* --- 2) view-all -> button top-right of the heading --- */
.product-review-root {
  position: relative !important;
}
.reviews-list-viewAll {
  /* sits on the WHITE reviews band (theme inline bg) -> ink-on-lime chip */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  padding: 10px 18px !important;
  background: var(--k-yellow, #d8ff3e) !important;
  border: 2px solid var(--k-black, #0a0a0a) !important;
  border-radius: 4px !important;
  color: var(--k-black, #0a0a0a) !important;
  box-shadow: 3px 3px 0 rgba(10, 10, 10, 0.9) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin: 0 !important;
}
@media (min-width: 769px) {
  .reviews-list-viewAll {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
  }
}
@media (max-width: 768px) {
  .reviews-list-viewAll {
    width: 100% !important;
    margin-top: 14px !important;
  }
}

/* --- 3) /all-reviews page (scoped via its product header) --- */
body:has(.all-reviews-product-info) .product-review-root {
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 24px 16px 48px !important;
}
body:has(.all-reviews-product-info) .all-reviews-product-info,
body:has(.all-reviews-product-info) .all-reviews-name {
  color: #ffffff !important;
}
body:has(.all-reviews-product-info) .product-review-summary {
  background: #141414 !important;
  border: 2.5px solid var(--k-line, #2e2e2e) !important;
  border-radius: 5px !important;
  padding: 18px !important;
}
body:has(.all-reviews-product-info) .product-review-rating-num {
  color: var(--k-yellow, #d8ff3e) !important;
  font-family: "Archivo Black", sans-serif !important;
}
body:has(.all-reviews-product-info) .product-review-subtext,
body:has(.all-reviews-product-info) .product-review-num-of-rating {
  color: #c9c9c9 !important;
}
body:has(.all-reviews-product-info) .product-review-bar {
  background: #262626 !important;
}
body:has(.all-reviews-product-info) .product-review-bar > * {
  background: var(--k-yellow, #d8ff3e) !important;
}

/* ============================================================
   7KICKS — MOBILE PDP + listing insurance (2026-07-16b)
   1) Main product image full-bleed on mobile: page-container px-4
      (16px) + .product-detail-grid 16px padding inset the gallery
      32px per side — pull it back out edge-to-edge.
   2) Swiper pagination: 20x2px ink dashes on the black page were
      invisible ("------"). Now round DOTS (....) — grey, lime for
      the active one — sitting right below the image on the black
      bg (Deepika's contrast option).
   3) Listing cards: pin the add-to-cart/actions row (new theme
      markup) to the card bottom — same fix as the price-row pin
      that predates the buttons; keeps cards equal and complete
      when only some have a rating row.
   ============================================================ */
@media (max-width: 768px) {
  .product-detail-grid .product-image-container {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }
}
.main-image-container .swiper-pagination {
  position: relative !important;
  margin-top: 8px !important;
  background: transparent !important;
}
.main-image-container .swiper-pagination-bullet {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #4a4a4a !important;
  opacity: 1 !important;
  margin: 0 4px !important;
}
.main-image-container .swiper-pagination-bullet-active {
  background: var(--k-yellow, #d8ff3e) !important;
}
.product-card-actions,
.product-card-sold-out {
  margin-top: auto !important;
}

/* ============================================================
   7KICKS — ORDER DETAILS page (2026-07-16c)
   Scope .sh-order-detail (mobile + desktop). Had zero override
   coverage -> raw theme: flat white cards / stray dividers on the
   black page. Bring it in line with the orders-list styling:
   white cards, 2.5px ink border, soft offset pop, mono labels,
   lime/red accents.
   ============================================================ */
.sh-order-detail .order-details-card {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: 4px 4px 0 rgba(232, 230, 220, 0.14) !important;
  padding: 14px !important;
}
.sh-order-detail .order-details-primary-txt {
  color: #0a0a0a !important;
  font-weight: 700 !important;
}
/* page-level dividers sit on the black page — slim dark line */
.sh-order-detail .order-details-divider {
  background: #1f1f1f !important;
  height: 2px !important;
}
/* section headings that sit directly on the black page */
/* section headings appear on BOTH black page areas and white cards
   (thank-you page nests them in white) -> ink-on-lime chip reads anywhere */
.sh-order-detail .order-items-heading,
.sh-order-detail .order-notes-heading,
.sh-order-detail .payment-info-heading,
.sh-order-detail .shipping-info-heading,
.sh-order-detail .tracking-info-heading {
  display: inline-block !important;
  color: var(--k-black, #0a0a0a) !important;
  background: var(--k-yellow, #d8ff3e) !important;
  padding: 3px 10px !important;
  border-radius: 3px !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
/* text inside the white cards -> ink / warm grey */
.sh-order-detail .order-item-primary-txt,
.sh-order-detail .shipping-info-address,
.sh-order-detail .shipping-details-heading,
.sh-order-detail .ordery-summary-primary-txt {
  color: #0a0a0a !important;
  font-weight: 700 !important;
}
.sh-order-detail .order-item-secondary-txt,
.sh-order-detail .shipping-info-citystate-pin,
.sh-order-detail .shipping-info-landmark,
.sh-order-detail .shipping-info-secondary-txt,
.sh-order-detail .ordery-summary-secondary-txt,
.sh-order-detail .order-items-label {
  color: #55523f !important;
}
/* item thumbnail: sand tile, ink border (same as cart) */
.sh-order-detail .order-item-root img {
  background: #f1efe7 !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 5px !important;
}
/* cancel order -> red mono, unmissable */
.sh-order-detail .delivery-progress-cancel-btn {
  color: #ff3b2e !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ============================================================
   7KICKS — /all-reviews layout (2026-07-16d)
   The page is a 50/50 split: product info left | reviews right.
   Inside the right column the PDP row layout (summary rail +
   3-col grid) doesn't fit — stack the summary as a full-width
   band and lay cards 2-up underneath.
   ============================================================ */
body:has(.all-reviews-product-info)
  .product-review-root
  > .product-review-list {
  flex-direction: column !important;
}
body:has(.all-reviews-product-info)
  .product-review-root
  > .product-review-list
  > .product-review-summary {
  max-width: none !important;
  width: 100% !important;
}
body:has(.all-reviews-product-info) .product-review-list .product-review-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 640px) {
  body:has(.all-reviews-product-info)
    .product-review-list
    .product-review-list {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   7KICKS — PDP medium-screen overflow fix (2026-07-16f)
   Earlier blocks pinned .product-image-container 58% AND
   .product-info-container 50% (+28px gap) inside the theme's flex
   row = >100%, and the info column's content (buttons / trust
   badges) blocked flex-shrink -> right side spilled past the
   viewport on medium screens. Flexible bases + min-width:0 so the
   pair always fits any ≥768px width.
   ============================================================ */
@media (min-width: 768px) {
  .product-image-container {
    width: auto !important;
    flex: 0 1 56% !important;
    min-width: 0 !important;
  }
  .product-info-container {
    width: auto !important;
    flex: 1 1 40% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background: #1a1a1a;
  }
  .product-info-container .product-info {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* ============================================================
   7KICKS — footer WhatsApp hover + related-products cards (2026-07-16g)
   1) .k181:hover paints the tile WhatsApp-green, but the icon fill
      is the same green -> icon vanished on hover. White icon on hover.
   2) Related-products swiper ("YOU MIGHT ALSO COP"): a card with a
      rating row was taller than its neighbours (uneven bottoms).
      Stretch every slide to the row height and let the card fill it
      (actions/price already pin bottom via earlier rules).
   NOTE: trust-badge overflow on the PDP right column was fixed by
   the 16f flexible-columns block — no extra rule needed.
   ============================================================ */
.k181:hover svg,
.k181:hover svg path {
  fill: #ffffff !important;
  color: #ffffff !important;
}

.swiper-slide:has(.product-card) {
  height: auto !important;
  display: flex !important;
}
.swiper-slide:has(.product-card) .product-card {
  width: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.swiper-slide:has(.product-card) .product-card .product-card-link {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.swiper-slide:has(.product-card) .product-card-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* ============================================================
   7KICKS — review cards: scalable bg pattern + all-reviews columns
   (2026-07-16h)
   With the 2-up grid the old 3-cycle (cream/lime/dark) landed in a
   different column every row and read as random once reviews grow
   (50-70). Switch to a strict ODD=cream / EVEN=lime alternation —
   consistent at 1, 2 or 3 columns — and retire the dark variant
   (its white-text rules are reset below). All-reviews grid:
   3-up on wide desktop, 2-up on laptop, 1-up on mobile.
   ============================================================ */
/* odd -> cream card, red stars */
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(odd)
  .review-card-root {
  background: #f4f2ea !important;
  border-color: var(--k-black, #0a0a0a) !important;
}
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(odd)
  .review-card-root
  .front-star
  svg,
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(odd)
  .review-card-root
  .front-star
  svg
  * {
  stroke: var(--k-red, #ff3b2e) !important;
}
/* even -> lime card, ink stars */
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(even)
  .review-card-root {
  background: var(--k-yellow, #d8ff3e) !important;
  border-color: var(--k-black, #0a0a0a) !important;
}
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(even)
  .review-card-root
  .front-star
  svg,
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(even)
  .review-card-root
  .front-star
  svg
  * {
  stroke: var(--k-black, #0a0a0a) !important;
}
/* neutralize the old dark-variant (3n+3) white text -> ink on light cards */
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-name,
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-title {
  color: var(--k-black, #0a0a0a) !important;
}
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-description {
  color: #1a1a1a !important;
}
.product-review-list
  .product-review-list
  > div
  > div
  > div:nth-child(3n + 3)
  .review-card-subtext {
  color: #0a0a0a !important;
}

/* all-reviews grid columns: 3 wide desktop / 2 laptop / 1 mobile */
@media (min-width: 1400px) {
  body:has(.all-reviews-product-info)
    .product-review-list
    .product-review-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   7KICKS — thank-you page extras (2026-07-16i)
   (verified logged-in on /orders/thank-you) Right column
   (.order-items-root: item, invoice, totals) was a bare white
   block -> same card treatment as the rest; savings strip was a
   5%-green tint (invisible) -> lime banner.
   ============================================================ */
.sh-order-detail .order-items-root {
  background: #ffffff !important;
  border: 2.5px solid var(--k-black, #0a0a0a) !important;
  border-radius: 5px !important;
  box-shadow: 4px 4px 0 rgba(232, 230, 220, 0.14) !important;
  padding: 16px !important;
}
.sh-order-detail .order-items-savings-count {
  background: var(--k-yellow, #d8ff3e) !important;
  color: var(--k-black, #0a0a0a) !important;
  border: 2px solid var(--k-black, #0a0a0a) !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
}

/* ============================================================
   7KICKS — ORDER pages re-skinned to the cart-review look (2026-07-16j)
   Same recipe as .sh-cart-review-*: CREAM page, white cards with
   2.5px ink border + soft ink offset shadow, Anton headings with a
   lime accent bar, green savings strip. Overrides the earlier
   black-page treatment (16c/16i) by source order.
   ============================================================ */
.page-container.sh-order-detail,
.sh-order-detail {
  background: #f1efe7 !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  color: #0a0a0a !important;
  padding-top: 18px !important;
  padding-bottom: 40px !important;
}
/* cards: cart-review shadow (ink 8%) instead of the light-on-black pop */
.sh-order-detail .order-details-card,
.sh-order-detail .order-items-root {
  background: #ffffff !important;
  border: 2.5px solid #0a0a0a !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.08) !important;
}
/* section headings: Anton + lime accent bar (replaces the lime chip) */
.sh-order-detail .order-items-heading,
.sh-order-detail .order-notes-heading,
.sh-order-detail .payment-info-heading,
.sh-order-detail .shipping-info-heading,
.sh-order-detail .tracking-info-heading {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
  margin-bottom: 6px !important;
}
.sh-order-detail .order-items-heading::before,
.sh-order-detail .order-notes-heading::before,
.sh-order-detail .payment-info-heading::before,
.sh-order-detail .shipping-info-heading::before,
.sh-order-detail .tracking-info-heading::before {
  content: "" !important;
  flex: none !important;
  width: 9px !important;
  height: 20px !important;
  background: #d8ff3e !important;
  border: 2px solid #0a0a0a !important;
}
/* dividers on cream */
.sh-order-detail .order-details-divider {
  background: #e7e4d8 !important;
  height: 2px !important;
}
/* savings strip: green banner like cart-review */
.sh-order-detail .order-items-savings-count {
  background: #f2faf5 !important;
  border: 2px solid #1f8a3b !important;
  border-radius: 4px !important;
  color: #0a0a0a !important;
  font-weight: 700 !important;
}
.razorpay-affordability-root {
  padding-top: 21px;
}

.reviews-list-root {
  padding-bottom: 20px;
}

.reviews-list-flex-center {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.reviews-list-profile-img {
  align-items: center;
  background: #f6f6f6;
  border-radius: 50%;
  display: flex;
  height: 20px;
  padding: 5px;
  width: 20px;
}

.reviews-list-name {
  height: 14px;
  margin-left: 8px;
  transform: none;
  width: 120px;
}

.reviews-list-title {
  height: 14px;
  margin-bottom: 14px;
  margin-top: 12px;
  transform: none;
  width: 82%;
}

.reviews-list-description {
  height: 14px;
  margin-top: 6px;
  transform: none;
  width: 100%;
}

.reviews-list-viewAll {
  color: var(--button-main);
}

.reviews-list-tab {
  background: #e8e8e8;
  border-radius: 4px;
  color: #000;
  font-size: 12px;
  margin-left: 12px;
  margin-right: 12px;
  padding: 5px 7px 4px;
}

.review-card-root {
  padding-bottom: 20px;
}

.review-card-flex-center {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.review-card-profile-img {
  align-items: center;
  background: #f6f6f6;
  border-radius: 50%;
  display: flex;
  height: 20px;
  padding: 5px;
  width: 20px;
}

.review-card-name {
  font-size: 14px;
  font-weight: 400;
  margin-left: 8px;
}

@media (min-width: 960px) {
  .review-card-name {
    font-size: 16px;
  }
}

.review-card-title {
  font-size: 14px;
  font-weight: 700;
  margin-top: 12px;
}

@media (min-width: 960px) {
  .review-card-title {
    font-size: 16px;
  }
}

.review-card-subtext {
  color: #666;
  font-size: 12px;
  font-weight: 400;
}

@media (min-width: 960px) {
  .review-card-subtext {
    font-size: 14px;
  }
}

.review-card-description {
  color: #666;
  font-size: 14px;
  font-weight: 400;
  margin-top: 4px;
}

@media (min-width: 960px) {
  .review-card-description {
    font-size: 16px;
  }
}

.review-card-header {
  margin-bottom: 16px;
}

.review-card-header-first {
  margin-top: 0;
}

.review-card-header-spaced {
  margin-top: 20px;
}

.review-card-images {
  display: flex;
  flex-wrap: wrap;
}

.review-card-image-button {
  background: none;
  border: 1px solid var(--border-main, #e0e0e0);
  border-radius: 8px;
  cursor: pointer;
  height: 64px;
  margin: 8px 8px 0 0;
  overflow: hidden;
  padding: 0;
  width: 64px;
}

.review-card-image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.related-product-header {
  background-color: #fff;
}

.heading {
  color: #1a1a1a;
  display: block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
  margin-left: 16px;
}

@media (min-width: 960px) {
  .heading {
    font-size: 24px;
    line-height: 24px;
  }
}

.related-products-heading {
  margin: 0 0 6px;
  margin-left: 0 !important;
}

.related-products-mobile {
  padding: 8px;
  width: 50%;
}

@media (min-width: 600px) {
  .related-products-mobile {
    width: 33.33%;
  }
}

@media (min-width: 960px) {
  .related-products-mobile {
    width: 25%;
  }
}

@media (min-width: 1200px) {
  .related-products-mobile {
    width: 20%;
  }
}

.product-review-root {
  margin-top: 16px;
  padding-bottom: 6px;
}

@media (min-width: 960px) {
  .product-review-root {
    padding-bottom: 10px;
    padding-top: 20px;
  }
}

.product-review-bar {
  background: #e8e8e8;
  border-radius: 2px;
  height: 4px;
  width: 100%;
}

@media (min-width: 960px) {
  .product-review-bar {
    border-radius: 3px;
    height: 6px;
  }
}

.product-review-subtext {
  color: #666;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 8px;
  margin-top: 8px;
}

@media (min-width: 960px) {
  .product-review-subtext {
    font-size: 14px;
  }
}

.product-review-num-of-rating {
  color: #9f9f9f;
  font-size: 12px;
  margin-left: 10px;
  width: 30px;
}

@media (min-width: 960px) {
  .product-review-num-of-rating {
    font-size: 14px;
    width: 40px;
  }

  .product-review-summary {
    margin-top: var(--product-review-summary-margin-top);
    width: var(--product-review-summary-width);
  }

  .product-review-summary-info {
    display: var(--product-review-summary-info-display);
  }
}

.product-review-rating-num {
  font-size: 12px;
  width: 7px;
}

@media (min-width: 960px) {
  .product-review-rating-num {
    font-size: 14px;
    width: 8px;
  }
}

.product-review-ratings-box {
  margin-bottom: 18px;
}

@media (min-width: 960px) {
  .product-review-ratings-box {
    border-left: var(--product-review-ratings-box-border-left);
    flex-grow: var(--product-review-ratings-box-flex-grow);
    margin-bottom: 24px;
    margin-left: var(--product-review-ratings-box-margin-left);
    padding-left: var(--product-review-ratings-box-padding-left);
  }
}

.product-review-write-popup {
  border-radius: 16px 16px 0 0;
  left: auto;
  max-height: 80vh;
  padding: 16px;
  width: 100%;
  z-index: 800;
}

@media (min-width: 960px) {
  .product-review-write-popup {
    background: #fff;
    border-radius: 0;
    border-top: none;
    height: calc(
      100vh * var(--device-pixel-ratio, 1) -
        var(--product-review-app-header-offset)
    );
    padding: 0;
  }

  .product-review-list {
    display: var(--product-review-list-display);
    flex-grow: 1;
    padding-left: var(--product-review-list-padding-left);
  }
}

.product-review-no-review {
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
}

@media (min-width: 960px) {
  .product-review-no-review {
    font-size: 18px;
    margin-bottom: 2px;
    margin-top: 12px;
  }
}

.product-review-empty-subtext {
  color: #666;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 8px;
  margin-top: 2px;
}

@media (min-width: 960px) {
  .product-review-empty-subtext {
    font-size: 14px;
    margin-bottom: 12px;
  }
}

.product-review-review-btn {
  height: 48px;
}

@media (max-width: 600px) {
  .product-review-review-btn {
    height: 40px;
  }
}

.product-review-heading {
  color: #1a1a1a;
  display: block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
  margin-left: 16px;
}

@media (min-width: 960px) {
  .product-review-heading {
    font-size: 24px;
    line-height: 24px;
  }
}

.product-pricing-root {
  display: flex;
  flex-direction: column;
}

.product-pricing-root p {
  margin-bottom: 0;
}

.product-pricing-price {
  align-items: center;
  display: flex;
  position: relative;
}

.product-pricing-primary {
  font-size: 20px;
  font-weight: 600;
}

@media (min-width: 960px) {
  .product-pricing-primary {
    font-size: 24px;
    line-height: 20px;
  }
}

.product-pricing-secondary {
  font-size: 16px;
  margin-left: 10px;
  text-decoration: line-through;
}

@media (min-width: 960px) {
  .product-pricing-secondary {
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    margin-left: 12px;
  }
}

.product-pricing-gst-exclusive {
  font-size: 18px;
  margin-top: 8px;
}

@media (min-width: 960px) {
  .product-pricing-gst-exclusive {
    font-size: 21px;
    margin-top: 10px;
  }
}

.product-pricing-discount {
  background: #ff7222;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 18px;
  margin-left: 8px;
  padding: 2px 6px;
}

@media (min-width: 960px) {
  .product-pricing-discount {
    font-size: 14px;
    margin-left: 16px;
    padding: 2px 6px;
  }
}

.product-pricing-gst-text {
  font-size: 12px;
  font-weight: 400;
}

@media (min-width: 960px) {
  .product-pricing-gst-text {
    margin-top: 6px;
  }
}

.product-pricing-meas-unit {
  color: #666;
  display: none;
  font-size: 14px;
  font-weight: 400;
  text-transform: lowercase;
}

.product-image-popup-root {
  aspect-ratio: 1/1;
  height: 100%;
  margin: 0;
  max-height: 100%;
  position: relative;
}

@media (min-width: 960px) {
  .product-image-popup-root {
    height: 100%;
    max-width: 100%;
  }
}

.product-image-popup-action {
  background-color: hsla(0, 0%, 100%, 0.9);
  padding: 0;
  position: absolute;
  right: 4px;
  top: 4px;
  z-index: 10;
}

@media (min-width: 960px) {
  .product-image-popup-action {
    border-radius: 4px;
    right: 10px;
    top: 10px;
  }
}

.product-image-popup-content {
  display: flex;
  padding: 0;
}

.product-image-popup-carousel {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.product-image-popup-media {
  background-color: #fff;
  cursor: pointer;
  margin-left: 50%;
  min-width: 100%;
  object-fit: cover;
  transform: translateX(-50%);
  transition: all 0.4s ease-in-out;
}

@media (max-width: 600px) {
  .product-image-popup-media {
    width: 100%;
  }
}

.product-image-popup-gallery {
  cursor: default;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  line-height: 1;
  overflow: hidden;
  position: relative;
}

.product-image-popup-gallery::-webkit-scrollbar {
  width: 0;
}

@media (min-width: 960px) {
  .product-image-popup-gallery {
    aspect-ratio: 1/1;
    justify-content: flex-start;
    overflow-y: scroll;
    position: static;
  }
}

.product-image-popup-navbtn {
  background-color: hsla(0, 0%, 100%, 0.9);
  border-radius: 4px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.product-image-popup-navbtn button {
  padding: 0;
}

.product-image-popup-indicator {
  height: 30px;
  margin: 5px;
  object-fit: cover;
  padding: 1px;
}

@media (max-width: 600px) {
  .product-image-popup-indicator {
    height: auto;
    object-fit: cover;
    width: 50px;
  }
}

.product-image-popup-indicators {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  left: 10px;
  max-height: 290px;
  overflow: overlay;
  position: absolute;
  top: 10px;
  width: 40px;
}

.product-image-popup-indicators::-webkit-scrollbar {
  display: none;
}

@media (max-width: 600px) {
  .product-image-popup-indicators {
    bottom: 60px;
    flex-direction: row;
    height: 60px;
    right: 10px;
    top: unset;
    width: unset;
  }

  .product-image-popup-indicators:after,
  .product-image-popup-indicators:before {
    content: "";
    flex: 1;
  }

  .product-image-popup-indicators {
    overflow: overlay;
  }

  .product-image-popup-indicators::-webkit-scrollbar {
    display: none;
  }
}

.product-gallery-aside-image {
  display: none;
  margin-right: 16px;
  position: relative;
}

.product-gallery-aside-image > :not(:last-child) {
  margin-bottom: 16px;
}

@media (min-width: 960px) {
  .product-gallery-aside-image {
    display: block;
  }
}

.product-image-gallery-image,
.product-image-gallery-play {
  border: 1px solid #ececec;
  cursor: pointer;
  display: block;
  font-size: 1em;
  height: 84px;
  padding: 0;
  position: relative;
  text-align: center;
  text-indent: 0.1em;
  transition: all 0.15s ease-out;
  width: 84px;
}

.product-image-gallery-play {
  background: #212121ee;
  border-radius: 50%/10%;
  bottom: 0;
  color: #fff;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

.product-image-gallery-image img {
  height: 100%;
  margin: auto;
  object-fit: contain;
  width: 100%;
}

.product-carousel-image {
  transition: all 0.3s ease;
}

.product-carousel-image:hover {
  cursor: pointer;
  transform: scale(1.05);
}

.product-image-gallery-play:hover {
  background: red;
}

.product-image-gallery-play:before {
  background: inherit;
  border-radius: 5%/50%;
  bottom: 9%;
  content: "";
  left: -5%;
  position: absolute;
  right: -5%;
  top: 9%;
}

.product-image-gallery-play:after {
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  border-width: 1em 0 1em 1.732em;
  content: "";
  font-size: 0.65em;
  height: 0;
  margin: -1em 0 0 -0.65em;
  position: absolute;
  top: 50%;
  width: 0;
}

.product-gallery-play-small {
  background: #212121ee;
  border-radius: 50%/10%;
  color: #fff;
  font-size: 1em;
  height: 24px;
  left: calc(50% - 16px);
  padding: 0;
  position: absolute;
  text-align: center;
  text-indent: 0.1em;
  top: calc(50% - 8px);
  width: 32px;
}

.product-gallery-play-small:before {
  background: inherit;
  border-radius: 5%/50%;
  bottom: 9%;
  content: "";
  left: -5%;
  position: absolute;
  right: -5%;
  top: 9%;
}

.product-gallery-play-small:after {
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  border-width: 0.5em 0 0.5em 0.932em;
  content: "";
  font-size: 0.65em;
  height: 0;
  margin: -0.5em 0 0 -0.5em;
  position: absolute;
  top: 50%;
  width: 0;
}

.product-footer-root {
  background-color: var(--primary-main);
  border: 1px solid #eee;
  border-radius: 4px 4px 0 0;
  bottom: 0;
  margin-top: -12px;
  max-width: 1280px;
  padding: 20px 0;
  position: fixed;
  width: 100%;
  z-index: 200;
}

@media (min-width: 960px) {
  .product-footer-root {
    border-left: none;
    border-right: none;
    margin-top: 0;
    position: static;
  }
}

@media (max-width: 599.95px) {
  .product-footer-root {
    padding: 20px 16px;
  }
}

.product-footer-root-dropdown {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 599.95px) {
  .product-footer-root-dropdown {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.product-footer-buttons {
  align-items: center;
  column-gap: 12px;
  display: flex;
  flex: 1;
  justify-content: space-between;
  row-gap: 12px;
}

@media (max-width: 599.95px) {
  .product-footer-buttons,
  .product-footer-dropdown {
    flex-wrap: nowrap;
  }
}

.product-footer-full-width {
  width: 100%;
}

.product-footer-width {
  width: 48px;
}

@media (max-width: 599.95px) {
  .product-footer-width {
    width: 40px;
  }
}

.product-footer-height {
  height: 48px !important;
}

@media (max-width: 599.95px) {
  .product-footer-height {
    height: 40px !important;
  }
}

.product-footer-height .pr-outlined-button,
.product-footer-height .pr-plus-minus-button {
  height: 48px !important;
}

@media (max-width: 599.95px) {
  .product-footer-height .pr-outlined-button,
  .product-footer-height .pr-plus-minus-button {
    height: 40px !important;
  }
}

.product-footer-min-width {
  min-width: 48px !important;
}

@media (max-width: 599.95px) {
  .product-footer-min-width {
    min-width: 40px !important;
  }
}

.product-component-about {
  background: var(--primary-main);
  z-index: 100;
}

@media (min-width: 768px) {
  .product-component-about {
    background: var(--primary-main);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none;
    z-index: 100;
  }
}

.product-about-desktop {
  padding: 16px;
}

@media (min-width: 960px) {
  .product-about-desktop {
    padding-right: 32px;
    padding-top: 0;
  }
}

.product-component-about-mobile {
  padding: 16px;
}

@media (min-width: 960px) {
  .product-component-about-mobile {
    padding: 0 0 0 32px;
  }
}

.product-component-name {
  color: var(--primary-contrast-text);
  font-size: 20px;
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 24px;
  margin-bottom: 0;
  margin-top: 0;
  text-transform: capitalize;
}

@media (min-width: 768px) {
  .product-component-name {
    font-size: 28px;
    font-weight: 500;
    line-height: 40px;
  }
}

.product-component-brand-name {
  color: #999;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.6px;
  line-height: 20px;
  margin: 0 0 8px;
}

@media (min-width: 768px) {
  .product-component-brand-name {
    margin: 0 0 10px;
  }
}

.product-sku-container {
  display: flex;
}

.product-sku-container > :not(:last-child) {
  margin-right: 8px;
}

.product-component-sku {
  color: #666;
  font-size: 12px;
  font-weight: 400;
  margin-top: 10px;
}

.features-heading {
  color: #1a1a1a;
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 24px;
  margin-bottom: 0;
  margin-top: 16px;
  text-align: left;
}

features-container * {
  all: revert;
}

features-container img {
  max-width: 100%;
}

product-component-description * {
  all: revert;
}

product-component-description {
  color: var(--primary-contrast-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding-bottom: 16px;
  padding-top: 16px;
}

product-component-description figure > img,
product-component-description img {
  width: 100%;
}

@media (min-width: 768px) {
  product-component-description {
    font-size: 16px;
    padding-bottom: 26px;
    padding-top: 26px;
  }
}

.product-component-buy {
  display: none;
}

.product-component-buy h6 {
  color: var(--secondary-main);
}

@media (min-width: 768px) {
  .product-component-buy {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding-bottom: 26px;
    width: 100%;
  }
}

.product-component-progressbar {
  left: calc(50% - 20px);
  position: fixed;
  top: calc(50% - 20px);
}

.product-progress-primary {
  color: var(--secondary-main);
  z-index: 101;
}

.product-component-social-btn {
  align-items: center;
  background: var(--secondary-main);
  border-radius: 50%;
  display: flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}

@media (min-width: 768px) {
  .product-component-social-btn {
    height: 28px;
    width: 28px;
  }
}

.product-component-prodqty {
  align-items: center;
  display: flex;
  margin-block: 5px;
}

.product-component-prodqty p span {
  text-transform: capitalize;
}

.product-component-qty-msgs {
  color: var(--primary-contrast-text);
  font-size: 14px;
  font-weight: 400;
  padding-top: 11px;
}

@media (min-width: 768px) {
  .product-component-qty-msgs {
    padding-top: 21px;
  }
}

.product-sticky-carousel {
  display: flex;
  position: sticky;
  top: 100px;
}

.product-component-desktop-wish {
  cursor: pointer;
  height: 17px;
  width: fit-content;
}

@media (min-width: 768px) {
  .product-component-desktop-wish {
    height: 21px;
  }
}

.product-component-total-rating {
  align-items: center;
  background: #058832;
  color: #fff;
  display: flex;
  font-size: 16px;
  font-weight: 600;
  padding: 2px 4px 2px 6px;
}

.product-rating-summary {
  align-items: center;
  display: flex;
  margin-top: 6px;
}

.product-component-light-text {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
}

.product-short-summary {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  margin-top: 16px;
}

.product-price-icons {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin: 12px 0 0;
}

@media (min-width: 768px) {
  .product-price-icons {
    margin: 16px 0 4px;
  }
}

.product-share-icons {
  align-items: center;
  column-gap: 10px;
  display: flex;
  margin-top: 0;
}

@media (min-width: 768px) {
  .product-share-icons {
    column-gap: 14px;
    margin-top: -2px;
  }
}

.product-highlights-title {
  color: #1a1a1a;
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 24px;
  margin-bottom: 0;
  margin-top: 16px;
  text-align: left;
}

@media (max-width: 600px) {
  .product-highlights-title {
    font-size: 18px;
  }
}

.product-highlights-list {
  color: #222;
  font-size: 14px;
  font-weight: 400;
  margin-top: 16px;
}

.product-highlights-list > ul {
  padding-left: 16px;
}

.only-date-container {
  display: flex;
  flex-wrap: wrap;
}

.only-date-text-field {
  margin-bottom: 16px;
}

.only-date-text-field .MuiInputBase-root {
  height: 48px;
}

@media (max-width: 600px) {
  .only-date-text-field .MuiInputBase-root {
    height: 40px;
  }
}

.not-available-footer-root {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  bottom: 0;
  max-width: 1280px;
  position: fixed;
  width: 100%;
  z-index: 200;
}

.not-available-footer-container {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  padding: 16px 20px;
}

@media (min-width: 960px) {
  .not-available-footer-root {
    display: none;
  }
}

.order-custom-fields-menuitem {
  font-size: 14px;
  line-height: 18px;
  text-wrap: auto;
}

.order-custom-fields-label {
  color: var(--primary-contrast-text);
  font-size: 16px;
  line-height: 20px;
}

.order-custom-fields-select {
  font-size: 14px;
  line-height: 18px;
  padding: 12px 14px;
}

.order-custom-fields-label-text {
  background-color: #fff;
  padding-right: 5px;
  transform: translate(14px, -8px) scale(0.75) !important;
}

.order-custom-fields-header {
  color: var(--primary);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 24px;
  padding-bottom: 16px;
}

.instructions-input-container {
  display: flex;
  flex-wrap: wrap;
}

.instructions-input-text-field {
  margin-bottom: 16px;
}

.instructions-input-text-field .MuiInputBase-root {
  height: 48px;
}

@media (max-width: 600px) {
  .instructions-input-text-field .MuiInputBase-root {
    height: 40px;
  }
}

.instructions-input-text-field .MuiSelect-select:focus {
  background-color: transparent;
  border-radius: 4px;
}

.delivery-not-available-root {
  align-items: center;
  background: #f6f6f6;
  border-radius: 4px;
  display: flex;
  margin-top: 12px;
  padding: 16px;
}

.delivery-not-available-err {
  color: var(--error-primary);
  margin-bottom: 2px;
}

.delivery-estimate-root {
  padding-bottom: 16px;
}

@media (min-width: 960px) {
  .delivery-estimate-root {
    padding-bottom: 26px;
  }
}

.delivery-estimate-heading {
  font-size: 14px;
  margin-bottom: 10px;
  margin-top: 16px;
}

@media (min-width: 960px) {
  .delivery-estimate-heading {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 8px;
    margin-top: 16px;
  }
}

.delivery-estimate-info {
  align-items: center;
  display: flex;
  margin-block: 5px;
  margin-bottom: 0;
}

@media (min-width: 600px) {
  .delivery-estimate-info {
    justify-content: flex-end;
  }
}

.delivery-estimate-applybtn {
  color: #403b37;
  font-weight: 600;
  padding-right: 18px;
  text-transform: none;
}

.delivery-estimate-input {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
}

.delivery-estimate-input.MuiInputBase-root {
  height: 48px;
}

@media (max-width: 600px) {
  .delivery-estimate-input.MuiInputBase-root {
    height: 40px;
  }
}

.delivery-estimate-focused {
  border-color: #1a1a1a;
}

.delivery-estimate-err {
  color: var(--error-primary);
  line-height: 28px;
}

.delivery-estimate-empty-state {
  align-items: center;
  background: #f9edd0;
  border-radius: 4px;
  display: flex;
  margin-top: 12px;
  padding: 16px;
}

.delivery-available-root {
  background: #f6f6f6;
  border-radius: 4px;
  margin-top: 12px;
  padding: 16px;
}

.delivery-available-get-by {
  align-items: center;
  display: flex;
}

.date-and-time-text-field {
  margin-bottom: 16px;
}

.date-and-time-text-field .MuiInputBase-root {
  height: 48px;
}

@media (max-width: 600px) {
  .date-and-time-text-field .MuiInputBase-root {
    height: 40px;
  }
}

.checkout-input-btn-wrapper {
  background: #fff;
  bottom: 0;
  margin-top: -16px;
  padding-bottom: 24px;
  padding-top: 24px;
  position: sticky;
}

.checkout-input-field-container {
  margin-bottom: 6px;
  margin-top: 16px;
  width: 100%;
}

.checkout-input-field-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.checkout-input-field-field {
  font-size: 14px;
  font-weight: 600;
}

.checkout-input-description {
  display: block;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 16px;
  margin-top: -8px;
}

.all-reviews-media {
  border-radius: 4px;
  height: 68px;
  object-fit: cover;
  width: 68px;
}

@media (min-width: 960px) {
  .all-reviews-media {
    height: auto;
    max-height: 620px;
    object-fit: contain;
    width: 100%;
  }
}

.all-reviews-product-info {
  display: flex;
  margin-bottom: 20px;
  margin-top: 16px;
}

@media (min-width: 960px) {
  .all-reviews-product-info {
    display: block;
    padding-right: 30px;
    position: sticky;
    top: 116px;
  }
}

.all-reviews-name {
  font-size: 16px;
  font-weight: 400;
  margin-left: 8px;
}

@media (min-width: 960px) {
  .all-reviews-name {
    font-size: 28px;
    font-weight: 700;
    margin-top: 30px;
  }
}
@media (max-width: 768px) {
  .main-image-container,
  .main-image-container.imaget-dots-available {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .main-swiper,
  .main-image-wrapper {
    background: transparent !important;
  }
}
.product-detail-grid {
  row-gap: 6px !important;
}
.product-info-container .product-title {
  margin-top: 0 !important;
}
.main-swiper {
  margin-bottom: -8px !important;
}
.main-image-container .swiper-pagination {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}
@media (max-width: 1023px) {
  .k036 {
    width: 84px !important;
    height: 84px !important;
    top: 8px !important;
    left: 8px !important;
  }
}
@media (max-width: 880px) {
  .k022 .k023 {
    order: 1 !important;
    margin-top: -36px !important;
  }
}
@media (max-width: 880px) {
  .k022 .k028 {
    order: 3 !important;
    margin: 12px 0 0 !important;
  }
}
@media (max-width: 580px) {
  .k041 {
    width: 100% !important;
    max-width: min(
      100%,
      500px
    ) !important; /* was 320px → left big empty space
                                               either side on wide phones */
    margin: 0 auto !important;
  }
}
.k040 {
  color: #0a0a0a;
  background-color: #d8ff3e;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230A0A0A'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='7'%20y1='17'%20x2='17'%20y2='7'/%3E%3Cpolyline%20points='8%207%2017%207%2017%2016'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  font-size: 0 !important; /* hides the emoji-prone ↗️ glyph */
}
.product-info-header svg {
  color: #1a1919 !important;
}
@media (max-width: 767px) {
  .product-card-discount {
    top: 6px !important;
    left: auto !important;
    right: 43px !important;
  }
}
.dynamic-page-container {
  color: #fff !important;
}
.page-container-m:has(.sh-dynamic-page) {
  background: #f1efe7 !important;
  color: #000 !important;
}
.dynamic-page-container {
  color: #000 !important;
}
.ac-popup-profile-card {
  color: #000 !important;
  padding: 12px 16px;
  text-align: left;
  transition: all 0.3s ease;
}
.ac-popup-profile-card:hover {
  color: #fff !important;
  padding: 12px 16px;
  text-align: left;
  transition: all 0.3s ease;
}
.star-icon-header {
  filter: invert(1) !important;
}

/* Mobile menu footer: show the branded "PYSN." logo instead of plain text */
.mobile-menu .mobile-submenu-header > span:first-child {
  display: inline-block !important;
  width: 130px !important;
  height: 38px !important;
  font-size: 0 !important;
  background: url("https://cdn2.clevup.in/520413/7-1784880580742.png?height=200&format=webp")
    left center / contain no-repeat !important;
}
.mobile-menu .mobile-submenu-header > span:first-child::before,
.mobile-menu .mobile-submenu-header > span:first-child::after {
  content: none !important;
}
.delivery-available-root {
  background: #0a0a0a;
  border: solid 1px #fff;
}
/* PDP: rename the "Details" accordion label to "Description". */
.product-info > .details-accordion > .details-toggle > span {
  font-size: 0 !important;
}
.product-info > .details-accordion > .details-toggle > span::after {
  content: "Description";
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.54px;
}
.details-accordion .details-accordion{
  border: none  !important;
}.details-content {
    padding-bottom: 0px !important;
}