/*
 * The product page — /produk/{slug} (design: Detail 1440 px, MDetail 390 px,
 * dark-Detail). The boards' own rules (their <style> blocks) and their inline
 * styles as classes, scoped under body.aa like the design system
 * (storefront.css, which also holds the status pills and testimonial cards).
 *
 * The design drew no tablet board for this page: from 601 to 992 px the two
 * columns stack — the gallery, then the buy box beside the other side cards,
 * then the tabs. Between 993 and 1279 px the side column is narrower.
 * Class prefixes are the design's: dt- (Detail), md- (MDetail), rv- (reviews).
 */

/* ---------- The page ---------- */

/* The design's rhythm: 28 px between the bands, 28 px above, 88 px below. */
.aa > main.dt-page {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 0 88px;
}

/* ---------- Head: breadcrumb, labels, title, meta, favourite, share ---------- */

.aa .dt-top {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* A <nav>: BeerCSS would centre its items and round it. */
.aa .dt-crumbs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--on-surface-variant);
  border-radius: 0;
}

.aa .dt-crumbs a {
  display: inline;
  color: var(--on-surface-variant);
}

.aa .dt-crumbs a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.aa .dt-crumbs i {
  --_size: 18px;
  font-size: 18px;
}

.aa .dt-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.aa .dt-headtext {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
}

.aa .dt-labels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* The category label at the head's size; the discount beside it, not on a picture. */
.aa .dt-labels .aa-pcat {
  font-size: 14px;
}

.aa :is(.dt-labels, .md-labels) .aa-ptag {
  position: static;
}

.aa .dt-featured {
  height: 24px;
}

/* The design's 40/48 heading (t-ds is 36/44). */
.aa .dt-h1 {
  font-size: 40px;
  line-height: 48px;
}

.aa .dt-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 14px;
  color: var(--on-surface-variant);
}

.aa .dt-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.aa .dt-meta i {
  --_size: 18px;
  font-size: 18px;
}

.aa .dt-stars {
  display: inline-flex;
  align-items: center;
}

.aa .dt-stars i {
  --_size: 18px;
  font-size: 18px;
}

.aa .dt-score {
  color: var(--on-surface);
}

/* "86 ulasan": opens the Ulasan tab — as tall as the design's small text
   button (32 px), which sets the row's height. */
.aa .dt-revlink {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 6px;
  border-radius: 16px;
  color: var(--primary);
  font-weight: 560;
}

.aa .dt-revlink:hover {
  text-decoration: underline;
}

.aa .dt-actions {
  display: flex;
  flex: none;
  gap: 8px;
}

/* "Favorit · 312" once pressed (only its look for now, like the cards). */
.aa .dt-fav.is-on {
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
  border-color: transparent;
}

/* :where(): Biome's noDescendingSpecificity would count every later icon
   rule otherwise. */
.aa .dt-fav:where(.is-on) > :where(i) {
  color: var(--error);
  font-variation-settings: "FILL" 1;
}

/* ---------- Two columns: the product, and the buy box beside it ---------- */

.aa .dt-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 40px;
  align-items: start;
}

.aa .dt-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* ---------- Gallery: one strip that snaps to each picture ---------- */

.aa .dt-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aa .dt-stage {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  line-height: 0;
  background: var(--surface-container);
  box-shadow: var(--elevate1);
}

.aa .dt-track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: 0;
}

/* Its focus ring inside the stage (the stage clips everything outside it). */
.aa .dt-track:focus-visible {
  outline-offset: -4px;
}

.aa .dt-slide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
}

/* The design's 16:10 stage (872 × 545 at 1440 px); a picture of another
   shape covers it, anchored left like the drawn samples. */
.aa .dt-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: left center;
}

.aa .dt-stage .nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  background: var(--aa-raised);
  color: var(--on-surface);
  box-shadow: var(--elevate2);
}

.aa .dt-stage .prev {
  left: 16px;
}

.aa .dt-stage .next {
  right: 16px;
}

/* A preview video fills the slide like a picture; black bars rather than a
   crop (a video's frame is its content). */
.aa .dt-slide video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: #000000;
}

/* "Dasbor penjualan · 1 dari 4" on each picture. */
.aa .dt-slide .cap {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgb(26 28 30 / 0.72);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

/* On a video the pill sits at the top: the player's own controls own the
   bottom. (After the rule above: same specificity, so the order decides.) */
.aa .dt-video .cap {
  top: 16px;
  bottom: auto;
}

.aa .dt-thumbs {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Thumbnails shrink when the column is narrow (993–1279 px), never below
   72 px; the design's 128 × 80 otherwise. */
.aa .dt-thumb {
  position: relative;
  display: block;
  flex: 0 1 128px;
  min-width: 72px;
  aspect-ratio: 16 / 10;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
  background: var(--surface-container);
  box-shadow: inset 0 0 0 1px var(--outline-variant);
}

.aa .dt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.aa .dt-thumb.is-on {
  box-shadow: 0 0 0 3px var(--primary);
}

/* A preview video's thumbnail: its poster with a play mark (decision 60). */
.aa .dt-thumb .play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgb(26 28 30 / 0.28);
}

/* BeerCSS sizes an icon's box by --_size (overflow hidden): a font-size
   alone would clip the glyph. :where() keeps the selector at the (0, 2, 1)
   of the page's other icon rules (Biome's noDescendingSpecificity). */
.aa :where(.dt-thumb) .play i {
  --_size: 32px;
}

/* "+4": the pictures beyond the thumbnails. */
.aa .dt-thumb .more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(26 28 30 / 0.6);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.aa .dt-live {
  flex: none;
  margin-left: auto;
}

/* ---------- Tabs and their panels ---------- */

.aa .dt-tabs {
  border-block-end: 1px solid var(--outline-variant);
}

.aa .dt-tabs > a {
  inline-size: auto;
  padding: 0 20px;
  min-block-size: 52px;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  cursor: pointer;
}

.aa .dt-tabs > a.active {
  color: var(--primary);
}

.aa .dt-tabs > a.active::before {
  block-size: 3px;
  border-radius: 3px 3px 0 0;
  inset-inline: 12px;
}

/* The number of reviews beside "Ulasan". */
.aa .dt-tabs .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--surface-container-highest);
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 700;
}

.aa .dt-tabs > a.active .count {
  background: var(--primary);
  color: var(--on-primary);
}

.aa .dt-panel {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px;
  border-radius: 28px;
  background: var(--aa-raised);
  box-shadow: var(--elevate1);
}

/* With scripts only the chosen panel shows; without, they follow one
   another (theme-init.js marks <html class="js">). */
html.js .aa .dt-panel:not(.is-active) {
  display: none;
}

.aa .dt-panel section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aa .dt-about p {
  text-wrap: pretty;
}

/* "Spesifikasi" (decision 60): name and answer side by side, a hairline
   between rows — the facts of the product, quieter than its features.
   Square corners for the list and every row in it: BeerCSS's
   `* { border-radius: inherit }` gave each row the card's 28 px corners, and
   its hairline curved up at both ends into the words (the owner, 2026-10-13). */
.aa .dt-specs {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 0;
}

.aa .dt-specs > div {
  display: grid;
  grid-template-columns: minmax(140px, 36%) minmax(0, 1fr);
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--outline-variant);
}

.aa .dt-specs dt {
  color: var(--on-surface-variant);
}

.aa .dt-specs dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* The audio previews under the gallery: a title above each player. */
.aa .dt-audio {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.aa .dt-audio ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.aa .dt-audio li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aa .dt-audio audio {
  width: 100%;
}

.aa .dt-feats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}

.aa .dt-feats li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 22px;
}

.aa .dt-feats i {
  --_size: 22px;
  font-size: 22px;
  color: var(--aa-success);
  font-variation-settings: "FILL" 1;
}

.aa .dt-fits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Chips that only say something: not buttons. A point is the shop's own
   words, a whole sentence too, so its chip grows with its lines: BeerCSS
   fixes a chip's height (`block-size: var(--_size)`, 32 px), and a point that
   wrapped ran over the chip's border above and below. A word longer than the
   row breaks instead of running past the screen. The chip's height stays the
   least: 32 px, and the touch screens' 44 px up to 992 px — `:where()` keeps
   this rule under storefront.css's tap-target rule, whose `min-block-size`
   then wins. 5 px above and below keep a one-line chip with its 20 px icon
   at 32 px. */
.aa :where(.dt-fits) .chip {
  block-size: auto;
  min-block-size: var(--_size);
  padding-block: 5px;
  overflow-wrap: anywhere;
  cursor: default;
}

.aa .dt-reqs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.aa .dt-reqs li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--aa-inset);
  font-size: 14px;
}

.aa .dt-reqs i {
  color: var(--primary);
}

.aa .dt-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: 14px;
}

/* "Buka Dokumentasi" stays on one line; the note's text wraps instead. */
.aa .dt-note > .button {
  flex: none;
  margin-left: auto;
  white-space: nowrap;
}

/* "Baca detail lengkap" exists on phones only (see below). */
.aa .md-readall {
  display: none;
}

/* ---------- Ulasan ---------- */

.aa .rv-summary {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 24px;
  border-radius: 24px;
  background: var(--aa-inset);
}

.aa .rv-score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.aa .rv-big {
  font-size: 64px;
  line-height: 64px;
  font-weight: 750;
  letter-spacing: -1.5px;
  font-stretch: 105%;
}

.aa .rv-dist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aa .rv-dist li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 40px;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}

.aa .rv-dist progress {
  --_size: 8px;
  color: var(--aa-star);
}

.aa .rv-n {
  text-align: end;
}

.aa .rv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* An <article>: BeerCSS would pad, fill and round it like a card. */
.aa .rv-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.aa .rv-item + .rv-item {
  border-top: 1px solid var(--outline-variant);
}

.aa .rv-av {
  width: 48px;
  height: 48px;
  background-color: var(--tertiary-container);
  color: var(--on-tertiary-container);
  font-size: 15px;
  font-weight: 700;
}

.aa .rv-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.aa .rv-who {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.aa .rv-verified {
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

.aa .rv-verified > i {
  --_size: 14px;
  font-size: 14px;
}

.aa .rv-rate {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aa .rv-text {
  margin-top: 4px;
}

.aa .rv-reply {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  padding: 16px;
  border-radius: 20px;
  background: var(--aa-inset);
}

.aa .rv-reply img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex: none;
}

.aa .rv-replytext {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aa .rv-when {
  font-weight: 400;
}

/* "Lihat semua 86 ulasan": the product's reviews page (build step 8d). */
.aa .rv-all {
  align-self: flex-start;
}

/* The buyer's own review and its form (build step 8d): a card inside the
   panel, framed by a hairline. */
.aa .rv-mine {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--outline-variant);
  border-radius: 24px;
}

/* The shop hid it: why it is missing from the page, on a warm tint (the
   sentence wraps: a pill would not hold it). */
.aa .rv-hidden {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--aa-warn-container);
  color: var(--aa-on-warn-container);
}

.aa .rv-hidden > i {
  --_size: 20px;
  flex: none;
  font-size: 20px;
}

/* "Ubah ulasan" folds the form open under the review: the summary is a
   button (no marker). */
.aa .rv-edit > summary {
  display: inline-flex;
  list-style: none;
}

.aa .rv-edit > summary::-webkit-details-marker {
  display: none;
}

.aa .rv-edit[open] > summary {
  margin-bottom: 16px;
}

.aa .rv-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}

/* The stars to pick: five radio buttons drawn as stars, each a 44 px target;
   the ones up to the checked one fill gold (`:has()`; a star "has" a later
   star whose radio is checked). The radio itself covers its star, unseen,
   so a tap or the keyboard works as on any radio group. */
.aa .rv-pick {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.aa .rv-pick > legend {
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--on-surface);
}

.aa .rv-pick.invalid > legend {
  color: var(--error);
}

.aa .rv-pickstars {
  display: flex;
  gap: 4px;
}

.aa .rv-star {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--outline-variant);
  cursor: pointer;
}

.aa .rv-star > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.aa .rv-star > i {
  --_size: 32px;
  font-size: 32px;
  font-variation-settings: "FILL" 1;
}

.aa :is(.rv-star:has(input:checked), .rv-star:has(~ .rv-star input:checked)) {
  color: var(--aa-star);
}

/* The radio is unseen: its focus ring goes around its star. */
.aa .rv-star:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- Reviews page (/produk/{slug}/ulasan, build step 8d) ---------- */

/* One column of reviews, as wide as reads well. */
.aa .rv-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 880px;
  padding-block: 32px 64px;
}

.aa .rv-back {
  align-self: flex-start;
}

/* The score beside its stars and "dari 86 ulasan", then "Hanya pembeli …". */
.aa .rv-pagescore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 24px;
  border-radius: 24px;
  background: var(--aa-inset);
}

/* ---------- Testimonials page (/produk/{slug}/testimoni, decision 128) ---------- */

/* The heading, then every chat screenshot in a grid, framed as the viewer
   frames one (storefront.css `.tm-shot`). */
.aa .tp-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 32px 64px;
}

.aa .tp-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.aa .tp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  align-items: start;
}

/* A tall screenshot shrinks to fit rather than being cut ("Perbesar"
   shows it larger), as in the viewer. */
.aa .tp-shot .shot {
  max-height: 560px;
  object-fit: contain;
}

@media (max-width: 600px) {
  .aa .tp-page {
    gap: 16px;
    padding-block: 16px 32px;
  }

  .aa .tp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* "Muat ulasan lainnya", centred; nothing left to load = no gap. */
.aa .rv-more {
  display: flex;
  justify-content: center;
}

.aa .rv-more:empty {
  display: none;
}

/* ---------- Komentar (decision 88) ---------- */

/* The new comment's form: the field as wide as reads well, its button at
   the start. */
.aa .cm-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}

.aa .cm-send {
  align-self: flex-start;
}

/* Signed out: why there is no form, and the way in, on a tint. */
.aa .cm-signin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--aa-inset);
}

.aa .cm-signin-ic {
  --_size: 24px;
  color: var(--primary);
  font-size: 24px;
}

.aa .cm-signin-text {
  flex: 1 1 240px;
  margin: 0;
}

/* The threads, a hairline between them. */
.aa .cm-list {
  display: flex;
  flex-direction: column;
}

.aa .cm-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 0;
}

.aa .cm-thread + .cm-thread {
  border-top: 1px solid var(--outline-variant);
}

/* A comment: the avatar, then who and when, then the words. An <article>:
   BeerCSS would pad, fill and round it like a card. */
.aa .cm-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.aa .cm-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--tertiary-container);
  color: var(--on-tertiary-container);
  font-size: 14px;
  font-weight: 700;
}

/* The shop answers with its logo, as under the reviews. */
.aa .cm-logo {
  border-radius: 10px;
  object-fit: contain;
}

.aa .cm-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.aa .cm-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
}

.aa .cm-badge {
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

.aa .cm-badge-ic {
  --_size: 14px;
  font-size: 14px;
}

/* Plain text: a long word (an address) wraps instead of widening the page. */
.aa .cm-text {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

/* "Hapus": a quiet button under the author's own comment (BeerCSS would put
   a form 1rem below the text). */
.aa .cm-delete {
  margin: 4px 0 0;
}

.aa .cm-del {
  margin-inline-start: -12px;
}

/* The replies, indented under their thread with a line at their start. */
.aa .cm-replies {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-inline-start: 52px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--outline-variant);
}

/* "Balas" folds the reply form open under the thread: the summary is a
   button (no marker). */
.aa .cm-reply {
  margin-inline-start: 52px;
}

.aa .cm-replybtn {
  display: inline-flex;
  list-style: none;
}

.aa .cm-replybtn::-webkit-details-marker {
  display: none;
}

.aa .cm-replyform {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
  margin-top: 12px;
}

/* "Lihat semua komentar": the comments page. */
.aa .cm-all {
  align-self: flex-start;
}

/* ---------- Dokumentasi and Riwayat Versi ---------- */

.aa :is(.doc-row, .ver-row) {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-radius: 0;
}

.aa :is(.doc-row + .doc-row, .ver-row + .ver-row) {
  border-top: 1px solid var(--outline-variant);
}

.aa .doc-ic {
  width: 44px;
  height: 44px;
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
}

.aa .doc-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.aa :is(.doc-status, .ver-tag) {
  align-self: flex-start;
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

/* "Khusus pembeli": a state, not a button. */
.aa .doc-locked {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  color: var(--on-surface-variant);
  font-weight: 560;
}

.aa .ver-row {
  align-items: flex-start;
}

.aa .ver-ic {
  width: 44px;
  height: 44px;
  background-color: var(--primary-container);
  color: var(--on-primary-container);
}

.aa .ver-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.aa .ver-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.aa .ver-no {
  font-size: 18px;
}

.aa .ver-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.aa .ver-notes li {
  display: flex;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
}

.aa .ver-notes li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 3px;
  background: var(--primary);
}

.aa .ver-file {
  margin-top: 6px;
  overflow-wrap: anywhere;
}

/* ---------- Dukungan ---------- */

.aa .sup-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.aa .sup-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 24px;
  background: var(--aa-inset);
}

.aa .sup-step .shape {
  width: 44px;
  height: 44px;
  background-color: var(--primary-container);
  color: var(--on-primary-container);
  font-size: 16px;
  font-weight: 750;
}

.aa .sup-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.aa .sup-pill {
  height: 36px;
  font-size: 13px;
}

.aa .sup-ticket {
  margin-left: auto;
}

/* ---------- Side: buy box, stats, product information, seller ---------- */

.aa .dt-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aa .buy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: 28px;
  background: var(--aa-raised);
  box-shadow: var(--elevate2);
}

.aa .lics {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aa .lic {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px 14px 8px;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--outline-variant);
  cursor: pointer;
}

/* The chosen license, with or without scripts. */
.aa .lic:has(input:checked) {
  background: var(--primary-container);
  color: var(--on-primary-container);
  box-shadow: inset 0 0 0 2px var(--primary);
}

.aa .lic .radio {
  padding: 2px 0 0 4px;
}

.aa :is(.lic, .md-lic) .radio > span {
  padding: 0;
}

.aa .lic .body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-inline-start: 12px;
}

.aa .lic .sum {
  font-size: 13px;
  line-height: 18px;
  opacity: 0.85;
}

.aa .lic .p {
  font-size: 14px;
  font-weight: 700;
}

/* The hosting fee ("+ hosting Rp 99.000/bulan") moves to the next line
   whole: in Google Sans Flex (decision 134) it no longer fitted beside the
   price at 1440 px and broke between "Rp" and its number. The space before
   it stays outside, where the line may break. */
.aa .lic .sub {
  font-weight: 500;
  white-space: nowrap;
}

/* "Harga promo berlaku sampai …". */
.aa .promo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--aa-warn-container);
  color: var(--aa-on-warn-container);
  font-size: 13px;
  font-weight: 600;
}

.aa .promo i {
  --_size: 18px;
  font-size: 18px;
}

/* The chosen license's promo line and price, 20 px apart like the box. */
.aa .buy-sel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aa .buy-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aa .buy-was {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aa .buy-was .aa-was {
  font-size: 15px;
}

.aa .bigprice {
  font-size: 40px;
  line-height: 48px;
  font-weight: 760;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

.aa .off {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  background: var(--aa-sale);
  color: var(--aa-on-sale);
  font-size: 12px;
  font-weight: 750;
}

/* The special discount (decision 103): a banner over the chosen license's
   price — the chip's red-to-orange, its name and a live countdown —, the
   promo line in its colour, and the big price painted in the gradient (the
   regular and the sale price struck through above it). */
.aa .buy-special {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--aa-special-from), var(--aa-special-to));
  color: var(--aa-on-special);
  box-shadow: 0 6px 20px rgb(191 54 12 / 0.28);
}

.aa .buy-special-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.aa .buy-special-tag i {
  --_size: 20px;
  font-size: 20px;
}

.aa .buy-special-count {
  padding: 2px 10px;
  border-radius: 8px;
  background: rgb(0 0 0 / 0.2);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.aa .promo.is-special {
  background: var(--aa-sale-container);
  color: var(--aa-on-sale-container);
}

.aa .bigprice.is-special {
  background: linear-gradient(135deg, var(--aa-special-from), var(--aa-special-to));
  background-clip: text;
  color: transparent;
}

/* The bar's bolt, filled (the design's). */
.aa .md-buy > :where(i) {
  font-variation-settings: "FILL" 1;
}

.aa .buy-fast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
  color: var(--on-surface-variant);
  text-align: center;
}

.aa .buy-fast i {
  --_size: 18px;
  font-size: 18px;
  color: var(--aa-success);
}

.aa .buy-inc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aa .inc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aa .inc li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 20px;
}

.aa .inc i {
  --_size: 20px;
  font-size: 20px;
  color: var(--aa-success);
}

.aa .buy-pay {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 18px;
  color: var(--on-surface-variant);
}

.aa .buy-pay i {
  flex: none;
  color: var(--primary);
}

.aa .side-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 28px;
  background: var(--aa-raised);
  box-shadow: var(--elevate1);
}

.aa .dt-statcard {
  padding: 16px 8px;
}

/* Two or three figures side by side, a hairline between them. */
.aa .stats {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  text-align: center;
}

.aa .stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  border-radius: 0;
}

.aa .stats > div + div {
  border-inline-start: 1px solid var(--outline-variant);
}

.aa .info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 16px;
  margin: 0;
  font-size: 14px;
}

.aa .info dt {
  color: var(--on-surface-variant);
}

.aa .info dd {
  margin: 0;
  text-align: end;
  font-weight: 600;
}

/* "Dijual & didukung oleh …" on the brand's dark band. */
.aa .seller {
  background: var(--aa-band);
  color: var(--aa-on-band);
}

.aa .seller .muted {
  color: var(--aa-band-muted);
}

.aa .seller-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aa .seller-head img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #ffffff;
}

/* The design's small text button: 32 px tall, underlined. */
.aa .seller-support {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 32px;
  color: inherit;
  font-weight: 560;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- "Kata pembeli" ---------- */

.aa .dt-tmsec {
  margin-top: 16px;
}

.aa .tm-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 44px 40px 40px;
  border-radius: 40px;
  background: var(--aa-tint);
}

.aa .tm-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 820px;
  text-align: center;
}

/* The owner's testimonial viewer (2026-09-28): one chat screenshot at a
   time, previous / next beside it, thumbnails under it — the product
   gallery's strip and script (app.js "gallery"), sized for chat screenshots,
   which are about as tall as they are wide. */
.aa .tm-viewer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  min-width: 0;
}

.aa .tm-stage {
  position: relative;
  width: min(100%, 560px);
}

.aa .tm-track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: 0;
}

/* Its focus ring inside the strip (the strip clips everything outside it). */
.aa .tm-track:focus-visible {
  outline-offset: -4px;
}

/* One screenshot with who wrote it, centred; the padding leaves room for the
   frame's shadow inside the strip. */
.aa .tm-slide {
  flex: 0 0 100%;
  align-items: center;
  padding: 4px 0 10px;
  scroll-snap-align: start;
}

.aa .tm-slide .frame {
  width: min(100%, 380px);
}

/* A tall screenshot shrinks to fit rather than being cut: the whole chat
   stays readable ("Perbesar" shows it larger). */
.aa .tm-slide .shot {
  max-height: 520px;
  object-fit: contain;
}

.aa .tm-slide figcaption {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 380px);
}

.aa .tm-slide figcaption .who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* "3 dari 5". */
.aa .tm-count {
  flex: none;
  color: var(--on-surface-variant);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
}

/* Previous / next on either side of the screenshot, level with its middle
   (the caption under it is about 90 px). */
.aa .tm-stage .nav {
  position: absolute;
  top: calc((100% - 90px) / 2);
  z-index: 2;
  transform: translateY(-50%);
  background: var(--aa-raised);
  color: var(--on-surface);
  box-shadow: var(--elevate2);
}

.aa .tm-stage .prev {
  left: 0;
}

.aa .tm-stage .next {
  right: 0;
}

/* One thumbnail per screenshot; a long row scrolls sideways (app.js keeps
   the marked one in view — `position: relative` makes it the offset parent). */
.aa .tm-thumbs {
  position: relative;
  display: flex;
  gap: 8px;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 0;
}

.aa .tm-thumb {
  flex: none;
  display: block;
  width: 56px;
  aspect-ratio: 586 / 616;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
  background: var(--surface-container);
  box-shadow: inset 0 0 0 1px var(--outline-variant);
}

.aa .tm-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.aa .tm-thumb.is-on {
  box-shadow: 0 0 0 3px var(--primary);
}

/* The design's "+ N testimoni lainnya" under the viewer (decision 128). */
.aa .tm-more {
  margin: 0;
}

/* ---------- Related products ---------- */

.aa .dt-relsec {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

.aa .dt-related {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/* ---------- An enlarged screenshot ---------- */

.aa dialog.dt-zoom {
  width: min(640px, 100vw - 32px);
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 16px;
  border: 0;
  border-radius: 28px;
  background: var(--aa-raised);
  color: var(--on-surface);
  box-shadow: var(--elevate3);
  overflow: auto;
}

.aa dialog.dt-zoom::backdrop {
  background: rgb(0 0 0 / 0.5);
}

.aa dialog.dt-zoom[open]::backdrop {
  opacity: 1;
  visibility: visible;
}

.aa .dt-zoomhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 12px 8px;
}

.aa .dt-zoom img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* ---------- The floating buy bar's contents (every size) ---------- */

/* What the page's floating bar holds (storefront.css `.aa-buybar` is the bar
   itself; decision 109): the chosen license's price, the cart and "Beli
   Sekarang" — the design's phone bar, on every screen. 480 px on desktops,
   centred under the product's column (below). */
.aa .md-dock {
  --aa-buybar-width: 480px;
}

/* Desktops: centred under the product's column, not the screen — centred on
   the screen it covered the buy box's price on laptops (the buy box starts
   left of the screen's middle plus 240 px below 1440 px). The column's
   middle: 50% − 220 px from 1280 px (a 400 px side and 40 px gap), 50% − 182
   px below (340 px and 24 px); the bar is 480 px. */
@media (min-width: 993px) {
  .aa .md-dock {
    justify-self: start;
    margin-inline-start: calc(50% - 422px);
  }
}

@media (min-width: 1280px) {
  .aa .md-dock {
    margin-inline-start: calc(50% - 460px);
  }
}

.aa .md-dockprice {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.aa .md-dockprice .aa-was {
  font-size: 12px;
}

.aa .md-price {
  font-weight: 760;
  white-space: nowrap;
}

/* A special discount's price in its colour — the ink that reads on the
   bar's blue in both themes. */
.aa .md-price.is-special {
  color: var(--aa-special-ink);
}

/* border-radius 0: BeerCSS rounds every element, and with overflow hidden
   that clips the first letter. */
.aa .md-billing {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 0;
}

.aa .md-dockcart {
  flex: none;
}

/* The cart: a white round button with a blue cart, standing out on the
   bar's blue as the secondary step beside "Beli Sekarang" (BeerCSS's tonal
   fill was the bar's own blue: the button's edge vanished). */
.aa .md-cart {
  background-color: var(--aa-raised);
  color: var(--primary);
}

.aa .md-buy {
  flex: none;
  gap: 6px;
  padding: 0 18px 0 14px;
}

/* ---------- Desktop widths the design never drew (993–1279 px) ---------- */

@media (min-width: 993px) and (max-width: 1279px) {
  .aa .dt-cols {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
  }

  .aa .dt-thumbs {
    gap: 8px;
  }

  /* Five tabs are wider than the narrower column: they scroll sideways. */
  .aa .dt-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .aa .dt-tabs > a {
    flex: none;
    padding: 0 16px;
  }

  .aa .dt-panel {
    padding: 24px;
  }

  .aa .dt-feats {
    grid-template-columns: minmax(0, 1fr);
  }

  .aa .dt-related {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .aa .dt-related > :nth-child(4) {
    display: none;
  }
}

/* ---------- Tablet (601–992 px): no board — the columns stack ---------- */

@media (min-width: 601px) and (max-width: 992px) {
  .aa .dt-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .aa .dt-h1 {
    font-size: 36px;
    line-height: 44px;
  }

  /* The gallery, then the buy box with the side cards, then the tabs: the
     columns' contents become one column (display: contents lifts them out
     of their column wrapper). */
  /* stretch: the desktop grid's align-items: start would make every item as
     wide as its content here — wider than the screen, cut off by <main>. */
  .aa .dt-cols {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .aa .dt-main {
    display: contents;
  }

  .aa .dt-gallery {
    order: 1;
  }

  /* The buy box on the left; stats, information and seller stacked on the
     right. The last row takes what the taller buy box leaves over, so the
     right-hand cards stay together at the top. */
  .aa .dt-side {
    order: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
  }

  .aa .dt-side > .buy {
    grid-row: 1 / span 4;
  }

  .aa .dt-tabs {
    order: 3;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .aa .dt-tabs > a {
    flex: none;
  }

  .aa .dt-panel {
    order: 4;
    padding: 24px;
  }

  .aa .rv-summary {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 24px;
  }

  .aa .tm-wrap {
    padding: 32px 24px;
    border-radius: 32px;
  }

  .aa .dt-related {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .aa .dt-related > :nth-child(4) {
    display: none;
  }
}

/* The narrowest tablets: the side cards one under the other. */
@media (min-width: 601px) and (max-width: 720px) {
  .aa .dt-side {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .aa .dt-side > .buy {
    grid-row: auto;
  }

  .aa .dt-feats,
  .aa .dt-reqs,
  .aa .sup-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .aa .dt-related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aa .dt-related > :nth-child(n + 3) {
    display: none;
  }
}

/* ---------- Phone (≤ 600 px; the design's MDetail board) ---------- */

@media (max-width: 600px) {
  .aa > main.dt-page {
    gap: 18px;
    padding: 0 0 28px;
  }

  /* One column as wide as the screen (see the tablet rule on stretch). */
  .aa .dt-cols {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .aa .dt-main {
    gap: 18px;
  }

  .aa .dt-gallery {
    gap: 18px;
  }

  /* The heart and "Live preview" on the picture; "1 / 4" on each picture. */
  .aa .dt-stage .aa-pfav {
    top: 12px;
    right: 12px;
  }

  .aa .md-live {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    gap: 4px;
    padding: 0 12px 0 8px;
    background: var(--aa-raised);
    color: var(--primary);
    box-shadow: var(--elevate1);
    font-size: 12px;
    font-weight: 650;
    line-height: normal;
  }

  .aa .md-live > i {
    --_size: 18px;
    font-size: 18px;
  }

  .aa .dt-slide .count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    background: rgb(26 28 30 / 0.72);
    color: #ffffff;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
  }

  /* On a video the pill sits at the top: the player's controls own the bottom. */
  .aa .dt-video .count {
    top: 12px;
    bottom: auto;
  }

  .aa .md-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
  }

  .aa .md-dots span {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--outline-variant);
  }

  .aa .md-dots span.on {
    width: 22px;
    background: var(--primary);
  }

  .aa :is(.md-head, .md-licsec) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
  }

  .aa .md-labels {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .aa .md-labels .aa-ptag {
    height: 22px;
  }

  .aa .md-meta {
    font-size: 13px;
  }

  .aa .md-lics {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .aa .md-lic {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px 12px 6px;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px var(--outline-variant);
    cursor: pointer;
  }

  .aa .md-lic:has(input:checked) {
    background: var(--primary-container);
    color: var(--on-primary-container);
    box-shadow: inset 0 0 0 2px var(--primary);
  }

  .aa .md-lic .body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 10px;
  }

  .aa .md-lic .note {
    opacity: 0.85;
  }

  .aa .md-promo {
    font-size: 12px;
  }

  .aa .md-fast {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    line-height: 17px;
    color: var(--on-surface-variant);
  }

  .aa .md-fast i {
    --_size: 18px;
    font-size: 18px;
    color: var(--aa-success);
  }

  /* The tabs scroll sideways (the design cut the last one off). */
  .aa .dt-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .aa .dt-tabs > a {
    flex: none;
    padding: 0 14px;
    min-block-size: 48px;
  }

  .aa .dt-tabs > a.active::before {
    inset-inline: 10px;
  }

  .aa .dt-panel {
    gap: 14px;
    padding: 20px;
  }

  .aa .dt-featsec h2 {
    font-size: 16px;
    line-height: 24px;
  }

  .aa .dt-feats {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .aa .dt-feats li {
    font-size: 14px;
    line-height: 20px;
  }

  .aa .dt-feats i {
    --_size: 20px;
    font-size: 20px;
  }

  /* The Detail tab starts with six features (the design's card); "Baca
     detail lengkap" shows the rest. Only with scripts — without, all shows. */
  html.js .aa .dt-detail:not(.is-open) :is(.dt-about, .dt-specsec, .dt-fitsec, .dt-reqsec) {
    display: none;
  }

  html.js .aa .dt-detail:not(.is-open) .dt-feats li:nth-child(n + 7) {
    display: none;
  }

  html.js .aa .dt-detail:not(.is-open) .md-readall {
    display: inline-flex;
    align-self: flex-start;
    margin-left: -12px;
  }

  .aa .dt-reqs,
  .aa .sup-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .aa .dt-note {
    flex-wrap: wrap;
  }

  .aa .rv-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 20px;
  }

  .aa .rv-item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
  }

  .aa .rv-av {
    width: 40px;
    height: 40px;
  }

  /* The buyer's own review (build step 8d): the phone's tighter card. */
  .aa .rv-mine {
    padding: 16px;
    border-radius: 20px;
  }

  /* Comments (decision 88): replies indented less, "Balas" under them. */
  .aa .cm-replies {
    margin-inline-start: 20px;
    padding-inline-start: 12px;
  }

  .aa .cm-reply {
    margin-inline-start: 0;
  }

  /* The reviews page: the phone's gutters and rhythm. */
  .aa .rv-page {
    gap: 16px;
    padding-block: 16px 32px;
  }

  .aa .rv-pagescore {
    padding: 20px;
  }

  .aa .doc-row {
    flex-wrap: wrap;
  }

  .aa .sup-ticket {
    margin-left: 0;
  }

  /* "Kata pembeli": the band spans the screen; the cards scroll sideways. */
  .aa .dt-tmsec {
    width: auto;
    margin: 0;
  }

  .aa .tm-wrap {
    align-items: stretch;
    gap: 14px;
    padding: 24px 0 22px;
    border-radius: 0;
  }

  .aa .tm-head {
    align-items: flex-start;
    gap: 8px;
    max-width: none;
    padding: 0 16px;
    text-align: start;
  }

  .aa .tm-head .tm-eyebrow {
    height: 28px;
    font-size: 12px;
  }

  .aa .tm-head h2 {
    font-size: 22px;
    line-height: 28px;
  }

  .aa .tm-rating {
    align-self: stretch;
    justify-content: flex-start;
    gap: 4px 8px;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 13px;
    line-height: 18px;
  }

  .aa .tm-rating b {
    font-size: 13px;
  }

  .aa .tm-rating .dt-stars i {
    --_size: 16px;
    font-size: 16px;
  }

  .aa .tm-all {
    margin-left: auto;
  }

  /* The viewer spans the band: swiped, with "3 / 5" on the screenshot and
     dots under it (a few screenshots only) — like the product's gallery. */
  .aa .tm-viewer {
    gap: 12px;
  }

  .aa .tm-stage {
    width: 100%;
  }

  .aa .tm-slide {
    padding: 4px 16px 8px;
  }

  .aa .tm-slide :is(.frame, figcaption) {
    width: 100%;
  }

  .aa .tm-slide .shot {
    max-height: 460px;
  }

  /* "3 / 5" in the chat's bar (on the screenshot it would hide a time). */
  .aa .tm-slide .bar .count {
    flex: none;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--surface-container);
    color: var(--on-surface-variant);
    font-size: 12px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    line-height: 16px;
  }

  .aa .dt-relsec {
    gap: 14px;
    margin-top: 0;
  }

  .aa .dt-relsec h2 {
    font-size: 22px;
    line-height: 28px;
  }

  .aa .dt-related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .aa .dt-related > :nth-child(n + 3) {
    display: none;
  }

  /* The bar's price a little smaller, so a seven-digit price still fits
     beside the cart and "Beli Sekarang". */
  .aa .md-price {
    font-size: 20px;
    line-height: 26px;
  }
}

/* Phones up to 400 px (360–390 px are the common ones): "Beli Sekarang"
   without its bolt, the room a price needs beside it — with it, measured in
   headless Chrome, "Rp 749.000" ran 7 px into the cart at 360 px. */
@media (max-width: 400px) {
  .aa .md-buy {
    padding: 0 16px;
  }

  .aa .md-buy > i {
    display: none;
  }
}

/* ---------- Without JavaScript ---------- */

/* Previous / next need the script; the thumbnails are links and still work. */
html:not(.js) .aa :is(.dt-stage, .tm-stage) .nav {
  display: none;
}

/* ---------- The chosen license's parts ---------- */

/* `hidden` hides the other licenses' lines, whatever display their own rule
   gives them (last in the file: it must win over those rules). */
.aa [data-license][hidden] {
  display: none;
}

/* ---------- Add-ons (decisions 139, 142): #addon and the buy box's notes ---------- */

/* The section between the gallery and the tabs, every size: two rows, each
   kind its own (decision 144) — the premium add-ons first (ticked at
   checkout, or included at Rp 0), then the free bonuses (the cards and
   medals are storefront.css "Add-ons"). */
.aa .dt-addons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  /* "… add-on opsional" in the buy box jumps here: a little below the
     screen's edge (on phones below the top bar: the phones' scroll-padding). */
  scroll-margin-top: 24px;
}

/* One kind's row: its heading, its note, its cards. */
.aa .dt-addons-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The free row stands apart from the premium one above it: a hairline and
   room between them, so the two kinds never read as one list (the owner's
   decision 144). */
.aa .dt-addons-row + .dt-addons-row {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--outline-variant);
  border-radius: 0;
}

/* "Add-on premium" / "Bonus gratis": a small heading after its kind's medal
   (gold or silver). */
.aa .dt-addons-sub {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* "Bisa ditambahkan … saat checkout" close under its heading (the row's
   12 px gap would part them). */
.aa .dt-addons-note {
  margin-top: -6px;
}

/* The buy box: what a purchase includes, under "Yang Anda dapatkan" — a
   premium one's badge in gold's ink, a free one's gift in silver's
   (decision 144). */
.aa .buy-bonus .inc i.buy-premium-ic {
  color: var(--aa-gold-ink);
}

.aa .buy-bonus .inc i.buy-free-ic {
  color: var(--aa-silver-ink);
}

/* "2 add-on premium bisa dipilih saat checkout": a link to #addon. */
.aa .buy-addons {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
}

/* The "add-on premium" line's badge in gold's ink, as the premium kind's. */
.aa .buy-addons-ic {
  --_size: 20px;
  font-size: 20px;
  color: var(--aa-gold-ink);
}

@media (max-width: 600px) {
  .aa .dt-addons {
    margin-top: 0;
    padding: 16px;
  }
}