/* =========================================================
   TAMMIA — halaman produk
   CSS Injector "tammia_redesign_produk", kondisi Request path: /product/*

   Halamannya sudah halaman Commerce sungguhan buatan Bion: galeri swiper,
   chip variasi, form add to cart. Semua itu TIDAK diganti, cuma
   digayakan mengikuti nilai .pd-* di template.

   Peta nama kelas Bion ke template:
     .gallery-main-wrap    -> .pd-main
     .gallery-thumbs-*     -> .pd-thumbs / .pd-thumb
     .tm-product-brand     -> .pd-info .brand-tag
     .field--name-title    -> .pd-info h1
     .product-price-display-> .pd-price
     .harga-normal-coret   -> .pd-price-was
     .variation-chips-label-> .pd-variant-block label
     .variation-chip       -> .pd-variant
     .tm-qty-wrap          -> .qty-stepper
     #edit-submit          -> .btn.btn-peach di .pd-cta-row
   ========================================================= */

/* Judul halaman bawaan Drupal disembunyikan, judul produk sudah ada di
   kolom kanan. */
body #block-tammia-theme-page-title { display: none !important; }

/* ---- Susunan dua kolom ---- */
body .product-layout { gap: 48px !important; align-items: flex-start; }
/* global.css milik Bion mengunci kolom galeri ke 420px dengan !important dan
   tanpa media query, sedangkan semua override HP-nya berhenti di 768px.
   Akibatnya di rentang 769-991px kolom kanan tergencet jadi 204px. Karena
   itu semua aturan di sini perlu !important, dan dipisah per breakpoint. */
@media (min-width: 992px) {
  body .product-layout { flex-wrap: nowrap !important; }
  body .product-gallery-col {
    flex: 0 0 40% !important; max-width: 40% !important;
    width: 40% !important; min-width: 0 !important;
  }
  /* basis 0, bukan auto. Kalau auto, lebar isinya dipakai sebagai basis dan
     kolomnya melompat ke baris berikutnya. */
  body .product-info-col { flex: 1 1 0 !important; max-width: none !important; min-width: 0 !important; }
}
@media (max-width: 991px) {
  body .product-layout { flex-wrap: wrap !important; gap: 32px !important; }
  body .product-gallery-col {
    flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
  }
  body .product-info-col { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
}

/* ---- Galeri ---- */
body .gallery-main-wrap {
  aspect-ratio: 1/1;
  border-radius: 28px !important;
  /* !important perlu: block CSS Override menyuntik <style> inline yang juga
     memakai !important untuk latar abu-abu bawaan galeri. */
  background: linear-gradient(160deg,#fcf0f0,#f8f1e2) !important;
  position: relative; overflow: hidden;
}
body .gallery-main-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
body .gallery-thumbs-wrap { margin-top: 16px; }
body .gallery-thumbs-swiper .swiper-slide img,
body .gallery-thumbs-swiper .swiper-slide > * {
  border-radius: 12px; overflow: hidden;
}
body .gallery-thumbs-swiper .swiper-slide {
  border: 1px solid #e6e2dd; border-radius: 12px; overflow: hidden;
  background: linear-gradient(160deg,#faf9f7,#efedea);
  transition: border-color .2s ease;
}
body .gallery-thumbs-swiper .swiper-slide-thumb-active,
body .gallery-thumbs-swiper .swiper-slide.active { border-color: #e11d25; }
body .gallery-thumb-nav-btn {
  width: 28px !important; height: 28px !important;
  border-radius: 999px !important; border: 1px solid #e6e2dd !important;
  background: rgba(255,255,255,.85) !important; color: #1a1a1a !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}
body .product-gallery-col .wishlist-btn-wrapper { position: absolute; right: 16px; top: 16px; z-index: 3; }
body .product-gallery-col .wishlist-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.9); color: #e11d25;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; padding: 0;
}

/* ---- Brand, judul ---- */
body .tm-product-brand {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #e11d25 !important; text-decoration: none;
  margin-bottom: 14px;
}
body .product-info-col .field--name-title {
  font-family: "Comfortaa", "Poppins", sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: #1a1a1a !important;
  margin: 0 0 18px !important;
}

/* ---- Harga ---- */
body .product-price-display {
  font-family: "Comfortaa", "Poppins", sans-serif !important;
  font-size: 38px !important; font-weight: 500 !important;
  color: #e11d25 !important; line-height: 1 !important;
  display: inline-block; margin: 0 14px 8px 0;
}
body .harga-coret-wrapper { display: inline-flex; align-items: baseline; gap: 12px; }
body .harga-normal-coret {
  font-size: 18px !important; color: #414042 !important;
  text-decoration: line-through !important;
}
body .diskon-badge {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important; letter-spacing: .16em !important; text-transform: uppercase !important;
  background: #e8f5ec !important; color: #2d7548 !important;
  padding: 5px 10px !important; border-radius: 999px !important;
}

/* ---- Chip variasi ---- */
body .product-variation-wrapper { margin: 24px 0; }
body .variation-chips-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: #414042; display: block; margin-bottom: 10px;
}
body .variation-chips { display: flex; gap: 8px; flex-wrap: wrap; }
body .variation-chips > * {
  padding: 10px 18px !important;
  border: 1px solid #e6e2dd !important;
  border-radius: 999px !important;
  background: #fff !important;
  font-size: 13px !important; color: #1a1a1a !important;
  cursor: pointer; transition: all .2s ease;
}
body .variation-chips > .active,
body .variation-chips > .selected,
body .variation-chips > [aria-selected="true"] {
  border-color: #1a1a1a !important; background: #1a1a1a !important; color: #fff !important;
}

/* ---- Jumlah dan tombol Add to cart ---- */
body [data-drupal-selector="edit-quantity-wrapper"] label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: #414042; display: block; margin-bottom: 10px;
}
body .tm-qty-wrap {
  display: inline-flex; align-items: center;
  border: 1px solid #e6e2dd; border-radius: 999px; overflow: hidden; background: #fff;
}
body .tm-qty-btn {
  width: 36px; height: 36px; background: transparent; border: none;
  font-size: 15px; color: #1a1a1a; cursor: pointer; padding: 0;
}
body .tm-qty-btn:hover { background: #faf9f7; }
body .tm-qty-wrap input {
  width: 44px; text-align: center; border: none !important;
  font-family: "JetBrains Mono", monospace; font-size: 13px;
  background: transparent !important; box-shadow: none !important; padding: 0 !important;
  height: 36px;
}
body .commerce-order-item-add-to-cart-form [data-drupal-selector="edit-actions"] { margin-top: 24px; padding: 0; }
body .product-info-col .commerce-order-item-add-to-cart-form [data-drupal-selector="edit-submit"] {
  width: 100%;
  font-family: "Poppins", sans-serif !important; font-weight: 500 !important; font-size: 14px !important;
  padding: 15px 28px !important;
  border-radius: 999px !important;
  background: #e11d25 !important; color: #fff !important; border: 1px solid #e11d25 !important;
  box-shadow: 0 12px 30px -10px rgba(225,29,37,0.45) !important;
  transition: all .3s cubic-bezier(.2,.8,.2,1) !important;
}
body .product-info-col .commerce-order-item-add-to-cart-form [data-drupal-selector="edit-submit"]:hover {
  background: #a22a34 !important; border-color: #a22a34 !important;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(162,42,52,0.55) !important;
}

/* ---- Deskripsi singkat ---- */
body .product-short-description { margin-top: 28px; padding-top: 24px; border-top: 1px solid #e6e2dd; }
body .product-short-description .field__label { display: none !important; }
body .product-short-description .field__item { font-size: 14px; line-height: 1.7; color: #414042; }

/* ---- Blok keterangan di bawah ---- */
body .product-information-col { margin-top: 64px; }
body .product-information-inner {
  background: #ffffff; border: 1px solid #e6e2dd; border-radius: 28px; padding: 36px;
}
body .product-information-header {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid #e6e2dd;
}
body .product-information-icon { color: #e11d25; font-size: 18px; }
body h2.product-information-title {
  font-family: "Comfortaa", "Poppins", sans-serif !important;
  font-size: 20px !important; font-weight: 400 !important;
  color: #1a1a1a !important; margin: 0 !important;
  text-transform: none !important; text-align: left !important;
}
body h2.product-information-title::after,
body h2.product-information-title::before { display: none !important; }
body .product-information-body { font-size: 14px; line-height: 1.75; color: #414042; }
body .product-information-body .field__label {
  font-family: "Comfortaa", "Poppins", sans-serif; font-size: 15px;
  font-weight: 500; color: #1a1a1a; margin-top: 20px; margin-bottom: 8px;
}

@media (max-width: 575px) {
  body .product-information-inner { padding: 24px 20px; border-radius: 20px; }
  body .product-price-display { font-size: 30px !important; }
}


/* ---- Blok jaminan (perks) ----
   Isinya taxonomy Product Perk lewat view product_perk block_1, jadi
   Marshella bisa mengubah tulisan dan ikonnya sendiri lewat
   Structure > Taxonomy > Product Perk. Blocknya ditaruh di region content
   dan dipindahkan ke kolom kanan oleh JS Injector tammia_redesign_produk_js,
   karena region content adanya di bawah, bukan di dalam kolom produk. */
body #block-tammia-theme-productperks { margin-top: 28px; }
/* Grid dipasang di .view-content, bukan di .pd-perks. Opsi wrapper_class
   milik style plugin Unformatted list tidak tersimpan waktu view diimpor,
   jadi lebih aman menargetkan pembungkus bawaan Views. */
body .view-product-perk .view-content { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body .view-product-perk .view-content > div { display: contents; }
/* Kartu ikut tinggi baris. Tanpa ini kartu yang teksnya cuma dua baris
   lebih pendek dari tetangganya yang tiga baris. */
body .view-product-perk .views-field-nothing,
body .view-product-perk .field-content,
body .view-product-perk .pd-perk { height: 100%; }
body .pd-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body .pd-perk {
  display: flex; gap: 12px; align-items: center;
  padding: 16px; background: #faf9f7; border-radius: 12px;
  font-size: 12px; color: #1a1a1a; line-height: 1.35;
}
body .pd-perk i { color: #e11d25; font-size: 18px; flex: 0 0 auto; }
body .pd-perk small { color: #414042; font-size: 11px; }
body .pd-perks .views-row { display: contents; }
/* Template tidak menurunkan .pd-perks jadi satu kolom di HP, jadi di sini
   juga tetap dua kolom. Sudah diukur di 390px: kartu 152px masih cukup
   untuk ikon plus dua baris teks. */


/* ===== tm-rev-deskripsi-header =====
   Kartu Deskripsi Produk: sudutnya membulat 28px, tapi pita judul di
   dalamnya bersudut siku dan menjorok masuk 36px karena padding kartu.
   Akibatnya garis bawah judul berhenti sebelum tepi kartu dan terlihat
   seperti masuk ke dalam, tidak menyatu dengan lengkungan kartunya.

   Perbaikannya: padding dipindah dari kartu ke isinya, pita judul dibuat
   selebar penuh, lalu kartunya diberi overflow hidden supaya sudut pita
   ikut terpotong mengikuti lengkungan 28px itu. Jadi radius pita tidak
   perlu ditebak, otomatis pas. */
body .product-information-inner {
  padding: 0 !important;
  overflow: hidden;
}
body .product-information-header {
  margin: 0 !important;
  padding: 20px 36px !important;
  border-radius: 0 !important;
}
body .product-information-body {
  padding: 28px 36px 36px !important;
}
@media (max-width: 575px) {
  body .product-information-header { padding: 16px 20px !important; }
  body .product-information-body { padding: 20px 20px 24px !important; }
}

/* ===== tm-rev-deskripsi-sudut =====
   Penyebab sudut kanan atas kartu Deskripsi Produk terlihat aneh:
   ADA DUA KOTAK BERTUMPUK di posisi yang sama persis.
     .product-information-col    sudut 12px, latar putih, punya bayangan
     .product-information-inner  sudut 28px, latar putih, punya garis border
   Karena sudut luarnya lebih tumpul, latar putih kotak luar nongol di luar
   lengkungan garis kotak dalam. Kelihatan seperti garisnya tidak menyatu
   dengan latarnya.

   JANGAN diperbaiki dengan menyamakan angka sudut kotak luar. Sudah dicoba
   dan salah: sudut kotak dalam milik Bion berubah jadi 20px di layar kecil
   (breakpointnya antara 560 dan 575), jadi angkanya malah jadi kebalik.

   Yang benar: kotak luar dibuat tidak menggambar apa-apa, lalu bayangannya
   dipindah ke kotak dalam. Dengan begitu cuma ada satu kotak yang tampil
   dan sudutnya selalu ikut aturan Bion, berapa pun nilainya. */
body .product-information-col {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
body .product-information-inner {
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
}


/* ===== tm-rev-chip-variasi =====
   Kotak Pilih Variasi (.chips-list) sudut membulat penuh 999px, tapi chip
   variasi di dalamnya cuma 3px, jadi bentuknya tidak nyambung dengan
   wadahnya. Chip disamakan jadi pil penuh.

   Dipakai 999px, bukan angka pas setengah tinggi chip, supaya tetap pil
   walau tinggi chipnya berubah karena teks panjang atau ukuran layar. */
body .chips-list .var-chip { border-radius: 999px !important; }


/* Wadah chip dihilangkan: tanpa latar, tanpa border, tanpa sudut, tanpa
   padding. Padding kiri 18px plus border 1px itu yang membuat chip masuk
   19px dan tidak sejajar dengan tulisan Pilih Variasi di atasnya. Sekarang
   chip pertama mulai persis di garis yang sama dengan labelnya. */
body .chips-list {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-bottom: 4px;
}


/* ===== tm-rev-id-ajax =====
   Selektor di bagian Jumlah dan Add to cart tadinya memakai id persis
   (#edit-submit, #edit-actions, #edit-quantity-wrapper). Begitu pembeli
   mengganti variasi, Drupal membangun ulang form itu lewat AJAX dan
   memberi id baru yang unik, contohnya edit-submit--04yBfWq4hW0. Selektor
   kita jadi tidak cocok lagi, dan tampilan lama milik theme muncul kembali:
   tombol Add to cart berubah jadi kotak oranye sudut 3px, label Quantity
   kehilangan huruf besarnya.

   Perbaikannya memakai atribut data-drupal-selector, yang sengaja dibuat
   Drupal supaya TETAP SAMA walau idnya berubah. Sudah dibuktikan: sesudah
   ganti variasi id jadi edit-submit--FtSQHA5M2AU tapi data-drupal-selector
   tetap edit-submit.

   Khusus tombolnya, selektor harus panjang. Sempat dicoba cukup
   .button--add-to-cart saja dan itu KALAH, karena ada dua aturan Bion yang
   pakai !important dan lebih spesifik: .product-info-col .btn-primary di
   product-gallery.css, dan .product-info-col .form-submit di blok style
   inline yang selalu dimuat paling akhir. Jadi menang urutan tidak mungkin,
   harus menang spesifisitas.

   JANGAN memakai id persis untuk apa pun di dalam form add to cart. */