/* Puzzles Plus shopping-page refresh.
   This stylesheet is intentionally additive: it does not change link URLs,
   form names, values, methods, actions, or JavaScript behavior. */

body.shopping-refresh {
  background: var(--soft);
}

.shopping-refresh .legacy-shopping-content {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 46px 0 88px;
}

.shopping-refresh .shopping-intro {
  position: relative;
  overflow: hidden;
  margin: 0 0 28px;
  padding: clamp(28px, 5vw, 58px);
  border-radius: 30px;
  color: #fff;
  background:
    linear-gradient(110deg, rgba(43,7,87,.96), rgba(75,12,164,.9)),
    url('assets/wall-of-puzzles.jpg') center/cover;
  box-shadow: var(--shadow);
}

.shopping-refresh .shopping-intro h1 {
  max-width: 760px;
  margin: 0 0 14px;
  font-size: clamp(2.3rem, 5vw, 4.6rem);
  letter-spacing: -.04em;
}

.shopping-refresh .shopping-intro p {
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 1.08rem;
}

.shopping-refresh .shopping-panel {
  margin: 0 0 24px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(43,7,87,.07);
}

.shopping-refresh .shopping-panel > :first-child { margin-top: 0; }
.shopping-refresh .shopping-panel > :last-child { margin-bottom: 0; }

.shopping-refresh form {
  display: grid;
  gap: 18px;
}

.shopping-refresh fieldset {
  min-width: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
}

.shopping-refresh legend {
  padding: 0 8px;
  color: var(--purple-800);
  font-weight: 900;
}

.shopping-refresh label {
  font-weight: 800;
}

.shopping-refresh input[type="text"],
.shopping-refresh input[type="search"],
.shopping-refresh input[type="email"],
.shopping-refresh input[type="tel"],
.shopping-refresh select,
.shopping-refresh textarea {
  width: min(100%, 620px);
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid #cfc4d8 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--ink) !important;
  font: inherit !important;
}

.shopping-refresh input:focus,
.shopping-refresh select:focus,
.shopping-refresh textarea:focus {
  outline: 3px solid rgba(103,34,201,.2);
  border-color: var(--purple-650) !important;
}

.shopping-refresh input[type="radio"],
.shopping-refresh input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--purple-650);
}

.shopping-refresh button,
.shopping-refresh input[type="button"],
.shopping-refresh input[type="submit"],
.shopping-refresh input[type="reset"] {
  min-height: 46px;
  padding: 9px 17px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--purple-800) !important;
  color: #fff !important;
  font: inherit !important;
  font-weight: 900 !important;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(75,12,164,.18);
}

.shopping-refresh button:hover,
.shopping-refresh input[type="button"]:hover,
.shopping-refresh input[type="submit"]:hover {
  background: var(--purple-650) !important;
}

.shopping-refresh a { text-underline-offset: 3px; }
.shopping-refresh main a:not(.button) { color: var(--purple-800); font-weight: 800; }
.shopping-refresh main a:not(.button):hover { color: var(--purple-650); }

.shopping-refresh table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  border: 1px solid var(--border) !important;
  border-radius: 16px;
  background: #fff;
}

.shopping-refresh th,
.shopping-refresh td {
  padding: 12px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: top;
}

.shopping-refresh th {
  background: var(--purple-100);
  color: var(--purple-950);
  text-align: left;
}

.shopping-refresh tr:last-child td { border-bottom: 0 !important; }
.shopping-refresh tr:nth-child(even) td { background: #fbf9fd; }

.shopping-refresh .filter-link,
.shopping-refresh .legacy-shopping-content a[href*="GoShopping"] {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin: 4px 4px 4px 0;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
}

.shopping-refresh .legacy-shopping-content img {
  border-radius: 18px;
}

@media (max-width: 700px) {
  .shopping-refresh .legacy-shopping-content {
    width: min(100% - 28px, 1160px);
    padding-top: 28px;
  }
  .shopping-refresh th,
  .shopping-refresh td { padding: 10px !important; }
}