/* Komponen halaman Huffaz v2: kepala halaman, kad produk, kedai, produk, tentang, borang, bakul. */

.section {
  padding-block: var(--section-y);
}
.section--tight {
  padding-block: var(--s-12) var(--section-y);
}
.narrow {
  max-width: 48rem;
}
.h-sub {
  margin-bottom: var(--s-8);
  font-size: var(--text-xl);
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-8);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-8);
}
.prose p + p {
  margin-top: var(--s-4);
}
.prose h2 {
  margin-bottom: var(--s-4);
}
.split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.split .lead {
  margin-top: var(--s-4);
}

/* Kepala halaman */
.page-head {
  padding-top: var(--s-12);
}
.page-head h1 {
  max-width: 20ch;
}
.page-head .lead {
  margin-top: var(--s-4);
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.crumbs a {
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--ink);
}
.subnav {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-8);
  flex-wrap: wrap;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  font-weight: 400;
}
.subnav a {
  flex: none;
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
}
.subnav a:hover {
  color: var(--ink);
}
.subnav a[aria-current="page"] {
  background: var(--green-800);
  color: #fff;
}
.next-page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-8);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.next-page a {
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
}

/* Kad produk */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--s-6);
}
.product-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}
.product-card__img {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: var(--s-6);
  background: var(--mineral-100);
  border-radius: var(--radius);
  transition: background 0.25s;
}
/* Imej diletak mutlak dalam kotak 4:5 supaya semua kad sama tinggi, apa pun saiz asal kulit */
.product-card__img img {
  position: absolute;
  inset: var(--s-6);
  width: calc(100% - 2 * var(--s-6));
  height: calc(100% - 2 * var(--s-6));
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgb(16 42 34 / 0.22));
  transition: transform 0.35s var(--ease-out);
}
.product-card a:hover .product-card__img {
  background: var(--mineral-200);
}
.product-card a:hover img {
  transform: translateY(-4px);
}
.badge {
  position: absolute;
  z-index: 1; /* di atas imej kulit (imej juga diletak mutlak) */
  top: var(--s-3);
  left: var(--s-3);
  padding: var(--s-1) var(--s-3);
  border-radius: 999px;
  background: var(--green-800);
  color: var(--brass-300);
  font-size: var(--text-sm);
  font-weight: 600;
}
.product-card__meta {
  padding-top: var(--s-4);
}
.product-card__meta .size {
  margin-top: var(--s-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal-700);
}
.product-card__meta p {
  margin-top: var(--s-1);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.product-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--s-3);
}
.dots {
  display: flex;
  gap: 0.3rem;
}
.dots span {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
}

/* Kedai */
.shop {
  padding-top: var(--s-8);
}
.shop__tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.chip {
  min-height: 2.5rem;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font: 600 var(--text-sm) / 1 var(--font-body);
  cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: var(--green-800);
  color: #fff;
  box-shadow: none;
}
.search input,
.wa-form input,
.wa-form select,
.wa-form textarea,
.qty input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.search {
  min-width: min(100%, 18rem);
}
.empty {
  padding: var(--s-12) 0;
  color: var(--ink-soft);
}
.upcoming,
.pub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--s-6);
}
.pub-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  margin-top: var(--s-8);
}
.upcoming figure,
.pub-grid figure,
.stories figure {
  margin: 0;
}
.upcoming img {
  aspect-ratio: 3 / 4;
  object-fit: contain;
  padding: var(--s-4);
  background: var(--mineral-100);
  border-radius: var(--radius);
}
.pub-grid img,
.stories img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}
.upcoming figcaption,
.pub-grid figcaption,
.stories figcaption {
  display: grid;
  gap: var(--s-1);
  padding-top: var(--s-3);
  font-weight: 600;
}
.upcoming figcaption span,
.stories figcaption {
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.stories figcaption strong {
  color: var(--ink);
  font-size: var(--text-base);
}

/* Produk */
.product {
  padding-top: var(--s-8);
  padding-bottom: var(--section-y);
}
.product__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.product__visual {
  position: sticky;
  top: 6rem;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: clamp(1.5rem, 5vw, 4rem);
  background: var(--mineral-100);
  border-radius: calc(var(--radius) * 1.5);
}
/* Imej mengisi kotak tetap (kotak sticky sudah jadi rujukan kedudukan): tukar warna tidak mengubah saiz/kedudukan kulit */
.product__visual img {
  position: absolute;
  inset: clamp(1.5rem, 5vw, 4rem);
  width: calc(100% - 2 * clamp(1.5rem, 5vw, 4rem));
  height: calc(100% - 2 * clamp(1.5rem, 5vw, 4rem));
  object-fit: contain;
  filter: drop-shadow(0 24px 28px rgb(16 42 34 / 0.25));
}
.product__info .lead {
  margin-top: var(--s-4);
}
.price {
  margin-top: var(--s-6);
  font-size: var(--text-2xl);
  font-weight: 600;
}
.field {
  margin: var(--s-6) 0 0;
  padding: 0;
  border: 0;
}
.field legend {
  margin-bottom: var(--s-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.field legend strong {
  color: var(--ink);
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.swatch {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
  cursor: pointer;
}
.swatch span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--green-800);
}
.pills {
  display: flex;
  gap: var(--s-2);
}
.pill input {
  position: absolute;
  opacity: 0;
}
.pill span {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--s-4);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.pill input:checked + span {
  background: var(--green-800);
  color: #fff;
  box-shadow: none;
}
.pill input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.buy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
}
.qty input {
  width: 5rem;
  text-align: center;
}
.form-result {
  min-height: 1.5rem;
  margin-top: var(--s-3);
  font-size: var(--text-sm);
  color: var(--teal-700);
}
.spec {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-8) 0 var(--s-6);
  padding: var(--s-6) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.spec li::before {
  content: "✓";
  margin-right: var(--s-3);
  color: var(--teal-600);
  font-weight: 600;
}

/* Jalur */
.about-band {
  background: var(--mineral-100);
}
.facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.facts dt {
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.cta-band {
  padding-block: var(--s-16);
  background: var(--green-900);
  color: #fff;
}
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.cta-band h2 {
  max-width: 24ch;
}
.cta-band .eyebrow {
  color: var(--brass-300);
}
.cta-band + .site-footer {
  margin-top: 0;
  border-top: 1px solid rgb(255 255 255 / 0.08);
}

/* Logo rakan kongsi */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.logo-grid li {
  display: grid;
  place-items: center;
  padding: var(--s-2);
}
.logo-grid img {
  width: 100%;
  aspect-ratio: 360 / 220;
  object-fit: contain;
}

/* FAQ */
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  color: var(--teal-600);
  font-size: 1.25rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: "−";
}
.faq details p {
  padding-bottom: var(--s-4);
  color: var(--ink-soft);
}

/* Tempahan */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--s-4);
}
.feature {
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.feature__n {
  display: block;
  margin-bottom: var(--s-4);
  color: var(--brass-500);
  font-weight: 600;
  font-size: var(--text-sm);
}
.feature p {
  margin-top: var(--s-2);
  color: var(--ink-soft);
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  padding-top: var(--s-4);
  border-top: 2px solid var(--green-800);
}
.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: var(--s-2);
  color: var(--teal-700);
  font-weight: 600;
}
.steps p {
  margin-top: var(--s-2);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.contact-mini {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-6);
  font-weight: 600;
}

/* Borang */
.wa-form {
  display: grid;
  gap: var(--s-4);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.5);
}
.wa-form h2 {
  font-size: var(--text-xl);
}
.wa-form label {
  display: grid;
  gap: var(--s-1);
  font-size: var(--text-sm);
  font-weight: 600;
}
.form-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-4);
}
.wa-form .btn {
  justify-self: start;
}
.contact-blocks {
  display: grid;
  gap: var(--s-8);
}
.contact-blocks h2 {
  margin-bottom: var(--s-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.contact-blocks a,
.contact-blocks p {
  display: block;
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
}

/* Tentang */
.video video {
  width: 100%;
  border-radius: calc(var(--radius) * 1.5);
  background: var(--green-900);
}
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
.expertise img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}
.expertise h3 {
  margin-top: var(--s-4);
}
.expertise p {
  margin-top: var(--s-2);
  color: var(--ink-soft);
}
.vision {
  max-width: 50rem;
}
.vision__statement {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.25;
  color: var(--green-800);
  margin-bottom: var(--s-4);
}
.missions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6) var(--s-12);
  margin: 0;
  padding: 0;
  list-style: none;
}
.missions li {
  display: flex;
  gap: var(--s-4);
}
.missions span {
  color: var(--brass-500);
  font-weight: 600;
}
.missions p {
  margin-top: var(--s-2);
  color: var(--ink-soft);
}
.address {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.address figure,
.person {
  margin: 0;
}
.address img,
.person img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--mineral-200);
}
.address figcaption,
.person figcaption {
  display: grid;
  gap: var(--s-1);
  padding-top: var(--s-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.address figcaption strong,
.person figcaption strong {
  color: var(--ink);
  font-size: var(--text-base);
}
.org {
  display: grid;
  gap: var(--s-12);
}
.org__lead {
  display: flex;
  justify-content: center;
}
.person--lead {
  width: min(100%, 17rem);
  text-align: center;
}
.org__team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  padding-top: var(--s-12);
  border-top: 1px solid var(--line);
}
.stories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6);
}

/* Bakul */
.basket {
  width: min(100% - 2rem, 28rem);
  max-height: min(100% - 2rem, 44rem);
  margin: auto 1rem auto auto;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) * 1.5);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px rgb(16 42 34 / 0.45);
}
.basket[open] {
  display: flex;
  flex-direction: column;
}
.basket::backdrop {
  background: rgb(16 42 34 / 0.35);
}
.basket__head,
.basket__foot {
  padding: var(--s-6);
}
.basket__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.basket__head h2 {
  font-size: var(--text-lg);
}
.icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--mineral-100);
}
.basket__body {
  flex: 1;
  overflow: auto;
  padding: 0 var(--s-6);
}
.basket__empty {
  padding: var(--s-8) 0;
  color: var(--ink-soft);
}
.basket__line {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.basket__line img {
  grid-row: span 2;
  object-fit: contain;
}
.basket__line div:nth-child(2) {
  display: grid;
}
.basket__line span {
  color: var(--ink-soft);
}
.basket__qty {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.basket__qty button:not(.link) {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}
.basket__qty .link {
  margin-left: auto;
  font-size: var(--text-sm);
}
.basket__foot {
  border-top: 1px solid var(--line);
}
.basket__total {
  display: flex;
  justify-content: space-between;
  margin: var(--s-4) 0;
  font-size: var(--text-lg);
}

/* ---------- Telefon ---------- */
@media (max-width: 55.99rem) {
  .split,
  .product__grid,
  .address {
    grid-template-columns: 1fr;
  }
  .product__visual {
    position: relative; /* bukan static: imej kulit diletak mutlak di dalamnya */
  }
  .steps,
  .org__team {
    grid-template-columns: repeat(2, 1fr);
  }
  .expertise-grid {
    grid-template-columns: 1fr;
  }
  .address figure {
    max-width: 15rem;
  }
}
@media (max-width: 35.99rem) {
  .missions,
  .stories,
  .form-row,
  .steps {
    grid-template-columns: 1fr;
  }
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
  }
  .product-card__meta p {
    display: none;
  }
  .basket {
    margin: auto 0 0;
    width: 100%;
    max-width: none;
    border-radius: calc(var(--radius) * 1.5) calc(var(--radius) * 1.5) 0 0;
  }
}

/* ---------- Halaman utama v2: bukti, laluan, proses, pasukan, aktiviti ---------- */
.trust-band {
  background: var(--green-900);
  color: #e6efeb;
  padding-block: var(--s-8);
}
.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust li {
  display: grid;
  gap: var(--s-1);
  padding-left: var(--s-4);
  border-left: 2px solid var(--brass-500);
}
.trust strong {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--brass-300);
}
.trust span {
  font-size: var(--text-sm);
  color: inherit;
  opacity: 0.85;
}
.section--tight > .trust {
  padding: var(--s-6);
  background: var(--green-900);
  color: #e6efeb;
  border-radius: calc(var(--radius) * 1.5);
}

.paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.path {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-8) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.5);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.path:hover {
  border-color: var(--teal-600);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.path p {
  color: var(--ink-soft);
}
.path__n {
  color: var(--brass-500);
  font-weight: 600;
  font-size: var(--text-sm);
}
.path h3 {
  font-size: var(--text-xl);
}
.path__go {
  margin-top: auto;
  padding-top: var(--s-4);
  color: var(--teal-700);
  font-weight: 600;
}
.path--dark {
  background: var(--green-900);
  border-color: var(--green-900);
  color: #fff;
}
.path--dark p {
  color: #c9d8d2;
}
.path--dark .path__go {
  color: var(--brass-300);
}

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.process li {
  padding: var(--s-6);
  background: var(--surface);
  border-radius: var(--radius);
  border-top: 3px solid var(--teal-600);
}
.process li:first-child {
  border-top-color: var(--brass-500);
}
.process__n {
  display: block;
  margin-bottom: var(--s-3);
  color: var(--teal-700);
  font-weight: 600;
}
.process p {
  margin-top: var(--s-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.pub-grid--home {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 0;
}
.h-mini {
  margin: var(--s-12) 0 var(--s-4);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.team-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-8);
}
.team-strip .person figcaption {
  font-size: var(--text-sm);
}

.activities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
.activities--home {
  grid-template-columns: repeat(3, 1fr);
}
.activities--list {
  grid-template-columns: repeat(2, 1fr);
}
.activities--list .activity--featured {
  grid-column: 1 / -1;
}
.activity {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
}
/* Semua gambar aktiviti satu nisbah (sama tinggi dalam satu baris), termasuk kad dua gambar */
.activity__img {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: 100%;
  gap: 2px;
  aspect-ratio: 4 / 3;
  overflow: hidden; /* saiz asal imej tidak boleh memanjangkan kotak */
}
.activity__img img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.activities--list .activity--featured .activity__img {
  aspect-ratio: 21 / 9;
}
.activity__body {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-6);
}
.activity__body .eyebrow {
  margin: 0;
}
.activity__body p {
  color: var(--ink-soft);
}

/* Wakaf */
.wakaf {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.wakaf-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.wakaf-opt {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-6);
  background: var(--green-900);
  color: #e6efeb;
  border-radius: calc(var(--radius) * 1.5);
}
.wakaf-opt strong {
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--brass-300);
}
.wakaf-pay {
  margin-top: var(--s-8);
}
.wakaf-pay h2 {
  font-size: var(--text-xl);
}
.wakaf-pay ol {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding-left: 1.2rem;
}
.verse {
  margin: var(--s-8) 0 0;
  padding: var(--s-6);
  border-left: 3px solid var(--brass-500);
  background: var(--mineral-100);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.verse p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.verse cite {
  display: block;
  margin-top: var(--s-2);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.wakaf__poster {
  position: sticky;
  top: 6rem;
  margin: 0;
}
.wakaf__poster img {
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: var(--shadow-card);
}
.spec--grid {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 55.99rem) {
  .trust,
  .process {
    grid-template-columns: repeat(2, 1fr);
  }
  .paths,
  .wakaf,
  .activities,
  .activities--home,
  .activities--list {
    grid-template-columns: 1fr;
  }
  .pub-grid--home {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .wakaf__poster {
    position: static;
    max-width: 26rem;
  }
}
@media (max-width: 35.99rem) {
  .trust,
  .process {
    grid-template-columns: 1fr;
  }
  .team-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Semakan slop (impeccable.style/slop) ---------- */
/* Satu ayat bukti menggantikan jalur metrik besar */
.proof {
  max-width: 62ch;
  padding: var(--s-6) 0;
  font-size: var(--text-lg);
  color: var(--ink);
}
.proof strong {
  color: var(--green-800);
}
/* Meta (saiz, tarikh, tempat) di bawah tajuk, bukan label di atasnya */
.meta {
  margin-top: var(--s-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal-700);
}
.product__info .meta {
  margin-top: var(--s-2);
}
/* Panjang baris selesa untuk teks panjang */
.prose p,
.page-head .lead,
.lead {
  max-width: 68ch;
}
/* Teks badan sekurang-kurangnya 15px */
.process p {
  font-size: var(--text-base);
}
.steps p {
  font-size: var(--text-base);
}
.faq details p {
  max-width: 68ch;
}

/* ---------- Wakaf: satu kad aktiviti ---------- */
.activities--single {
  grid-template-columns: 1fr;
}

/* ---------- Tempahan khas ---------- */
.order-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: var(--s-12) var(--section-y);
}
.order-head h1 {
  max-width: 16ch;
}
.order-head .lead {
  margin-top: var(--s-4);
}
.order-head .proof {
  padding: var(--s-4) 0 0;
  font-size: var(--text-base);
  color: var(--ink-soft);
}
/* Kolaj bukti: grid 2x2 sama saiz; latar putih foto dilebur ke latar lembut */
.collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.collage figure {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--mineral-100);
}
.collage img {
  width: 100%;
  height: 100%;
  padding: var(--s-2) var(--s-2) var(--s-8);
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: scale(1.18); /* foto asal ada ruang putih lebar di sekeliling mushaf */
}
.collage figcaption {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgb(16 42 34 / 0.78);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
}
.order-head__media .fine {
  margin-top: var(--s-3);
}

.custom {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
/* Lima kulit Al-Hafiz bertindih seperti kipas */
.cover-fan {
  display: flex;
  justify-content: center;
  padding: var(--s-8) 8%;
  overflow: hidden; /* kulit yang berputar tidak menolak halaman ke tepi di telefon */
}
.cover-fan img {
  width: 34%;
  height: auto;
  margin-inline: -7%;
  border-radius: 4px;
  box-shadow: 0 18px 30px -12px rgb(16 42 34 / 0.45);
  transform: rotate(calc((var(--i) - 2) * 6deg)) translateY(calc(var(--d) * 1rem));
}
.cover-fan img:nth-child(1) { --i: 0; --d: 1.4; }
.cover-fan img:nth-child(2) { --i: 1; --d: 0.35; z-index: 1; }
.cover-fan img:nth-child(3) { --i: 2; --d: 0; z-index: 2; }
.cover-fan img:nth-child(4) { --i: 3; --d: 0.35; z-index: 1; }
.cover-fan img:nth-child(5) { --i: 4; --d: 1.4; }
.custom__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6) var(--s-8);
  margin: var(--s-8) 0 0;
  padding: 0;
  list-style: none;
}
.custom__list li {
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.custom__list h3 {
  font-size: var(--text-lg);
}
.custom__list p {
  margin-top: var(--s-2);
  color: var(--ink-soft);
}

.band-dark {
  background: var(--green-900);
  color: #e6efeb;
}
.band-dark h2 {
  color: #fff;
}
.kdn {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.kdn__media {
  margin: 0;
}
.kdn__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: calc(var(--radius) * 1.5);
}
.kdn .process {
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-8);
}
.kdn .process li {
  background: rgb(255 255 255 / 0.06);
}
.kdn .process h3 {
  color: #fff;
}
.kdn .process p {
  color: #c2d3cc;
}
.kdn .process__n {
  color: var(--brass-300);
}
.split--form .h-mini {
  margin-top: var(--s-12);
}
.split--form .logo-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--s-4);
}

@media (max-width: 47.99rem) {
  .order-head,
  .custom,
  .kdn,
  .custom__list,
  .kdn .process {
    grid-template-columns: 1fr;
  }
  .order-head {
    padding-top: var(--s-8);
  }
  .kdn__media img {
    aspect-ratio: 16 / 10;
  }
}

/* Nama pasukan: ruang tetap dua baris supaya jawatan sebaris walaupun nama panjang */
.team-strip .person figcaption strong,
.org__team .person figcaption strong {
  min-height: 2lh;
  line-height: 1.35;
}
.team-strip .person figcaption,
.org__team .person figcaption {
  align-content: start;
}
@media (max-width: 47.99rem) {
  .team-strip .person figcaption strong,
  .org__team .person figcaption strong {
    min-height: 3lh; /* lajur sempit: nama terpanjang jadi 3 baris */
  }
}

/* ---------- Skala tipografi (audit saiz fon) ----------
   Hanya 6 saiz: 14 kecil (meta, kapsyen, jawatan) · 16 badan · 18 lead & tajuk kad ·
   24 subtajuk · 40 tajuk seksyen · 64 tajuk halaman. Berat: 400 biasa, 600 tegas. */
.pub-grid figcaption,
.upcoming figcaption {
  font-size: var(--text-base);
}
.person figcaption strong {
  font-size: var(--text-base);
  font-weight: 600;
}
.activity__body h3,
.product-card__meta h3,
.expertise h3,
.custom__list h3 {
  font-size: var(--text-lg);
}
.activity__body p:not(.meta),
.product-card__meta p:not(.size) {
  font-size: var(--text-base);
}

/* ---------- Halaman produk padat: maklumat utama muat satu skrin ---------- */
.product {
  padding-top: var(--s-6);
}
.product__info h1 {
  font-size: var(--text-2xl);
}
.product__info .lead {
  margin-top: var(--s-3);
}
.product__visual {
  max-height: calc(100svh - 10rem);
  aspect-ratio: auto;
  height: min(calc(100svh - 10rem), 36rem);
}
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-4);
  font-size: var(--text-xl);
}
.price .fine {
  margin: 0;
  font-weight: 400;
}
.options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-8);
  margin-top: var(--s-6);
}
.options .field {
  margin: 0;
}
.buy {
  margin-top: var(--s-6);
}
.form-result:empty {
  display: none;
}
.spec {
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2) var(--s-6);
  margin: var(--s-6) 0 var(--s-4);
  padding-top: var(--s-4);
  font-size: var(--text-sm);
}
@media (max-width: 47.99rem) {
  .product__visual {
    height: auto;
    aspect-ratio: 1;
  }
  .spec {
    grid-template-columns: 1fr;
  }
}

/* Spesifikasi produk: jadual dua lajur yang sama untuk setiap mushaf */
.spec-table {
  display: grid;
  margin: var(--s-6) 0 var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
}
.spec-table div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--s-4);
  padding-block: 0.375rem;
  border-bottom: 1px solid var(--line);
}
.spec-table dt {
  color: var(--ink-soft);
}
.spec-table dd {
  margin: 0;
  color: var(--ink);
}

/* ---------- Tentang kami (hab + sub-halaman) ---------- */
.about-head {
  padding-top: var(--s-8);
}
.about-head h1 {
  max-width: 22ch;
}
.about-head .lead {
  margin-top: var(--s-4);
}
.about-head--media {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-bottom: var(--s-8);
}
.about-head--media h1 {
  font-size: var(--text-2xl);
  max-width: 20ch;
}
.about-head__media .video {
  overflow: hidden;
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: var(--shadow-card);
}
.about-head__media .fine {
  margin-top: var(--s-2);
}
.subnav {
  margin-top: var(--s-6);
}

/* Fakta ringkas dalam satu baris (bukan metrik besar) */
.facts--row {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  padding-block: var(--s-6) 0;
}
.facts--row div {
  padding-left: 0;
  border-left: 0;
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}

/* Kepakaran: imej di atas, teks rapat */
.expertise-grid {
  margin-top: var(--s-8);
}

/* Jalur visi gelap */
.vision-band {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.vision-band__statement {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.25;
  text-wrap: balance;
}
.band-dark .vision-band__statement {
  color: #fff;
}
.band-dark .vision-band p {
  color: #c2d3cc;
}
.link--light {
  display: inline-block;
  margin-top: var(--s-4);
  color: var(--brass-300);
}
.about-band .logo-grid,
.section .team-strip,
.about-band .activities,
.section .activities {
  margin-top: var(--s-8);
}

/* Visi & misi dalam satu seksyen */
.vm {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.vm__vision {
  position: sticky;
  top: 7rem;
  padding: var(--s-8);
  background: var(--green-900);
  color: #c2d3cc;
  border-radius: calc(var(--radius) * 1.5);
}
.vm__vision .h-sub {
  color: var(--brass-300);
}
.vm__vision .vision-band__statement {
  color: #fff;
  margin-bottom: var(--s-4);
}
.vm .missions {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--s-4);
}
.vm .missions li {
  display: block;
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
}

/* Organisasi: pengerusi ditonjolkan mendatar */
.chair {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.chair img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: calc(var(--radius) * 1.5);
  background: var(--mineral-200);
}
.chair h2 {
  margin-top: var(--s-1);
  font-size: var(--text-2xl);
}
.chair blockquote {
  max-width: 62ch;
  margin: var(--s-6) 0 var(--s-4);
  padding-left: var(--s-6);
  border-left: 2px solid var(--brass-500);
  font-size: var(--text-lg);
  color: var(--ink-soft);
}
.about-band .org__team {
  margin-top: var(--s-8);
  padding-top: 0;
}

/* Kerjasama: panel logo padat */
.logo-panel {
  padding: var(--s-8);
  background: var(--surface);
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: var(--shadow-card);
}
.logo-panel__count {
  margin-bottom: var(--s-4);
  color: var(--ink-soft);
}
.logo-panel__count strong {
  color: var(--green-800);
  font-size: var(--text-xl);
}
.logo-panel .logo-grid {
  grid-template-columns: repeat(6, 1fr);
}
.activities--two {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 47.99rem) {
  .about-head--media,
  .vision-band,
  .vm,
  .chair,
  .facts--row,
  .activities--two {
    grid-template-columns: 1fr;
  }
  .facts--row {
    grid-template-columns: 1fr 1fr;
  }
  .vm__vision {
    position: static;
  }
  .chair img {
    max-width: 14rem;
  }
  .logo-panel {
    padding: var(--s-4);
  }
  .logo-panel .logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.facts--row {
  border-top: 0;
}
.facts--row div {
  display: grid;
  gap: var(--s-1);
  border-bottom: 0;
}
.facts--row dd {
  text-align: left;
}

/* Produk: spesifikasi 2 lajur + ajakan tempahan khas dalam lajur maklumat (tanpa scroll) */
.spec-table {
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s-6);
  margin: var(--s-6) 0 0;
}
.spec-table div {
  grid-template-columns: 6rem 1fr;
}
.spec-table div:has(dd:only-child) {
  grid-column: auto;
}
.spec-table div:nth-child(2) {
  grid-column: 1 / -1; /* "Isi" boleh panjang: satu baris penuh */
  grid-row: 3;
}
.custom-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--green-900);
  border-radius: var(--radius);
  color: #fff;
  font-weight: 600;
}
.custom-cta p {
  flex: 1 1 16rem;
  margin: 0;
}
.custom-cta .btn {
  background: var(--brass-300);
  color: var(--green-900);
}
.custom-cta .btn:hover {
  background: #e6cc93;
}
@media (max-width: 47.99rem) {
  .spec-table {
    grid-template-columns: 1fr;
  }
  .spec-table div:nth-child(2) {
    grid-row: auto;
  }
}

/* ---------- Kad kedai: saiz jelas, harga menonjol, butang beli terus ---------- */
.product-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-3) var(--s-3) var(--s-4);
  background: var(--surface);
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: var(--shadow-card);
}
.product-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.product-card__link h3 {
  margin-top: var(--s-4);
  padding-inline: var(--s-2);
  font-size: var(--text-base);
}
.product-card__tag {
  margin-top: var(--s-1);
  padding-inline: var(--s-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.product-card__link:hover .product-card__img {
  background: var(--mineral-200);
}
.product-card__link:hover img {
  transform: translateY(-4px);
}
/* Label saiz di atas gambar: huruf besar + ukuran sebenar */
.size-tag {
  position: absolute;
  z-index: 1;
  top: var(--s-3);
  left: var(--s-3);
  display: grid;
  padding: var(--s-1) var(--s-3);
  background: rgb(255 255 255 / 0.92);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(16 42 34 / 0.12);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.2;
}
.size-tag strong {
  color: var(--green-800);
  font-size: var(--text-base);
}
.product-card .badge {
  left: auto;
  right: var(--s-3);
}
.product-card__buy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding: var(--s-4) var(--s-2) 0;
}
.product-card__price {
  display: grid;
  margin: 0;
}
.product-card__price strong {
  font-size: var(--text-xl);
  color: var(--ink);
}
.product-card__price span {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.product-card__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-inline: var(--s-2);
}
.product-card__actions .btn {
  justify-content: center;
  padding-inline: var(--s-4);
}
.product-card__actions .btn.is-added {
  background: var(--green-800);
}
.product-card__buy .link {
  font-size: var(--text-sm);
  white-space: nowrap;
}
.product-card__add {
  justify-content: center;
  margin: var(--s-4) var(--s-2) 0;
}
.product-card__add.is-added {
  background: var(--green-800);
}
/* Ruang untuk label saiz di atas kulit (tidak menutup bucu kulit) */
.product-card .product-card__img img {
  inset: 3.5rem var(--s-6) var(--s-4);
  height: calc(100% - 3.5rem - var(--s-4));
}
/* Telefon: kad boleh mengecil dalam grid 2 lajur */
.product-card {
  min-width: 0;
}
@media (max-width: 47.99rem) {
  .product-card__buy {
    flex-wrap: wrap;
  }
  .product-card__add {
    padding-inline: var(--s-2);
    font-size: var(--text-sm);
  }
  .size-tag {
    top: var(--s-2);
    left: var(--s-2);
    padding: 0.125rem var(--s-2);
  }
}

/* Gambar produk tetap di tempatnya (tidak sticky mengikut scroll) */
.product__visual {
  position: relative;
  top: auto;
}
/* Kulit kedai: label saiz kecil sahaja, imej kembali hampir penuh */
.product-card .product-card__img img {
  inset: 2.75rem var(--s-6) var(--s-4);
  height: calc(100% - 2.75rem - var(--s-4));
}
/* Pautan "Lihat setiap panduan" tidak melekat pada kotak tempahan khas */
.product__info > .link {
  display: inline-block;
  margin-top: var(--s-4);
}

/* ==========================================================================
   Kedai v3 (rujukan katalog e-dagang): sidebar penapis + grid 3 lajur + kad ringkas
   ========================================================================== */
.shop {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-top: var(--s-8);
}
.shop__main {
  min-width: 0;
}
.shop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.shop__head h1 {
  font-size: var(--text-2xl);
}
.shop__count {
  margin-top: var(--s-1);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.shop__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
}
.shop__tools input,
.shop__tools select {
  min-height: 2.75rem;
  padding: 0 var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink);
}
.shop__tools input {
  width: 15rem;
}
.shop__note {
  margin-top: var(--s-8);
}

/* Sidebar penapis */
.filters {
  position: sticky;
  top: 6rem;
}
.filters summary {
  display: none;
}
.filters__body fieldset {
  margin: 0;
  padding: var(--s-4) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.filters__body fieldset:first-child {
  padding-top: 0;
}
.filters__body legend {
  margin-bottom: var(--s-2);
  font-weight: 600;
}
.check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-block: 0.3rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  cursor: pointer;
}
.check input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--teal-600);
}
.check small {
  font-size: inherit;
  color: var(--ink-soft);
  opacity: 0.7;
}
.check i {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
}
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s-2);
}
.filters__body .btn {
  margin-top: var(--s-6);
  justify-content: center;
}

/* Cip penapis aktif */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.active-filters:empty {
  display: none;
}
.chip--active {
  min-height: 2rem;
  font-size: var(--text-sm);
}
.chip--active::after {
  content: "×";
  margin-left: var(--s-2);
}

/* Grid & kad ringkas */
.product-grid--shop {
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--s-6);
}
.product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.product-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-card);
}
.product-card .product-card__img {
  border-radius: 0;
  aspect-ratio: 1;
  background: var(--mineral-100);
}
.product-card .product-card__img img {
  inset: var(--s-6);
  height: calc(100% - 2 * var(--s-6));
  width: calc(100% - 2 * var(--s-6));
}
.product-card .badge {
  left: var(--s-3);
  right: auto;
}
.product-card__link h3 {
  margin-top: 0;
  padding: var(--s-4) var(--s-4) 0;
  font-size: var(--text-base);
}
.product-card__meta {
  margin: var(--s-1) 0 0;
  padding: 0 var(--s-4);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding: var(--s-3) var(--s-4) var(--s-4);
}
.product-card__foot strong {
  font-size: var(--text-base);
}
.cart-btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--teal-600);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.cart-btn:hover {
  background: var(--teal-700);
}
.cart-btn:active {
  transform: scale(0.94);
}
.cart-btn.is-added {
  background: var(--green-800);
}

@media (max-width: 63.99rem) {
  .product-grid--shop {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 47.99rem) {
  .shop {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .filters {
    position: static;
    order: 2;
  }
  .shop__main {
    display: contents;
  }
  .shop__main > .crumbs,
  .shop__head {
    order: 1;
  }
  .active-filters { order: 3; }
  .product-grid--shop { order: 4; gap: var(--s-3); }
  .shop__main > .empty,
  .shop__note { order: 5; }
  .filters summary {
    display: flex;
    justify-content: center;
    gap: var(--s-2);
    min-height: 2.75rem;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font-weight: 600;
    cursor: pointer;
  }
  .filters[open] .filters__body {
    margin-top: var(--s-4);
  }
  .shop__tools,
  .shop__tools label,
  .shop__tools input,
  .shop__tools select {
    width: 100%;
  }
  .product-card__link h3,
  .product-card__meta {
    padding-inline: var(--s-3);
  }
  .product-card__foot {
    padding: var(--s-2) var(--s-3) var(--s-3);
  }
}

/* ---------- Hubungi: kad hubungan 2x2 + borang, FAQ dua lajur ---------- */
.contact-head {
  padding-top: var(--s-8);
}
.contact-head .lead {
  max-width: 52ch;
  margin-top: var(--s-4);
}
.contact-head .actions {
  margin-top: var(--s-6);
}
.contact {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: var(--s-12) var(--section-y);
}
.contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.contact-card {
  display: grid;
  align-content: start;
  gap: var(--s-1);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.5);
}
.contact-card svg {
  margin-bottom: var(--s-3);
  color: var(--teal-600);
}
.contact-card h2 {
  margin-bottom: var(--s-1);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-soft);
}
.contact-card a,
.contact-card p {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.contact-card a:hover {
  color: var(--teal-700);
}
.contact .wa-form {
  margin: 0;
}
.faq-split {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.faq-split .lead {
  margin-top: var(--s-4);
}
.privacy-note {
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.5);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.privacy-note h2 {
  margin-bottom: var(--s-2);
  font-size: var(--text-base);
  color: var(--ink);
}
.privacy-note p {
  max-width: none;
}
@media (max-width: 47.99rem) {
  .contact,
  .faq-split {
    grid-template-columns: 1fr;
  }
  .contact {
    padding-top: var(--s-8);
  }
  .contact-card {
    padding: var(--s-4);
  }
}
@media (max-width: 26rem) {
  .contact-cards {
    grid-template-columns: 1fr;
  }
}

/* Kedai: carian + susunan sebaris dengan tajuk; penapis lebih rapat */
.shop {
  grid-template-columns: 16rem 1fr;
}
.shop__head {
  align-items: center;
}
.shop__tools {
  flex-wrap: nowrap;
  align-items: center;
}
.shop__tools .search {
  min-width: 0;
}
.shop__tools input {
  width: 17rem;
}
.shop__tools select {
  width: auto;
  padding-right: var(--s-8);
}
.filters__body legend {
  float: left;
  width: 100%;
  margin-bottom: var(--s-2);
  padding: 0;
}
.filters__body legend + * {
  clear: both;
}
.filters__body fieldset {
  padding-block: var(--s-4);
}
.check-grid {
  grid-template-columns: 1fr;
}
@media (max-width: 63.99rem) {
  .shop__tools {
    flex-wrap: wrap;
  }
}
/* Skrin lebar: 4 lajur seperti katalog e-dagang */
@media (min-width: 90rem) {
  .product-grid--shop {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 47.99rem) {
  .shop {
    grid-template-columns: 1fr;
  }
  .shop__tools,
  .shop__tools label,
  .shop__tools input,
  .shop__tools select {
    width: 100%;
  }
}

/* Kad: saiz sebagai label butang + pilihan warna boleh diklik */
.product-card__link h3 {
  padding-bottom: 0;
}
.product-card__opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4) 0;
}
.size-chip {
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem;
  height: 1.75rem;
  padding: 0 var(--s-2);
  border: 1px solid var(--green-800);
  border-radius: 999px;
  color: var(--green-800);
  font-size: var(--text-sm);
  font-weight: 600;
}
.card-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.card-swatch {
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.card-swatch:hover {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15), 0 0 0 2px var(--surface), 0 0 0 3px var(--line);
}
.card-swatch[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15), 0 0 0 2px var(--surface), 0 0 0 3.5px var(--green-800);
}
.product-card__finish {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
@media (max-width: 47.99rem) {
  .product-card__opts {
    padding-inline: var(--s-3);
  }
  .card-swatch {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Pilihan kad lebih jelas: label saiz padu, bulatan warna 28px, nama warna terpilih */
.product-card__opts {
  gap: var(--s-2) var(--s-3);
  padding-top: var(--s-3);
}
.size-chip {
  min-width: 2.75rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--green-800);
  color: #fff;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}
.card-swatches {
  gap: 0.5rem;
}
.card-swatch {
  width: 1.75rem;
  height: 1.75rem;
}
.card-swatch[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15), 0 0 0 2px var(--surface), 0 0 0 4px var(--green-800);
}
.card-colour {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.product-card__finish {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
@media (max-width: 47.99rem) {
  .card-swatch {
    width: 1.625rem;
    height: 1.625rem;
  }
  .card-colour {
    width: 100%;
  }
}
/* Nama + label saiz sebaris; baris warna sentiasa di bawahnya */
.product-card__title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) 0;
}
.product-card__title h3 {
  padding: 0;
  font-size: var(--text-base);
}
.product-card__title .size-chip {
  flex: none;
}
.product-card__opts {
  flex-wrap: nowrap;
}
.card-swatches {
  flex-wrap: nowrap;
}
@media (max-width: 47.99rem) {
  .product-card__title {
    padding: var(--s-3) var(--s-3) 0;
  }
  .product-card__opts {
    flex-wrap: wrap;
  }
  .card-swatches {
    flex-wrap: wrap;
  }
}
.product-card__opts {
  flex-wrap: wrap; /* nama warna turun ke baris bawah bila bulatan banyak; bulatan kekal sebaris */
}

/* Kumpulan penapis boleh dilipat */
.filter-group {
  border-bottom: 1px solid var(--line);
}
.filter-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-4);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.filter-group summary::-webkit-details-marker {
  display: none;
}
.filter-group summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.25rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s var(--ease-out);
}
.filter-group[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
.filter-group:first-child summary {
  padding-top: 0;
}
.filter-group__body {
  padding-bottom: var(--s-4);
}

/* Hierarki kad: gambar, nama & harga utama; saiz, warna & troli sekunder (kecil) */
.product-card__title h3 {
  font-weight: 600;
}
.size-chip,
.product-card__title .size-chip {
  min-width: 0;
  height: 1.5rem;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  background: var(--mineral-100);
  color: var(--green-800);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
}
.product-card__opts {
  padding-top: var(--s-2);
}
.card-swatches {
  gap: 0.375rem;
}
.card-swatch {
  width: 1rem;
  height: 1rem;
}
.card-swatch:hover {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15), 0 0 0 2px var(--surface), 0 0 0 3px var(--line);
}
.card-swatch[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15), 0 0 0 2px var(--surface), 0 0 0 3px var(--green-800);
}
.card-colour {
  display: none; /* nama warna ada pada tooltip bulatan; kad kekal ringkas */
}
.product-card__foot strong {
  font-size: var(--text-base);
  font-weight: 600;
}
.cart-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
}
.cart-btn svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 47.99rem) {
  .card-swatch {
    width: 1rem;
    height: 1rem;
  }
  .cart-btn {
    width: 2.5rem; /* sasaran sentuh selesa di telefon */
    height: 2.5rem;
  }
}
.product-card__title h3 {
  min-width: 0;
  overflow-wrap: anywhere; /* nama panjang (Muhammadiah) turun baris di kad sempit */
}

/* Notis "ditambah ke bakul" */
.toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  max-width: calc(100% - 2 * var(--gutter));
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-6);
  background: var(--green-900);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.35);
  font-size: var(--text-sm);
  opacity: 0;
  transform: translate(-50%, 1rem);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.3s var(--ease-out);
}
.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.toast .link {
  flex: none;
  color: var(--brass-300);
}
.active-filters .link {
  font-size: var(--text-sm);
}
@media (max-width: 47.99rem) {
  .cart-btn {
    width: 2.75rem; /* 44px: sasaran sentuh minimum */
    height: 2.75rem;
  }
}

/* ---------- Gerakan (js/motion.js) ---------- */
/* Marquee logo rakan: dua senarai sama bergerak bersama untuk gelung tanpa sambungan */
.marquee {
  display: flex;
  overflow: hidden;
  margin-top: var(--s-6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--s-8);
  margin: 0;
  padding: 0 var(--s-8) 0 0;
  list-style: none;
}
.marquee__track li {
  flex: none;
  width: 8.5rem;
}
.marquee img {
  width: 100%;
  aspect-ratio: 360 / 220;
  object-fit: contain;
}
[data-count] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (prefers-reduced-motion: no-preference) {
  .marquee__track {
    animation: marquee 70s linear infinite;
  }
  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track {
    animation-play-state: paused;
  }

  .site-header {
    transition: transform 0.35s var(--ease-out);
  }
  .site-header.is-hidden {
    transform: translateY(-100%);
  }

  .reveal {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s var(--ease-out) var(--reveal-delay, 0ms), transform 0.6s var(--ease-out) var(--reveal-delay, 0ms);
  }
}
@keyframes marquee {
  to { transform: translateX(-100%); }
}

/* Kurang gerakan: logo dipapar sebagai grid biasa */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee__track {
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-4) var(--s-6);
    padding: 0;
  }
  .marquee__track[aria-hidden="true"] {
    display: none;
  }
}
@media (max-width: 47.99rem) {
  .marquee__track {
    gap: var(--s-6);
    padding-right: var(--s-6);
  }
  .marquee__track li {
    width: 6.5rem;
  }
}

/* ---------- Produk: jaminan, spesifikasi KDN/ISBN/berat, bar beli telefon ---------- */
.guarantees {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.guarantees li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.guarantees svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--green-800);
}
.spec-table div:nth-child(2) {
  grid-column: auto;
  grid-row: auto;
}
.spec-table div.wide {
  grid-column: 1 / -1;
}
.spec-table dd.pending {
  color: var(--ink-soft);
  font-style: italic;
}

.buybar {
  display: none;
}
@media (max-width: 47.99rem) {
  .buybar:not([hidden]) {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
    background: rgb(248 250 248 / 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.3s var(--ease-out), visibility 0s 0.3s;
  }
  .buybar.is-on {
    transform: none;
    visibility: visible;
    transition: transform 0.3s var(--ease-out);
  }
  .buybar__info {
    display: grid;
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
  }
  .buybar__info strong,
  .buybar__info > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .buybar__info > span {
    color: var(--ink-soft);
  }
  .buybar .btn {
    flex: none;
    min-height: 2.75rem;
  }
  body.has-buybar .site-footer {
    padding-bottom: 5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .buybar:not([hidden]),
  .buybar.is-on {
    transition: none;
  }
}

/* ---------- Bakul: panel terbuka dari butang bakul di header ---------- */
.basket {
  position: fixed;
  inset: var(--basket-top, 4.75rem) var(--basket-right, 1rem) auto auto;
  z-index: 50;
  width: min(100vw - 1rem, 24rem);
  max-height: calc(100svh - var(--basket-top, 4.75rem) - 1rem);
  margin: 0;
  overflow: visible;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -24px rgb(16 42 34 / 0.45);
}
.basket::before {
  /* Anak panah ke butang bakul */
  content: "";
  position: absolute;
  top: -0.45rem;
  right: var(--caret-right, 1rem);
  width: 0.875rem;
  height: 0.875rem;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  transform: rotate(45deg);
}
.basket__head {
  padding-block: var(--s-4);
}
.basket__body {
  min-height: 0;
}
.basket__foot {
  padding-block: var(--s-4);
}
@media (prefers-reduced-motion: no-preference) {
  .basket[open] {
    animation: basket-in 0.2s var(--ease-out);
  }
}
@keyframes basket-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
}
@media (max-width: 47.99rem) {
  .basket {
    inset: var(--basket-top, 4.75rem) 0.5rem auto;
    width: auto;
    max-width: none;
    margin: 0;
    border-radius: calc(var(--radius) * 1.5);
  }
}