/* =========================================================
   TAMMIA HEADER — DEWY redesign (Aditya / Onyx)
   Ditempel di CSS Injector "tammia_redesign_header".
   Menargetkan markup asli Tammia Theme (Bootstrap5), tanpa HTML baru.
   ============================================================ */

/* ---- Announcement bar: gelap, mono, spasi lebar ----
   Specificity dinaikkan (.region-announcement-bar ...) supaya menang
   dari aturan teal lama di block yang sama. */
.region-announcement-bar .tammia-announcement-bar {
  background: #1a1512 !important;
  color: #e9e5e2 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-family: "JetBrains Mono", "Poppins", monospace !important;
  font-weight: 500 !important;
}
.region-announcement-bar .tammia-announcement-bar,
.region-announcement-bar .tammia-announcement-bar a,
.region-announcement-bar .tammia-announcement-bar .badge { color: #e9e5e2 !important; }

/* ---- Nav bar: krem, teks gelap ----
   Merah berasal dari navbar-enhanced.css `header[role=banner] nav.navbar`,
   jadi selector di sini dibuat lebih spesifik agar pasti menang. */
header[role="banner"] nav.navbar.navbar-expand-lg {
  background-image: none !important;
  background-color: #f4f2f0 !important;
  border-bottom: 1px solid #ebe6e2 !important;
}
header[role="banner"] nav.navbar,
header[role="banner"] nav.navbar a,
header[role="banner"] nav.navbar .nav-link { color: #26201d !important; }
header[role="banner"] nav.navbar .navbar-toggler { border-color: #d9d1cb !important; }

/* ---- Logo: putih -> merah lewat mask (pakai logo.png yang sama) ----
   Ukuran 1:1 dengan .brand-logo-img template: tinggi 24px. logo.png
   aslinya 165x35 (rasio 4.714), jadi lebarnya 24 x 4.714 = 113px. */
.navbar-brand a.site-logo {
  display: inline-block !important;
  width: 113px;
  height: 24px;
  background-color: #e11d25 !important;
  -webkit-mask: url(/themes/custom/tammia_theme/logo.png) no-repeat left center;
  mask: url(/themes/custom/tammia_theme/logo.png) no-repeat left center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.navbar-brand a.site-logo img { opacity: 0 !important; }
/* Bootstrap memberi .navbar-brand margin-right 16px. Kalau dibiarkan, jarak
   logo ke item pertama jadi 32 + 16 = 48px, tidak 1:1 dengan template. */
body header[role="banner"] .navbar-brand { margin: 0 !important; }

/* ---- Menu utama: pill seperti .nav-menu a di template ----
   font-size 14px / weight 500 / warna #1a1a1a diatur di injector base.
   Di sini bentuk pill dan hovernya. */
body header[role="banner"] ul.advanced-mega-menu > li > .advanced-mega-menu-item-inner { padding: 0 !important; }
body header[role="banner"] ul.advanced-mega-menu > li > .advanced-mega-menu-item-inner > a {
  display: inline-block;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  white-space: nowrap;
  text-transform: none !important;
  transition: background .25s ease, color .25s ease !important;
}
body header[role="banner"] ul.advanced-mega-menu > li > .advanced-mega-menu-item-inner > a:hover,
body header[role="banner"] ul.advanced-mega-menu > li > .advanced-mega-menu-item-inner > a.is-active {
  background: rgba(211,172,80,.18) !important;   /* --pink-tint pekat, sama dengan template */
  color: #1a1a1a !important;
}

/* ---- Search: 1:1 dengan .nav-search template ----
   Pil krem, border transparan, ikon kaca pembesar di KIRI.
   Tombol submit tetap <input>, jadi ikonnya lewat background SVG. */
#views-exposed-form-product-search-page-1 .form-item-title > label { display: none !important; }
body header[role="banner"] #views-exposed-form-product-search-page-1 .form--inline {
  position: relative !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  height: auto !important;
  border-radius: 999px !important;
}
body header[role="banner"] #views-exposed-form-product-search-page-1 #edit-title {
  background: #faf9f7 !important;             /* --cream-1 */
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 10px 16px 10px 40px !important;
  font-size: 13px !important;
  height: auto !important;
  width: 100% !important;
  color: #1a1a1a !important;
  box-shadow: none !important;
}
body header[role="banner"] #views-exposed-form-product-search-page-1 #edit-title:focus {
  background: #ffffff !important;
  border-color: #d3ac50 !important;           /* --pink */
  box-shadow: 0 0 0 4px rgba(225,29,37,.15) !important;
  outline: none !important;
}
body header[role="banner"] #views-exposed-form-product-search-page-1 #edit-title::placeholder {
  color: #414042 !important; opacity: .72 !important;
}
body header[role="banner"] #views-exposed-form-product-search-page-1 #edit-actions {
  position: absolute !important;
  left: 7px !important; right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  z-index: 2;
}
body header[role="banner"] #views-exposed-form-product-search-page-1 #edit-submit-product-search {
  width: 28px !important; height: 28px !important; min-width: 28px !important;
  border: none !important;
  border-radius: 50% !important;
  padding: 0 !important; margin: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  box-shadow: none !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23414042' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center !important;
  background-size: 14px 14px !important;
}

/* ---- Ikon akun & keranjang: 1:1 dengan .nav-icon-btn template ---- */
#block-tammia-theme-account-menu .nav-link,
#block-tammia-theme-cart a,
#block-tammia-theme-cart .cart-block--link__expand { color: #26201d !important; }

body header[role="banner"] #tammia-user-btn,
body header[role="banner"] #tammia-cart-trigger {
  width: 40px !important; height: 40px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #1a1a1a !important;
}
/* wrapper cart dibuat JS dengan margin-left 8px; jarak ikon diatur gap 6px
   di region, jadi marginnya dinolkan supaya 1:1 dengan .nav-icons. */
body header[role="banner"] #tammia-cart-wrapper { margin-left: 0 !important; }
body header[role="banner"] #tammia-user-btn:hover,
body header[role="banner"] #tammia-cart-trigger:hover { background: #f8f1e2 !important; }
body header[role="banner"] #tammia-user-btn svg,
body header[role="banner"] #tammia-cart-trigger svg { width: 18px !important; height: 18px !important; }

/* ikon person & cart = SVG dibuat JS tammia-navbar.js */
#tammia-user-btn svg, #tammia-user-btn svg path,
#tammia-user-btn svg circle, #tammia-user-btn svg line { stroke: #26201d !important; color: #26201d !important; }
#tammia-cart-trigger svg, #tammia-cart-trigger svg path,
#tammia-cart-trigger svg circle, #tammia-cart-trigger svg line { stroke: #26201d !important; color: #26201d !important; }
#tammia-cart-badge { background: #e11d25 !important; color: #fff !important; }

/* ikon cart bawaan Commerce (PNG putih di folder /ffffff/) digelapkan */
#block-tammia-theme-cart .cart-block--summary__icon img {
  filter: brightness(0) saturate(100%) opacity(0.82) !important;
}


/* =========================================================
   SUSUNAN HEADER (item 1, 2, 3)

   Desktop >= 993px : logo | Shop by Brand | Shop by Category |
                      About Us | Contact | search | user | cart
   Tablet 768-992px : logo | search | hamburger
   Mobile   < 768px : logo | hamburger
   Isi hamburger    : Shop by Brand, Shop by Category, About Us,
                      Contact, user, cart

   Jarak antaritem mengikuti .navbar-tammia (gap 32px ke logo dan ke
   search) dan .nav-menu (gap 28px antarlink) di template.
   Prefix body dipakai supaya menang dari <style> inline milik block
   CSS JS Override yang dimuat SETELAH file injector.
   ========================================================= */

body header[role="banner"] nav.navbar > .container {
  display: flex !important;
  align-items: center !important;
}

/* ---------- DESKTOP ---------- */
/* 993px, bukan 992px, supaya sejalan dengan breakpoint modul Advanced
   Mega Menu yang memakai min-width:993px untuk panel hovernya. */
@media (min-width: 993px) {
  body header[role="banner"] nav.navbar > .container {
    flex-wrap: nowrap !important;
    gap: 28px !important;
  }

  /* Pembungkus dibongkar supaya tiap <li> menu jadi anak langsung
     .container. Tanpa ini search bar tidak bisa disisipkan di antara
     Shop by Category dan About Us, karena keempatnya satu <ul>.
     display:contents aman untuk panel megamenu: panelnya absolute
     terhadap <li>, dan <li> tetap position:relative. */
  body header[role="banner"] nav.navbar > .container > #navbarSupportedContent,
  body header[role="banner"] #navbarSupportedContent > .region-nav-main,
  body header[role="banner"] #navbarSupportedContent > .region-nav-main > nav,
  body header[role="banner"] #navbarSupportedContent > .region-nav-main > nav > ul.advanced-mega-menu {
    display: contents !important;
  }

  /* Urutan sengaja memakai .mega / :not(.mega), bukan nth-child, supaya
     admin bisa menambah item menu tanpa merusak susunan: item yang punya
     panel megamenu selalu di depan, link biasa sesudahnya, search bar
     selalu paling belakang sebelum ikon. */
  body header[role="banner"] .region-nav-branding { order: 1; margin-right: 4px; }
  body header[role="banner"] #navbarSupportedContent > .region-nav-main > nav > ul.advanced-mega-menu > li.mega { order: 2; }
  body header[role="banner"] #navbarSupportedContent > .region-nav-main > nav > ul.advanced-mega-menu > li:not(.mega) { order: 3; }
  body header[role="banner"] #block-tammia-theme-exposedformproduct-searchpage-1 { order: 4; margin: 0 4px !important; }
  body header[role="banner"] #navbarSupportedContent > .region-nav-additional {
    order: 5;
    margin-left: auto !important;
    gap: 6px !important;
    align-items: center !important;
  }

  body header[role="banner"] nav.navbar .navbar-toggler { display: none !important; }
}

/* Label menu di dev jauh lebih panjang daripada template (Shop by Brand,
   Shop by Category), jadi di bawah 1400px jaraknya dirapatkan sedikit
   supaya search bar tidak tergencet. Di 1400px ke atas jaraknya persis
   32/28 seperti template. */
@media (min-width: 1200px) and (max-width: 1399px) {
  body header[role="banner"] nav.navbar > .container { gap: 24px !important; }
}
@media (min-width: 993px) and (max-width: 1199px) {
  body header[role="banner"] nav.navbar > .container { gap: 20px !important; }
}

/* Lebar search bar sama di semua viewport: .nav-search max-width 360px */
body header[role="banner"] #block-tammia-theme-exposedformproduct-searchpage-1 {
  flex: 1 1 auto !important;
  max-width: 360px !important;
  min-width: 0 !important;
}

/* ---------- TABLET + MOBILE ---------- */
@media (max-width: 992px) {
  body header[role="banner"] nav.navbar > .container {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  body header[role="banner"] .region-nav-branding { order: 1; }
  body header[role="banner"] #block-tammia-theme-exposedformproduct-searchpage-1 { order: 2; margin: 0 !important; }
  body header[role="banner"] nav.navbar .navbar-toggler {
    display: inline-flex !important;
    order: 3;
    margin-left: auto !important;
    align-items: center;
    justify-content: center;
    padding: 6px 10px !important;
  }
  /* Laci hamburger turun ke baris kedua, selebar container. */
  body header[role="banner"] nav.navbar #navbarSupportedContent {
    order: 4;
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  body header[role="banner"] nav.navbar #navbarSupportedContent:not(.show) { display: none !important; }
  body header[role="banner"] nav.navbar #navbarSupportedContent.show,
  body header[role="banner"] nav.navbar #navbarSupportedContent.collapsing { display: block !important; }

  /* Ikon user dan cart berjajar di dalam laci, bukan bertumpuk. */
  body header[role="banner"] #navbarSupportedContent > .region-nav-additional {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 4px 10px !important;
  }
  body header[role="banner"] #navbarSupportedContent > .region-nav-main > nav > ul.advanced-mega-menu > li > .advanced-mega-menu-item-inner > a {
    display: block;
    padding: 10px 14px !important;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 767px) {
  /* Baris navbar hanya logo + hamburger. Search bar pindah ke dalam laci
     hamburger, jadi disembunyikan dulu di sini. */
  body header[role="banner"] #block-tammia-theme-exposedformproduct-searchpage-1 { display: none !important; }

  /* Search bar muncul lagi di baris paling atas laci begitu hamburger dibuka.
     Blocknya ada di DOM SEBELUM lacinya, jadi tidak bisa dipilih dengan
     kombinator ~ . Dipakai :has() di .container untuk membaca kelas .show
     milik lacinya. Kalau :has() tidak didukung, aturan ini gugur dan search
     tetap tersembunyi di HP, jadi tidak ada yang rusak.
     .collapsing ikut disertakan supaya search sudah ikut terlihat selama
     animasi buka, bukan meloncat muncul di akhir. */
  body header[role="banner"] nav.navbar > .container:has(#navbarSupportedContent.show) > #block-tammia-theme-exposedformproduct-searchpage-1,
  body header[role="banner"] nav.navbar > .container:has(#navbarSupportedContent.collapsing) > #block-tammia-theme-exposedformproduct-searchpage-1 {
    display: block !important;
    order: 4;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin: 4px 0 10px !important;
  }
  /* search_autocomplete.css mengunci form ke max-width 195px di bawah 768px,
     ukuran untuk baris navbar yang dulu sempit. Di dalam laci ruangnya penuh. */
  body header[role="banner"] nav.navbar > .container:has(#navbarSupportedContent.show) > #block-tammia-theme-exposedformproduct-searchpage-1 #views-exposed-form-product-search-page-1,
  body header[role="banner"] nav.navbar > .container:has(#navbarSupportedContent.collapsing) > #block-tammia-theme-exposedformproduct-searchpage-1 #views-exposed-form-product-search-page-1 {
    width: 100% !important;
    max-width: 100% !important;
  }
  body header[role="banner"] nav.navbar #navbarSupportedContent { order: 5; }

  /* Navbar di HP dipatok fixed top:0 oleh block CSS Override, dibuat waktu
     announcement bar masih disembunyikan di HP. Sekarang barnya sudah
     tampil lagi, jadi navbar harus turun setinggi bar itu (38px) supaya
     tidak saling tumpuk, persis seperti perilaku desktop (top:38px).
     body padding-top ikut naik: 38 + 81 (tinggi navbar HP) = 119. */
  body header[role="banner"] nav.navbar { top: 38px !important; }
  /* body[class], bukan body saja: search_autocomplete.css memakai
     body.path-frontpage (spesifisitas 0,1,1) yang mengalahkan html body
     (0,0,2). [class] dihitung setara kelas, jadi 0,1,2 dan menang, tanpa
     mengunci ke satu halaman tertentu. */
  html body[class] { padding-top: 119px !important; }
}


/* ---- Panel megamenu: beri lebar tetap supaya grid view bisa mengalir ----
   .advanced-mega-menu-item-inner memakai align-items:center. Di dalam panel
   arah flexnya kolom, jadi center itu sumbu horizontal dan isi panel
   menyusut selebar teks terpanjang. Akibatnya 15 kategori jadi satu kolom
   setinggi 698px dan 19 logo brand jadi satu kolom setinggi 2178px.
   Diubah ke stretch dan panelnya diberi lebar, jadi grid view bisa
   membentuk beberapa kolom. Panel yang kelewat tepi layar digeser sendiri
   oleh modulnya lewat adjustMegaPanel di advanced-mega-menu.js. */
@media (min-width: 993px) {
  body header[role="banner"] ul.advanced-mega-menu > li.mega:hover > .advanced-mega-menu-panel {
    width: min(880px, 92vw) !important;
  }
  body header[role="banner"] .advanced-mega-menu-panel .advanced-mega-menu-item-inner {
    align-items: stretch !important;
  }
  /* Blok view dibungkus kelas Bootstrap .mb-5, jadi ada 48px kosong di bawah
     isi panel di atas padding panel sendiri. Di dalam panel tidak perlu. */
  body header[role="banner"] .advanced-mega-menu-panel .view { margin-bottom: 0 !important; }

  /* Panel aslinya top:100% dari <li>, dan <li> lebih pendek dari navbar, jadi
     panel malah menimpa 14px bagian bawah navbar. Diturunkan 28px supaya ada
     jarak 14px dari tepi bawah navbar.
     ::before dipakai sebagai jembatan tak terlihat menutup jarak itu. Tanpa
     jembatan, kursor yang menyeberang dari link ke panel melewati daerah
     kosong dan panelnya keburu tertutup, karena panel hanya tampil selama
     <li> di-hover. Jembatan ini anak panel, jadi hovernya tetap terbaca. */
  body header[role="banner"] ul.advanced-mega-menu > li.mega:hover > .advanced-mega-menu-panel { margin-top: 28px !important; }
  body header[role="banner"] ul.advanced-mega-menu > li.mega:hover > .advanced-mega-menu-panel::before {
    content: ''; position: absolute; left: 0; right: 0; top: -28px; height: 28px;
  }
}


/* ===== tm-rev-hapus-bottomnav-hp =====
   Bar mengambang empat ikon di tepi bawah layar HP (Shop by Brand, Shop by
   Category, My Account, My Cart) dihapus. Isinya sudah ada semua di laci
   hamburger, jadi hanya menutupi konten.

   Markup <nav id="tammia-mobile-bottomnav"> dan gayanya dibuat theme Bion
   lewat JS, disuntik sebagai <style id="tammia-mobile-layout-css"> di akhir
   <head>. Karena disuntik JS, urutannya SELALU sesudah file injector ini,
   jadi harus menang spesifisitas: aturan theme #tammia-mobile-bottomnav
   (1,0,0) dilawan body #tammia-mobile-bottomnav (1,0,1).

   Blok yang sama juga memberi body padding-bottom 64px sebagai ruang untuk
   bar itu. Tanpa barnya, 64px itu jadi ruang kosong di kaki halaman, jadi
   ikut dinolkan. body[class] dipakai, bukan body saja, dengan alasan yang
   sama seperti aturan padding-top di atas. */
body #tammia-mobile-bottomnav { display: none !important; }

@media (max-width: 767px) {
  html body[class] { padding-bottom: 0 !important; }
}


/* ===== tm-rev-merah-kepala-dropdown =====
   Pita merah di kepala dropdown akun dan dropdown keranjang memakai
   #a22a34, warna yang di patokan kita dipakai untuk hover tombol, bukan
   untuk bidang merah. Akibatnya kepala dropdown terlihat lebih gelap dan
   kusam daripada tombol merah di sebelahnya. Disamakan ke #e11d25.

   Aturan theme di navbar-enhanced.css menulis
   `linear-gradient(135deg, #a22a34, #a22a34)`, gradien dua ujung warna sama
   alias merah polos, jadi di sini cukup dikembalikan ke warna datar.
   Selektor diberi awalan body supaya menang tanpa bergantung urutan file. */
body .tammia-dd-header {
  background: #e11d25 !important;
  color: #fff !important;
}


/* ===== tm-rev-ikon-hamburger =====
   Ikon hamburger tidak kelihatan di HP. Bootstrap menggambarnya sebagai
   background SVG di .navbar-toggler-icon dengan stroke
   rgba(255,255,255,.55), warisan navbar gelap bawaan. Navbar kita krem
   #f4f2f0, jadi putih di atas krem = nyaris hilang, yang tampak cuma
   kotak bordernya saja.

   Strokenya disamakan dengan warna border tombolnya, #d9d1cb, jadi ikon
   dan kotaknya terbaca sebagai satu kesatuan.

   Saat laci terbuka ikonnya berubah jadi silang. Pengaitnya atribut
   aria-expanded yang dibalik sendiri oleh Bootstrap Collapse, jadi tidak
   perlu JS tambahan. Silangnya digambar di kotak 30x30 dan stroke-width 2
   yang sama dengan garis hamburgernya supaya bobot garisnya tidak meloncat
   waktu berganti.

   Tidak diberi transisi: pergantian background-image memang tidak bisa
   dianimasikan, dan memutar silang tidak terlihat sebagai gerakan apa pun. */
body header[role="banner"] nav.navbar .navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23d9d1cb' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}
body header[role="banner"] nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23d9d1cb' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M7 7l16 16M23 7L7 23'/%3E%3C/svg%3E") !important;
}


/* ===== tm-rev-offset-bar-semua-halaman =====
   Announcement bar sekarang tampil di semua halaman, bukan cuma halaman
   depan. Barnya position:fixed top:0 z-index:1050 (tammia-homepage.css),
   navbar juga fixed top:0 tapi z-index:1030 (commerce.css), jadi barnya
   menang tumpuk dan menutupi 38px bagian atas navbar.

   Yang selama ini menurunkan navbar cuma sepasang aturan berpenanda
   halaman depan di commerce.css:
     body.path-frontpage .navbar { top: 38px; }
     body.path-frontpage         { padding-top: 100px !important; }
   Wajar, waktu itu barnya memang hanya ada di halaman depan. Sekarang
   pasangan itu dibutuhkan di semua halaman. Nilainya disamakan persis
   dengan halaman depan supaya semua halaman terlihat sama, bukan angka
   baru hasil kira-kira.

   Di bawah 768px offsetnya sudah diurus blok MOBILE di atas (top 38px,
   padding-top 119px), jadi aturan ini dibatasi min-width 768px.

   Spesifisitas: body header[role=banner] nav.navbar = (0,2,3) menang atas
   body.path-frontpage .navbar = (0,2,1). html body[class] = (0,1,2) menang
   atas body.path-frontpage = (0,1,1) dan atas body saja = (0,0,1). */
@media (min-width: 768px) {
  body header[role="banner"] nav.navbar { top: 38px !important; }
  html body[class] { padding-top: 100px !important; }
}