/* ==========================================================================
   AWA SPORTS — RESKIN OVERRIDE
   Tempel di WordPress: Appearance > Customize > Additional CSS
   (atau ke style.css tema anak awa-child)

   Aturan yang dipegang berkas ini:
   - Tidak ada satu kata pun yang ditambah, dihapus, atau diubah.
   - Tidak menyentuh berkas PHP. Semua lewat selector yang sudah ada.
   - Tidak memakai `content:` untuk memunculkan kata baru. Hanya angka
     dekoratif dari counter, itu pun bisa dimatikan di satu tempat.

   Struktur:
     0. Token
     1. Dasar & tipografi
     2. Header
     3. Hero beranda
     4. Kartu kategori
     5. Band Custom Kit
     6. Marquee partner
     7. Halaman Custom Kit
     8. Shop (arsip produk)
     9. Halaman produk
    10. Footer
    11. Tombol & fokus
    12. Reduced motion
   ========================================================================== */


/* ============================ 0. TOKEN ============================ */
:root{
  --awa-paper:#F5F4EF;
  --awa-paper-2:#EFEDE6;
  --awa-card:#FFFFFF;
  --awa-ink:#0E100F;
  --awa-ink-2:#3A3F3C;
  --awa-ink-3:#797F7B;
  --awa-line:rgba(14,16,15,.13);
  --awa-line-soft:rgba(14,16,15,.07);

  --awa-green:#12A150;
  --awa-forest:#0D1512;

  --awa-ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --awa-ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);

  --awa-shadow-1:0 1px 2px rgba(14,16,15,.05), 0 8px 24px -12px rgba(14,16,15,.18);
  --awa-shadow-2:0 2px 6px rgba(14,16,15,.06), 0 24px 60px -28px rgba(14,16,15,.30);
}


/* ====================== 1. DASAR & TIPOGRAFI ====================== */
/* Muat font di Customize > Additional CSS paling atas, atau enqueue di
   functions.php tema anak. Kalau tidak mau tambah request, hapus @import
   dan sistem akan jatuh ke font bawaan. */
/* Font Archivo + Instrument Serif di-enqueue via functions.php (awa-fonts) — jangan tambah @import di sini. */

body{
  background:var(--awa-paper);
  color:var(--awa-ink);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,
.woocommerce-loop-product__title,
.ck-head span{
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:.96;
}

/* Kontras editorial: satu frasa di tiap judul jatuh ke serif italic.
   Hanya menyentuh span yang MEMANG sudah ada di markup (span.g). */
.kit h2 span.g,
.ck-hero-txt h1 span,
.ck-cta h2 span{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-weight:400;
  text-transform:none;
  letter-spacing:-.01em;
}

.eyebrow,
.pt-trustlbl,
.ck-tape{
  font-size:11px !important;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--awa-ink-3);
}

/* Angka apa pun yang berubah tidak boleh goyang lebarnya */
.price, .amount, .r-box b, .r-row span:first-child,
.ck-grid-2 table td, .ck-grid-2 table th{
  font-variant-numeric:tabular-nums;
}


/* ============================ 2. HEADER =========================== */
header.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--awa-paper) 78%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid var(--awa-line-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  transition:box-shadow 240ms var(--awa-ease-out), border-color 240ms ease;
}
header.nav .nav-inner{min-height:72px}

header.nav .nav-links a{
  position:relative;
  font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--awa-ink-2);
  padding-block:10px;
  transition:color 180ms ease;
}
/* Garis bawah tumbuh dari kiri, bukan muncul begitu saja */
header.nav .nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:4px; height:1.5px;
  background:var(--awa-green);
  transform:scaleX(0); transform-origin:left;
  transition:transform 220ms var(--awa-ease-out);
}
@media (hover:hover) and (pointer:fine){
  header.nav .nav-links a:hover{color:var(--awa-ink)}
  header.nav .nav-links a:hover::after{transform:scaleX(1)}
}

header.nav .nav-tools button,
header.nav .nav-tools .cart{
  min-width:44px; min-height:44px;
  border-radius:50%;
  transition:background-color 180ms ease, transform 160ms var(--awa-ease-out);
}
header.nav .nav-tools button:active,
header.nav .nav-tools .cart:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  header.nav .nav-tools button:hover,
  header.nav .nav-tools .cart:hover{background:rgba(14,16,15,.06)}
}
header.nav .cart .b{
  background:var(--awa-green); color:#fff;
  font-size:10px; font-weight:700;
}


/* ========================= 3. HERO BERANDA ========================
   Perubahan terbesar ada di sini, dan tidak menambah satu kata pun.

   Judul H1 sudah ADA di halaman, hanya disembunyikan lewat class
   .awa-sr (position absolute, clip 1x1px) sehingga cuma terbaca
   pembaca layar. Blok di bawah ini membuatnya terlihat.

   Kalau kamu memang sengaja menyembunyikannya, hapus blok ini saja,
   sisa berkas tetap jalan.
   ================================================================= */
.herolite{
  position:relative;
  border-bottom:1px solid var(--awa-line);
  padding-block:clamp(48px,7vw,104px) clamp(40px,5vw,72px);
  background-image:linear-gradient(90deg, var(--awa-paper) 42%, rgba(245,244,239,0) 78%),
                   url('/toko/wp-content/themes/awa-child/cat/cat-sportswear.jpg');
  background-size:auto, 46% auto;
  background-position:center, right clamp(24px,4vw,72px) center; /* #13: gambar ikut ritme kontainer, tidak menempel tepi viewport */
  background-repeat:no-repeat, no-repeat;
}
/* Tema memusatkan isi hero. Editorial menuntut rata kiri. */
.herolite .wrap{max-width:1440px; text-align:left !important}
.herolite .hero-cta{justify-content:flex-start !important; margin-left:0 !important; margin-right:auto !important}
.herolite .hero-head{margin-left:0; margin-right:0}

/* Tema memasang .awa-sr dengan !important, jadi override ini harus !important
   juga. white-space:nowrap wajib dinetralkan, kalau tidak judul jadi satu baris
   panjang dan menabrak tombol. */
/* Keputusan owner 2026-08-15 (review #1): dua peran, dua kalimat.
   H1 string SEO kembali TERSEMBUNYI (biarkan .awa-sr bawaan tema bekerja),
   headline visual utk manusia ada di p.hero-head (isi baru yang di-ACC owner). */
.herolite .hero-head{
  margin:clamp(20px,3vw,40px) 0 0;
  max-width:18ch;
  font-size:clamp(38px,5.9vw,84px);
  line-height:.94;
  font-weight:800; text-transform:uppercase; letter-spacing:-.03em;
  text-wrap:balance;
}
.herolite .hero-head em{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:-.01em;
}
.herolite .eyebrow{display:flex; align-items:center; justify-content:flex-start; gap:14px; margin:0 !important}
.herolite .eyebrow::before{
  content:''; width:64px; height:1px; background:var(--awa-ink); opacity:.35; flex:none;
}
.herolite .hero-cta{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:clamp(26px,3.4vw,44px);
}
@media (max-width:860px){
  .herolite{background-image:none}
  .herolite .hero-head{max-width:none}
}


/* ======================= 4. KARTU KATEGORI =======================
   Aslinya teks menumpuk di atas foto dengan scrim gelap. Versi ini
   menurunkan teks ke bawah foto supaya terbaca seperti katalog.
   ================================================================= */
#cats .lineup{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.6vw,24px);
  counter-reset:awacat;
}
#cats .lcard{
  display:flex; flex-direction:column;
  counter-increment:awacat;
  background:none; border:0; padding:0;
  min-height:0; height:auto;
}
/* Aslinya .lphoto position:absolute inset:0 supaya teks bisa menumpang di
   atasnya. Dikembalikan ke aliran normal agar teks turun ke bawah foto. */
#cats .lcard .lphoto{
  position:static !important; inset:auto !important;
  aspect-ratio:4/5; width:100%; height:auto; object-fit:cover;
  border-radius:2px; background:var(--awa-paper-2);
  box-shadow:var(--awa-shadow-1);
  transition:transform 480ms var(--awa-ease-out), box-shadow 300ms var(--awa-ease-out);
}
/* Scrim tidak dipakai lagi; dipakai ulang sebagai nomor urut katalog */
#cats .lcard .lscrim{
  position:absolute; top:12px; left:12px; inset:12px auto auto 12px;
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.92);
  display:grid; place-items:center;
  font-size:10px; font-weight:700; color:var(--awa-ink);
}
#cats .lcard .lscrim::after{content:'0' counter(awacat)}
#cats .lcard{position:relative}

#cats .lcard h3{
  margin:16px 0 0;
  font-size:clamp(15px,1.5vw,20px);
  color:var(--awa-ink);
}
#cats .lcard p{
  margin:5px 0 0;
  font-size:12.5px; color:var(--awa-ink-3);
}
#cats .lcard .cbtn{
  position:static;
  margin-top:12px;
  background:none; border:0; padding:0;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--awa-ink-3);
  transition:color 200ms ease;
}
@media (hover:hover) and (pointer:fine){
  #cats .lcard:hover .lphoto{transform:scale(1.03); box-shadow:var(--awa-shadow-2)}
  #cats .lcard:hover .cbtn{color:var(--awa-green)}
}
@media (max-width:1080px){ #cats .lineup{grid-template-columns:repeat(2,1fr)} }


/* ====================== 5. BAND CUSTOM KIT ======================= */
.kit{
  background:var(--awa-forest);
  color:#fff;
  padding-block:clamp(48px,6vw,96px); /* #13: pangkas ruang kosong di atas eyebrow */
}
.kit .eyebrow{color:rgba(255,255,255,.55)}
.kit h2{font-size:clamp(32px,5.2vw,72px); color:#fff}
.kit h2 span.g{color:var(--awa-green)}
.kit p{color:rgba(255,255,255,.72); max-width:60ch}
.kit .kit-in{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(28px,5vw,80px); align-items:center;
}
.kit .kar{
  width:44px; height:44px; border-radius:50%; border:0;
  background:rgba(255,255,255,.1); color:#fff;
  transition:background-color 200ms ease, transform 160ms var(--awa-ease-out);
}
.kit .kar:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){ .kit .kar:hover{background:rgba(255,255,255,.2)} }
.kit .kdots button, .kit .kdots span{background:rgba(255,255,255,.3)}
@media (max-width:860px){ .kit .kit-in{grid-template-columns:1fr} }


/* ====================== 6. MARQUEE PARTNER ======================= */
.home-partners{padding-block:clamp(56px,8vw,132px)}
.pslider .psl-mask{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.pslider img{
  filter:grayscale(1); opacity:.5;
  transition:filter 300ms var(--awa-ease-out), opacity 300ms var(--awa-ease-out);
}
@media (hover:hover) and (pointer:fine){
  .pslider img:hover{filter:none; opacity:1}
  .pslider:hover [class*="track"], .pslider:hover [class*="row"]{animation-play-state:paused}
}


/* ==================== 7. HALAMAN CUSTOM KIT ===================== */
.ck-sec{padding-block:clamp(56px,8vw,132px)}
.ck-sec-alt{background:var(--awa-paper-2)}
.ck-head{
  display:flex; align-items:baseline; gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--awa-line);
  margin-bottom:clamp(28px,4vw,56px);
}
.ck-tape{background:none !important; color:var(--awa-ink-3) !important; padding:0 !important}
.ck-tape.red{color:var(--awa-green) !important}
.ck-sub{
  font-size:clamp(16px,1.35vw,19px); line-height:1.62;
  color:var(--awa-ink-2); max-width:60ch;
  margin:0 0 clamp(28px,4vw,52px);
}

/* Kartu harga: dari kartu berkotak jadi lembar spesifikasi bergaris rambut */
.ck-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,26px)}
/* Catatan hasil uji di halaman live: metafora struk yang sudah dipakai tema
   ini justru bagus dan cocok untuk daftar harga. Jadi di sini intervensinya
   ditahan. Yang diperbaiki hanya tinggi kartu supaya baris sejajar, dan
   chip harga hitam bawaan tema sengaja TIDAK diganti. */
.ck-grid{align-items:stretch}
.ck-grid > *{
  display:flex; flex-direction:column;
  background:var(--awa-card);
  border:0; border-radius:3px;
  padding:24px;
  box-shadow:var(--awa-shadow-1);
  transition:box-shadow 320ms var(--awa-ease-out), transform 320ms var(--awa-ease-out);
}
.ck-grid > * .r-total{margin-top:auto}
@media (hover:hover) and (pointer:fine){
  .ck-grid > *:hover{box-shadow:var(--awa-shadow-2); transform:translateY(-3px)}
}
.r-addr{font-size:9.5px; letter-spacing:.1em; color:var(--awa-ink-3); text-transform:uppercase; margin:0 0 14px}
.r-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.r-head span:first-child{font-size:18px; font-weight:800; letter-spacing:-.02em; text-transform:uppercase}
.r-code{font-size:10.5px; font-weight:700; letter-spacing:.12em; color:var(--awa-green)}
.r-div{height:1px; background:var(--awa-line); margin:16px 0 0; border:0}
.r-cols{
  display:grid; grid-template-columns:28px 1fr auto; gap:10px;
  padding:12px 0 8px; border-bottom:1px solid var(--awa-line-soft);
  font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--awa-ink-3);
}
.r-cols span:last-child, .r-row span:last-child{text-align:right}
.r-row{
  display:grid; grid-template-columns:28px 1fr auto; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--awa-line-soft);
  font-size:12.5px; color:var(--awa-ink-2);
}
.r-row span:first-child{color:var(--awa-ink-3)}
.r-row span:last-child{color:var(--awa-ink-3)}
.r-total{margin-top:18px}
.r-tlabel{font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--awa-ink-3)}
.r-boxes{display:grid; gap:8px; margin-top:10px}
.r-box{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  background:none; border:0; padding:0;
}
.r-box span{font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--awa-ink-3)}
/* chip hitam bawaan tema dibiarkan, hanya ukurannya disetarakan */
.r-box b{font-size:14px; font-weight:800; letter-spacing:.01em}
.r-barcode{opacity:.35}
.r-url{
  margin:16px 0 0; padding-top:12px; border-top:1px solid var(--awa-line);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--awa-ink-3);
}

.ck-gallery{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.4vw,20px)}
.ck-gallery img{
  aspect-ratio:3/4; object-fit:cover; border-radius:2px;
  box-shadow:var(--awa-shadow-1);
  transition:transform 480ms var(--awa-ease-out), box-shadow 300ms var(--awa-ease-out);
}
@media (hover:hover) and (pointer:fine){
  .ck-gallery a:hover img{transform:scale(1.04); box-shadow:var(--awa-shadow-2)}
}

.ck-grid-2{grid-template-columns:1fr 1fr}
.ck-grid-2 table{width:100%; border-collapse:collapse}
.ck-grid-2 table th, .ck-grid-2 table td{
  padding:13px 10px; text-align:center; font-size:13px;
  border-bottom:1px solid var(--awa-line-soft);
}
.ck-grid-2 table th{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--awa-ink-3); border-bottom:1px solid var(--awa-line);
}
.ck-grid-2 table th:first-child, .ck-grid-2 table td:first-child{text-align:left; font-weight:600}

.ck-cta{background:var(--awa-forest); color:#fff; text-align:center; padding-block:clamp(56px,8vw,132px)}
.ck-cta h2{color:#fff; font-size:clamp(32px,5.2vw,72px)}
.ck-cta p{color:rgba(255,255,255,.72); max-width:60ch; margin-inline:auto}

@media (max-width:1080px){
  .ck-grid{grid-template-columns:repeat(2,1fr)}
  .ck-gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .ck-grid, .ck-grid-2{grid-template-columns:1fr}
  .ck-gallery{grid-template-columns:repeat(2,1fr)}
}


/* ==================== 8. SHOP (ARSIP PRODUK) ==================== */
ul.products.product-archive{gap:clamp(14px,2vw,32px) clamp(12px,1.6vw,24px)}

li.product.loop-entry{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
li.product .woocommerce-loop-image-link{
  display:block; position:relative;
  background:var(--awa-card);
  border-radius:2px; overflow:hidden;
  box-shadow:var(--awa-shadow-1);
  transition:box-shadow 300ms var(--awa-ease-out);
}
li.product .woocommerce-loop-image-link img{
  aspect-ratio:1/1; object-fit:cover; width:100%; height:auto;
  transition:transform 480ms var(--awa-ease-out);
}
li.product .product-details{
  background:none !important;
  padding:14px 0 0 !important;
}
li.product .woocommerce-loop-product__title{
  margin:0;
  font-size:13.5px !important; font-weight:600; letter-spacing:-.005em;
  line-height:1.35; text-transform:none;
}
li.product .price{
  display:block; margin-top:6px;
  font-size:13.5px; font-weight:700; color:var(--awa-ink);
}

/* CATATAN HASIL UJI DI TOKO LIVE.
   Rancangan awal menaruh tombol keranjang mengambang di atas foto dan
   muncul saat hover. Itu dibatalkan setelah diuji, karena:
   - Tema menaruh opacity untuk efek hover di .product-action-wrap, bukan
     di tombolnya, sehingga override yang menyasar tombol tidak berpengaruh.
   - Tombol Kadence berisi label status AJAX ("Continue", "Loading", "Done")
     di dalam span tersembunyi. Begitu tombol dipaksa jadi flex, label-label
     itu ikut muncul dan tombol jadi berantakan.
   Jadi tombol dibiarkan di aliran normal di bawah harga. Lebih tenang,
   dan tidak melawan mesin AJAX tema. */
li.product{position:relative}
li.product .product-details{position:static !important}
li.product .product-action-wrap{
  position:static !important;
  opacity:1 !important;
  margin-top:10px !important;
}
li.product .product-action-wrap .button{
  display:inline-flex !important; align-items:center; gap:8px;
  min-height:40px; padding:0 16px;
  background:transparent !important;
  color:var(--awa-ink) !important;
  border:0 !important; border-radius:2px;
  box-shadow:inset 0 0 0 1px var(--awa-line) !important;
  font-size:10.5px !important; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  transition:background-color 200ms ease, transform 160ms var(--awa-ease-out);
}
li.product .product-action-wrap .button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  li.product:hover .woocommerce-loop-image-link{box-shadow:var(--awa-shadow-2)}
  li.product:hover .woocommerce-loop-image-link img{transform:scale(1.05)}
  li.product .product-action-wrap .button:hover{background:rgba(14,16,15,.05) !important}
}

/* PENYEMPURNAAN TOMBOL KERANJANG (teruji live 2026-08-14).
   Padding tema menang spesifisitas -> padding horizontal tombol jadi 0 dan
   teks menempel/keluar kotak. Dipaksa di sini. Kartu dijadikan kolom flex
   supaya tombol rata bawah antar kartu dalam satu baris. */
li.product.loop-entry{display:flex; flex-direction:column}
li.product .product-details{display:flex; flex-direction:column; flex:1 1 auto}
li.product .product-action-wrap{margin-top:auto !important; padding-top:14px}
li.product .product-action-wrap .button{padding:0 18px !important; white-space:nowrap; width:auto !important}
li.product .price{font-variant-numeric:tabular-nums}

.woocommerce-result-count{font-size:12px; color:var(--awa-ink-3)}
.woocommerce-ordering select{
  min-height:38px; padding:0 34px 0 14px;
  border:0; border-radius:2px; background-color:transparent;
  box-shadow:inset 0 0 0 1px var(--awa-line);
  font-size:12px; font-weight:600;
}


/* ===================== 9. HALAMAN PRODUK ======================= */
.woocommerce-breadcrumb{font-size:11.5px; color:var(--awa-ink-3); letter-spacing:.02em}
.single-product div.product .product_title{font-size:clamp(24px,3.2vw,40px); letter-spacing:-.03em}
.single-product div.product p.price,
.single-product div.product span.price{
  font-size:clamp(24px,2.6vw,32px); font-weight:800; letter-spacing:-.02em; color:var(--awa-ink);
}
.single-product .woocommerce-product-gallery__image img{border-radius:2px; box-shadow:var(--awa-shadow-1)}

.single-product table.variations th.label label{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--awa-ink-3);
}
.single-product table.variations select{
  min-height:48px; padding:0 16px;
  border:0; border-radius:2px; background-color:var(--awa-card);
  box-shadow:inset 0 0 0 1px var(--awa-line);
  font-size:15px;
  transition:box-shadow 220ms var(--awa-ease-out);
}
.single-product table.variations select:focus{outline:none; box-shadow:inset 0 0 0 1.5px var(--awa-green)}

.single-product .quantity input.qty{
  min-height:48px; border:0; border-radius:2px; background:transparent;
  box-shadow:inset 0 0 0 1px var(--awa-line);
  font-weight:700; text-align:center;
}
.single-product .single_add_to_cart_button{
  min-height:48px; padding:0 28px;
  background:var(--awa-ink); color:var(--awa-paper);
  border:0; border-radius:2px;
  font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  box-shadow:var(--awa-shadow-1);
  transition:transform 160ms var(--awa-ease-out), box-shadow 200ms var(--awa-ease-out);
}
.single-product .single_add_to_cart_button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .single-product .single_add_to_cart_button:hover{background:var(--awa-ink); box-shadow:var(--awa-shadow-2)}
}

.woocommerce-tabs ul.tabs{
  display:flex; gap:26px; margin:0; padding:0;
  border-bottom:1px solid var(--awa-line); list-style:none;
}
.woocommerce-tabs ul.tabs::before, .woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after{display:none !important}
.woocommerce-tabs ul.tabs li{
  background:none !important; border:0 !important; border-radius:0 !important;
  margin:0 !important; padding:0 !important;
}
.woocommerce-tabs ul.tabs li a{
  display:block; padding:18px 0; position:relative;
  font-size:11.5px !important; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--awa-ink-3) !important;
  transition:color 200ms ease;
}
.woocommerce-tabs ul.tabs li a::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1.5px;
  background:var(--awa-green);
  transform:scaleX(0); transform-origin:left;
  transition:transform 220ms var(--awa-ease-out);
}
.woocommerce-tabs ul.tabs li.active a{color:var(--awa-ink) !important}
.woocommerce-tabs ul.tabs li.active a::after{transform:scaleX(1)}

.shop_attributes th{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--awa-ink-3);
}
.shop_attributes th, .shop_attributes td{
  padding:14px 0; border-bottom:1px solid var(--awa-line-soft); background:none;
}


/* ============================ 10. FOOTER ========================== */
footer .foot{color:rgba(255,255,255,.7)}
footer .foot h5, footer .foot .foot-news .k{
  font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
footer .foot-addr{font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.62)}
footer .foot a{transition:color 180ms ease}
@media (hover:hover) and (pointer:fine){ footer .foot a:hover{color:#fff} }
footer .fbot{
  padding-block:24px; border-top:1px solid rgba(255,255,255,.13);
  font-size:11.5px; color:rgba(255,255,255,.5);
}


/* ======================= 11. TOMBOL & FOKUS ======================= */
.btn, a.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 24px;
  border:0; border-radius:2px;
  font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  box-shadow:var(--awa-shadow-1);
  transition:transform 160ms var(--awa-ease-out), background-color 200ms ease,
             color 200ms ease, box-shadow 200ms var(--awa-ease-out);
}
.btn:active, a.btn:active{transform:scale(.97)}
.btn-green{background:var(--awa-green); color:#fff}
.btn-outline{background:transparent; color:var(--awa-ink); box-shadow:inset 0 0 0 1px var(--awa-line)}
.kit .btn-outline{color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
@media (hover:hover) and (pointer:fine){
  .btn:hover, a.btn:hover{box-shadow:var(--awa-shadow-2)}
  .btn-outline:hover{background:rgba(14,16,15,.04)}
  .kit .btn-outline:hover{background:rgba(255,255,255,.08)}
}

:focus-visible{outline:2px solid var(--awa-green); outline-offset:3px; border-radius:2px}


/* ====================== 12. REDUCED MOTION ======================= */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  #cats .lcard:hover .lphoto,
  li.product:hover .woocommerce-loop-image-link img,
  .ck-gallery a:hover img{transform:none}
  li.product .product-action-wrap .button{opacity:1; transform:none}
}


/* ============== 13. PENYELARASAN KE SAMPLE (teruji live 2026-08-14) ==============
   Temuan: tema anak lama menyetel font lewat variabel --display/--body di ±51
   selector, jadi mendefinisikan font di body saja tidak cukup. Redefinisi
   variabelnya di sini (file ini dimuat SETELAH style.css tema anak, jadi menang
   urutan) menyapu semuanya ke Archivo sekaligus. */
:root{
  --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* Badge jumlah keranjang menempel ke ikonnya, bukan ke pojok kotak hover 44px
   (tampak "lepas" di HP). */
/* Ikon nav-tools: kotak 44px seragam, ikon DI TENGAH (default tema: block,
   ikon nempel kiri -> badge tampak lepas 23px). Badge dipeluk ke pojok ikon. */
header.nav .nav-tools > a, header.nav .nav-tools > button{
  min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
}
header.nav .cart{display:inline-flex !important}
header.nav .cart .b{top:4px !important; right:4px !important; left:auto !important}
/* Form pencarian TERTUTUP ikut mengambil lebar penuh di dalam .nav-tools
   (terukur 375px di HP) dan menyebar ikon-ikon. Saat terbuka ia position:fixed,
   jadi menolkan lebarnya saat tertutup tidak mengganggu animasi buka. */
header.nav .awa-search:not(.open){width:0 !important; min-width:0 !important; margin:0 !important; padding:0 !important; border:0 !important}


/* ============ 14. TINDAK LANJUT REVIEW TIM (2026-08-15) ============ */
/* #6 Tombol beli halaman produk: aturan bagian 9 kalah dari .button.alt
   Kadence, jadi tombol belum pernah benar-benar tereskin. Sekalian state
   nonaktif dibedakan tegas (bukan cuma opasitas). */
form.cart .single_add_to_cart_button.button,
form.cart .single_add_to_cart_button.button.alt{
  background:var(--awa-ink) !important; color:#fff !important;
  border-radius:2px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
form.cart .single_add_to_cart_button.button.disabled,
form.cart .single_add_to_cart_button.button:disabled,
form.cart .single_add_to_cart_button.button.wc-variation-selection-needed{
  background:transparent !important; color:var(--awa-ink-3) !important;
  box-shadow:inset 0 0 0 1px var(--awa-line) !important;
  opacity:1 !important; cursor:not-allowed;
}
/* #9 Area sentuh <44px di bilah util (ikon sosial 14x17, Lacak/Login 17px):
   diperluas lewat pseudo tanpa mengubah ukuran visual. */
.util a{position:relative}
.util a::after{content:''; position:absolute; inset:-12px}
/* #11: text-wrap:balance kini ada di .hero-head (bagian 3). */
/* #12 "LIHAT KOLEKSI" kembali terbaca sebagai aksi, bukan label. */
/* #12 revisi: cbtn duduk di latar TERANG (bukan di atas foto) — teks tinta, garis bawah hijau, tanpa radius pill. */
#cats .lcard .cbtn{color:var(--awa-ink) !important; border-bottom:1.5px solid var(--awa-green); border-radius:0; padding-bottom:2px}


/* ============ 15. STRUKTUR HEADING (review #8, 2026-08-15) ============
   Kartu kategori h3->h2 dan judul kolom footer h4->h3 supaya urutan dokumen
   H1>H2>H3 valid utk pembaca layar & crawler. Kata TIDAK berubah — hanya tag.
   Alias di bawah mempertahankan tampilan lama yang terikat tag. */
.lcard h2{position:relative; z-index:1}
#cats .lcard h2{
  margin:16px 0 0;
  font-size:clamp(15px,1.5vw,20px);
  color:var(--awa-ink);
}
footer h3{
  font-family:var(--display); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  font-size:.74rem; color:#7E8A80; margin:0 0 12px; line-height:1.4;
}


/* ====== 16. INFO HALAMAN PRODUK (review #5, isi di-ACC owner 2026-08-15) ====== */
.awa-pinfo{margin-top:22px; border-top:1px solid var(--awa-line); padding-top:18px; display:flex; flex-direction:column; gap:14px}
.awa-pinfo p{margin:0; font-size:13px; color:var(--awa-ink-2)}
.awa-pinfo p strong{color:var(--awa-ink); font-weight:700}
.awa-pinfo p a{color:var(--awa-green); text-decoration:underline; text-underline-offset:3px}
.awa-pinfo-cta{
  display:block; background:var(--awa-forest); color:#fff !important;
  border-radius:2px; padding:16px 18px;
  font-size:13.5px; line-height:1.5; text-decoration:none;
  transition:transform 160ms var(--awa-ease-out), box-shadow 200ms ease;
}
.awa-pinfo-cta em{font-family:'Instrument Serif',Georgia,serif; font-style:italic; color:var(--awa-green)}
.awa-pinfo-cta:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){ .awa-pinfo-cta:hover{box-shadow:var(--awa-shadow-1)} }