/* Store, cart, thanks, Case Club+ */
.store, .cart, .thanks, .plus { padding-block: var(--s7); }
.room-hero--slim .room-hero__inner { min-height: 150px; }
.room-hero--slim .room-hero__copy { padding-bottom: var(--s6); }

/* product cards */
.products { list-style: none; display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.product {
  --tone: var(--lake);
  display: flex; flex-direction: column; background: var(--snow);
  border: var(--ink); border-radius: 22px; overflow: hidden;
  box-shadow: 0 7px 0 var(--navy); transition: transform .15s ease;
}
.product:hover { transform: translateY(-4px) rotate(-.4deg); }
.product--tie { --tone: var(--tie); } .product--meadow { --tone: var(--meadow); }
.product--fox { --tone: var(--fox); } .product--sun { --tone: var(--sun); }
.product__cover {
  position: relative; background: var(--tone); padding: var(--s5) var(--s5) 0;
  display: grid; place-items: end center; min-height: 230px; border-bottom: var(--ink);
  background-image: radial-gradient(rgba(255,255,255,.25) 2px, transparent 2.5px); background-size: 18px 18px;
}
.product__cover img {
  width: 72%; height: auto; border-radius: 8px 8px 0 0; border: 3px solid var(--navy); border-bottom: 0;
  box-shadow: 0 -2px 0 rgba(0,0,0,.05); transform: rotate(-2deg) translateY(4px);
}
.product__tag {
  position: absolute; top: 12px; left: 12px; background: var(--sun); color: var(--navy);
  font-family: var(--font-display); padding: 4px 12px; border: 3px solid var(--navy); border-radius: 999px;
  transform: rotate(-6deg); box-shadow: 0 3px 0 var(--navy);
}
.product__tag--soon { background: var(--snow); }
.product__body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.product__title { font-size: var(--text-lg); line-height: 1.1; }
.product__desc { font-size: .95rem; color: #3a4270; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product__price { font-family: var(--font-display); font-size: 1.6rem; color: var(--tie-dark); margin: 0; }
.product__price small { font-size: .8rem; color: var(--navy); }
.product__price s { font-size: 1rem; color: #7b84ad; }
.product__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding-top: var(--s3); }
.product__kind { font-size: .85rem; font-weight: 700; color: var(--meadow-dark); }

/* Case Club+ strip */
.plus-strip { padding-bottom: var(--s8); }
.plus-strip__card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4);
  background: var(--navy); color: var(--snow); text-decoration: none; border: var(--ink); border-radius: 24px;
  padding: var(--s5) var(--s6); box-shadow: 0 7px 0 var(--sun-dark);
}
.plus-strip__card strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); color: var(--sun); }
.plus-strip__card:hover { transform: translateY(-3px); }

/* cart */
.cart__grid { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .cart__grid { grid-template-columns: minmax(0, 1fr) 360px !important; align-items: start; } }
.cart__grid { grid-template-columns: minmax(0, 1fr); }
.cart__lines { list-style: none; display: grid; gap: var(--s4); }
.line {
  display: flex; gap: var(--s4); align-items: center;
  background: var(--snow); border: var(--ink); border-radius: 18px; padding: var(--s4); box-shadow: 0 5px 0 var(--navy);
}
.line__info { flex: 1; min-width: 0; }
.line__pic { flex: 0 0 70px; }
.line img { width: 70px; height: auto; border-radius: 6px; border: 2px solid var(--navy); }
.line h2 { font-size: var(--text-lg); line-height: 1.1; margin-bottom: 4px; }
.line p { margin: 0 0 var(--s2); font-size: .95rem; }
.line__ctl { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.line__total { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; }
.qty { display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: .9rem; }
.qty select { border: 2px solid var(--navy); border-radius: 10px; padding: 4px 8px; font: inherit; background: var(--snow); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--tie-dark); text-decoration: underline; cursor: pointer; }

.summary {
  background: var(--sun); border: var(--ink); border-radius: 22px; padding: var(--s5);
  box-shadow: 0 7px 0 var(--navy); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); position: sticky; top: calc(var(--header-space) + 12px);
}
.summary h2 { font-size: var(--text-xl); }
.summary dl { display: grid; gap: var(--s2); margin: 0; }
.summary dl div { display: flex; justify-content: space-between; gap: var(--s3); }
.summary dd { margin: 0; font-weight: 700; }
.summary__disc dd { color: var(--meadow-dark); }
.summary__total { border-top: 3px dashed var(--navy); padding-top: var(--s2); font-family: var(--font-display); font-size: 1.4rem; }
.summary__fine { font-size: .85rem; margin: var(--s2) 0 0; }
.promo label { font-weight: 700; display: block; margin-bottom: 4px; }
.promo div { display: flex; gap: var(--s2); }
.summary input, .summary .btn { max-width: 100%; box-sizing: border-box; }
.summary .field input { width: 100%; }
.promo input { flex: 1; min-width: 0; border: 3px solid var(--navy); border-radius: 12px; padding: 8px 12px; font: inherit; text-transform: uppercase; }

/* thanks */
.thanks { display: grid; gap: var(--s6); max-width: 760px; }
.panel--sun { background: var(--sun); }
.dl { list-style: none; display: grid; gap: var(--s2); margin-top: var(--s3); }

/* Case Club+ */
.plus-books img { border-radius: 8px; border: 3px solid var(--navy); height: 200px !important; margin-inline: -10px !important; transform: rotate(-6deg); }
.plus-books img:nth-child(2) { height: 230px !important; transform: rotate(0); }
.plus-books img:nth-child(3) { transform: rotate(6deg); }
.plus-books { padding-bottom: 40px; }
.plans { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 820px; margin-inline: auto; }
.plan {
  position: relative; background: var(--snow); border: var(--ink); border-radius: 24px; padding: var(--s6);
  box-shadow: 0 7px 0 var(--navy); display: grid; gap: var(--s3); align-content: start;
}
.plan--best { background: var(--sun); transform: rotate(.6deg); }
.plan__flag {
  position: absolute; top: -16px; right: 18px; background: var(--tie); color: var(--snow);
  font-family: var(--font-display); padding: 4px 14px; border: 3px solid var(--navy); border-radius: 999px; transform: rotate(4deg);
}
.plan h2 { font-size: var(--text-xl); }
.plan__price { font-family: var(--font-display); font-size: 2rem; margin: 0; }
.plan ul { list-style: none; display: grid; gap: 6px; padding: 0; margin: 0 0 var(--s2); }
.plan li::before { content: "★"; color: var(--tie); margin-right: 8px; }
.plus__fine { text-align: center; margin: var(--s5) auto var(--s8); max-width: 60ch; font-size: .95rem; }
.plus-member { margin-bottom: var(--s8); }
.shelfbooks { list-style: none; display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.shelfbook { display: flex; gap: var(--s5); align-items: flex-start; }
.shelfbook__cover { flex: 0 0 150px; display: block; }
.shelfbook__cover img { display: block; width: 100%; height: auto; border-radius: 6px 12px 12px 6px; border: 2px solid var(--navy); box-shadow: 4px 6px 0 rgba(24,33,88,.25); transition: transform .2s ease; }
.shelfbook__cover:hover img { transform: rotate(-2deg) translateY(-3px); }
.shelfbook__text { flex: 1 1 auto; min-width: 0; }
.shelfbook__sub { font-weight: 700; margin-top: calc(var(--s2) * -1); margin-bottom: var(--s2); }
@media (max-width: 520px) { .shelfbook { flex-direction: column; align-items: center; text-align: center; } .shelfbook__cover { flex-basis: auto; width: 170px; } }
.shelfbooks h3 { font-size: var(--text-lg); margin-bottom: var(--s2); }

.product__cover img.product__stand { width: auto; height: 210px; border: 0; border-radius: 0; transform: none; filter: drop-shadow(0 4px 0 rgba(24,33,88,.3)); }
.line__pic--art { background: var(--sun); border: 2px solid var(--navy); border-radius: 10px; display: grid; place-items: end center; height: 90px; overflow: hidden; }
.line__pic--art img { border: 0; width: 56px; }
@media (max-width: 520px) {
  .line { flex-wrap: wrap; }
  .line__total { margin-left: auto; }
}
.thanks { grid-template-columns: minmax(0, 1fr); }
.dl .btn { white-space: normal; text-align: center; max-width: 100%; }