:root {
  --bg: #f7f8fb;
  --top-dark-height: 750px;
  --surface: #ffffff;
  --text: #152238;
  --muted: #596b86;
  --blue: #0d6fb8;
  --blue-dark: #0a4f84;
  --orange: #f18f1c;
  --orange-dark: #d87600;
  --line: #d7dfea;
  --shadow: 0 14px 35px rgba(10, 27, 48, 0.13);
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
  color: var(--text);
}

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-dark-height);
  background:
    radial-gradient(circle at 20% 15%, rgba(241, 143, 28, 0.38), transparent 32%),
    radial-gradient(circle at 88% 8%, rgba(13, 111, 184, 0.35), transparent 34%),
    linear-gradient(180deg, #081a2e, #0d223a);
  pointer-events: none;
  z-index: 0;
}

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
}

.container {
  width: min(1160px, 92vw);
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(8px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 253, 0.94));
  box-shadow: 0 7px 24px rgba(7, 31, 57, 0.08);
}

.site-header::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--orange), #ffb048 45%, var(--blue) 85%);
}

.header-row {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  text-decoration: none;
}

.brand-mark {
  width: 76px;
  height: 76px;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}

.brand-title {
  margin: 0;
  font-family: "Alfa Slab One", "Graduate", "Times New Roman", serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.7rem, 3.3vw, 2.55rem);
  font-weight: 900;
  color: #0d6fb8;
  text-shadow:
    1px 0 0 #ffffff,
    -1px 0 0 #ffffff,
    0 1px 0 #ffffff,
    0 -1px 0 #ffffff,
    0 2px 0 rgba(9, 56, 99, 0.12);
}

.brand-tagline {
  margin: 0;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 600;
}

.brand .brand-tagline {
  font-size: 0.96rem;
  color: #3d587a;
  letter-spacing: 0.2px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  padding: 0.32rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(13, 111, 184, 0.12);
  box-shadow: 0 5px 16px rgba(7, 31, 57, 0.06);
}

.site-nav a {
  text-decoration: none;
  padding: 0.52rem 0.95rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0);
  color: #506a8b;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.2px;
}

.site-nav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.9);
  color: #143152;
  border-color: rgba(13, 111, 184, 0.28);
  box-shadow: inset 0 -2px 0 rgba(241, 143, 28, 0.8);
}

.site-nav a:hover {
  border-color: rgba(13, 111, 184, 0.22);
  background: rgba(13, 111, 184, 0.08);
  color: #17365c;
}

.button {
  border: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: #fff;
  font-weight: 800;
  font-size: 0.93rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(241, 143, 28, 0.35);
}

.button.alt {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--blue-dark);
  box-shadow: none;
}

main {
  display: block;
  flex: 1 0 auto;
  padding: 2rem 0 4rem;
}

body.compact-main main {
  padding-top: 1rem;
}

body.compact-main .section-head:first-of-type {
  margin-top: 0.125rem;
}

.hero {
  padding: 1.8rem;
  background: linear-gradient(135deg, rgba(13, 111, 184, 0.95), rgba(9, 56, 99, 0.98));
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  color: #fff;
  box-shadow: var(--shadow);
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto -50px -80px auto;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(241, 143, 28, 0.24);
}

.hero-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero h1 {
  margin: 0;
  font-family: "Bungee", "Impact", sans-serif;
  line-height: 1.12;
  font-size: clamp(1.5rem, 3.5vw, 2.7rem);
}

.hero p {
  margin: 1rem 0;
  font-size: 1.02rem;
  max-width: 60ch;
  color: #e2f2ff;
}

.hero-card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 20px;
  padding: 1rem;
}

.hero-card p {
  margin: 0;
  font-size: 0.95rem;
}

.section-head {
  margin-top: 2rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 0.7rem;
}

.section-head h2 {
  margin: 0;
  font-family: "Bungee", "Impact", sans-serif;
  color: var(--blue-dark);
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
}

body[data-page="home"] .section-head:first-of-type h2 {
  color: #edf4ff;
  text-shadow: 0 1px 0 rgba(6, 20, 36, 0.45);
}

.section-head p {
  margin: 0;
  color: var(--muted);
}

.filters {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.filters-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.filter-chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  font-weight: 700;
  padding: 0.47rem 0.9rem;
  cursor: pointer;
}

.filter-chip[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(13, 111, 184, 0.3);
  color: #143152;
  box-shadow: inset 0 -2px 0 rgba(241, 143, 28, 0.75);
}

.filter-count {
  margin: 0;
  color: #8d9cb0;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0;
  line-height: 1;
}

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

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(7, 28, 50, 0.05);
}

.card-image {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(140deg, #fff, #f3f7fc);
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-body {
  padding: 0.9rem;
}

.card h3 {
  margin: 0;
  line-height: 1.3;
  font-size: 0.98rem;
}

.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.55rem;
  gap: 0.45rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  background: rgba(13, 111, 184, 0.09);
  color: var(--blue-dark);
  font-size: 0.74rem;
  font-weight: 800;
}

.product-link {
  font-size: 0.83rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--orange-dark);
}

.product-link:hover {
  text-decoration: underline;
}

.carousel {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  min-height: 370px;
}

.carousel-track {
  display: flex;
  transition: transform 450ms ease;
}

.carousel-slide {
  width: 100%;
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0.8rem;
  padding: 1.1rem;
  position: relative;
  overflow: hidden;
}

.carousel-slide img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.carousel-info h3 {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
}

.carousel-info p {
  color: var(--muted);
  margin: 0.65rem 0 1rem;
}

.carousel-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
}

.carousel-slide.bg-basketball::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(132, 74, 31, 0.15)),
    repeating-linear-gradient(180deg, transparent 0 33px, rgba(55, 31, 14, 0.52) 33px 35px),
    linear-gradient(90deg, rgba(176, 116, 48, 0.3) 0 272px, rgba(55, 31, 14, 0.58) 272px 274px, rgba(176, 116, 48, 0.24) 274px 565px, rgba(55, 31, 14, 0.58) 565px 567px, rgba(176, 116, 48, 0.2) 567px 860px, rgba(55, 31, 14, 0.58) 860px 862px, rgba(176, 116, 48, 0.16) 862px 1160px, rgba(55, 31, 14, 0.58) 1160px 1162px, rgba(176, 116, 48, 0.12) 1162px 100%),
    linear-gradient(90deg, rgba(176, 116, 48, 0.3) 0 90px, rgba(55, 31, 14, 0.58) 90px 92px, rgba(176, 116, 48, 0.24) 92px 405px, rgba(55, 31, 14, 0.58) 405px 407px, rgba(176, 116, 48, 0.2) 407px 745px, rgba(55, 31, 14, 0.58) 745px 747px, rgba(176, 116, 48, 0.16) 747px 1065px, rgba(55, 31, 14, 0.58) 1065px 1067px, rgba(176, 116, 48, 0.12) 1067px 100%),
    linear-gradient(90deg, rgba(176, 116, 48, 0.3) 0 185px, rgba(55, 31, 14, 0.58) 185px 187px, rgba(176, 116, 48, 0.24) 187px 520px, rgba(55, 31, 14, 0.58) 520px 522px, rgba(176, 116, 48, 0.2) 522px 890px, rgba(55, 31, 14, 0.58) 890px 892px, rgba(176, 116, 48, 0.16) 892px 1210px, rgba(55, 31, 14, 0.58) 1210px 1212px, rgba(176, 116, 48, 0.12) 1212px 100%),
    linear-gradient(90deg, rgba(176, 116, 48, 0.3) 0 140px, rgba(55, 31, 14, 0.58) 140px 142px, rgba(176, 116, 48, 0.24) 142px 468px, rgba(55, 31, 14, 0.58) 468px 470px, rgba(176, 116, 48, 0.2) 470px 810px, rgba(55, 31, 14, 0.58) 810px 812px, rgba(176, 116, 48, 0.16) 812px 1135px, rgba(55, 31, 14, 0.58) 1135px 1137px, rgba(176, 116, 48, 0.12) 1137px 100%),
    linear-gradient(90deg, rgba(176, 116, 48, 0.3) 0 20px, rgba(55, 31, 14, 0.58) 20px 22px, rgba(176, 116, 48, 0.24) 22px 345px, rgba(55, 31, 14, 0.58) 345px 347px, rgba(176, 116, 48, 0.2) 347px 690px, rgba(55, 31, 14, 0.58) 690px 692px, rgba(176, 116, 48, 0.16) 692px 1015px, rgba(55, 31, 14, 0.58) 1015px 1017px, rgba(176, 116, 48, 0.12) 1017px 100%),
    linear-gradient(90deg, rgba(176, 116, 48, 0.3) 0 130px, rgba(55, 31, 14, 0.7) 130px 132px, rgba(176, 116, 48, 0.24) 132px 430px, rgba(55, 31, 14, 0.7) 430px 432px, rgba(176, 116, 48, 0.2) 432px 730px, rgba(55, 31, 14, 0.7) 730px 732px, rgba(176, 116, 48, 0.16) 732px 1030px, rgba(55, 31, 14, 0.7) 1030px 1032px, rgba(176, 116, 48, 0.12) 1032px 100%),
    linear-gradient(90deg, rgba(176, 116, 48, 0.3) 0 160px, rgba(55, 31, 14, 0.7) 160px 162px, rgba(176, 116, 48, 0.24) 162px 470px, rgba(55, 31, 14, 0.7) 470px 472px, rgba(176, 116, 48, 0.2) 472px 790px, rgba(55, 31, 14, 0.7) 790px 792px, rgba(176, 116, 48, 0.16) 792px 1105px, rgba(55, 31, 14, 0.7) 1105px 1107px, rgba(176, 116, 48, 0.12) 1107px 100%),
    linear-gradient(90deg, rgba(176, 116, 48, 0.3) 0 250px, rgba(55, 31, 14, 0.7) 250px 252px, rgba(176, 116, 48, 0.24) 252px 560px, rgba(55, 31, 14, 0.7) 560px 562px, rgba(176, 116, 48, 0.2) 562px 910px, rgba(55, 31, 14, 0.7) 910px 912px, rgba(176, 116, 48, 0.16) 912px 1240px, rgba(55, 31, 14, 0.7) 1240px 1242px, rgba(176, 116, 48, 0.12) 1242px 100%),
    linear-gradient(90deg, rgba(176, 116, 48, 0.3) 0 110px, rgba(55, 31, 14, 0.7) 110px 112px, rgba(176, 116, 48, 0.24) 112px 390px, rgba(55, 31, 14, 0.7) 390px 392px, rgba(176, 116, 48, 0.2) 392px 720px, rgba(55, 31, 14, 0.7) 720px 722px, rgba(176, 116, 48, 0.16) 722px 1070px, rgba(55, 31, 14, 0.7) 1070px 1072px, rgba(176, 116, 48, 0.12) 1072px 100%),
    linear-gradient(90deg, rgba(176, 116, 48, 0.3) 0 200px, rgba(55, 31, 14, 0.7) 200px 202px, rgba(176, 116, 48, 0.24) 202px 520px, rgba(55, 31, 14, 0.7) 520px 522px, rgba(176, 116, 48, 0.2) 522px 860px, rgba(55, 31, 14, 0.7) 860px 862px, rgba(176, 116, 48, 0.16) 862px 1180px, rgba(55, 31, 14, 0.7) 1180px 1182px, rgba(176, 116, 48, 0.12) 1182px 100%),
    linear-gradient(90deg, rgba(176, 116, 48, 0.3) 0 145px, rgba(55, 31, 14, 0.58) 145px 147px, rgba(176, 116, 48, 0.24) 147px 460px, rgba(55, 31, 14, 0.58) 460px 462px, rgba(176, 116, 48, 0.2) 462px 770px, rgba(55, 31, 14, 0.58) 770px 772px, rgba(176, 116, 48, 0.16) 772px 1085px, rgba(55, 31, 14, 0.58) 1085px 1087px, rgba(176, 116, 48, 0.12) 1087px 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4.5px),
    linear-gradient(180deg, #e6b97a 0%, #dca764 52%, #cf8f4f 100%);
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  background-size:
    100% 100%,
    100% 100%,
    100% 35px,
    100% 35px,
    100% 35px,
    100% 35px,
    100% 35px,
    100% 35px,
    100% 35px,
    100% 35px,
    100% 35px,
    100% 35px,
    100% 35px,
    100% 100%,
    100% 100%;
  background-position:
    center,
    center,
    0 0,
    0 35px,
    0 70px,
    0 105px,
    0 140px,
    0 175px,
    0 210px,
    0 245px,
    0 280px,
    0 315px,
    0 350px,
    center,
    center;
}

.carousel-slide.bg-football::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.7) 22px 26px, transparent 26px 46px, rgba(255, 255, 255, 0.7) 46px 50px, transparent 50px 70px, rgba(255, 255, 255, 0.7) 70px 74px, transparent 74px 94px, rgba(255, 255, 255, 0.7) 94px 98px, transparent 98px 120px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0 10px, transparent 10px 110px, rgba(255, 255, 255, 0.7) 110px 120px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0 4px, transparent 4px 120px),
    repeating-linear-gradient(90deg, #3f9254 0 120px, #36854a 120px 240px);
  background-repeat:
    repeat-x,
    repeat-x,
    repeat,
    repeat;
  background-size:
    120px 30px,
    120px 4px,
    120px 100%,
    240px 100%;
  background-position:
    2px calc(50% - 47px),
    2px calc(50% - 60px),
    0 0,
    0 0;
}

.carousel-slide.bg-baseball::before {
  background:
    linear-gradient(135deg, transparent 49.2%, rgba(255, 255, 255, 0.78) 49.2% 50.8%, transparent 50.8%),
    linear-gradient(45deg, transparent 49.2%, rgba(255, 255, 255, 0.78) 49.2% 50.8%, transparent 50.8%),
    linear-gradient(135deg, transparent calc(50% - 40px), rgba(172, 105, 56, 0.78) calc(50% - 40px) calc(50% + 40px), transparent calc(50% + 40px)),
    linear-gradient(45deg, transparent calc(50% - 40px), rgba(172, 105, 56, 0.78) calc(50% - 40px) calc(50% + 40px), transparent calc(50% + 40px)),
    linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)),
    radial-gradient(circle at 50% 58%, rgba(255, 255, 255, 0.2) 0 126px, transparent 126px),
    radial-gradient(circle at 50% 58%, rgba(172, 105, 56, 0.9) 0 112px, transparent 112px),
    repeating-linear-gradient(45deg, #529a5d 0 100px, #478d53 100px 200px);
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  background-size:
    50% 100%,
    50% 100%,
    50% 100%,
    50% 100%,
    28px 8px,
    100% 100%,
    100% 100%,
    100% 100%;
  background-position:
    calc(0% - 260px) top,
    calc(100% + 260px) top,
    calc(0% - 260px) top,
    calc(100% + 260px) top,
    50% 58%,
    center,
    center,
    center;
}

.carousel-slide.bg-soccer::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
    radial-gradient(circle at 50% 50%, transparent 0 92px, rgba(255, 255, 255, 0.72) 92px 96px, transparent 96px),
    linear-gradient(90deg, transparent calc(50% - 2px), rgba(255, 255, 255, 0.75) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)),
    repeating-linear-gradient(90deg, #4aa966 0 96px, #43975d 96px 192px);
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  background-size:
    164px 4px,
    164px 4px,
    4px 300px,
    164px 4px,
    164px 4px,
    4px 300px,
    100% 100%,
    100% 100%,
    100% 100%;
  background-position:
    0 calc(50% - 150px),
    0 calc(50% + 150px),
    160px 50%,
    calc(100% - 160px + 160px) calc(50% - 150px),
    calc(100% - 160px + 160px) calc(50% + 150px),
    calc(100% - 160px) 50%,
    center,
    center,
    center;
}

.carousel-slide.bg-hockey::before {
  background:
    radial-gradient(circle at 0 0, transparent 0 50px, rgba(196, 26, 26, 0.6) 50px 54px, transparent 54px),
    radial-gradient(circle at 100% 0, transparent 0 50px, rgba(196, 26, 26, 0.6) 50px 54px, transparent 54px),
    radial-gradient(circle at 0 100%, transparent 0 50px, rgba(196, 26, 26, 0.6) 50px 54px, transparent 54px),
    radial-gradient(circle at 100% 100%, transparent 0 50px, rgba(196, 26, 26, 0.6) 50px 54px, transparent 54px),
    radial-gradient(circle at 50% 50%, transparent 0 92px, rgba(196, 26, 26, 0.6) 92px 96px, transparent 96px),
    linear-gradient(90deg, transparent 49.4%, rgba(196, 26, 26, 0.6) 49.4% 50.6%, transparent 50.6%),
    linear-gradient(90deg, transparent 16%, rgba(31, 87, 172, 0.45) 16% 17.2%, transparent 17.2% 82.8%, rgba(31, 87, 172, 0.45) 82.8% 84%, transparent 84%),
    #f2f7ff;
}

.carousel-slide.bg-basketball .carousel-info,
.carousel-slide.bg-football .carousel-info,
.carousel-slide.bg-baseball .carousel-info,
.carousel-slide.bg-soccer .carousel-info,
.carousel-slide.bg-hockey .carousel-info {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.83);
  border: 1px solid rgba(215, 223, 234, 0.9);
  border-radius: 14px;
  padding: 0.9rem;
  backdrop-filter: blur(2px);
  justify-self: start;
  width: min(560px, 100%);
  margin-left: -52px;
}

.carousel-nav {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  gap: 0.4rem;
}

.carousel-nav button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  font-size: 1rem;
  cursor: pointer;
}

.carousel-slide--etsy {
  background:
    radial-gradient(circle at 18% 22%, rgba(241, 143, 28, 0.2), transparent 42%),
    radial-gradient(circle at 76% 78%, rgba(13, 111, 184, 0.2), transparent 38%),
    linear-gradient(135deg, #fbfdff, #eef5ff);
}

.etsy-promo-art {
  min-height: 320px;
  border-radius: 18px;
  border: 1px solid #d7dfea;
  background: linear-gradient(135deg, #0a4f84, #0d6fb8);
  color: #fff;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.etsy-promo-art__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.16);
}

.etsy-promo-art__copy {
  font-family: "Bungee", "Impact", sans-serif;
  font-size: clamp(1rem, 2vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.etsy-promo-art__grid {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.etsy-promo-art__tile {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

.etsy-promo-art__tile img {
  width: 100%;
  height: 148px;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.12);
  display: block;
  background: rgba(255, 255, 255, 0.06);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.split-about {
  grid-template-columns: 2fr 1fr;
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1.2rem;
}

.panel h2, .panel h3 {
  margin-top: 0;
}

.stack {
  display: grid;
  gap: 0.85rem;
}

.faq details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 0.7rem 0.9rem;
}

.faq summary {
  font-weight: 800;
  cursor: pointer;
}

.faq p {
  color: var(--muted);
  margin-bottom: 0;
}

.contact-list {
  padding-left: 1.2rem;
  margin: 0;
  color: var(--muted);
}

.search-row {
  margin: 1rem 0;
  display: flex;
  gap: 0.7rem;
  align-items: center;
  flex-wrap: wrap;
}

.search-row input {
  flex: 1;
  min-width: 230px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.7rem 0.85rem;
  font: inherit;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0;
  background: rgba(255, 255, 255, 0.64);
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.footer-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.empty {
  padding: 2rem;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}

.spreadshop-shell {
  padding: 0.8rem;
}

.shop-shell-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem 0.45rem 0.65rem;
}

.shop-back-button {
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1;
  min-width: 52px;
  min-height: 42px;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
  border-color: rgba(13, 111, 184, 0.4);
  box-shadow: 0 6px 16px rgba(13, 111, 184, 0.16);
}

.shop-share-button {
  min-height: 42px;
  min-width: 84px;
  border-color: rgba(13, 111, 184, 0.4);
  box-shadow: 0 6px 16px rgba(13, 111, 184, 0.16);
}

.shop-share-button[hidden] {
  display: none !important;
}

.testimonials-wrap {
  margin-top: 1.2rem;
}

.testimonials {
  overflow: hidden;
}

.testimonials-head {
  margin-bottom: 0.6rem;
}

.testimonials-carousel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(13, 111, 184, 0.12), transparent 38%),
    radial-gradient(circle at 84% 86%, rgba(241, 143, 28, 0.12), transparent 34%),
    linear-gradient(135deg, #fbfdff, #f2f7ff);
}

.testimonials-track {
  display: flex;
  transition: transform 450ms ease;
}

.testimonial-slide {
  flex: 0 0 100%;
  padding: 1.15rem 1.2rem 2.55rem;
}

.testimonial-stars {
  margin: 0;
  color: #d87600;
  letter-spacing: 0.2em;
  font-size: 1rem;
}

.testimonial-quote {
  margin: 0.48rem 0 0.42rem;
  font-size: clamp(1.03rem, 1.9vw, 1.24rem);
  line-height: 1.35;
  font-weight: 600;
  color: #18355b;
}

.testimonial-attribution {
  margin: 0;
  color: #4c6485;
  font-size: 0.92rem;
}

.testimonials-nav {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  display: flex;
  gap: 0.42rem;
}

.testimonials-nav button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  font-size: 1rem;
  cursor: pointer;
}

#sprd-shop {
  min-height: 900px;
}

/* Embedded Spreadshop cleanup, while keeping the list page title visible */
#sprd-shop .sprd-header__title {
  display: none !important;
}

#sprd-shop .sprd-breadcrumb-nav,
#sprd-shop .sprd-breadcrumb {
  display: none !important;
}

#sprd-shop .sprd-navigation,
#sprd-shop #sprd-navigation {
  display: none !important;
}

#sprd-shop .sprd-filterpane {
  display: none !important;
}

#sprd-shop .sprd-activefilters-lp,
#sprd-shop .sprd-mobilefilter,
#sprd-shop .sprd-mobilefilter__open-btn {
  display: none !important;
}

#sprd-shop .sprd-footer,
#sprd-shop #sprd-footer,
#sprd-shop .sprd-info-footer__open-shop,
#sprd-shop #buttonSpreadshirt,
#sprd-shop .sprd-social-bar {
  display: none !important;
}

#sprd-shop .sprd-listpage {
  grid-template-columns: 1fr !important;
}

/* Align cart to the title baseline with mirrored horizontal offsets */
#sprd-shop .sprd-listpage__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

#sprd-shop .sprd-listpage__title {
  margin: 0;
}

#sprd-shop .sprd-header__actions,
#sprd-shop .sprd-basket-indicator {
  position: static !important;
}

@media (max-width: 980px) {
  .hero-grid,
  .split,
  .carousel-slide {
    grid-template-columns: 1fr;
  }

  .carousel-slide.bg-basketball .carousel-info,
  .carousel-slide.bg-football .carousel-info,
  .carousel-slide.bg-baseball .carousel-info,
  .carousel-slide.bg-soccer .carousel-info,
  .carousel-slide.bg-hockey .carousel-info {
    width: 100%;
    margin-left: 0;
  }

  .testimonials-nav {
    right: 0.5rem;
    bottom: 0.5rem;
  }

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

@media (max-width: 620px) {
  .header-row {
    padding: 0.55rem 0;
    align-items: flex-start;
    flex-direction: column;
  }

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

  .brand {
    width: 100%;
  }

  .brand-mark {
    width: 62px;
    height: 62px;
  }

  .brand-title {
    font-size: 1.72rem;
  }

  .brand .brand-tagline {
    font-size: 0.88rem;
  }

  .site-nav {
    width: 100%;
    justify-content: space-between;
  }

  .site-nav a {
    padding: 0.48rem 0.7rem;
    font-size: 0.83rem;
  }
}