/* Pelom components. Reference A; OpenDesign BAS-33 technical refinement. */
:root { --control-bg: #866357; --control-hover: #77584d; }
body { overflow-wrap: anywhere; }
:where(h1,h2,h3,p,a,button,label) { hyphens: auto; }
:where(a,button,input,textarea):focus-visible {
  outline: 3px solid #252321; outline-offset: 3px; box-shadow: 0 0 0 3px #fff;
}
.picture:focus-visible { outline-offset: -6px; box-shadow: inset 0 0 0 3px #fff; }
:is(.button,.filters button,.menu-toggle) {
  background: var(--control-bg); color: #fff; min-height: 44px;
  max-width: 100%; white-space: normal;
}
:is(.button,.filters button,.menu-toggle):hover,
.filters button[aria-pressed=true] { background: var(--control-hover); }
.filters { flex-wrap: wrap; }
.product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.pelom-parallax { min-height: 420px; display: grid; place-items: center; padding: 40px 24px; }
.pelom-parallax .parallax-copy { max-width: min(590px,100%); }
/* Reference A: editable image-only and title-only StreamField bands. */
.pelom-image-band--title { min-height: 565px; }
.pelom-image-band--title .parallax-copy { display: grid; place-items: center; background: rgba(240,235,228,.44); width: 290px; min-height: 265px; padding: 0 24px; color: white; text-align: center; text-shadow: 0 1px 6px #5e4537; }
.pelom-image-band--title h2 { font: 400 32px/1.7 "Rock Salt",cursive; margin: 0; }
.pelom-parallax.pelom-image-band--detail { min-height: 330px; }
.pelom-image-band--detail img { object-position: center 58%; }
@media (max-width: 700px) {
  .pelom-parallax.pelom-image-band--title { min-height: 370px; }
  .pelom-image-band--title .parallax-copy { width: 230px; min-height: 220px; }
  .pelom-image-band--title h2 { font-size: 25px; }
  .pelom-parallax.pelom-image-band--detail { min-height: 260px; }
}
.pelom-round-photo {
  width: min(450px,calc(100% - 48px)); height: auto; aspect-ratio: 1;
  margin: 48px auto; isolation: isolate;
}
.pelom-round-photo img { position: absolute; inset: 0; }
.pelom-round-photo .overlay {
  position: absolute; left: 12%; right: 12%; top: 12%; text-align: center;
  color: white; text-shadow: 0 2px 5px #252321; font-size: clamp(16px,4vw,31px);
}
.pelom-shop-teaser { padding-block: 48px; }
.pelom-shop-teaser .section-intro { max-width: 980px; padding: 0 24px; margin: auto; text-align: center; }
.pelom-shop-teaser .collection-tools { background: transparent; }
.pelom-parallax :last-child, .rich-text :last-child { margin-bottom: 0; }
.hero, .market { height: auto; }
.hero { min-height: 816px; padding: 180px 24px 80px; }
.market { min-height: 610px; padding: 30px 20px; }
.hero-title, .world-copy, .materials-copy, .detail-copy, .market-card { min-width: 0; max-width: 100%; }
.header nav { flex-wrap: wrap; }
.intro-inner { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.world .circle-photo { width: 100%; height: auto; aspect-ratio: 1; }
.world-copy { width: auto; }
.detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.detail-arrows { flex-wrap: wrap; }
.photo-collage .round-photo { height: auto; aspect-ratio: 1; align-self: center; border-radius: 50%; overflow: hidden; }
@media (max-width:650px) {
  .hero { min-height: 620px; padding: 150px 20px 70px; }
  .hero h1 { font-size: clamp(22px,12.56vw,49px); }
  .market { min-height: 520px; }
  .intro-inner { display: block; }
  .world .circle-photo { width: min(270px,100%); }
  .world-copy { width: 100%; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .detail-grid { grid-template-columns: minmax(0,1fr); }
  .pelom-parallax { min-height: 320px; }
  .menu-toggle { padding: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .photo-layer { inset: 0; transform: none !important; will-change: auto; }
  .picture:hover img { transform: none !important; }
}