/* SURFSUP V29 — editorial storefront direction
   Final visual layer for the current homepage/storefront build.
   Commerce, cart, Stripe and existing JS hooks are intentionally untouched. */
:root{
  --su29-paper:#f4efe5;
  --su29-ink:#11110f;
  --su29-line:rgba(17,17,15,.16);
  --su29-muted:#68645b;
  --su29-pink:#ff7fb3;
  --su29-blue:#d9edf0;
  --su29-ease:cubic-bezier(.2,.8,.2,1);
}

/* Preview / Signal: make the recurring product interaction unmistakably SURFSUP. */
.kit-lite-art:after,.goods-stage:after{
  color:var(--su29-pink)!important;
  border-color:currentColor!important;
  background:rgba(17,17,15,.88)!important;
}

/* Infinite ticker: larger, calmer, and genuinely seamless. */
.vibe-ticker{
  height:34px!important;
  margin-top:64px!important;
  background:var(--su29-paper)!important;
  border-top:1px solid var(--su29-line)!important;
  border-bottom:1px solid var(--su29-ink)!important;
}
.vibe-ticker-track{
  height:34px!important;
  line-height:34px!important;
  font-size:8px!important;
  letter-spacing:.16em!important;
  animation:v29Ticker 28s linear infinite!important;
  will-change:transform;
}
.vibe-ticker-track span{padding:0 22px!important;display:block!important;flex:none!important}
@keyframes v29Ticker{to{transform:translate3d(-33.333333%,0,0)}}

/* Artists: one editorial heading, then let the people become the visual. */
.worked-with-section{padding-top:clamp(72px,8vw,112px)!important;padding-bottom:clamp(72px,9vw,130px)!important}
.worked-with-heading{display:block!important;margin-bottom:42px!important}
.worked-with-heading h2{font-size:clamp(54px,9vw,132px)!important;line-height:.8!important;white-space:nowrap!important}
.worked-with-heading .micro{color:var(--su29-muted)!important}
.artist-float-strip{border-top:1px solid var(--su29-ink)!important;border-bottom:1px solid var(--su29-ink)!important}

/* Kit commerce: price on its own line, actions together underneath.
   This reads as one product-control system instead of three competing items. */
.kit-lite-price-row{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:14px!important;
  border-top:1px solid var(--su29-line)!important;
  padding-top:18px!important;
}
.kit-lite-price-row strong{
  display:block!important;
  font:900 clamp(23px,2vw,30px)/1 Helvetica Neue,Arial,sans-serif!important;
  letter-spacing:-.05em!important;
}
.kit-lite-actions{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
}
.kit-lite-actions .buy-row{display:contents!important}
.kit-lite-actions .buy-button,.kit-lite-actions .cart-add,.kit-view-link{
  min-height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  border:1px solid var(--su29-ink)!important;
  border-radius:0!important;
  padding:0 16px!important;
  font:800 8px/1 var(--vibe-mono,monospace)!important;
  letter-spacing:.12em!important;
  text-decoration:none!important;
  transition:background .25s ease,color .25s ease,transform .25s ease!important;
}
.kit-lite-actions .buy-button,.kit-lite-actions .cart-add{
  background:var(--su29-ink)!important;
  color:var(--su29-paper)!important;
}
.kit-lite-actions .buy-button:hover,.kit-lite-actions .cart-add:hover,.kit-view-link:hover{
  background:var(--su29-pink)!important;
  color:var(--su29-ink)!important;
  border-color:var(--su29-pink)!important;
  transform:translateY(-2px)!important;
}
.kit-lite-actions .kit-view-link{background:transparent!important;color:var(--su29-ink)!important}

/* Merchandise uses exactly the same interaction grammar as kits. */
.goods-product{
  transition:transform .45s var(--su29-ease),box-shadow .45s var(--su29-ease)!important;
}
.goods-stage{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.goods-stage img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:88%!important;
  max-height:88%!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  margin:auto!important;
}
.goods-product:hover .goods-stage{
  box-shadow:inset 0 0 0 1px rgba(17,17,15,.12),0 24px 55px rgba(17,17,15,.08)!important;
}
.goods-product:hover .goods-stage img{
  transform:translateY(-9px) scale(1.045) rotate(-.7deg)!important;
  filter:drop-shadow(0 25px 25px rgba(17,17,15,.16))!important;
}
.goods-product:hover{transform:translateY(-4px)!important}
.pod-copy{padding-top:20px!important}
.goods-price{margin-top:8px!important}
.goods-checkout{
  margin-top:12px!important;
  min-height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  border:1px solid var(--su29-ink)!important;
  border-radius:0!important;
  background:var(--su29-ink)!important;
  color:var(--su29-paper)!important;
  padding:0 16px!important;
  font:800 8px/1 var(--vibe-mono,monospace)!important;
  letter-spacing:.12em!important;
  transition:background .25s ease,color .25s ease,transform .25s ease!important;
}
.goods-checkout:hover{background:var(--su29-pink)!important;color:var(--su29-ink)!important;border-color:var(--su29-pink)!important;transform:translateY(-2px)!important}

/* Make major editorial section titles breathe like the reference while keeping SURFSUP type. */
.shop-section .section-head,.pod-section .section-head,.tools-section .section-head,.records-section .section-head,.resources-section .section-head,.membership-section .section-head,.contact-section .section-head{
  margin-bottom:clamp(42px,5vw,72px)!important;
}

/* Final FAQ lockup. */
.contact-section .section-head h2{white-space:nowrap!important}

@media(max-width:760px){
  .vibe-ticker{margin-top:58px!important;height:30px!important}
  .vibe-ticker-track{height:30px!important;line-height:30px!important;font-size:7px!important}
  .worked-with-heading h2{white-space:normal!important}
  .kit-lite-actions{flex-wrap:wrap!important}
  .kit-lite-actions .buy-button,.kit-lite-actions .cart-add,.kit-view-link{flex:1 1 auto!important}
  .goods-stage{height:82vw!important;min-height:300px!important}
  .goods-stage img{max-width:84%!important;max-height:84%!important}
  .contact-section .section-head h2{white-space:normal!important}
}
@media(prefers-reduced-motion:reduce){
  .vibe-ticker-track{animation:none!important}
  .goods-product,.goods-stage img,.kit-lite-actions .buy-button,.kit-lite-actions .cart-add,.kit-view-link,.goods-checkout{transition:none!important}
}
