/* Palet hitam marmer, cokelat, dan emas untuk seluruh index.html.
   styles.css memakai token ini; aturan komponen di bawah dimuat terakhir. */
:root {
  color-scheme: dark;

  --mw-ink: #080808; /* Hitam pekat */
  --mw-marble: #181716; /* Hitam marmer */
  --mw-brown-black: #211b17; /* Hitam kecokelatan */
  --mw-charcoal: #282725; /* Abu-abu arang */
  --mw-dark-gray: #33312e; /* Abu-abu gelap */
  --mw-mid-gray: #77716a; /* Abu-abu sedang: garis dan elemen nonteks */
  --mw-warm-gray: #b7afa3; /* Abu-abu hangat: teks pendukung */
  --mw-bone: #e8e0d1; /* Putih tulang */
  --mw-cream: #f4ead5; /* Putih krem */
  --mw-warm-white: #faf6ed; /* Putih hangat */
  --mw-deep-brown: #291d16; /* Cokelat sangat gelap */
  --mw-coffee: #3a2b22; /* Cokelat kopi */
  --mw-earth: #594231; /* Cokelat tanah */
  --mw-brown-bronze: #76563b; /* Cokelat perunggu */
  --mw-old-gold: #a88745; /* Emas tua */
  --mw-bronze-gold: #b89556; /* Emas perunggu */
  --mw-classic-gold: #d4af37; /* Emas klasik */
  --mw-bright-gold: #edca64; /* Emas terang */
  --mw-yellow-gold: #f2cd45; /* Kuning emas */
  --mw-champagne: #e8d5ad; /* Champagne gold */
  --mw-pale-gold: #f2e5bf; /* Emas pucat */

  /* Kanal RGB mempertahankan transparansi pada utilitas dan bayangan lama. */
  --mw-ink-rgb: 8, 8, 8;
  --mw-marble-rgb: 24, 23, 22;
  --mw-brown-black-rgb: 33, 27, 23;
  --mw-charcoal-rgb: 40, 39, 37;
  --mw-dark-gray-rgb: 51, 49, 46;
  --mw-mid-gray-rgb: 119, 113, 106;
  --mw-warm-gray-rgb: 183, 175, 163;
  --mw-bone-rgb: 232, 224, 209;
  --mw-cream-rgb: 244, 234, 213;
  --mw-warm-white-rgb: 250, 246, 237;
  --mw-deep-brown-rgb: 41, 29, 22;
  --mw-coffee-rgb: 58, 43, 34;
  --mw-earth-rgb: 89, 66, 49;
  --mw-brown-bronze-rgb: 118, 86, 59;
  --mw-old-gold-rgb: 168, 135, 69;
  --mw-bronze-gold-rgb: 184, 149, 86;
  --mw-classic-gold-rgb: 212, 175, 55;
  --mw-bright-gold-rgb: 237, 202, 100;
  --mw-yellow-gold-rgb: 242, 205, 69;
  --mw-champagne-rgb: 232, 213, 173;
  --mw-pale-gold-rgb: 242, 229, 191;

  --mw-gold-gradient: linear-gradient(115deg, var(--mw-bronze-gold), var(--mw-bright-gold) 48%, var(--mw-classic-gold));
  --mw-gold-hover: linear-gradient(115deg, var(--mw-classic-gold), var(--mw-pale-gold) 48%, var(--mw-yellow-gold));
  --mw-panel-gradient: linear-gradient(135deg, var(--mw-brown-black), var(--mw-marble) 65%);
  --mw-border: var(--mw-earth);

  /* Nilai HSL untuk utilitas id-* dan r-*. */
  --background: 30 4% 9%;
  --foreground: 39 33% 86%;
  --card: 30 4% 9%;
  --card-foreground: 39 33% 86%;
  --popover: 30 4% 9%;
  --popover-foreground: 39 33% 86%;
  --highlight: 46 65% 52%;
  --highlight-dark: 38 41% 74%;
  --primary: 46 65% 52%;
  --primary-foreground: 0 0% 3%;
  --secondary: 40 4% 15%;
  --secondary-foreground: 41 58% 90%;
  --muted: 36 5% 19%;
  --muted-foreground: 36 12% 68%;
  --accent: 25 26% 18%;
  --accent-foreground: 40 56% 79%;
  --destructive: 38 42% 53%;
  --destructive-foreground: 0 0% 3%;
  --border: 26 29% 27%;
  --input: 33 42% 35%;
  --ring: 46 65% 52%;
}

html {
  background: var(--mw-ink);
  scrollbar-color: var(--mw-old-gold) var(--mw-marble);
}

body.details-page {
  color: var(--mw-bone);
  background:
    radial-gradient(ellipse at 85% 0, rgba(var(--mw-old-gold-rgb), .09), transparent 44%),
    linear-gradient(120deg, var(--mw-ink), var(--mw-marble) 48%, var(--mw-brown-black));
  accent-color: var(--mw-classic-gold);
}

::selection {
  background: var(--mw-champagne);
  color: var(--mw-ink);
}

body.details-page :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--mw-bright-gold);
  outline-offset: 3px;
}

input::placeholder,
textarea::placeholder {
  color: var(--mw-warm-gray);
  opacity: 1;
}

body.details-page input:-webkit-autofill,
#the-new-header input:-webkit-autofill {
  -webkit-text-fill-color: var(--mw-cream) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--mw-charcoal) inset !important;
  box-shadow: 0 0 0 1000px var(--mw-charcoal) inset !important;
  caret-color: var(--mw-bright-gold);
}

body a:hover {
  color: var(--mw-bright-gold);
}

/* Navigasi dan pencarian. */
#the-new-header .tnh-logo-content .tnh-logo {
  width: 220px;
  height: 64px;
  align-items: center;
  background: none;
}

#the-new-header .tnh-logo-content .tnh-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 64px;
  object-fit: contain;
}

#the-new-header.tnh-white,
#the-new-header.tnh-white-overlay {
  background: var(--mw-panel-gradient) !important;
  color: var(--mw-bone);
  border-bottom-color: var(--mw-brown-bronze);
  box-shadow: 0 6px 24px rgba(var(--mw-ink-rgb), .24);
}

#the-new-header.tnh-white a:hover,
#the-new-header.tnh-white .tnh-sign-in:hover {
  color: var(--mw-bright-gold);
}

#the-new-header .header-tab-input-panel,
#the-new-header .header-tab-input-panel-inner {
  background: var(--mw-charcoal);
  border-color: var(--mw-old-gold);
  box-shadow: none;
}

#the-new-header .header-tab-input-panel:focus-within {
  border-color: var(--mw-bright-gold);
  box-shadow: 0 0 0 2px rgba(var(--mw-classic-gold-rgb), .2);
}

#the-new-header .header-tab-input-text {
  color: var(--mw-warm-white);
  caret-color: var(--mw-bright-gold);
}

#the-new-header .shade-placeholder-item {
  color: var(--mw-warm-gray);
}

#the-new-header .header-tab-shade-input-item:not(input) {
  background-color: var(--mw-charcoal);
}

#the-new-header .header-tab-input-button,
#the-new-header .tnh-sign-up,
.module_actions .Highlight button,
.index_module_xmanButtonPrimary__4c82e0fd {
  background: var(--mw-gold-gradient);
  color: var(--mw-ink);
  border-color: var(--mw-classic-gold);
  box-shadow: inset 0 1px 0 rgba(var(--mw-pale-gold-rgb), .5), 0 3px 14px rgba(var(--mw-ink-rgb), .25);
}

#the-new-header .header-tab-input-button:hover,
#the-new-header .tnh-sign-up:hover,
.module_actions .Highlight button:hover,
.index_module_xmanButtonPrimary__4c82e0fd:hover {
  background: var(--mw-gold-hover);
  color: var(--mw-ink);
}

#the-new-header .header-tab-input-button :is(span, svg),
.module_actions .Highlight button :is(a, span) {
  color: inherit;
}

/* .tnh-button pada stylesheet lama menggunakan color !important. */
#the-new-header .tnh-sign-up {
  color: var(--mw-ink) !important;
}

#the-new-header .header-tab-input-button img {
  filter: brightness(0);
}

.module_actions .Normal button,
.index_module_xmanButtonSecondary__4c82e0fd {
  background: var(--mw-coffee);
  color: var(--mw-champagne);
  border-color: var(--mw-old-gold);
}

.module_actions .Normal button:hover,
.index_module_xmanButtonSecondary__4c82e0fd:hover {
  background: var(--mw-earth);
  color: var(--mw-pale-gold);
  border-color: var(--mw-bright-gold);
}

.module_actions .Normal button :is(a, span) {
  color: inherit;
}

/* Konten utama dan panel samping. */
.product-title-container h1 {
  color: var(--mw-warm-white);
  -webkit-text-fill-color: var(--mw-warm-white) !important;
}

.product-company {
  background: linear-gradient(105deg, var(--mw-coffee), var(--mw-brown-black) 65%, var(--mw-charcoal));
  box-shadow: inset 0 0 0 1px var(--mw-earth);
  color: var(--mw-champagne);
}

.product-company a,
.detail-product-comment a {
  color: var(--mw-champagne);
}

#ProductImageMain {
  background: var(--mw-panel-gradient);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--mw-earth);
}

.layout-right .layout-stick,
.layout-right .layout-stick.sticky {
  background: var(--mw-panel-gradient);
  box-shadow: 0 0 0 1px var(--mw-earth), 0 16px 40px rgba(var(--mw-ink-rgb), .3);
}

.layout-right .right-bottom,
.layout-right .layout-stick.sticky .right-bottom {
  background: var(--mw-brown-black);
  box-shadow: 0 -1px 0 var(--mw-earth), 0 -8px 20px rgba(var(--mw-ink-rgb), .2);
}

.price-item .id-text-2xl {
  color: var(--mw-bright-gold);
}

.double-bordered-box.selected > span {
  background: var(--mw-coffee);
  color: var(--mw-pale-gold);
}

.double-bordered-box.selected,
.double-bordered-box.selected .inner-border {
  border-color: var(--mw-classic-gold);
}

.double-bordered-box.enabled:hover > span {
  background: var(--mw-earth);
  color: var(--mw-warm-white);
}

.module_supplier_customization .id-rounded-full {
  background-color: var(--mw-bronze-gold);
}

/* Artikel, kartu ringkasan, ulasan, dan rating. */
.index_module_idAiSummary__01115bb2,
.index_module_idAiSummary__01115bb2[data-theme] {
  --theme-background-gradient: linear-gradient(135deg, var(--mw-deep-brown), var(--mw-marble) 65%, var(--mw-charcoal));
  --theme-title-gradient: linear-gradient(110deg, var(--mw-champagne), var(--mw-bright-gold), var(--mw-pale-gold));
  --theme-highlight-background: linear-gradient(transparent 55%, rgba(var(--mw-classic-gold-rgb), .16) 55%);
  --theme-color: var(--mw-classic-gold);
  --theme-description-color: var(--mw-champagne);
  --theme-question-item-bg: var(--mw-charcoal);
  --theme-answer-content-border: var(--mw-brown-bronze);
  --theme-arrow-left-bg: linear-gradient(90deg, var(--mw-charcoal) 45%, transparent);
  --theme-arrow-right-bg: linear-gradient(270deg, var(--mw-charcoal) 45%, transparent);
  box-shadow: inset 0 0 0 1px var(--mw-earth);
}

.index_module_idAiSummary__content__list__01115bb2 {
  background: var(--mw-charcoal);
}

.index_module_idAiSummary__content__list__card__content__01115bb2,
.index_module_idAiSummary__content__p__01115bb2 a {
  color: var(--mw-champagne);
}

.index_module_idAiSummary__divider__01115bb2 {
  background: var(--mw-brown-bronze);
}

.review-layout [role="tab"][aria-selected="true"] {
  color: var(--mw-bright-gold);
  border-bottom-color: var(--mw-classic-gold);
}

.review-layout [role="progressbar"] {
  background: var(--mw-dark-gray);
}

.review-layout [role="progressbar"] > div {
  background: var(--mw-gold-gradient);
}

.review-layout .star,
.review-layout .star-rating-list,
.review-layout .fa-star {
  color: var(--mw-yellow-gold);
}

/* Ikon mengikuti teks; ikon status diberi aksen emas di HTML. */
.details-page svg:not([fill]) {
  fill: currentColor;
}

svg path[fill="var(--mw-bone)"] {
  fill: currentColor;
}

/* Warna ikon bitmap kecil diselaraskan melalui CSS. */
.product-company .verify-icon img,
.module_supplier_customization > div > img,
.review-layout img[src*="O1CN01SXJxOb"],
.detail-sidebar img.sidebar-icon {
  filter: brightness(0) saturate(100%) invert(75%) sepia(44%) saturate(677%) hue-rotate(4deg) brightness(92%) contrast(89%);
}

.product-title-container h1 > img {
  filter: grayscale(1) sepia(1) saturate(2) brightness(1.2);
}

.header-tab-switch-image-upload img,
.searchx-find-similar__img,
.module_ta_plus img.id-h-5,
#the-new-footer img[alt*="social media icon"] {
  filter: brightness(0) invert(.9) sepia(.25);
}

.detail-sidebar-layout .detail-sidebar {
  background: var(--mw-brown-black);
  color: var(--mw-champagne);
  box-shadow: 0 0 0 1px var(--mw-earth), 0 4px 20px rgba(var(--mw-ink-rgb), .3);
}

.detail-sidebar-layout .sidebar-item:hover {
  background: var(--mw-coffee);
}

/* Footer dan kontrol bawaan browser. */
#the-new-footer {
  background: var(--mw-marble);
  color: var(--mw-bone);
  border-top-color: var(--mw-earth);
}

#the-new-footer h3 {
  color: var(--mw-champagne);
}

#the-new-footer .payment-icon {
  background-color: var(--mw-cream);
  border-color: var(--mw-brown-bronze);
}

#the-new-footer .tnf-info {
  background: var(--mw-ink);
  color: var(--mw-warm-gray);
}

::-webkit-scrollbar-track {
  background: var(--mw-marble);
}

::-webkit-scrollbar-thumb {
  background: var(--mw-old-gold);
  border-color: var(--mw-marble);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--mw-bronze-gold);
}