/* Playing Wise's own stylesheet (themes/sites/playingwise): the pick cards with their "Check price" button in posts, and the
   home page's age shelves. Warm wood-and-cardboard: the theme's amber for the answer, charcoal-brown for text. */
.pw-pick { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 1.75rem; padding: .9rem 1rem .9rem 1.1rem;
  background: #fff; border: 1px solid #eadfcd; border-left: 5px solid var(--bs-primary); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(63,47,34,.06); }
.pw-pick-body { flex: 1; min-width: 0; line-height: 1.35; }
.pw-pick-name { display: block; font-family: var(--font-family-heading); font-weight: 700; color: #3f2f22; font-size: 1.02rem; }
.pw-pick-facts { display: block; color: #8a7967; font-size: .88rem; margin-top: .15rem; }
.pw-pick-tag { display: inline-block; margin-bottom: .25rem; padding: .1rem .55rem; border-radius: 999px; background: #fef3c7;
  color: #92400e; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
a.pw-buy, .pw-buy { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.05rem; border-radius: 999px;
  background: var(--bs-primary); color: #2b1d0e !important; font-weight: 700; font-size: .92rem; text-decoration: none !important;
  white-space: nowrap; box-shadow: 0 2px 0 #b45309; transition: transform .08s, box-shadow .08s; }
a.pw-buy:hover { transform: translateY(1px); box-shadow: 0 1px 0 #b45309; color: #2b1d0e; }
a.pw-buy::after { content: "\2197"; font-weight: 400; }
.pw-picks-note { color: #8a7967; font-size: .8rem; margin: -.75rem 0 1.5rem; }
@media (max-width: 575.98px) {
  .pw-pick { flex-direction: column; align-items: stretch; text-align: left; }
  a.pw-buy { justify-content: center; }
}

/* --- Home: the shop window by age --- */
.pw-hero { margin: .5rem 0 2.5rem; padding: 2.5rem 2rem 2rem; border-radius: 22px;
  background: radial-gradient(circle at 92% 8%, #fde68a 0, transparent 38%), linear-gradient(135deg, #fff7e6 0%, #fdecc8 100%);
  border: 1px solid #f3dfb4; }
.pw-kicker { margin: 0 0 .4rem; color: #b45309; font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.pw-hero-title { margin: 0 0 .75rem; max-width: 22ch; font-weight: 800; color: #3f2f22; line-height: 1.08;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); letter-spacing: -.02em; }
.pw-hero-lede { max-width: 60ch; color: #5c4a3b; font-size: 1.08rem; margin-bottom: 1.5rem; }
.pw-bins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.pw-bin { display: flex; flex-direction: column; align-items: flex-start; padding: .9rem 1rem; border-radius: 14px; color: #3f2f22;
  text-decoration: none; background: #fff; border: 2px solid transparent; box-shadow: 0 3px 0 rgba(63,47,34,.12); transition: transform .1s; }
.pw-bin:hover { transform: translateY(-2px); color: #3f2f22; }
.pw-bin b { font-family: var(--font-family-heading); font-size: 1.6rem; font-weight: 800; line-height: 1; }
.pw-bin span { font-size: .9rem; color: #6b5847; margin-top: .3rem; font-weight: 600; }
.pw-bin-1 { --bin: #f59e0b; } .pw-bin-2 { --bin: #16a34a; } .pw-bin-3 { --bin: #0ea5e9; } .pw-bin-4 { --bin: #dc2626; }
.pw-bin { border-top: 6px solid var(--bin); }
.pw-section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 1.1rem; }
.pw-section-head h2 { margin: 0; font-weight: 800; font-size: 1.55rem; color: #3f2f22; }
.pw-section-head p { margin: 0; color: #8a7967; }
.pw-shelves { margin-bottom: 3rem; }
.pw-shelf-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.pw-shelf { background: #fff; border: 1px solid #eadfcd; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(63,47,34,.06); }
.pw-shelf-tag { margin: 0; padding: .7rem 1.1rem; font-size: 1rem; font-weight: 800; color: #fff; background: var(--bin);
  letter-spacing: .02em; }
.pw-shelf ul { list-style: none; margin: 0; padding: 0; }
.pw-shelf li { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; }
.pw-shelf li + li { border-top: 1px dashed #eadfcd; }
.pw-item-name { font-family: var(--font-family-heading); font-weight: 700; color: #3f2f22; }
.pw-item-why { color: #6b5847; font-size: .92rem; line-height: 1.4; }
.pw-item-links { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .45rem; font-size: .88rem; }
.pw-item-links a:not(.pw-buy) { color: #b45309; font-weight: 600; }
.pw-item-links a.pw-buy { padding: .4rem .85rem; font-size: .85rem; }
.pw-tools { margin-bottom: 3rem; }
.pw-tool-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.pw-tool { display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem 1.25rem; border-radius: 16px; text-decoration: none;
  background: #3f2f22; color: #f8f5f0; transition: transform .1s; }
.pw-tool:hover { transform: translateY(-2px); color: #fff; }
.pw-tool b { font-family: var(--font-family-heading); font-size: 1.1rem; color: #fbbf24; }
.pw-tool b::after { content: " \2192"; }
.pw-tool span { font-size: .92rem; color: #e7dccd; line-height: 1.4; }
@media (max-width: 991.98px) {
  .pw-shelf-row, .pw-tool-row { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .pw-hero { padding: 1.6rem 1.1rem 1.3rem; border-radius: 16px; }
  .pw-bins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Quick picks: the answer's products with their buttons, straight under a post's opening verdict */
.pw-quick { margin: 1.25rem 0 2rem; padding: 1rem 1.15rem .6rem; background: #fff7e6; border: 1px solid #f3dfb4; border-radius: 16px; }
.pw-quick-title { margin: 0 0 .5rem; font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #b45309; }
.pw-quick ul { list-style: none; margin: 0; padding: 0; }
.pw-quick li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; line-height: 1.35; }
.pw-quick li + li { border-top: 1px dashed #f3dfb4; }
.pw-quick li b { color: #3f2f22; }
.pw-quick li span { color: #6b5847; font-size: .95rem; }
.pw-quick a.pw-buy { padding: .4rem .85rem; font-size: .85rem; }