/* BAMIKO — hero showcase (full-bleed product stage). */

.bmk-show {
	--show-cream: #FAF6EF;
	--show-sage: #9DBFA8;
	--show-salmon: #F3B9A9;
	position: relative; isolation: isolate; overflow: hidden; color: var(--show-cream);
	background: #082F38;
}
.bmk-show__bg {
	position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(60% 80% at 74% 46%, rgba(17, 105, 122, .95) 0%, rgba(11, 74, 87, .9) 38%, rgba(8, 47, 56, 0) 74%),
		linear-gradient(180deg, #0A3A45 0%, #082F38 100%);
}
/* Seigaiha (青海波) wave pattern — faint, for texture. */
.bmk-show__bg::before {
	content: ""; position: absolute; inset: 0; opacity: .07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23FAF6EF' stroke-width='1'%3E%3Cpath d='M0 24a24 24 0 0 1 48 0M6 24a18 18 0 0 1 36 0M12 24a12 12 0 0 1 24 0M18 24a6 6 0 0 1 12 0'/%3E%3Cpath d='M-24 12a24 24 0 0 1 48 0M-18 12a18 18 0 0 1 36 0M-12 12a12 12 0 0 1 24 0M-6 12a6 6 0 0 1 12 0M24 12a24 24 0 0 1 48 0M30 12a18 18 0 0 1 36 0M36 12a12 12 0 0 1 24 0M42 12a6 6 0 0 1 12 0'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 70%);
	        mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 70%);
}
.bmk-show__bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(250, 246, 239, .25), transparent); }

.bmk-show__in {
	box-sizing: border-box; max-width: var(--bmk-wrap, 1240px); margin: 0 auto; padding: 64px var(--bmk-gutter, 24px) 72px;
	display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 40px; align-items: center; min-height: 640px;
}

/* Copy ------------------------------------------------------------------ */
.bmk-show__copy { display: flex; flex-direction: column; gap: 22px; }
.bmk-show__copy > * { margin: 0; }
.bmk-show__eyebrow { display: flex; align-items: center; gap: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--show-salmon); }
.bmk-show__eyebrow::before { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .7; }
.bmk-show__jp { letter-spacing: .5em; color: rgba(250, 246, 239, .55); font-weight: 500; }
.bmk-show__title {
	font-family: "Cormorant Garamond", "Noto Serif", Georgia, serif !important; font-weight: 600 !important;
	font-size: clamp(46px, 4.6vw + 6px, 78px) !important; line-height: 1.02 !important; letter-spacing: -.01em; color: var(--show-cream) !important; text-wrap: balance;
}
.bmk-show__title em { display: block; font-style: italic; font-weight: 500; color: var(--show-salmon); }
.bmk-show__lead { font-size: 18px; line-height: 1.65; color: #D8E6E8; max-width: 520px; }
.bmk-show__ben { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 600px; border-top: 1px solid rgba(250, 246, 239, .14); border-bottom: 1px solid rgba(250, 246, 239, .14); }
.bmk-show__ben li { display: flex; gap: 10px; align-items: flex-start; padding: 14px 14px 14px 0; font-size: 13.5px; line-height: 1.45; color: #BFD5D8; }
.bmk-show__ben li + li { padding-left: 14px; border-left: 1px solid rgba(250, 246, 239, .14); }
.bmk-show__ben b { display: block; color: var(--show-cream); font-size: 14.5px; font-weight: 700; }
.bmk-show__tick { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bmk-red, #C8442F); color: #FFFFFF; box-shadow: 0 0 0 4px rgba(200, 68, 47, .18); }
.bmk-show__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.bmk-show__btn {
	display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 999px;
	background: var(--show-cream); color: #082F38 !important; font-weight: 800; font-size: 16px; text-decoration: none; letter-spacing: .01em;
	box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); transition: background-color .25s, color .25s, transform .25s var(--bmk-ease);
}
.bmk-show__btn:hover { background: var(--bmk-red, #C8442F); color: #FFFFFF !important; transform: translateY(-2px); }
.bmk-show__btn .bmk-ico--arrow { transition: transform .25s var(--bmk-ease); }
.bmk-show__btn:hover .bmk-ico--arrow { transform: translateX(4px); }
.bmk-show__btn.is-ghost { background: transparent; color: var(--show-cream) !important; box-shadow: inset 0 0 0 1.5px rgba(250, 246, 239, .4); }
.bmk-show__btn.is-ghost:hover { background: rgba(250, 246, 239, .1); }

/* Stage ----------------------------------------------------------------- */
.bmk-show__stage { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1 / 1; justify-self: center; }
.bmk-show__sun {
	position: absolute; left: 50%; top: 48%; width: 76%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, #DA5E47 0%, #C8442F 45%, #A9321F 100%);
	box-shadow: 0 50px 120px -30px rgba(200, 68, 47, .65), inset 0 -20px 60px rgba(0, 0, 0, .18);
}
.bmk-show__orbit { position: absolute; left: 50%; top: 48%; width: 94%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(250, 246, 239, .22); animation: bmk-spin 90s linear infinite; }
.bmk-show__orbit::after { content: ""; position: absolute; top: 12%; right: 12%; width: 10px; height: 10px; border-radius: 50%; background: var(--show-cream); box-shadow: 0 0 0 6px rgba(250, 246, 239, .12); }
@keyframes bmk-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.bmk-herb { position: absolute; height: 40%; width: auto; color: var(--show-sage); opacity: .92; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .25)); z-index: 2; }
.bmk-herb.is-left { right: 0; bottom: 4%; height: 36%; transform: rotate(28deg); transform-origin: bottom center; }
.bmk-herb.is-right { right: 4%; top: 6%; height: 30%; transform: rotate(152deg); opacity: .7; }

.bmk-show__steam { position: absolute; left: 50%; top: 10%; width: 120px; height: 120px; transform: translateX(-50%); z-index: 3; pointer-events: none; }
.bmk-show__steam i { position: absolute; bottom: 0; width: 2px; height: 70px; border-radius: 2px; background: linear-gradient(to top, rgba(250, 246, 239, .55), transparent); filter: blur(1.5px); animation: bmk-steam 4.2s ease-in-out infinite; opacity: 0; }
.bmk-show__steam i:nth-child(1) { left: 36%; animation-delay: 0s; }
.bmk-show__steam i:nth-child(2) { left: 50%; animation-delay: 1.4s; height: 90px; }
.bmk-show__steam i:nth-child(3) { left: 64%; animation-delay: 2.8s; }
@keyframes bmk-steam { 0% { transform: translateY(20px) scaleX(1); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-40px) scaleX(3) skewX(12deg); opacity: 0; } }

.bmk-show__slides { position: absolute; inset: 0; z-index: 4; }
.bmk-show__slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .7s var(--bmk-ease), visibility .7s; }
.bmk-show__slide.is-on { opacity: 1; visibility: visible; }
.bmk-show__plate {
	position: absolute; left: 50%; top: 48%; width: 64%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.94);
	background: radial-gradient(circle at 40% 30%, #FFFFFF 0%, var(--show-cream) 70%, #EFE7DA 100%);
	box-shadow: 0 40px 70px -20px rgba(8, 47, 56, .7), 0 0 0 10px rgba(250, 246, 239, .1), inset 0 -10px 30px rgba(122, 58, 44, .1);
	display: flex; align-items: center; justify-content: center; color: #0B4A57; transition: transform 1s var(--bmk-ease);
}
.bmk-show__slide.is-on .bmk-show__plate { transform: translate(-50%, -50%) scale(1); animation: bmk-float 7s ease-in-out infinite; }
@keyframes bmk-float { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-10px); } }
.bmk-show__plate .bmk-art { width: 66%; height: auto; }
.bmk-show__plate.has-photo { background: #FFFFFF; overflow: hidden; }
.bmk-show__img { width: 100%; height: 100%; object-fit: contain; padding: 12%; box-sizing: border-box; }

.bmk-show__tag {
	position: absolute; left: 0; bottom: 8%; z-index: 5; display: flex; flex-direction: column; gap: 2px; min-width: 230px; max-width: 290px;
	padding: 16px 18px; border-radius: 20px; background: rgba(8, 47, 56, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	border: 1px solid rgba(250, 246, 239, .16); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55);
	transform: translateY(10px); opacity: 0; transition: transform .7s .15s var(--bmk-ease), opacity .7s .15s;
}
.bmk-show__slide.is-on .bmk-show__tag { transform: none; opacity: 1; }
.bmk-show__tag-k { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--show-salmon); }
.bmk-show__tag-n { color: var(--show-cream) !important; font-weight: 800; font-size: 17px; line-height: 1.3; text-decoration: none; }
.bmk-show__tag-n:hover { text-decoration: underline; text-underline-offset: 3px; }
.bmk-show__tag-p .bmk-price, .bmk-show__tag-p .bmk-price--contact { color: var(--show-cream); font-size: 18px; }
.bmk-show__tag-p .bmk-price__old { color: #BFD5D8; }
.bmk-show__tag .bmk-add.has-text { margin-top: 10px; align-self: flex-start; background: var(--bmk-red, #C8442F); color: #FFFFFF; border-color: transparent; }
.bmk-show__tag .bmk-add.has-text:hover { background: #FFFFFF; color: #9E2B25; }

.bmk-show__dots { position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 6; }
.bmk-show__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgba(250, 246, 239, .35); cursor: pointer; transition: width .3s var(--bmk-ease), background-color .3s; }
.bmk-show__dot.is-on { width: 30px; background: var(--show-cream); }
.bmk-show__kata { position: absolute; left: 0; top: 2%; height: 34%; width: auto; color: rgba(250, 246, 239, .5); z-index: 1; }

/* Problem chips band right under the hero */
.bmk-chipband { background: var(--bmk-cream, #FAF6EF); border-bottom: 1px solid var(--bmk-line-soft, #EEF2F2); }
.bmk-chipband__in { padding-block: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.bmk-chipband .bmk-chips__label { white-space: nowrap; }

@media (max-width: 1080px) {
	.bmk-show__in { grid-template-columns: 1fr; min-height: 0; gap: 28px; padding-top: 48px; padding-bottom: 64px; }
	.bmk-show__stage { max-width: 520px; }
}
@media (max-width: 781px) {
	.bmk-show__in { padding-top: 36px; padding-bottom: 56px; gap: 22px; }
	.bmk-show__copy { display: contents; }
	.bmk-show__eyebrow { order: 1; }
	.bmk-show__title { order: 2; }
	.bmk-show__stage { order: 3; margin: 6px 0 18px; }
	.bmk-show__lead { order: 4; }
	.bmk-show__ben { display: none; }
	.bmk-show__cta { order: 5; margin-top: 0; }
	.bmk-show__title { font-size: 44px !important; }
	.bmk-show__lead { font-size: 16.5px; }
	.bmk-show__ben { grid-template-columns: 1fr; }
	.bmk-show__ben li { padding: 10px 0; }
	.bmk-show__ben li + li { padding-left: 0; border-left: 0; border-top: 1px solid rgba(250, 246, 239, .12); }
	.bmk-show__btn { flex: 1 1 100%; justify-content: center; }
	.bmk-show__tag { left: 0; right: 0; bottom: 2%; max-width: none; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 12px 14px; }
	.bmk-show__tag-k { width: 100%; }
	.bmk-show__tag-n { font-size: 15px; flex: 1 1 auto; }
	.bmk-show__tag .bmk-add.has-text { margin-top: 0; }
	.bmk-show__dots { bottom: -6%; }
	.bmk-show__kata { height: 30%; }
	.bmk-chipband__in { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--bmk-gutter)); padding-inline: var(--bmk-gutter); }
	.bmk-chipband__in::-webkit-scrollbar { display: none; }
	.bmk-chipband .bmk-chips { flex-wrap: nowrap; }
	.bmk-chipband .bmk-chip > .wp-block-button__link { white-space: nowrap; }
}