/* trybloomlab x Opsi E: section component kit. Ported from bloomlab.id opsi-e/assets/css/e-landing.css and
   pages/home.css (same class names, values and breakpoints) so markup from bloomlab.id's generated pages
   (opsi-e/pages/*.php, scripts/opsi-e-build/build.mjs) can be reused 1:1. Price/cart/WhatsApp/garansi/
   Bloom360 parts are not ported. Markup snippets: scratch F/COMPONENTS.md. */

/* ---------- hero: home (h-hero) ---------- */
.h-hero { padding-block: clamp(28px, 5vw, 64px) clamp(56px, 7vw, 96px); overflow-x: clip; }
.h-hero-grid { display: grid; gap: 30px; align-items: center; }
.h-hero-grid > * { min-width: 0; }
.h-hero-copy { display: grid; gap: 20px; align-content: start; }
.h-hero-copy > * { min-width: 0; }
.h-hero-cta { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.hero-h { margin-top: 4px; }
@media (min-width: 1024px) {
	.h-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); }
	.h-hero .hero-h { font-size: clamp(44px, 4.7vw, 70px); }
	.h-hero-visual { padding-left: 12px; }
}

/* ---------- hero: product / info pages (p-hero) ---------- */
.p-hero { padding-block: 18px clamp(56px, 7vw, 96px); overflow-x: clip; }
.hero-grid { display: grid; gap: 22px; grid-template-areas: "copy" "visual" "buy"; }
.hero-grid > * { min-width: 0; }
.hero-copy { grid-area: copy; display: grid; gap: 16px; align-content: start; }
.hero-copy > * { min-width: 0; }
.hero-visual { grid-area: visual; }
.c-buy { grid-area: buy; display: grid; gap: 16px; padding-top: 4px; }
.c-buy > * { min-width: 0; }
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.hero-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-h.is-long { font-size: clamp(38px, 4.3vw, 62px); }
.hero-h.is-xlong { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.04; }
.c-sub { display: grid; gap: 10px; }
.c-hero-checks li { font-size: 15.5px; }
@media (min-width: 1024px) {
	.p-hero { padding-top: 26px; }
	.hero-grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, .96fr); grid-template-areas: "copy visual" "buy visual"; column-gap: clamp(40px, 5vw, 72px); row-gap: 28px; align-items: start; }
	.hero-visual { position: sticky; top: calc(var(--head-h) + 20px); }
}
@media (max-width: 767px) {
	.hero-tags .tag { font-size: 10.5px; letter-spacing: .06em; padding: 5px 9px; gap: 6px; }
}

/* stage: the rounded, tinted frame that holds a product photo (or a video) in a hero */
.stage { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 50% 58%, color-mix(in srgb, var(--p) 16%, var(--paper)) 0%, var(--paper) 62%, color-mix(in srgb, var(--p) 10%, var(--cream)) 100%); border: 1px solid color-mix(in srgb, var(--p) 22%, var(--line)); display: grid; place-items: center; }
.stage > img { width: 78%; height: auto; object-fit: contain; filter: drop-shadow(0 26px 26px rgba(18, 63, 67, .22)); }
/* .e-contours: the Opsi E topographic-line decoration (bloomlab.id build.mjs contours(), seed 7) as a CSS
   mask, so no inline SVG is needed. Add the class to any positioned box; lines take the tint colour --p. */
:root { --e-contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 640' preserveAspectRatio='xMidYMid slice'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.2' d='M378 330C379 335 379 340 378 345C377 350 374 355 370 359C367 363 362 366 357 368C352 371 347 373 342 375C338 377 333 379 329 381C325 384 321 387 316 390C311 392 306 395 300 397C294 398 288 399 282 398C276 398 270 395 264 393C259 390 255 386 251 383C246 379 243 375 240 371C236 367 233 362 231 358C229 354 228 349 228 344C227 339 228 334 229 330C230 326 233 321 234 317C235 313 236 309 238 305C239 300 240 295 241 290C243 286 246 280 249 276C253 272 258 268 264 266C269 264 276 264 282 264C288 264 294 266 300 267C306 268 311 269 316 271C321 272 326 273 332 274C337 276 342 278 347 280C352 283 356 286 360 290C363 293 366 298 368 302C371 307 372 311 374 316C376 320 377 325 378 330ZM414 330C414 337 414 345 412 352C410 358 406 366 401 371C396 377 389 382 383 386C376 390 368 392 362 396C355 399 349 402 343 406C337 409 331 414 324 419C317 423 309 428 300 430C291 432 281 433 272 432C264 431 255 427 247 423C240 419 234 412 228 406C222 401 218 394 214 388C209 382 205 376 202 370C199 364 197 357 195 350C194 344 194 337 195 330C196 323 199 317 200 311C202 304 204 298 206 292C208 285 210 278 213 271C216 264 220 257 226 251C231 245 239 240 247 237C255 234 265 234 274 234C283 234 292 237 300 239C308 241 315 243 323 245C331 247 338 247 346 249C354 251 362 253 369 256C377 260 384 264 390 269C395 275 400 281 403 288C407 294 409 302 410 309C412 316 413 323 414 330ZM448 330C447 339 446 349 443 358C440 367 436 376 430 383C424 391 416 397 408 403C400 409 391 413 382 417C374 422 366 426 358 431C349 437 342 443 332 449C322 454 311 461 300 464C289 467 275 468 263 466C252 465 240 459 230 453C221 447 213 438 206 430C199 422 195 413 189 405C184 397 179 389 175 381C170 373 166 365 163 356C161 348 160 339 160 330C160 321 162 312 165 304C167 295 170 287 173 278C177 270 179 260 184 252C189 243 195 233 202 226C210 219 221 213 231 209C242 205 255 205 266 205C278 206 289 209 300 212C311 214 320 217 330 219C340 221 350 222 360 224C371 226 382 228 393 231C403 235 414 241 421 248C429 255 435 264 440 273C444 282 445 292 447 302C448 311 448 321 448 330ZM480 330C478 341 476 353 472 363C469 374 464 385 458 394C452 404 443 413 434 420C425 428 414 434 404 440C394 447 384 452 373 459C363 465 352 473 340 480C328 486 314 494 300 497C286 501 269 503 254 500C240 498 225 490 213 482C202 474 193 462 185 452C177 442 172 431 166 421C160 411 154 402 148 392C142 383 135 373 131 363C126 352 123 341 122 330C121 319 123 307 126 296C129 285 134 275 139 264C144 254 149 243 156 233C163 222 171 211 181 203C191 195 203 187 216 183C229 178 245 177 259 177C273 178 287 182 300 184C313 187 324 191 337 193C349 195 362 196 375 198C388 200 404 201 417 206C430 210 444 217 454 226C464 234 472 246 477 258C481 269 482 283 483 295C483 307 482 319 480 330ZM510 330C507 343 504 356 500 369C495 381 491 394 485 405C478 417 470 429 460 438C451 448 439 457 427 465C415 473 403 480 390 488C377 496 364 504 349 512C334 519 317 527 300 531C283 534 263 536 246 532C228 529 211 520 198 510C184 501 174 486 165 473C156 461 150 448 143 436C136 424 128 414 121 403C113 392 103 381 97 369C91 357 85 343 83 330C81 317 82 302 86 289C89 275 96 262 103 250C111 237 119 225 128 214C138 203 148 191 160 182C173 172 187 163 202 158C218 153 235 151 252 151C268 150 285 154 300 157C315 159 329 163 344 165C359 168 374 168 391 170C407 173 426 174 442 179C458 185 476 193 488 203C500 214 509 229 514 243C519 257 518 273 518 288C517 302 513 317 510 330ZM538 330C534 345 530 359 525 374C521 388 518 402 512 416C506 430 498 445 488 457C478 470 465 481 452 491C438 502 423 510 407 519C392 528 376 537 358 544C340 551 320 559 300 562C280 565 257 566 237 562C218 558 198 548 183 537C167 525 156 509 145 495C135 480 129 465 120 452C111 438 102 427 93 415C83 402 71 390 62 376C53 362 44 346 41 330C38 314 40 296 44 280C49 265 58 249 68 235C78 221 90 209 102 196C115 184 127 172 142 162C156 152 172 142 189 135C206 129 226 125 244 124C263 123 282 125 300 127C318 129 335 133 352 135C370 138 388 139 407 141C426 144 448 146 467 152C486 159 507 168 521 181C534 194 545 211 550 228C555 245 553 264 551 281C549 298 543 315 538 330ZM565 330C560 347 555 362 551 378C546 395 545 411 539 428C534 444 528 462 518 477C508 493 494 507 479 520C463 532 445 542 426 552C407 561 387 569 366 576C345 583 323 590 300 592C277 594 252 595 230 590C208 584 186 574 168 562C151 549 138 531 125 516C113 500 106 483 95 468C85 454 75 441 63 427C51 413 36 399 25 383C14 367 3 348 -1 330C-5 312 -4 290 2 272C8 254 21 237 33 221C46 206 63 193 78 180C93 167 108 155 125 144C142 133 159 122 177 114C196 106 217 100 237 97C258 94 279 95 300 96C321 97 340 100 361 103C382 105 403 107 425 111C446 115 471 118 492 126C514 134 537 145 552 160C568 174 579 195 584 214C589 233 586 256 583 275C580 295 571 313 565 330ZM592 330C586 349 581 365 577 384C573 402 573 420 568 439C564 459 560 480 549 498C539 517 524 535 507 550C489 564 467 575 445 585C423 594 399 601 375 607C350 612 325 618 300 619C275 620 248 620 223 614C199 609 175 598 155 585C135 572 119 554 105 537C90 521 81 503 69 486C56 470 44 456 31 440C17 424 -1 409 -13 391C-26 372 -39 351 -44 330C-48 309 -47 285 -39 264C-32 244 -16 224 0 208C16 191 37 178 55 164C73 151 91 139 110 128C128 116 146 103 166 93C186 84 207 74 230 69C252 64 277 62 300 62C323 62 347 65 371 68C394 71 418 74 443 79C467 84 494 89 517 99C540 110 565 123 582 140C598 157 611 179 616 201C621 223 617 248 613 269C609 291 598 311 592 330ZM620 330C614 351 608 369 605 389C601 409 603 430 599 452C595 474 593 499 582 521C571 542 555 564 535 580C516 596 489 609 464 618C438 627 410 632 382 636C355 640 328 643 300 643C272 643 244 642 217 636C191 631 164 621 142 608C119 596 100 577 83 560C66 543 54 524 39 506C25 489 11 472 -4 454C-20 436 -39 419 -52 398C-66 377 -81 354 -85 330C-90 306 -88 279 -79 257C-70 234 -50 213 -31 195C-12 177 13 164 34 150C54 136 75 125 95 112C115 99 133 85 154 73C175 61 197 48 222 40C246 32 274 27 300 25C326 24 354 26 381 30C408 34 434 39 461 47C488 54 516 62 540 75C565 87 591 102 609 121C626 141 639 165 645 189C651 213 647 240 643 264C638 287 627 309 620 330ZM651 330C645 353 639 372 636 395C633 418 636 441 632 466C629 490 627 519 616 543C604 567 586 593 564 611C542 628 511 641 482 650C453 659 420 661 390 664C360 666 330 666 300 665C270 664 241 662 212 657C183 651 154 643 129 631C103 620 80 602 60 585C39 568 24 547 7 528C-10 509 -26 490 -42 470C-59 449 -78 429 -92 406C-106 383 -121 356 -125 330C-129 304 -126 274 -115 250C-104 225 -81 202 -60 183C-39 164 -10 151 13 136C36 122 58 110 80 96C101 82 119 66 142 51C164 37 187 19 213 8C240 -2 270 -11 300 -14C330 -17 362 -14 391 -9C421 -5 451 4 479 15C508 25 537 36 562 51C588 67 614 84 632 105C650 127 665 153 671 178C678 204 675 233 672 258C668 283 657 307 651 330Z'/%3E%3C/svg%3E"); }
.e-contours { position: relative; isolation: isolate; }
.e-contours::before { content: ""; position: absolute; inset: -6%; z-index: -1; pointer-events: none; background: var(--p, var(--aqua)); opacity: .5; -webkit-mask: var(--e-contours) center / cover no-repeat; mask: var(--e-contours) center / cover no-repeat; }
.c-final.e-contours::before { inset: -10% -20% -10% 30%; background: var(--aqua); opacity: .16; }
.stage .contours { position: absolute; inset: -6%; width: 112%; height: 112%; z-index: -1; }
.stage .contours path { fill: none; stroke: var(--p); stroke-opacity: .5; stroke-width: 1; vector-effect: non-scaling-stroke; }
@media (max-width: 767px) { .stage { aspect-ratio: 5 / 4.4; border-radius: var(--r-l); } }
.stage.is-video { aspect-ratio: 16 / 10; padding: clamp(14px, 2.4vw, 26px); }
.callout { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 7px; background: #fcfbf7eb; border: 1px solid var(--line); font: 500 10.5px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.callout b { color: var(--teal); font-weight: 500; }

/* video frame (YouTube poster button + coral play disc); used in heroes and video sections */
.c-video { width: 100%; margin: 0 auto; display: grid; gap: 10px; } /* width: a grid item with auto margins shrinks to its content (0 here) */
.c-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: var(--ink); box-shadow: var(--sh-2); }
.c-video-frame.is-vertical { aspect-ratio: 9 / 16; max-width: 380px; margin-inline: auto; }
.c-video-frame iframe, .c-video-frame video, .c-video-frame > img, .c-yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0 !important; }
.c-yt { position: absolute; inset: 0; padding: 0; border: 0; cursor: pointer; background: var(--ink); }
.c-play { position: absolute; left: 16px; top: 16px; width: 64px; height: 64px; border-radius: 50%; background: var(--coral); box-shadow: 0 16px 34px -12px #00000080; transition: transform .25s var(--ease); pointer-events: none; }
.c-play::before { content: ""; position: absolute; left: 25px; top: 20px; border-left: 18px solid var(--on-coral); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.c-yt:hover .c-play, .c-video-frame:hover .c-play { transform: scale(1.06); }

/* ---------- stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); border-block: 1px solid var(--line); }
.stat { padding: 22px 18px 24px; border-right: 1px solid var(--line); }
.stat:nth-child(2n) { border-right: 0; }
.stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.stat p { font-size: 14px; color: var(--ink-2); }
.stat .num { font: 380 clamp(34px, 4.6vw, 60px)/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 10px 0 8px; color: var(--ink); }
.stat .num em { font-style: italic; font-size: .5em; letter-spacing: 0; margin-left: 4px; }
@media (min-width: 900px) {
	.stats { grid-template-columns: repeat(4, 1fr); }
	.stat { border-bottom: 0 !important; border-right: 1px solid var(--line) !important; padding: 26px 26px 28px; }
	.stat:last-child { border-right: 0 !important; }
	.stats.n3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- big product cards (bloomlab.id home "Pilih sesuai keluhanmu": .needs/.need) ---------- */
.needs { display: grid; gap: 18px; }
@media (min-width: 960px) { .needs { grid-template-columns: repeat(3, 1fr); } }
.need { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .35s var(--ease), box-shadow .35s; text-decoration: none; }
.need > * { min-width: 0; }
.need:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.need-top { position: relative; height: 196px; background: radial-gradient(110% 100% at 50% 100%, color-mix(in srgb, var(--p) 22%, var(--paper)), var(--paper) 70%); border-top: 5px solid var(--p); overflow: hidden; display: block; }
.need-top img { position: absolute; top: 50%; left: 50%; width: auto; height: auto; max-width: 62%; max-height: 84%; transform: translate(-50%, -46%); filter: drop-shadow(0 18px 18px rgba(18, 63, 67, .2)); transition: transform .5s var(--ease); }
.need:hover .need-top img { transform: translate(-50%, -50%); }
.need-top .tags { position: absolute; right: 14px; top: 14px; display: grid; gap: 6px; justify-items: end; }
.need-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.need-body > * { min-width: 0; }
.need-body p { color: var(--ink-2); font-size: 15px; }
.need-foot { display: flex; flex-direction: column; align-items: stretch; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: auto; }

/* ---------- compact product cards (bloomlab.id home "Ritual harian lainnya": .others/.other) ----------
   Scroll row on mobile, 4 or 5 columns on desktop (.others.n4 / default 5). */
.others { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--gut) 18px; margin-inline: calc(-1 * var(--gut)); scrollbar-width: none; scroll-padding-inline: var(--gut); }
.others::-webkit-scrollbar { display: none; }
.other { flex: 0 0 220px; scroll-snap-align: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; text-decoration: none; display: grid; grid-template-rows: 132px auto; transition: transform .35s var(--ease), box-shadow .35s; }
.other:hover { transform: translateY(-3px); box-shadow: var(--sh-1); }
.other-img { position: relative; display: block; background: color-mix(in srgb, var(--c, var(--p)) 18%, var(--paper)); border-top: 4px solid var(--c, var(--p)); overflow: hidden; }
.other-img img { position: absolute; inset: 16px 12px -6px; top: 22px; width: calc(100% - 24px); height: calc(100% - 22px); object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 12px 12px rgba(18, 63, 67, .2)); }
.other-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.other-body h3 { font: 420 21px/1.1 var(--f-display); }
.other-body p { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.other-go { margin-top: auto; padding-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 700 14px/1.25 var(--f-body); color: var(--ink); }
.other-go .ar { width: 14px; height: 14px; flex: none; }
@media (min-width: 1024px) {
	.others { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; padding: 0; margin: 0; }
	.others.n4 { grid-template-columns: repeat(4, 1fr); }
	.others.n3 { grid-template-columns: repeat(3, 1fr); }
	.other { flex: none; }
}
.row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: clamp(40px, 5vw, 64px) 0 14px; }

/* ---------- feature / info cards (.fam.c-cards > .fam-card) ---------- */
.fam { display: grid; gap: 14px; }
@media (min-width: 900px) { .fam { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.fam-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); padding: 26px 24px 28px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.fam-card p { color: var(--ink-2); font-size: 15.5px; }
.fam-card .ico { width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--p) 20%, var(--white)); display: grid; place-items: center; font-size: 21px; line-height: 1; }
.fam-card .ico svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.c-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--p); margin-top: 4px; }
.c-num { font: 500 13px/1 var(--f-mono); letter-spacing: .06em; color: var(--ink); }
.c-card-media { background: color-mix(in srgb, var(--p, var(--teal)) 9%, var(--cream)); border-radius: 14px; padding: 10px; display: grid; place-items: center; }
.c-card-img { border-radius: 8px; width: auto; max-width: 100%; max-height: 520px; height: auto; }
.fam-card .c-list { list-style: none; padding: 0; gap: 6px; color: var(--ink-2); font-size: 15px; }
.fam-card .c-list li { display: grid; grid-template-columns: 14px 1fr; gap: 6px; }
.fam-card .c-list li::before { content: ""; width: 5px; height: 5px; margin-top: 9px; border-radius: 50%; background: var(--p); }
@media (min-width: 900px) {
	.c-cards.cc1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.c-cards.cc2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.c-cards.cc3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.c-cards.cc4 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
	.c-cards > .fam-card { grid-column: span 2; }
	.c-cards > .fam-card.c-lr2 { grid-column: 2 / span 2; }
	.c-cards > .fam-card.c-lr3 { grid-column: 3 / span 2; }
	.c-cards > .fam-card.c-lr4 { grid-column: 4 / span 2; }
	.c-cards > .fam-card.is-wide { grid-column: span 4; }
}

/* ---------- reviews / quotes (.revs > .rev) ---------- */
.revs { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--gut) 22px; margin-inline: calc(-1 * var(--gut)); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; align-items: stretch; scroll-padding-inline: var(--gut); }
.rev { flex: 0 0 min(84vw, 360px); scroll-snap-align: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.rev::before { content: ""; position: absolute; left: 44px; top: 0; bottom: 0; width: 1px; background: #f5725140; }
.rev header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-left: 34px; }
.rev blockquote { margin: 0; padding-left: 34px; font: italic 380 20px/1.42 var(--f-display); letter-spacing: -.005em; }
.rev footer { padding-left: 34px; display: flex; justify-content: space-between; gap: 8px; margin-top: auto; }
.rev .who { font: 700 13.5px/1.2 var(--f-body); }
@media (min-width: 1024px) { .revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding: 0; margin: 0; } }
:lang(th) .rev blockquote { font-style: normal; line-height: 1.6; }

/* ---------- screenshots / photo testimonials (.c-shots > .c-shot) ---------- */
.c-shots { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--gut) 22px; margin: 0 calc(-1 * var(--gut)); scrollbar-width: none; align-items: stretch; scroll-padding-inline: var(--gut); }
.c-shots::-webkit-scrollbar { display: none; }
.c-shot { flex: 0 0 min(74%, 300px); scroll-snap-align: start; margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 10px; box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: 8px; }
.c-shot img { width: 100%; height: auto; border-radius: 3px !important; display: block; }
.c-shot figcaption, .c-shot-top { display: flex; justify-content: space-between; gap: 8px; }
@media (min-width: 1024px) {
	.c-shots { display: block; columns: 4; column-gap: 18px; overflow: visible; margin: 0; padding: 0; }
	.c-shots.c2 { columns: 2; } .c-shots.c3 { columns: 3; } .c-shots.c5 { columns: 5; }
	.c-shots > .c-shot { display: flex; break-inside: avoid; margin: 0 0 18px; width: 100%; }
}

/* ---------- steps (.steps.c-steps > .step-i) ---------- */
.steps { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.step-i { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line-2); align-content: start; }
.step-i .ico { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; }
.step-i .ico svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.step-i .ico img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% !important; }
.step-i h3 { margin: 6px 0; }
.step-i p { color: var(--ink-2); font-size: 15px; }
@media (min-width: 900px) {
	.steps { grid-template-columns: repeat(4, 1fr); }
	.steps.n2 { grid-template-columns: repeat(2, 1fr); }
	.steps.n3 { grid-template-columns: repeat(3, 1fr); }
	.steps.n5 { grid-template-columns: repeat(5, 1fr); }
	.step-i { grid-template-columns: 1fr; padding: 26px 24px 30px 0; border-bottom: 0; border-right: 1px solid var(--line-2); }
	.step-i + .step-i { padding-left: 24px; }
	.step-i:last-child { border-right: 0; }
}
.c-note { margin-top: 18px; font-size: 15px; color: var(--ink-2); }

/* ---------- benefits list (.benefits > li: mono number + title + text) ---------- */
.benefits { display: grid; border-top: 1px solid var(--line-2); }
.benefits li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.benefits li > .mono { padding-top: 4px; color: var(--teal); }
.benefits b, .benefits h3 { font: 420 21px/1.2 var(--f-display); }
.benefits p { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
@media (min-width: 900px) { .benefits.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }

/* ---------- ingredients (.c-ings > .c-ing: plate image + body) ---------- */
.c-ings { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gut) 20px; margin-inline: calc(-1 * var(--gut)); scrollbar-width: none; scroll-padding-inline: var(--gut); }
.c-ings::-webkit-scrollbar { display: none; }
.c-ing { flex: 0 0 min(80%, 320px); scroll-snap-align: start; display: grid; gap: 16px; align-content: start; }
.c-ing-body { display: grid; gap: 8px; }
.c-ing-body p { color: var(--ink-2); font-size: 15px; }
.anat-no { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.plate { --tint: var(--p); position: relative; margin: 0; background: var(--white); border: 1px solid var(--line-2); border-radius: 4px; padding: 12px 12px 14px; display: grid; gap: 10px; }
.plate::before, .plate::after { content: ""; position: absolute; width: 10px; height: 10px; border: solid var(--ink); opacity: .7; }
.plate::before { left: -6px; top: -6px; border-width: 1.4px 0 0 1.4px; }
.plate::after { right: -6px; bottom: -6px; border-width: 0 1.4px 1.4px 0; }
.plate-top { display: flex; justify-content: space-between; font: 500 10.5px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.plate-art { aspect-ratio: 1 / 1; border: 1px solid var(--line); background-color: #fffefa; background-image: linear-gradient(rgba(18, 63, 67, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 63, 67, .07) 1px, transparent 1px), linear-gradient(rgba(18, 63, 67, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 63, 67, .035) 1px, transparent 1px); background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px; display: grid; place-items: center; overflow: hidden; }
.plate-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.plate-lat { font: italic 400 18px/1.2 var(--f-display); }
@media (min-width: 1024px) {
	.c-ings { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); overflow: visible; padding: 0; margin: 0; gap: 26px; }
	.c-ings.n3, .c-ings.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.c-ings.n4, .c-ings.n7, .c-ings.n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.c-ings.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
	.c-ings.few { grid-template-columns: repeat(2, minmax(0, 340px)); }
}

/* ---------- two-column blocks ---------- */
/* g-grid: copy left, figure/card right (bloomlab.id #garansi) */
.g-grid { display: grid; gap: 36px; align-items: start; }
.g-grid > * { min-width: 0; }
.g-copy { display: grid; gap: 18px; }
.g-copy > * { min-width: 0; }
@media (min-width: 960px) { .g-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(48px, 6vw, 96px); } }
/* about: round photo + copy (bloomlab.id #tentang) */
.about { display: grid; gap: 34px; align-items: center; }
.about > * { min-width: 0; }
.about-photo { position: relative; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #eaf7f5, #d4eeeb 70%); overflow: hidden; }
.about-photo img { position: absolute; left: 50%; bottom: 0; width: 88%; transform: translate(-50%); }
@media (min-width: 960px) { .about { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; } }
@media (max-width: 959px) { .about-photo { order: 2; } }
/* c-split: heading left, prose right */
.c-split { display: grid; gap: 22px; }
.c-split-head { display: grid; gap: 18px; align-content: start; }
.c-split-body { display: grid; gap: 16px; align-content: start; min-width: 0; }
.c-split-lead { font-size: 19px; line-height: 1.5; color: var(--ink); }
@media (min-width: 1024px) {
	.c-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 88px); align-items: start; }
	.c-split-head .h-section { font-size: clamp(34px, 3.4vw, 50px); }
}
/* c-prose (+ optional figure) */
.c-prose { display: grid; gap: 28px; }
.c-prose-body { display: grid; gap: 14px; max-width: 64ch; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.c-prose-body strong { color: var(--ink); }
@media (min-width: 960px) { .c-prose.has-img { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 5vw, 80px); align-items: start; } }
.c-fig { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 10px; box-shadow: var(--sh-1); }
.c-fig img { width: 100%; height: auto; border-radius: 3px !important; display: block; }
.c-fig figcaption { padding: 10px 4px 2px; }
.c-quote { margin: 6px 0 0; padding: 18px 22px; border-left: 3px solid var(--coral); background: var(--cream); font: italic 380 21px/1.4 var(--f-display); color: var(--ink); }
:lang(th) .c-quote { font-style: normal; }
/* c-answer: one white "short answer" card */
.c-answer { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(22px, 3vw, 36px); display: grid; gap: 12px; font-size: 18px; line-height: 1.6; color: var(--ink-2); box-shadow: var(--sh-1); }
.c-answer > * { max-width: 72ch; }
.c-answer strong { color: var(--ink); }
/* c-statement: a single centred line on cream */
.c-statement { background: var(--cream); }
.c-statement .wrap { display: grid; justify-items: center; text-align: center; }
.c-stmt { font: italic 380 clamp(24px, 3vw, 38px)/1.18 var(--f-display); letter-spacing: -.02em; max-width: 30ch; }
.c-stmt::before { content: ""; display: block; width: 44px; height: 2px; margin: 0 auto 18px; background: var(--p, var(--teal)); }
.c-stmt em { font-style: italic; font-weight: 360; color: var(--teal); }
:lang(th) .c-stmt { font-style: normal; }

/* ---------- section helpers ---------- */
.c-intro { display: grid; gap: 12px; max-width: 68ch; color: var(--ink-2); font-size: 17px; margin: -18px 0 34px; }
.c-tail { display: grid; gap: 14px; margin-top: 30px; max-width: 70ch; color: var(--ink-2); }
.c-tail > * { min-width: 0; }
.c-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.c-ctas.is-center { justify-content: center; }
@media (max-width: 767px) { .c-ctas { flex-direction: column; align-items: stretch; } .c-ctas .btn, .c-ctas .tb-shopee-cta { width: 100%; } }
.c-jump { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; font: 500 14.5px/1.5 var(--f-body); }
.c-jump a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); white-space: nowrap; }
.c-jump a:hover { text-decoration-color: var(--ink); }
.c-trust { display: grid; gap: 10px; max-width: 560px; }
.c-trust-card { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--p); border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.c-trust-card strong { color: var(--ink); }
.c-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.c-pills a, .c-pills span { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line-2); font: 600 14.5px/1.2 var(--f-body); color: var(--ink); text-decoration: none; transition: background .2s, border-color .2s; }
.c-pills a:hover { background: var(--cream); border-color: var(--ink); }

/* ---------- FAQ layout (heading left, accordion right) ---------- */
.faq-grid { display: grid; gap: 30px; }
.faq-grid > * { min-width: 0; }
.faq-side { display: grid; gap: 22px; align-content: start; }
.faq-grid .c-num-eb + .c-kicker { margin-top: -16px; }
.h-section.e-faq-h { font-size: clamp(28px, 3vw, 42px); }
@media (min-width: 960px) { .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; } }

/* ---------- comparison / data table ---------- */
.c-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--white); }
.c-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.c-table th { font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--ink); background: none; }
.c-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.c-table tr:last-child td { border-bottom: 0; }
.c-table .c-td-k, .c-table td:first-child { font-weight: 700; color: var(--ink); }
.c-table .is-hi { background: color-mix(in srgb, var(--p, var(--teal)) 8%, var(--white)); }

/* ---------- final CTA band (dark) ---------- */
.c-final { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding-block: clamp(72px, 9vw, 130px); }
.c-final .contours { position: absolute; inset: -10% -20% -10% 30%; width: 90%; height: 120%; opacity: .16; }
.c-final .contours path { fill: none; stroke: var(--aqua); stroke-width: 1.2; }
.c-final-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: start; max-width: 880px; }
.c-final-in > * { min-width: 0; }
.c-final .eyebrow, .c-final .c-kicker, .c-final .h-section em { color: var(--aqua); }
.c-final .lead { color: #fcfbf7d1; }
.c-final .fine { color: #fcfbf799; }
.c-final .btn-ghost { color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper); }
/* The global-route "choose country" Shopee CTA is ink in light bands; on the dark band it takes the coral buy look. */
.c-final .tb-shopee-cta--choose { background: var(--coral); color: var(--on-coral); box-shadow: 0 16px 34px -14px #ee5e3acc; }
.c-final .tb-shopee-cta--choose:hover, .c-final .tb-shopee-cta--choose:focus-visible { background: var(--coral-2); color: var(--on-coral); box-shadow: 0 18px 34px -14px #ee5e3af2; }
.c-final .btn-ghost:hover { --bg: rgba(255, 255, 255, .08); }
.c-final .link { text-decoration-color: var(--aqua); }

/* ---------- buy / offer cards: trybloomlab keeps the Shopee CTA where bloomlab.id shows price cards ---------- */
.c-offers { display: grid; gap: 18px; row-gap: 34px; }
@media (min-width: 760px) { .c-offers.n2, .c-offers.n3, .c-offers.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .c-offers.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .c-offers.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.c-offer { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sh-1); min-width: 0; }
.c-offer-img { background: color-mix(in srgb, var(--p) 14%, var(--cream)); border-radius: 18px; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; }
.c-offer-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 0 !important; }
.c-offer-body { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.c-offer-end { margin-top: auto; display: grid; gap: 12px; padding-top: 6px; }
@media (min-width: 900px) { .c-offers.n1 .c-offer { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 34px; align-items: center; } }

/* the mu-plugin buy box (trybloomlab_shopee_buy_box: .tb-buy > .tb-buy__card) in the c-offer look */
body .tb-buy { padding: 0 var(--gut) clamp(52px, 7vw, 96px); }
body .tb-buy__inner { max-width: calc(var(--wrap) - 2 * var(--gut)); gap: 18px; }
body .tb-buy__inner--dual { grid-template-columns: 1fr; }
@media (min-width: 760px) { body .tb-buy__inner--dual { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body .tb-buy__card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); padding: 22px; gap: 22px 34px; }
body .tb-buy__media { background: color-mix(in srgb, var(--p, var(--teal)) 14%, var(--cream)); border-radius: 18px; }
body .tb-buy__img { border-radius: 0; }
body .tb-buy__title { font: 420 clamp(23px, 2.2vw, 28px)/1.12 var(--f-display); letter-spacing: -.015em; color: var(--ink); margin: 0; }
body .tb-buy__variant { font: 500 11.5px/1.45 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin: 0; }
body .tb-buy__note { font: 400 15px/1.5 var(--f-body); color: var(--ink-2); margin: 0; }
body .tb-buy__cta { width: 100%; }

/* ---------- legal / long-text pages ---------- */
.e-legal { padding-block: clamp(36px, 6vw, 72px) clamp(64px, 9vw, 120px); }
.e-legal-head { display: grid; gap: 14px; padding-bottom: clamp(22px, 3vw, 34px); margin-bottom: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); max-width: 900px; }
.e-legal-head .h-section { font-size: clamp(34px, 4vw, 54px); }
.e-legal-body { max-width: 72ch; display: grid; gap: 14px; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.e-legal-body h2 { font: 420 clamp(23px, 2.2vw, 28px)/1.15 var(--f-display); color: var(--ink); margin-top: 22px; }
.e-legal-body h3 { font: 700 17px/1.35 var(--f-body); color: var(--ink); margin-top: 10px; }
.e-legal-body ul, .e-legal-body ol { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; }
.e-legal-body ol { list-style: decimal; }
.e-legal-body li::marker { color: var(--teal); }
.e-legal-body a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--aqua); }
.e-legal-body strong { color: var(--ink); }
.e-legal-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(20px, 3vw, 32px); display: grid; gap: 10px; }
.c-legal { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.c-legal summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; }
.c-legal summary::-webkit-details-marker { display: none; }
.c-legal summary i { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; flex: none; }
.c-legal summary i::before, .c-legal summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: var(--ink); }
.c-legal summary i::after { transform: rotate(90deg); transition: transform .3s var(--ease); }
.c-legal[open] summary i::after { transform: rotate(0); }

/* ---------- safety / caution card ---------- */
.c-safety { background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-l); padding: clamp(22px, 3vw, 40px); display: grid; gap: 16px; color: var(--ink-2); }
.c-safety-head { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; }
.c-warn { width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--coral) 18%, var(--white)); color: var(--coral-2); display: grid; place-items: center; font: 700 22px/1 var(--f-display); }
.c-safety-list { display: grid; gap: 10px; }
.c-safety-list li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 15.5px; }
.c-safety-list li::before { content: ""; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--coral); }
@media (min-width: 900px) { .c-safety-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; } }

/* ---------- hero entrance (CSS only, same timings as bloomlab.id) ---------- */
@keyframes e-up10 { 0% { opacity: .01; translate: 0 10px; } }
@keyframes e-up14 { 0% { opacity: .01; translate: 0 14px; } }
@keyframes e-rise { 0% { translate: 0 108%; } }
@keyframes e-lead { 0% { translate: 0 14px; } }
@keyframes e-settle { 0% { scale: .965; } }
@keyframes e-draw { 0% { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
	:is(.p-hero, .h-hero) .hero-h .rl > span { animation: e-rise 1.05s cubic-bezier(.165, .84, .44, 1) .05s both; }
	:is(.p-hero, .h-hero) .hero-h .rl:nth-child(2) > span { animation-delay: .15s; }
	:is(.p-hero, .h-hero) .hero-h .rl:nth-child(3) > span { animation-delay: .25s; }
	:is(.p-hero, .h-hero) [data-hero=tags] > * { animation: e-up10 .5s cubic-bezier(.215, .61, .355, 1) both; }
	:is(.p-hero, .h-hero) .uline path[pathLength] { stroke-dasharray: 1; animation: e-draw .8s cubic-bezier(.455, .03, .515, .955) .75s both; }
	:is(.p-hero, .h-hero) [data-hero=lead] { animation: e-lead .6s cubic-bezier(.215, .61, .355, 1) .35s both; }
	:is(.p-hero, .h-hero) [data-hero=cta] { animation: e-up14 .6s cubic-bezier(.215, .61, .355, 1) .47s both; }
	:is(.p-hero, .h-hero) [data-hero=facts] { animation: e-up14 .6s cubic-bezier(.215, .61, .355, 1) .55s both; }
	:is(.p-hero, .h-hero) .stage { animation: e-settle 1s cubic-bezier(.215, .61, .355, 1) .08s both; }
}