/* CPM 3D — Shop page styles (extends home-pop.css sticker system) */

/* ===== Page hero ===== */
.page-hero { position: relative; background: var(--ink); color: var(--cream); overflow: hidden; }
.page-hero-bg {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(-38deg, rgba(250, 245, 234, 0.045) 0 20px, rgba(250, 245, 234, 0.012) 20px 40px),
    radial-gradient(circle at 86% 30%, transparent 96px, rgba(47, 168, 190, 0.5) 96px, rgba(47, 168, 190, 0.5) 103px, transparent 103px),
    radial-gradient(circle at 6% 90%, transparent 76px, rgba(246, 185, 43, 0.45) 76px, rgba(246, 185, 43, 0.45) 83px, transparent 83px),
    radial-gradient(circle at 70% 110%, transparent 56px, rgba(234, 74, 59, 0.5) 56px, rgba(234, 74, 59, 0.5) 62px, transparent 62px),
    var(--ink);
}
.page-hero[data-screen-label="Shop hero"] .page-hero-bg {
  background:
    linear-gradient(90deg, rgba(16, 29, 58, 0.74) 0%, rgba(16, 29, 58, 0.36) 20%, rgba(7, 17, 38, 0.74) 50%, rgba(16, 29, 58, 0.36) 80%, rgba(16, 29, 58, 0.76) 100%),
    linear-gradient(180deg, rgba(16, 29, 58, 0.18) 0%, rgba(16, 29, 58, 0.62) 100%),
    url("brand/shop-higgs-field-hero.png") center 47% / cover no-repeat,
    var(--ink);
}
.page-hero-content {
  position: relative; z-index: 2; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 58px 24px 130px;
}
.crumbs {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4); border-radius: 999px; padding: 7px 18px;
}
.crumbs a:hover { color: var(--teal); }
.crumbs .sep { color: var(--red); display: inline-flex; }
.crumbs b { color: var(--teal); font-weight: 700; }
.page-hero h1 { font-size: 68px; line-height: 1.04; color: var(--cream); }
.page-hero h1 .c-teal, .page-hero h1 .c-yellow, .page-hero h1 .c-red, .page-hero h1 .c-mint { text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45); }
.page-hero .lede { font-size: 16px; font-weight: 500; color: rgba(250, 245, 234, 0.78); max-width: 560px; }
.page-hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; }
.page-hero-wave svg { display: block; width: 100%; height: 92px; }
[data-waves="off"] .page-hero-wave { display: none; }
[data-waves="off"] .page-hero-content { padding-bottom: 70px; }

/* ===== Shop layout ===== */
.shop { padding: 64px 0 100px; }
.shop-layout { display: grid; grid-template-columns: 290px 1fr; gap: 44px; align-items: start; }

/* ----- Filter sidebar ----- */
.shop-side { display: flex; flex-direction: column; gap: 26px; position: sticky; top: 122px; }
.fcard {
  background: var(--paper); border: var(--ow) solid var(--ink);
  border-radius: var(--radius-md); box-shadow: 5px 5px 0 var(--ink);
  padding: 22px 24px 24px;
}
.fcard h3 {
  font-size: 19px; display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 2px dashed rgba(27, 42, 74, 0.25);
}
.fcard h3 .f-ic { display: inline-flex; color: var(--red); }

.cat-list { display: flex; flex-direction: column; gap: 8px; }
.cat-pill {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 2px solid transparent; border-radius: var(--radius-pill);
  padding: 9px 14px; font-size: 14.5px; font-weight: 600; color: var(--ink); text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cat-pill:hover { background: var(--bg); border-color: var(--ink); }
.cat-pill.active { background: var(--yellow); border-color: var(--ink); box-shadow: 2.5px 2.5px 0 var(--ink); }
.cat-pill .cnt {
  margin-left: auto; font-size: 11.5px; font-weight: 700;
  background: var(--cream); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 9px;
}
.cat-pill.active .cnt { background: var(--paper); }

.price-filter { display: flex; flex-direction: column; gap: 14px; }
.price-readout { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; }
.price-readout .max { color: var(--red); }
input[type="range"].pop-range { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; background: var(--cream); border: 2px solid var(--ink); border-radius: 999px; outline: none; cursor: pointer; }
input[type="range"].pop-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
input[type="range"].pop-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

.swatch-row { display: flex; flex-wrap: wrap; gap: 11px; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--ink);
  padding: 0; position: relative; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.swatch:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.swatch.active { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--ink); }
.swatch.active::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--paper);
  border: 2px solid var(--ink);
}

.onsale-toggle { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; cursor: pointer; user-select: none; }
.onsale-toggle input { display: none; }
.onsale-toggle .box {
  width: 26px; height: 26px; border-radius: 8px; background: var(--paper);
  border: 2.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center;
  color: transparent; flex-shrink: 0; transition: background 0.15s ease;
}
.onsale-toggle input:checked + .box { background: var(--red); color: var(--paper); box-shadow: 2px 2px 0 var(--ink); }

.clear-filters {
  font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em;
  background: var(--cream); border: 2.5px solid var(--ink); border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 var(--ink); padding: 10px 20px; color: var(--ink); width: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.clear-filters:hover { background: var(--yellow); transform: translate(-1.5px, -1.5px); box-shadow: 4.5px 4.5px 0 var(--ink); }

.side-promo {
  background: var(--teal); color: #FFFFFF; text-align: center;
  border: var(--ow) solid var(--ink); border-radius: var(--radius-md); box-shadow: 5px 5px 0 var(--ink);
  padding: 26px 22px; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.side-promo .sp-ic { display: inline-flex; color: var(--yellow); filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.35)); }
.side-promo h3 { color: #FFFFFF; font-size: 21px; line-height: 1.2; }
.side-promo p { font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.88); line-height: 1.55; }

/* ----- Toolbar ----- */
.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.result-count { font-size: 14.5px; font-weight: 600; color: var(--text-soft); }
.result-count b { color: var(--ink); font-weight: 700; }
.sort-wrap { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.sort-pill {
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 var(--ink); padding: 10px 18px; cursor: pointer; outline: none;
}
.active-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--mint); color: var(--ink); border: 2px solid var(--ink);
  border-radius: 999px; padding: 5px 8px 5px 14px; cursor: pointer;
}
.chip .x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); font-size: 11px; line-height: 1; }
.chip:hover { background: var(--yellow); }

/* ----- Product grid ----- */
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.shop-grid .pcard { flex: none; min-width: 0; color: var(--ink); text-decoration: none; display: flex; flex-direction: column; }
.shop-grid .pcard .ph { height: 225px; position: relative; }
.shop-grid .pcard .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-grid .pcard .ph-fallback { display: flex; align-items: center; justify-content: center; background: rgba(47, 168, 190, 0.18); }
.shop-grid .pcard .add-btn { pointer-events: none; }
.fcard[hidden] { display: none !important; }
.badge-sale, .badge-new {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.08em;
  border: 2px solid var(--ink); box-shadow: 2.5px 2.5px 0 var(--ink);
  border-radius: 999px; padding: 4px 13px; transform: rotate(-4deg);
}
.badge-sale { background: var(--red); color: #FFFFFF; }
.badge-new { background: var(--mint); color: var(--ink); }
.wish-btn {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--paper); border: 2.5px solid var(--ink); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.wish-btn:hover { background: var(--red); color: #FFFFFF; transform: scale(1.08); }
.wish-btn.wished { background: var(--red); color: #FFFFFF; }
.dot-row { display: flex; gap: 6px; margin-top: 2px; }
.dot-row i { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--ink); }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 8px; gap: 10px; }
.add-btn {
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.04em;
  background: var(--yellow); color: var(--ink); border: 2.5px solid var(--ink);
  border-radius: var(--radius-pill); box-shadow: 2.5px 2.5px 0 var(--ink);
  padding: 8px 16px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.add-btn:hover { transform: translate(-1.5px, -1.5px); box-shadow: 4px 4px 0 var(--ink); }

.no-results {
  grid-column: 1 / -1; text-align: center; padding: 70px 20px;
  background: var(--paper); border: var(--ow) solid var(--ink);
  border-radius: var(--radius-md); box-shadow: 5px 5px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.no-results h3 { font-size: 26px; }
.no-results p { color: var(--text-soft); font-weight: 500; font-size: 15px; }

/* ----- Pagination ----- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 48px; }
.page-btn {
  min-width: 50px; height: 50px; padding: 0 16px; border-radius: 999px;
  font-family: var(--font-display); font-size: 17px; color: var(--ink);
  background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.page-btn:hover:not(:disabled) { background: var(--cream); transform: translate(-1.5px, -1.5px); box-shadow: 4.5px 4.5px 0 var(--ink); }
.page-btn.active { background: var(--teal); color: #FFFFFF; }
.page-btn:disabled { opacity: 0.35; cursor: default; box-shadow: 3px 3px 0 var(--ink); }

@media (max-width: 1080px) {
  .shop-layout { grid-template-columns: 1fr; }
  .shop-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .shop-side > * { flex: 1 1 280px; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .page-hero h1 { font-size: 48px; }
}

@media (max-width: 720px) {
  .page-hero[data-screen-label="Shop hero"] h1 {
    max-width: calc(100vw - 32px);
    font-size: 38px;
    line-height: 1;
    white-space: nowrap;
  }

  .shop { padding: 42px 0 72px; }
  .shop-layout {
    gap: 26px !important;
  }
  .shop-side {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px !important;
    position: static;
    width: 100%;
  }
  .shop-side > * {
    flex: none !important;
    min-width: 0;
  }
  .shop-side .fcard:first-child,
  .shop-side .clear-filters,
  .shop-side .side-promo {
    grid-column: 1 / -1;
  }

  .fcard {
    padding: 16px;
    border-width: 3px;
    border-radius: 20px;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .fcard h3 {
    justify-content: center;
    gap: 8px;
    padding-bottom: 11px;
    margin-bottom: 13px;
    font-size: 17px;
    text-align: center;
  }

  .cat-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .cat-pill {
    min-height: 44px;
    justify-content: center;
    padding: 8px 10px;
    gap: 7px;
    font-size: 13px;
    line-height: 1.15;
    text-align: center;
  }
  .cat-pill .cnt {
    margin-left: 0;
    padding: 1px 7px;
    font-size: 10.5px;
  }

  .price-filter {
    gap: 12px;
  }
  .price-readout {
    font-size: 13px;
  }
  .onsale-toggle {
    justify-content: center;
    gap: 9px;
    font-size: 12.5px;
    text-align: center;
  }
  .onsale-toggle .box {
    width: 24px;
    height: 24px;
  }

  .swatch-row {
    justify-content: center;
    gap: 9px;
  }
  .swatch {
    width: 31px;
    height: 31px;
  }

  .clear-filters {
    justify-self: center;
    width: min(100%, 320px);
    padding: 11px 18px;
  }
  .side-promo {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px 14px;
    padding: 16px;
    text-align: left;
    border-width: 3px;
    border-radius: 20px;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .side-promo .sp-ic {
    grid-row: 1 / span 2;
  }
  .side-promo h3 {
    font-size: 18px;
  }
  .side-promo p {
    font-size: 12.5px;
    line-height: 1.4;
  }

  .shop-toolbar {
    justify-content: center;
    text-align: center;
  }
  .sort-wrap {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 460px) {
  .page-hero[data-screen-label="Shop hero"] h1 {
    font-size: 29px;
  }

  .shop-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    width: min(100%, 390px);
    margin-left: auto;
    margin-right: auto;
  }
  .shop-grid .pcard {
    width: 100%;
    min-width: 0;
  }
  .shop-grid .pcard .ph {
    height: auto;
    aspect-ratio: 1 / 0.82;
  }
  .shop-grid .pcard .pcard-body {
    align-items: center;
    padding: 18px 18px 20px;
    text-align: center;
  }
  .shop-grid .pcard .pcard-cat {
    max-width: 100%;
    line-height: 1.15;
    text-wrap: balance;
  }
  .shop-grid .pcard .pcard-name {
    font-size: 25px;
    line-height: 1.05;
    max-width: 100%;
  }
  .shop-grid .pcard .pcard-foot {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .shop-grid .pcard .pcard-price {
    min-width: 100%;
    text-align: center;
  }
  .shop-grid .pcard .add-btn {
    min-width: 152px;
    justify-content: center;
  }

  .shop-side {
    grid-template-columns: 1fr;
  }
  .cat-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cat-pill {
    justify-content: center;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
  }
  .cat-pill .cnt {
    margin-left: 0;
  }
  .side-promo {
    display: none;
  }
}

@media (max-width: 360px) {
  .page-hero[data-screen-label="Shop hero"] h1 {
    font-size: 22px;
  }

  .cat-list {
    grid-template-columns: 1fr;
  }
  .cat-pill {
    justify-content: space-between;
    text-align: left;
    padding-left: 14px;
    padding-right: 14px;
  }
  .cat-pill .cnt {
    margin-left: auto;
  }
}