/* Homepage featured slider: top guides with their (unmodified) seller product photos. */
.featured { background: var(--soft); border-bottom: 1px solid var(--line); padding: 1rem 0 .9rem; }
.featured-inner { width: min(calc(100% - 2rem), var(--max)); margin: auto; }
.featured-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.featured-head h1 { margin: 0; font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.3; color: var(--muted); font-weight: 700; }
.featured-head h1 strong { color: var(--ink); }
.featured-controls { display: flex; align-items: center; gap: .45rem; flex: none; }
.featured-controls button { width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 1.05rem; font-weight: 800; cursor: pointer; }
.featured-controls button:hover { border-color: var(--green); color: var(--green-dark); }
.featured-controls button:focus-visible, .featured-dots button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.featured-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 0; margin: 0; list-style: none; }
.featured-track::-webkit-scrollbar { display: none; }
.featured.is-enhanced .featured-track { cursor: grab; }
.featured-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.featured-track.is-dragging a { pointer-events: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: center; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--slide-accent, var(--green)); border-radius: 10px; padding: clamp(1rem, 2.2vw, 1.5rem); min-height: 250px; }
.slide-copy .slide-kicker { margin: 0 0 .3rem; color: var(--slide-accent, var(--green)); font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.slide-copy h2 { margin: 0 0 .45rem; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.15; }
.slide-copy h2 a { color: var(--ink); text-decoration: none; }
.slide-copy h2 a:hover { color: var(--green-dark); text-decoration: underline; }
.slide-copy p { margin: 0 0 .9rem; color: var(--muted); font-size: .98rem; max-width: 34rem; }
.slide-copy .button { display: inline-block; }
.slide-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.slide-photos img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.slide-accent-bf { --slide-accent: #b3261e; }
.slide-accent-xmas { --slide-accent: #a8323e; }
.slide-accent-sale { --slide-accent: #d61e28; }
.slide-accent-games { --slide-accent: #d85f45; }
.slide-accent-desk { --slide-accent: #265496; }
.slide-accent-cafe { --slide-accent: #6f4e37; }
.slide-accent-create { --slide-accent: #155136; }

.featured-dots { display: flex; justify-content: center; flex-wrap: wrap; margin-top: .4rem; }
/* Each dot button is a 44px-tall tap target; the visible dot (::before) and countdown fill (::after) are drawn inside it. */
.featured-dots button { position: relative; width: 1.6rem; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.featured-dots button::before, .featured-dots button::after { position: absolute; top: 50%; left: 50%; height: .7rem; border-radius: 999px; transform: translate(-50%, -50%); }
.featured-dots button::before { content: ""; width: .7rem; background: var(--line); }
.featured-dots button[aria-current="true"] { width: 2.7rem; }
.featured-dots button[aria-current="true"]::before { width: 1.8rem; background: var(--green-dark); }
/* Countdown: the active dot fills from light to dark while the timer runs. */
.featured.is-counting .featured-dots button[aria-current="true"]::before { background: #b9d3c4; }
.featured.is-counting .featured-dots button[aria-current="true"]::after { content: ""; width: 1.8rem; margin-left: -.9rem; background: var(--green-dark); transform: translateY(-50%); transform-origin: left; animation: featured-countdown var(--featured-interval, 6000ms) linear forwards; }
@keyframes featured-countdown { from { transform: translateY(-50%) scaleX(0); } to { transform: translateY(-50%) scaleX(1); } }

/* Homepage body: browse pills, featured product cards, guide cards, one-line trust strip. */
.home-section { padding: 1.75rem 1rem; }
.home-section.soft { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-section .home-head { border-bottom: 2px solid var(--ink); padding-bottom: .45rem; }
.pcard-disclosure { margin: 0 0 .8rem; color: var(--muted); font-size: .8rem; }
.pcard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.pcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); overflow: hidden; }
.pcard img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; border-bottom: 1px solid var(--line); }
.pcard-title { margin: .15rem .75rem 0; font-size: .95rem; font-weight: 800; line-height: 1.25; }
.pcard-price { margin: .3rem .75rem 0; color: var(--muted); font-size: .84rem; }
.pcard-price strong { color: var(--green-dark); font-size: 1rem; }
.pcard-actions { display: flex; flex-direction: column; gap: .4rem; margin: auto .75rem .75rem; padding-top: .6rem; }
.pcard-actions .button { justify-content: center; font-size: .86rem; padding: .45rem .6rem; }
.pcard-actions .button-amazon { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.pcard-short { display: none; }
.pcard-actions .button-amazon:hover { background: var(--ink); color: #fff; }
.home-trust { padding: .9rem 1rem; }
.home-trust p { margin: 0; color: var(--muted); font-size: .86rem; text-align: center; }

@media (max-width: 1000px) { .pcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .home-sub { flex-basis: 100%; font-size: .8rem; }
  .pcard-long { display: none; }
  .pcard-short { display: inline; }
  .pcard-actions { margin: auto .55rem .6rem; }
  .pcard-actions .button { font-size: .8rem; padding: .4rem .3rem; letter-spacing: -.01em; }
  .pcard-title { font-size: .88rem; }
  .pcard-price { font-size: .8rem; }
  .pcard-price strong { font-size: .92rem; }
  .home-section { padding: 1.3rem 1rem; }
    .home-trust p { text-align: left; }
  .slide { grid-template-columns: 1fr; min-height: 0; }
  .slide-photos { order: -1; }
  .featured-head h1 { font-size: 1rem; }
}
@media (max-width: 340px) { .pcard-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .featured-track { scroll-behavior: auto; }
}