/* Handpan Studio Tokyo mirror — overrides for the stripped Squarespace runtime. */

/* Entrance animation approximation: only applies when shim JS has loaded
   (html.hpst-js), so content can never be stuck hidden. */
.hpst-js [data-animation-role] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.hpst-js [data-animation-role].hpst-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .hpst-js [data-animation-role] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Native video replacements: ensure wrappers keep their height.
   Live: the component CSS gives .native-video-player a 56.25% padding-top box
   and Squarespace JS positions the player absolutely inside it. We reproduce
   that: keep the padded box, absolutely fill it with our <video>.
   (Verified pixel-identical to live on about pages + homepage.) */
.sqs-native-video { position: relative; }
.sqs-block-video .native-video-player,
.native-video-player { position: relative; }
.native-video-player video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  max-width: 100%;
}
.sqs-video-background-native { position: absolute; inset: 0; overflow: hidden; }

/* oEmbed (YouTube) intrinsic-ratio boxes: wrapper carries padding-bottom,
   iframe fills it absolutely (Squarespace JS used to do this) */
.embed-block-wrapper { position: relative; }
.embed-block-wrapper .sqs-video-wrapper { position: absolute; inset: 0; }

/* ------------------------------------------------------------------ *
 * Lineup widget — replaces the JS-only user-items-list carousel with a
 * static 4-pan shop section wired to Stripe checkout.
 * ------------------------------------------------------------------ */
.hpst-pans {
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 28px 84px;
  font-family: "Noto Serif JP", "Libre Baskerville", Georgia, serif;
  color: #26221F;
}
.hpst-pans-head { text-align: center; margin-bottom: 52px; }
.hpst-pans-head h2 {
  /* match the site's other section headings (~61.5px at 1326px viewport) */
  font-size: clamp(34px, 4.65vw, 62px);
  font-weight: 400; letter-spacing: .04em; margin: 0 0 14px; line-height: 1.15;
}
.hpst-pans-head p { font-size: 17px; color: #6f6256; margin: 0; }
.hpst-pans-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
@media (max-width: 980px) and (min-width: 701px) {
  .hpst-pans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* mobile: swipeable side-scroll carousel with snap + peek of the next card */
@media (max-width: 700px) {
  .hpst-pans { padding-left: 0; padding-right: 0; }
  .hpst-pans-head { padding: 0 22px; }
  .hpst-pans-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 4px 22px 26px;
    scrollbar-width: none;
  }
  .hpst-pans-grid::-webkit-scrollbar { display: none; }
  .hpst-pan-card {
    flex: 0 0 76%;
    max-width: 320px;
    scroll-snap-align: center;
  }
  .hpst-pan-card:hover { transform: none; box-shadow: none; }
}
.hpst-pan-card {
  background: rgba(246, 243, 234, .94);
  border: 1px solid #d9cdb7;
  padding: 30px 22px 28px;
  text-align: center;
  transition: transform .35s ease, box-shadow .35s ease;
}
.hpst-pan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(38, 34, 31, .14);
}
.hpst-pan-img { display: block; }
.hpst-pan-img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  transition: transform .45s ease;
}
.hpst-pan-card:hover .hpst-pan-img img { transform: scale(1.04); }
.hpst-pan-name { margin: 18px 0 4px; font-size: 20px; font-weight: 600; letter-spacing: .03em; }
.hpst-pan-name a { color: #26221F; text-decoration: none; }
.hpst-pan-notes { margin: 0 0 2px; font-size: 13px; color: #6f6256; letter-spacing: .08em; }
.hpst-pan-price { margin: 6px 0 18px; font-size: 17px; color: #8E6B4E; letter-spacing: .04em; }
.hpst-pan-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.hpst-pan-buy {
  font-family: inherit;
  background: #8E6B4E; color: #fff;
  border: 0; border-radius: 15px;
  padding: 13px 40px; font-size: 15px; letter-spacing: .05em;
  cursor: pointer; transition: opacity .2s ease;
}
.hpst-pan-buy:hover { opacity: .85; }
.hpst-pan-buy.hpst-busy { opacity: .5; pointer-events: none; }
.hpst-pan-more {
  font-size: 13.5px; color: #8E6B4E; text-decoration: underline;
  text-underline-offset: 3px;
}
.hpst-pan-more:hover { color: #26221F; }

/* Product-block images: live Squarespace injects per-block .image-style CSS at
   runtime; without it a default fixed height squashes the image. */
.sqs-block-product .image-styles-wrapper img,
.sqs-block-product .sqs-product-block-main-image {
  width: 100%;
  height: auto !important;
  object-fit: contain;
}

/* ------------------------------------------------------------------ *
 * Standalone video sections: their fluid-engine rows were sized for the
 * unhydrated double-height player; collapse empty rows so the section
 * hugs the video. (Hero sections with H1 overlays are NOT listed.)
 * ------------------------------------------------------------------ */
section[data-section-id="69fb2742e6ece61cc32c5c5f"] .fluid-engine,
section[data-section-id="69fa772614c4ed15ce56cd06"] .fluid-engine,
section[data-section-id="6939e32f5abc9d5e596489a6"] .fluid-engine,
section[data-section-id="69dcb180501e5e51b9702e40"] .fluid-engine,
section[data-section-id="69dcb07097f8781b2ed1ac1a"] .fluid-engine,
section[data-section-id="69dcb0d4c5466922b9482915"] .fluid-engine,
section[data-section-id="69dcb11197f8781b2ed1df76"] .fluid-engine,
section[data-section-id="69dcb03b0a3024691aed98ea"] .fluid-engine,
section[data-section-id="69a04c73cdbcb031d65c8bb2"] .fluid-engine,
section[data-section-id="69a04c81e23cb7269bfd79d2"] .fluid-engine,
section[data-section-id="69a04c9694381655f7ce49a4"] .fluid-engine,
section[data-section-id="6995758eff206b158248cb99"] .fluid-engine {
  grid-template-rows: auto !important;
  row-gap: 0 !important;
}
section[data-section-id="69fb2742e6ece61cc32c5c5f"] .sqs-block-video,
section[data-section-id="69fa772614c4ed15ce56cd06"] .sqs-block-video,
section[data-section-id="6939e32f5abc9d5e596489a6"] .sqs-block-video,
section[data-section-id="69dcb180501e5e51b9702e40"] .sqs-block-video,
section[data-section-id="69dcb07097f8781b2ed1ac1a"] .sqs-block-video,
section[data-section-id="69dcb0d4c5466922b9482915"] .sqs-block-video,
section[data-section-id="69dcb11197f8781b2ed1df76"] .sqs-block-video,
section[data-section-id="69dcb03b0a3024691aed98ea"] .sqs-block-video,
section[data-section-id="69a04c73cdbcb031d65c8bb2"] .sqs-block-video,
section[data-section-id="69a04c81e23cb7269bfd79d2"] .sqs-block-video,
section[data-section-id="69a04c9694381655f7ce49a4"] .sqs-block-video,
section[data-section-id="6995758eff206b158248cb99"] .sqs-block-video {
  margin: 2.5vw 0;
}

/* ------------------------------------------------------------------ *
 * Quantity stepper (Squarespace runtime styled these via CSS-in-JS)
 * ------------------------------------------------------------------ */
.product-quantity-input {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(38, 34, 31, .4);
  background: transparent;
}
.product-quantity-input .decrease-button,
.product-quantity-input .increase-button {
  width: 42px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: #26221F; opacity: .75;
  transition: background .15s ease, opacity .15s ease;
}
.product-quantity-input .decrease-button:hover,
.product-quantity-input .increase-button:hover {
  background: rgba(142, 107, 78, .12); opacity: 1;
}
.product-quantity-input input {
  width: 44px; text-align: center;
  border: 0; border-left: 1px solid rgba(38,34,31,.2); border-right: 1px solid rgba(38,34,31,.2);
  background: transparent;
  font-family: "Noto Serif JP", serif; font-size: 16px; color: #26221F;
  -moz-appearance: textfield; appearance: textfield;
}
.product-quantity-input input::-webkit-outer-spin-button,
.product-quantity-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-quantity-input input:focus { outline: none; }

/* ------------------------------------------------------------------ *
 * Smooth in-page anchors (FAQ category jumps) with header offset
 * ------------------------------------------------------------------ */
html { scroll-behavior: smooth; }
#instruments, #ordering, #shipping, #payments, #returns, #about, #handpans, #faq {
  scroll-margin-top: 110px;
}

/* ------------------------------------------------------------------ *
 * "What is a handpan?" intro strip (homepage education band)
 * ------------------------------------------------------------------ */
.hpst-intro-section { background: #fff; }
.hpst-intro {
  max-width: 1140px; margin: 0 auto; padding: 84px 28px 88px;
  font-family: "Noto Serif JP", "Libre Baskerville", Georgia, serif;
  color: #26221F; text-align: center;
}
.hpst-intro h2 {
  font-size: clamp(30px, 4vw, 52px); font-weight: 400;
  letter-spacing: .05em; margin: 0 0 48px;
}
.hpst-intro-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
  text-align: center;
}
.hpst-intro-item h3 {
  font-size: 18px; font-weight: 600; letter-spacing: .04em; margin: 0 0 12px;
  color: #26221F;
}
.hpst-intro-item h3::before {
  content: ""; display: block; width: 34px; height: 1px;
  background: #C4A88D; margin: 0 auto 18px;
}
.hpst-intro-item p {
  font-size: 14px; line-height: 2.1; color: #6f6256; margin: 0;
}
.hpst-intro-more {
  display: inline-block; margin-top: 46px; padding: 13px 42px;
  border: 1px solid #8E6B4E; border-radius: 15px;
  color: #8E6B4E; text-decoration: none; font-size: 14px; letter-spacing: .06em;
  transition: all .2s ease;
}
.hpst-intro-more:hover { background: #8E6B4E; color: #fff; }
@media (max-width: 700px) {
  .hpst-intro { padding: 60px 24px 64px; }
  .hpst-intro-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Hide platform-only chrome that has no function in the mirror */
.sqs-cookie-banner-v2, #sqs-cookie-banner-v2,
.sqs-announcement-bar-dropzone:empty { display: none !important; }

/* ------------------------------------------------------------------ *
 * Contact form — styles matching the live hydrated form (Squarespace
 * injects these at runtime via CSS-in-JS; values copied from the live
 * site's computed styles on 2026-07-05).
 * ------------------------------------------------------------------ */
.react-form-contents { font-family: "Noto Serif JP", serif; color: #26221F; }
.react-form-contents fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.react-form-contents legend { padding: 0; display: block; }
.react-form-contents .form-item { margin: 0 0 20px; padding: 0; }
.react-form-contents .title { font-size: 17px; font-weight: 400; margin-bottom: 8px; }
.react-form-contents .caption-text { font-size: 15.3px; margin-bottom: 4px; }
.react-form-contents .description.required { opacity: .6; margin-left: 6px; font-size: 13px; }
.react-form-contents fieldset.name { display: flex; gap: 0 10px; }
.react-form-contents fieldset.name > legend { flex-basis: 100%; }
.react-form-contents fieldset.name .field { flex: 1 1 0; }
.react-form-contents .form-input-effects { display: none; }
.react-form-contents input[type="text"],
.react-form-contents input[type="email"],
.react-form-contents textarea {
  width: 100%; box-sizing: border-box;
  background: transparent;
  border: 1px solid rgba(38, 34, 31, .55);
  border-radius: 0;
  padding: 5px 10px;
  font: inherit; font-size: 17px; color: #26221F;
  height: 43px;
}
.react-form-contents textarea { height: 100px; resize: vertical; }
.react-form-contents input:focus,
.react-form-contents textarea:focus {
  outline: none; border-color: #26221F;
}
.react-form-contents .option { margin: 7px 0; }
.react-form-contents .option label {
  display: inline-flex; gap: 11px; align-items: center;
  font-size: 15.3px; cursor: pointer;
}
.react-form-contents input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; margin: 0; flex: none;
  border: 1px solid rgba(38, 34, 31, .55);
  background: transparent; cursor: pointer;
}
.react-form-contents input[type="checkbox"]:checked {
  background: #26221F;
  box-shadow: inset 0 0 0 2.5px #F6F3EA;
}
/* Kill the runtime border-overlay spans: static.css forces them visible with
   inset:0 !important at (0,3,0); without the runtime CSS-module positioning
   they expand to the whole form block (the "notched box" bug). */
.sqs-site-style-form .form-item .form-input-effects { display: none !important; }

/* Restore real borders on controls: static.css sets border-color transparent
   !important via body.form-field-hover-focus-* — out-gun it. */
.sqs-site-style-form .react-form-contents .form-item input:not([type=checkbox]):not([type=radio]),
.sqs-site-style-form .react-form-contents .form-item select,
.sqs-site-style-form .react-form-contents .form-item textarea {
  border: 1px solid rgba(38, 34, 31, .55) !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
.sqs-site-style-form .react-form-contents .form-item input:not([type=checkbox]):not([type=radio]):focus,
.sqs-site-style-form .react-form-contents .form-item textarea:focus {
  border-color: #26221F !important;
}

/* Footer newsletter: site.css hides .newsletter-block:not(.rendered);
   the JS that added .rendered was stripped. */
.newsletter-block:not(.rendered) { opacity: 1; }

/* Products: reveal the server-rendered product list (the .is-loaded class
   was added by the stripped ProductList controller) */
.product-list .product-list-item,
.product-related-products.related-products .product-list-item {
  opacity: 1;
  transform: none;
}

.react-form-contents .form-button-wrapper { margin-top: 10px; }
.react-form-contents .form-submit-button {
  background: #8E6B4E; color: #fff;
  border: 0; border-radius: 15px;
  padding: 25.5px 37.4px;
  font-family: "Noto Serif JP", serif; font-size: 17px;
  letter-spacing: -0.68px; cursor: pointer;
  transition: opacity .2s ease;
}
.react-form-contents .form-submit-button:hover { opacity: .85; }
.react-form-contents .form-submit-button-state { display: none; }
.react-form-contents .btIyKrvyA6dTrftg { display: none; }  /* honeypot */