/* =============================================================
   Toolsindo Design System
   Poppins · Orange #FF6B35 · Dark #1A1A2E · WA Green #25D366
   ============================================================= */

/* ─── CSS Variables ─────────────────────────────────────────── */
:root {
  --ti-primary:    #FF6B35;
  --ti-primary-dk: #e85a25;
  --ti-dark:       #1A1A2E;
  --ti-mid:        #16213E;
  --ti-light:      #F8F9FA;
  --ti-white:      #ffffff;
  --ti-wa:         #25D366;
  --ti-wa-dk:      #128C7E;
  --ti-text:       #2D2D2D;
  --ti-muted:      #6C757D;
  --ti-border:     #E9ECEF;
  --ti-shadow:     0 2px 12px rgba(0,0,0,.08);
  --ti-shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --ti-radius:     12px;
  --ti-radius-sm:  8px;
  --ti-font:       'Poppins', sans-serif;
  --ti-transition: .2s ease;
}

/* ─── Base Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--ti-font);
  color: var(--ti-text);
  background: var(--ti-light);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ti-primary); text-decoration: none; }
a:hover { color: var(--ti-primary-dk); }

img { max-width: 100%; height: auto; }

/* ─── Announcement bar ──────────────────────────────────────── */

.ti-topbar {
  background: var(--ti-primary);
  color: #fff;
  font-family: var(--ti-font);
  font-size: .73rem;
  font-weight: 500;
  text-align: center;
  padding: 7px 16px;
  letter-spacing: .3px;
  line-height: 1.5;
}

/* ─── Custom Header (header.php override) ───────────────────── */
.ti-header {
  background: var(--ti-white) !important;
  border-bottom: 1px solid var(--ti-border);
  position: sticky;
  top: 0;
  z-index: 999;
  padding: 0 !important;
  margin: 0 !important;
  transition: box-shadow var(--ti-transition);
}

.ti-header.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,.10);
}

.ti-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 600px;        /* match catalog 540px width */
  margin: 0 auto;
  padding: 0 16px;
  height: 56px;            /* sedikit lebih slim */
}

/* Logo */
.ti-header__logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.ti-logo-tools {
  font-family: var(--ti-font);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ti-dark);
  letter-spacing: -.5px;
  line-height: 1;
}

.ti-logo-indo {
  font-family: var(--ti-font);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ti-primary);
  letter-spacing: -.5px;
  line-height: 1;
}

/* Search */
.ti-header__search {
  flex: 1;
  max-width: 500px;
}

.ti-search-form {
  display: flex;
  align-items: center;
  gap: 0;
}

.ti-search-input {
  flex: 1;
  font-family: var(--ti-font) !important;
  font-size: .88rem !important;
  border: 2px solid var(--ti-border) !important;
  border-right: none !important;
  border-radius: 50px 0 0 50px !important;
  padding: 9px 18px !important;
  background: var(--ti-light) !important;
  color: var(--ti-text) !important;
  outline: none;
  transition: border-color var(--ti-transition);
  min-width: 0;
}

.ti-search-input:focus {
  border-color: var(--ti-primary) !important;
  background: var(--ti-white) !important;
}

.ti-search-btn {
  background: var(--ti-primary);
  color: #fff;
  border: 2px solid var(--ti-primary);
  border-radius: 0 50px 50px 0;
  padding: 0 18px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ti-transition);
  flex-shrink: 0;
}

.ti-search-btn:hover {
  background: var(--ti-primary-dk);
  border-color: var(--ti-primary-dk);
}

/* Nav */
.ti-header__nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ti-nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ti-nav-menu .ti-nav-item > a {
  font-family: var(--ti-font);
  font-size: .88rem;
  font-weight: 500;
  color: var(--ti-dark) !important;  /* force over Storefront header link colour */
  padding: 8px 16px;
  border-radius: 50px;
  display: block;
  transition: color var(--ti-transition), background var(--ti-transition);
  white-space: nowrap;
}

.ti-nav-menu .ti-nav-item > a:hover {
  color: var(--ti-primary);
  background: #FFF3EF;
}

.ti-nav-menu .ti-nav-item.current-menu-item > a {
  color: var(--ti-primary);
}

/* First nav item (Toko) = orange CTA pill — override the dark !important above */
.ti-nav-menu .ti-nav-cta > a {
  background: var(--ti-primary);
  color: #fff !important;
  font-weight: 600;
}

.ti-nav-menu .ti-nav-cta > a:hover {
  background: var(--ti-primary-dk);
  color: #fff !important;
}

.ti-nav-menu .ti-nav-cta.current-menu-item > a {
  background: var(--ti-primary-dk);
  color: #fff !important;
}

/* Hamburger (mobile) */
.ti-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: 4px;
}

.ti-hamburger,
.ti-hamburger::before,
.ti-hamburger::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ti-dark);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
  position: relative;
}

.ti-hamburger::before,
.ti-hamburger::after {
  content: '';
  position: absolute;
  left: 0;
}

.ti-hamburger::before { top: -7px; }
.ti-hamburger::after  { top:  7px; }

/* Hamburger → X when open */
.ti-menu-open .ti-hamburger           { background: transparent; }
.ti-menu-open .ti-hamburger::before   { transform: rotate(45deg) translate(5px, 5px); background: var(--ti-dark); }
.ti-menu-open .ti-hamburger::after    { transform: rotate(-45deg) translate(5px, -5px); background: var(--ti-dark); }

/* ─── WhatsApp button in header ─────────────────────────────── */

.ti-header__wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ti-wa);
  color: #fff !important;
  font-family: var(--ti-font);
  font-size: .82rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 50px;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
  transition: background var(--ti-transition);
}

.ti-header__wa-btn:hover {
  background: var(--ti-wa-dk);
  color: #fff !important;
}

/* ─── Mobile search bar (below sticky header, scrolls) ──────── */

.ti-header__mobile-search {
  display: none;
  padding: 8px 16px 10px;
  background: var(--ti-white);
  border-bottom: 1px solid var(--ti-border);
}

/* ─── Storefront fallback — keep minimal white header ───────── */
.site-header {
  background: var(--ti-white) !important;
  border-bottom: 1px solid var(--ti-border);
}

.site-branding .site-title a {
  color: var(--ti-dark) !important;
  font-weight: 700;
}

.main-navigation a {
  font-family: var(--ti-font);
  font-weight: 500;
  color: var(--ti-dark) !important;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--ti-primary) !important;
}

/* ─── Mobile header ──────────────────────────────────────────── */
/* ≤900px: hide search bar, show hamburger, collapse nav to dropdown */
@media (max-width: 900px) {
  .ti-header__search { display: none; }
  .ti-menu-toggle   { display: flex; }
  .ti-header__mobile-search { display: block; }

  .ti-nav-menu {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--ti-white);
    border-bottom: 1px solid var(--ti-border);
    padding: 12px 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    z-index: 998;
  }

  .ti-nav-menu.ti-menu-open {
    display: flex;
  }

  .ti-nav-menu .ti-nav-item {
    width: 100%;
  }

  .ti-nav-menu .ti-nav-item > a {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--ti-radius-sm);
  }
}

/* ≤640px: tighten inner padding & shrink logo */
@media (max-width: 640px) {
  .ti-header__inner { padding: 0 16px; }

  .ti-logo-tools,
  .ti-logo-indo { font-size: 1.25rem; }

  /* WA button: show icon only on tiny screens */
  .ti-header__wa-label { display: none; }
  .ti-header__wa-btn   { padding: 8px 10px; margin-left: 4px; }
}

/* ─── Shop / Archive Page ────────────────────────────────────── */
.woocommerce-products-header__title,
.woocommerce-loop-product__title,
h1.page-title {
  font-family: var(--ti-font) !important;
  font-weight: 700;
}

/* Category chips (horizontal scroll on mobile) */
.product-categories-widget {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.product-categories-widget li a {
  display: inline-block;
  padding: 6px 14px;
  background: var(--ti-white);
  border: 1.5px solid var(--ti-border);
  border-radius: 50px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ti-text);
  transition: all var(--ti-transition);
  white-space: nowrap;
}

.product-categories-widget li a:hover,
.product-categories-widget li.current-cat > a {
  background: var(--ti-primary);
  border-color: var(--ti-primary);
  color: var(--ti-white);
}

/* ─── Product Card ───────────────────────────────────────────── */
ul.products li.product {
  position: relative;
  background: var(--ti-white);
  border-radius: var(--ti-radius);
  box-shadow: var(--ti-shadow);
  overflow: hidden;
  transition: box-shadow var(--ti-transition), transform var(--ti-transition);
  border: none !important;
}

ul.products li.product:hover {
  box-shadow: var(--ti-shadow-lg);
  transform: translateY(-3px);
}

/* Card image */
ul.products li.product a img {
  border-radius: var(--ti-radius) var(--ti-radius) 0 0;
  transition: transform .35s ease;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

ul.products li.product:hover a img {
  transform: scale(1.05);
}

/* Card title */
ul.products li.product .woocommerce-loop-product__title {
  font-size: .88rem;
  font-weight: 500;
  color: var(--ti-text);
  line-height: 1.4;
  padding: 10px 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card price */
ul.products li.product .price {
  font-family: var(--ti-font);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ti-primary);
  padding: 4px 12px 8px;
  display: block;
}

ul.products li.product .price del {
  color: var(--ti-muted);
  font-weight: 400;
  font-size: .78rem;
  margin-right: 4px;
}

/* Card: sold/rating meta */
.ti-card-meta {
  display: flex;
  gap: 8px;
  padding: 0 12px 10px;
  font-size: .75rem;
  color: var(--ti-muted);
}

.ti-rating { color: #FFC107; font-weight: 600; }

/* Discount badge */
.ti-badge-discount {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--ti-primary);
  color: var(--ti-white);
  font-family: var(--ti-font);
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 50px;
  z-index: 2;
  letter-spacing: .3px;
}

/* Product loop CTA */
ul.products li.product .ti-loop-detail-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 12px 14px;
  min-height: 38px;
  width: calc(100% - 24px);
  background: var(--ti-primary) !important;
  color: var(--ti-white) !important;
  border-radius: var(--ti-radius-sm) !important;
  font-family: var(--ti-font);
  font-size: .84rem;
  font-weight: 700;
  text-align: center;
}

ul.products li.product .ti-loop-detail-button:hover {
  background: var(--ti-primary-dk) !important;
  color: var(--ti-white) !important;
}

/* ─── Sidebar ────────────────────────────────────────────────── */
.widget-area {
  background: var(--ti-white);
  border-radius: var(--ti-radius);
  padding: 20px;
  box-shadow: var(--ti-shadow);
}

.widget-title {
  font-family: var(--ti-font) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: var(--ti-dark) !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px !important;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ti-primary);
}

/* Price filter */
.price_slider_wrapper .ui-slider {
  background: var(--ti-border);
}

/* ─── Single product — full-width, tanpa sidebar ─────────────── */
.single-product #secondary,
.single-product aside.widget-area {
  display: none !important;
}
.single-product #primary,
.single-product .site-main {
  width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.price_slider_wrapper .ui-slider .ui-slider-range {
  background: var(--ti-primary);
}

.price_slider_wrapper .ui-slider .ui-slider-handle {
  background: var(--ti-primary);
  border: 2px solid var(--ti-white);
  box-shadow: 0 2px 6px rgba(255,107,53,.4);
}

.price_slider_amount button {
  background: var(--ti-primary);
  color: var(--ti-white);
  font-family: var(--ti-font);
  font-weight: 600;
  font-size: .82rem;
  border: none;
  border-radius: var(--ti-radius-sm);
  padding: 6px 16px;
  cursor: pointer;
  transition: background var(--ti-transition);
}

.price_slider_amount button:hover {
  background: var(--ti-primary-dk);
}

/* ─── Single Product Page ────────────────────────────────────── */
.single-product div.product {
  background: var(--ti-white);
  border-radius: var(--ti-radius);
  box-shadow: var(--ti-shadow);
  padding: 24px;
}

.single-product div.product .product_title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--ti-dark) !important;
  line-height: 1.35;
  margin-bottom: 6px !important;
}

/* Product meta: sold/rating */
.ti-product-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  font-size: .85rem;
}

.ti-star-rating {
  color: #FFC107;
  font-weight: 600;
}

.ti-sold-count {
  color: var(--ti-muted);
}

/* Product price on single page */
.single-product div.product p.price {
  font-family: var(--ti-font) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: var(--ti-primary) !important;
  margin-bottom: 16px !important;
}

.single-product div.product p.price del {
  color: var(--ti-muted) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}

/* Product images */
.woocommerce-product-gallery__image img {
  border-radius: var(--ti-radius);
}

/* Thumbnails */
.woocommerce-product-gallery .flex-control-thumbs li img {
  border-radius: var(--ti-radius-sm);
  border: 2px solid transparent;
  transition: border-color var(--ti-transition);
}

.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
  border-color: var(--ti-primary);
}

/* ─── Product Description Tabs ───────────────────────────────── */

/* Ubah layout tabs dari 2-kolom → 1-kolom penuh */
.woocommerce-tabs.wc-tabs-wrapper {
  margin-top: 40px;
  clear: both;
}

.woocommerce-tabs ul.tabs {
  display: flex !important;
  flex-direction: row !important;
  gap: 4px;
  padding: 0 0 0 0 !important;
  margin: 0 0 0 0 !important;
  border-bottom: 2px solid var(--ti-border) !important;
  background: transparent !important;
  float: none !important;
  width: 100% !important;
}

/* Hapus segitiga/arrow Storefront dari semua tab WC */
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li a::before,
.woocommerce-tabs ul.tabs li a::after {
  display: none !important;
  content: '' !important;
}

.woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-tabs ul.tabs li a {
  font-family: var(--ti-font) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  color: var(--ti-muted) !important;
  padding: 10px 20px !important;
  display: block;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--ti-transition);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--ti-primary) !important;
  border-bottom-color: var(--ti-primary) !important;
  background: transparent !important;
}

.woocommerce-tabs .panel {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 28px 0 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Deskripsi — h4 headings (Features, Specification, Notes) */
.woocommerce-tabs .panel h4 {
  font-family: var(--ti-font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--ti-dark) !important;
  margin: 24px 0 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 2px solid var(--ti-border) !important;
}

.woocommerce-tabs .panel h4:first-child {
  margin-top: 0 !important;
}

/* Deskripsi — ul/li */
.woocommerce-tabs .panel ul {
  padding-left: 20px !important;
  margin: 0 0 12px !important;
}

.woocommerce-tabs .panel ul li {
  font-size: .88rem !important;
  color: var(--ti-text) !important;
  line-height: 1.7 !important;
  margin-bottom: 4px !important;
}

/* Deskripsi — Specification table */
.woocommerce-tabs .panel table {
  border-collapse: collapse !important;
  font-size: .88rem !important;
  width: auto !important;
  margin-bottom: 12px !important;
}

.woocommerce-tabs .panel table td {
  padding: 5px 16px 5px 0 !important;
  vertical-align: top !important;
  color: var(--ti-text) !important;
  border: none !important;
  background: transparent !important;
}

.woocommerce-tabs .panel table td:first-child {
  font-weight: 600 !important;
  color: var(--ti-dark) !important;
  white-space: nowrap !important;
  min-width: 120px !important;
}

/* CTA paragraph di akhir deskripsi */
.woocommerce-tabs .panel p:last-child {
  margin-top: 20px !important;
  font-size: .88rem !important;
  color: var(--ti-muted) !important;
  background: var(--ti-light) !important;
  border-left: 3px solid var(--ti-wa) !important;
  padding: 10px 14px !important;
  border-radius: 0 var(--ti-radius-sm) var(--ti-radius-sm) 0 !important;
}

/* Short description */
.woocommerce-product-details__short-description {
  font-size: .88rem;
  color: var(--ti-muted);
  background: var(--ti-light);
  border-left: 3px solid var(--ti-primary);
  border-radius: 0 var(--ti-radius-sm) var(--ti-radius-sm) 0;
  padding: 10px 14px;
  margin-bottom: 20px;
}

/* ─── Breadcrumbs ────────────────────────────────────────────── */
.woocommerce-breadcrumb {
  font-family: var(--ti-font);
  font-size: .8rem;
  color: var(--ti-muted) !important;
  margin-bottom: 16px !important;
}

.woocommerce-breadcrumb a {
  color: var(--ti-muted) !important;
}

.woocommerce-breadcrumb a:hover {
  color: var(--ti-primary) !important;
}

/* ─── Buttons (general WooCommerce) ──────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: var(--ti-font) !important;
  font-weight: 600 !important;
  border-radius: var(--ti-radius-sm) !important;
  transition: all var(--ti-transition) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--ti-primary) !important;
  color: var(--ti-white) !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--ti-primary-dk) !important;
}

/* ─── Pagination ─────────────────────────────────────────────── */
.woocommerce-pagination .page-numbers {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px 0;
}

.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ti-radius-sm);
  font-family: var(--ti-font);
  font-size: .85rem;
  font-weight: 500;
  color: var(--ti-text);
  background: var(--ti-white);
  border: 1.5px solid var(--ti-border);
  transition: all var(--ti-transition);
}

.woocommerce-pagination .page-numbers li a:hover,
.woocommerce-pagination .page-numbers li span.current {
  background: var(--ti-primary);
  border-color: var(--ti-primary);
  color: var(--ti-white);
}

/* ─── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--ti-dark) !important;
  color: rgba(255,255,255,.7) !important;
  font-family: var(--ti-font);
  font-size: .85rem;
}

.site-footer a {
  color: rgba(255,255,255,.7) !important;
}

.site-footer a:hover {
  color: var(--ti-primary) !important;
}

/* ─── Notifications / Alerts ─────────────────────────────────── */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--ti-primary) !important;
  font-family: var(--ti-font);
  font-size: .88rem;
  border-radius: 0 var(--ti-radius-sm) var(--ti-radius-sm) 0;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .single-product div.product {
    padding: 16px;
  }

  .single-product div.product .product_title {
    font-size: 1.15rem !important;
  }

  ul.products li.product .woocommerce-loop-product__title {
    font-size: .82rem;
  }

  .widget-area {
    padding: 14px;
  }

  /* Category chips: horizontal scroll on mobile */
  .product-categories-widget {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .product-categories-widget::-webkit-scrollbar { display: none; }
}

@media (max-width: 480px) {
  ul.products.columns-3,
  ul.products.columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─── Skip to main content (Accessibility + SEO) ────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 9999;
  background: var(--ti-primary);
  color: var(--ti-white);
  padding: 8px 16px;
  border-radius: var(--ti-radius-sm);
  font-family: var(--ti-font);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
}
.skip-link:focus {
  left: 1rem;
}

/* =============================================================
   Snackshop-style Homepage (.ti-snap)
   ============================================================= */

/* ── Promo ticker ───────────────────────────────────────────── */
.ti-snap__ticker {
  background: var(--ti-dark);
  color: rgba(255,255,255,.85);
  font-size: .75rem;
  font-family: var(--ti-font);
  padding: 8px 0;
  text-align: center;
  letter-spacing: .2px;
}

.ti-snap__ticker-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ti-ticker-dot {
  opacity: .4;
}

/* ── Search strip ───────────────────────────────────────────── */
.ti-snap__search-strip {
  background: var(--ti-white);
  padding: 16px 0;
  border-bottom: 1px solid var(--ti-border);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.ti-snap__search-form {
  display: flex;
  align-items: center;
  background: var(--ti-light);
  border: 1.5px solid var(--ti-border);
  border-radius: 12px;
  overflow: hidden;
  max-width: 700px;
  margin: 0 auto;
  transition: border-color .18s, box-shadow .18s;
}

.ti-snap__search-form:focus-within {
  border-color: var(--ti-primary);
  box-shadow: 0 0 0 3px rgba(255,107,53,.12);
}

.ti-snap__search-icon {
  flex-shrink: 0;
  margin: 0 10px 0 14px;
  color: var(--ti-muted);
}

.ti-snap__search-form input[type="search"] {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--ti-font);
  font-size: .9rem;
  color: var(--ti-text);
  padding: 13px 8px;
  outline: none;
  min-width: 0;
}

.ti-snap__search-form button {
  background: var(--ti-primary);
  color: #fff;
  border: none;
  padding: 0 22px;
  height: 50px;
  font-family: var(--ti-font);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .18s;
  letter-spacing: .2px;
}

.ti-snap__search-form button:hover {
  background: var(--ti-primary-dk);
}

/* ── Section shared ─────────────────────────────────────────── */
.ti-snap__section {
  padding: 28px 0;
}

.ti-snap__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.ti-snap__section-head h2 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ti-dark);
  margin: 0;
}

.ti-snap__section-head a {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ti-primary);
  text-decoration: none;
}

/* ── Category grid ──────────────────────────────────────────── */
.ti-snap__cats {
  background: var(--ti-white);
  border-bottom: 1px solid var(--ti-border);
}

.ti-snap__cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.ti-snap__cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 10px;
  background: var(--ti-light);
  border: 1.5px solid var(--ti-border);
  border-radius: var(--ti-radius);
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .15s;
  gap: 6px;
}

.ti-snap__cat-card:hover {
  border-color: var(--ti-primary);
  box-shadow: 0 4px 16px rgba(255,107,53,.12);
  transform: translateY(-2px);
}

.ti-snap__cat-icon {
  font-size: 2rem;
  line-height: 1;
  display: block;
}

.ti-snap__cat-name {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ti-dark);
  line-height: 1.3;
}

.ti-snap__cat-count {
  font-size: .72rem;
  color: var(--ti-muted);
}

/* ── Product grid ───────────────────────────────────────────── */
.ti-snap__products {
  background: var(--ti-light);
}

.ti-snap__product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.ti-snap__card {
  background: var(--ti-white);
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s, transform .15s;
}

.ti-snap__card:hover {
  box-shadow: var(--ti-shadow-lg);
  transform: translateY(-2px);
}

.ti-snap__card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--ti-primary);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  z-index: 1;
}

.ti-snap__card-img {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ti-light);
}

.ti-snap__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}

.ti-snap__card:hover .ti-snap__card-img img {
  transform: scale(1.04);
}

.ti-snap__card-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.ti-snap__card-meta {
  display: flex;
  gap: 6px;
  font-size: .71rem;
  color: var(--ti-muted);
  flex-wrap: wrap;
}

.ti-snap__card-body h3 {
  font-size: .81rem;
  font-weight: 600;
  color: var(--ti-dark);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ti-snap__card-body h3 a {
  color: inherit;
  text-decoration: none;
}

.ti-snap__card-price {
  font-weight: 700;
  font-size: .92rem;
  color: var(--ti-primary);
}

.ti-snap__card-price del {
  color: var(--ti-muted);
  font-weight: 400;
  font-size: .78rem;
}

.ti-snap__card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  padding: 9px 8px;
  background: var(--ti-wa);
  color: #fff;
  font-family: var(--ti-font);
  font-size: .8rem;
  font-weight: 700;
  border-radius: var(--ti-radius-sm);
  text-decoration: none;
  transition: background .18s;
}

.ti-snap__card-btn:hover {
  background: var(--ti-wa-dk);
  color: #fff;
}

/* ── Tombol CTA di summary produk (dari external.php) ───────── */
.ti-order-cta {
  margin: 20px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ti-order-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  background: var(--ti-wa);
  color: #fff !important;
  border-radius: 12px;
  font-family: var(--ti-font);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  letter-spacing: .2px;
  transition: background .18s, transform .12s, box-shadow .18s;
  box-shadow: 0 4px 16px rgba(37,211,102,.35);
}

.ti-order-cta__btn:hover {
  background: var(--ti-wa-dk);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(37,211,102,.45);
}

.ti-order-cta__hint {
  text-align: center;
  font-size: .78rem;
  color: var(--ti-muted);
  margin: 0;
}

.ti-order-cta__quick {
  display: block;
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ti-muted) !important;
  text-decoration: none;
  padding: 4px 0;
  transition: color var(--ti-transition);
}

.ti-order-cta__quick:hover {
  color: var(--ti-wa) !important;
}

/* ── WA form section (below product gallery) ────────────────── */
.ti-wa-form-section {
  background: var(--ti-light);
  padding: 32px 0;
  clear: both;
  border-top: 1px solid var(--ti-border);
}

.ti-wa-form-section__inner {
  max-width: 680px;
  margin: 0 auto;
}

/* ── Pastikan judul dan harga produk terlihat jelas ─────────── */
.woocommerce div.product .product_title {
  font-family: var(--ti-font) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--ti-dark) !important;
  line-height: 1.35 !important;
  margin: 0 0 8px !important;
  display: block !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--ti-font) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--ti-primary) !important;
  display: block !important;
  margin-bottom: 14px !important;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color: var(--ti-muted) !important;
  font-size: .95rem !important;
  font-weight: 400 !important;
}

/* Fix: Storefront summary float layout */
.woocommerce div.product .summary.entry-summary {
  display: block !important;
  float: right !important;
  width: 46% !important;
  clear: none !important;
}

.woocommerce div.product .woocommerce-product-gallery {
  float: left !important;
  width: 50% !important;
}

/* After floats, clear */
.woocommerce div.product::after {
  content: "";
  display: table;
  clear: both;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ti-snap__cat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .ti-snap__cat-card {
    padding: 12px 6px;
  }

  .ti-snap__cat-icon {
    font-size: 1.6rem;
  }

  .ti-snap__cat-name {
    font-size: .72rem;
  }

  .ti-snap__product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .ti-snap__search-strip {
    padding: 10px 0;
  }
}

@media (max-width: 480px) {
  .ti-snap__ticker-inner {
    font-size: .7rem;
  }

  .ti-snap__section {
    padding: 20px 0;
  }
}

/* =============================================================
   Front Page Landing (legacy — kept for compat)
   ============================================================= */
.ti-front-page {
  background: var(--ti-white);
}

.ti-wrap {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.ti-kicker {
  margin: 0 0 10px;
  color: var(--ti-primary);
  font-family: var(--ti-font);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ti-hero {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(26,26,46,.94), rgba(26,26,46,.76) 48%, rgba(26,26,46,.24)),
    linear-gradient(135deg, #1A1A2E 0%, #16213E 54%, #FF6B35 100%);
  color: var(--ti-white);
  display: flex;
  align-items: center;
}

.ti-hero__media {
  position: absolute;
  inset: 0;
  opacity: .34;
}

.ti-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 42%, rgba(255,107,53,.24), transparent 34%);
}

.ti-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.05);
}

.ti-hero__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  padding: 56px 0 64px;
}

.ti-hero h1 {
  margin: 0;
  color: var(--ti-white);
  font-family: var(--ti-font);
  font-size: clamp(3rem, 6.6vw, 6.6rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: 0;
}

.ti-hero__lead {
  width: min(620px, 100%);
  margin: 20px 0 28px;
  color: rgba(255,255,255,.86);
  font-size: 1.08rem;
  line-height: 1.7;
}

.ti-search {
  display: flex;
  width: min(620px, 100%);
  min-height: 58px;
  background: var(--ti-white);
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(0,0,0,.22);
  overflow: hidden;
}

.ti-search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  color: var(--ti-text);
  font-family: var(--ti-font);
  font-size: .98rem;
  padding: 0 20px;
}

.ti-search input[type="search"]:focus {
  outline: 2px solid var(--ti-primary);
  outline-offset: -2px;
}

.ti-search button,
.ti-button {
  font-family: var(--ti-font);
  font-weight: 700;
  border-radius: 8px;
  transition: transform var(--ti-transition), background var(--ti-transition), color var(--ti-transition), border-color var(--ti-transition);
}

.ti-search button {
  border: 0;
  background: var(--ti-primary);
  color: var(--ti-white);
  padding: 0 24px;
  cursor: pointer;
}

.ti-search button:hover {
  background: var(--ti-primary-dk);
}

.ti-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.ti-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  text-decoration: none;
}

.ti-button:hover {
  transform: translateY(-1px);
}

.ti-button--primary {
  background: var(--ti-primary);
  color: var(--ti-white);
}

.ti-button--primary:hover {
  background: var(--ti-primary-dk);
  color: var(--ti-white);
}

.ti-button--ghost {
  border: 1.5px solid rgba(255,255,255,.34);
  color: var(--ti-white);
}

.ti-button--ghost:hover {
  border-color: var(--ti-white);
  color: var(--ti-white);
}

.ti-section {
  padding: 72px 0;
}

.ti-section--categories {
  background: var(--ti-light);
}

.ti-section--products {
  background: var(--ti-white);
}

.ti-section--trust {
  background: var(--ti-dark);
  color: var(--ti-white);
}

.ti-section__head {
  max-width: 680px;
  margin-bottom: 28px;
}

.ti-section__head--inline {
  display: flex;
  max-width: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.ti-section__head h2,
.ti-trust-grid h2 {
  margin: 0;
  color: var(--ti-dark);
  font-family: var(--ti-font);
  font-size: clamp(1.85rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}

.ti-section--trust h2 {
  color: var(--ti-white);
}

.ti-section__head--inline > a {
  color: var(--ti-primary);
  font-weight: 700;
  white-space: nowrap;
}

.ti-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ti-category {
  display: flex;
  min-height: 104px;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  background: var(--ti-white);
  border: 1px solid var(--ti-border);
  border-radius: 8px;
  color: var(--ti-dark);
  box-shadow: var(--ti-shadow);
}

.ti-category:hover {
  border-color: var(--ti-primary);
  color: var(--ti-dark);
  transform: translateY(-2px);
}

.ti-category span {
  font-weight: 700;
  line-height: 1.25;
}

.ti-category small {
  color: var(--ti-muted);
  font-weight: 500;
}

.ti-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.ti-product {
  overflow: hidden;
  background: var(--ti-white);
  border: 1px solid var(--ti-border);
  border-radius: 8px;
  box-shadow: var(--ti-shadow);
}

.ti-product__image {
  display: block;
  background: var(--ti-light);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.ti-product__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.ti-product:hover .ti-product__image img {
  transform: scale(1.04);
}

.ti-product__body {
  padding: 14px;
}

.ti-product h3 {
  margin: 0 0 10px;
  font-family: var(--ti-font);
  font-size: .94rem;
  font-weight: 600;
  line-height: 1.38;
}

.ti-product h3 a {
  color: var(--ti-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ti-product__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ti-muted);
  font-size: .78rem;
}

.ti-product__price {
  color: var(--ti-primary);
  font-size: .96rem;
  font-weight: 700;
}

.ti-product__price del {
  color: var(--ti-muted);
  font-size: .78rem;
  font-weight: 400;
}

.ti-trust-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 24px;
}

.ti-trust-item {
  padding-top: 6px;
  border-top: 2px solid var(--ti-primary);
}

.ti-trust-item strong,
.ti-trust-item span {
  display: block;
}

.ti-trust-item strong {
  margin-bottom: 8px;
  color: var(--ti-white);
  font-size: 1rem;
}

.ti-trust-item span {
  color: rgba(255,255,255,.72);
  font-size: .9rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .ti-category-grid,
  .ti-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ti-trust-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .ti-hero {
    min-height: auto;
  }

  .ti-hero__content {
    padding: 70px 0 78px;
  }

  .ti-hero__lead {
    font-size: .98rem;
  }

  .ti-search {
    flex-direction: column;
  }

  .ti-search input[type="search"] {
    min-height: 54px;
  }

  .ti-search button {
    min-height: 48px;
  }

  .ti-section {
    padding: 52px 0;
  }

  .ti-section__head--inline {
    align-items: flex-start;
    flex-direction: column;
  }

  .ti-category-grid,
  .ti-product-grid,
  .ti-trust-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   Hero: updated dot color + WA button
   ============================================================= */

.ti-hero__dot {
  color: var(--ti-primary);
}

.ti-button--wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ti-wa);
  color: var(--ti-white);
  border: none;
  font-family: var(--ti-font);
  font-weight: 700;
  border-radius: 8px;
}

.ti-button--wa:hover {
  background: var(--ti-wa-dk);
  color: var(--ti-white);
}

.ti-button--lg {
  min-height: 52px;
  padding: 0 28px;
  font-size: 1rem;
}

/* =============================================================
   Stats Strip
   ============================================================= */

.ti-stats {
  background: var(--ti-primary);
  color: var(--ti-white);
  padding: 18px 0;
}

.ti-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  text-align: center;
}

.ti-stats__item {
  padding: 8px 16px;
  border-right: 1px solid rgba(255,255,255,.2);
}

.ti-stats__item:last-child {
  border-right: none;
}

.ti-stats__item strong {
  display: block;
  font-family: var(--ti-font);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.ti-stats__item span {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  opacity: .88;
  margin-top: 2px;
}

/* =============================================================
   Category Grid (updated with icons)
   ============================================================= */

.ti-category {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 110px;
  padding: 18px 16px;
  background: var(--ti-white);
  border: 1.5px solid var(--ti-border);
  border-radius: 10px;
  color: var(--ti-dark);
  box-shadow: var(--ti-shadow);
  text-decoration: none;
  transition: border-color var(--ti-transition), transform var(--ti-transition), box-shadow var(--ti-transition);
}

.ti-category:hover {
  border-color: var(--ti-primary);
  color: var(--ti-dark);
  transform: translateY(-3px);
  box-shadow: var(--ti-shadow-lg);
}

.ti-category__icon {
  font-size: 1.6rem;
  line-height: 1;
  display: block;
}

.ti-category__name {
  font-family: var(--ti-font);
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.25;
  color: var(--ti-dark);
}

.ti-category__count {
  font-size: .75rem;
  color: var(--ti-muted);
  font-weight: 400;
}

/* =============================================================
   Product Grid (updated cards with CTA)
   ============================================================= */

.ti-product__rating {
  color: #FFC107;
  font-size: .78rem;
  font-weight: 600;
}

.ti-product__sold {
  color: var(--ti-muted);
  font-size: .75rem;
}

.ti-product__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  margin-top: 10px;
  background: var(--ti-primary);
  color: var(--ti-white);
  font-family: var(--ti-font);
  font-size: .82rem;
  font-weight: 700;
  border-radius: var(--ti-radius-sm);
  text-decoration: none;
  transition: background var(--ti-transition), transform var(--ti-transition);
}

.ti-product__cta:hover {
  background: var(--ti-primary-dk);
  color: var(--ti-white);
  transform: translateY(-1px);
}

.ti-section__footer {
  text-align: center;
  margin-top: 36px;
}

.ti-section__all-link {
  font-family: var(--ti-font);
  font-weight: 700;
  font-size: .9rem;
  color: var(--ti-primary);
  white-space: nowrap;
  text-decoration: none;
}

.ti-section__all-link:hover {
  color: var(--ti-primary-dk);
}

/* =============================================================
   Trust Cards (replaced old trust-grid)
   ============================================================= */

.ti-section__head--center {
  text-align: center;
  max-width: 100%;
  margin-bottom: 40px;
}

.ti-section__head--center h2 {
  color: var(--ti-white);
  font-family: var(--ti-font);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 700;
  margin: 0;
}

.ti-kicker--light {
  color: rgba(255,255,255,.7) !important;
}

.ti-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.ti-trust-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 28px 22px;
  transition: background var(--ti-transition), transform var(--ti-transition);
}

.ti-trust-card:hover {
  background: rgba(255,255,255,.1);
  transform: translateY(-3px);
}

.ti-trust-card__icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 14px;
  line-height: 1;
}

.ti-trust-card h3 {
  font-family: var(--ti-font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ti-white);
  margin: 0 0 8px;
}

.ti-trust-card p {
  font-size: .85rem;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
  margin: 0;
}

/* =============================================================
   WhatsApp CTA Section
   ============================================================= */

.ti-section--cta {
  background: var(--ti-primary);
  padding: 52px 0;
}

.ti-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.ti-cta__text h2 {
  margin: 0 0 8px;
  color: var(--ti-white);
  font-family: var(--ti-font);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 700;
}

.ti-cta__text p {
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: .95rem;
  line-height: 1.55;
}

.ti-section--cta .ti-button--wa {
  flex-shrink: 0;
  background: var(--ti-white);
  color: var(--ti-wa-dk);
  white-space: nowrap;
}

.ti-section--cta .ti-button--wa:hover {
  background: var(--ti-light);
  color: var(--ti-wa-dk);
}

/* =============================================================
   Custom Footer
   ============================================================= */

.ti-footer {
  background: var(--ti-dark);
  color: rgba(255,255,255,.8);
  font-family: var(--ti-font);
}

/* Hide default Storefront .col-full footer widgets */
.ti-footer .col-full { display: none; }

.ti-footer__main {
  padding: 60px 0 44px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* 4-col: Brand | Kategori | Tautan | Hubungi Kami */
.ti-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px 48px;
  align-items: start;
}

/* Brand column */
.ti-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ti-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  margin-bottom: 16px;
}

/* Reuse header logo spans — same weight/size, white on dark bg */
.ti-footer__logo .ti-logo-tools {
  color: var(--ti-white);
  font-size: 1.4rem;
}

.ti-footer__logo .ti-logo-indo {
  font-size: 1.4rem;
}

.ti-footer__tagline {
  font-size: .84rem;
  line-height: 1.7;
  color: rgba(255,255,255,.55);
  margin: 0;
  max-width: 280px;
}

/* Footer column titles */
.ti-footer__title {
  font-size: .75rem;
  font-weight: 700;
  color: var(--ti-white) !important;
  text-transform: uppercase;
  letter-spacing: .9px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* Footer links */
.ti-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ti-footer__links li a {
  font-size: .84rem;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color var(--ti-transition);
}

.ti-footer__links li a:hover {
  color: var(--ti-primary);
}

/* Bottom bar — centred, minimal */
.ti-footer__bottom {
  padding: 20px 0;
}

.ti-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ti-footer__bottom p {
  margin: 0;
  font-size: .78rem;
  color: rgba(255,255,255,.35);
}

.ti-footer__bottom a {
  color: rgba(255,255,255,.5);
  text-decoration: none;
}

.ti-footer__bottom a:hover {
  color: var(--ti-primary);
}

/* Footer bottom policy links */
.ti-footer__bottom-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ti-footer__bottom-links a {
  font-size: .78rem;
  color: rgba(255,255,255,.4);
  text-decoration: none;
}

.ti-footer__bottom-links a:hover {
  color: var(--ti-primary);
}

.ti-footer__bottom-links span {
  color: rgba(255,255,255,.2);
  font-size: .7rem;
}

/* Footer trust bar */
.ti-footer__trust-bar {
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 18px 0;
}

.ti-footer__trust-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.ti-footer__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ti-font);
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  white-space: nowrap;
}

/* WA button inside footer brand col */
.ti-footer__wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ti-wa);
  color: #fff !important;
  font-family: var(--ti-font);
  font-size: .84rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none !important;
  margin-top: 18px;
  transition: background var(--ti-transition);
  width: fit-content;
}

.ti-footer__wa-btn:hover {
  background: var(--ti-wa-dk);
  color: #fff !important;
}

/* Contact list in footer */
.ti-footer__contact {
  gap: 14px !important;
}

.ti-footer__contact-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px;
  list-style: none;
}

.ti-footer__contact-icon {
  font-size: 1rem;
  line-height: 1.5;
  flex-shrink: 0;
}

.ti-footer__contact-item > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ti-footer__contact-item strong {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  display: block;
}

.ti-footer__contact-item a,
.ti-footer__contact-item span {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
}

.ti-footer__contact-item a:hover {
  color: var(--ti-wa);
}

/* =============================================================
   Responsive — Updated
   ============================================================= */

@media (max-width: 960px) {
  .ti-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
  }

  .ti-footer__trust-item:nth-child(n+3) { display: none; } /* show only 2 on tablet */

  .ti-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ti-stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ti-stats__item {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.2);
    padding: 14px 16px;
  }

  .ti-stats__item:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,.2);
  }

  .ti-stats__item:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .ti-cta {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .ti-footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ti-footer__trust-bar { padding: 12px 0; }
  .ti-footer__trust-item { font-size: .72rem; }
  .ti-footer__trust-item:nth-child(n+3) { display: flex; } /* show all on mobile */

  .ti-trust-grid {
    grid-template-columns: 1fr;
  }

  .ti-stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ti-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .ti-category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* =============================================================
   Promo Bar
   ============================================================= */

.ti-promo-bar {
  background: var(--ti-dark);
  color: rgba(255,255,255,.82);
  font-family: var(--ti-font);
  font-size: .78rem;
  font-weight: 500;
  text-align: center;
  padding: 9px 16px;
  letter-spacing: .1px;
}

.ti-promo-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.ti-promo-bar__sep {
  color: rgba(255,255,255,.3);
}

@media (max-width: 640px) {
  .ti-promo-bar {
    font-size: .72rem;
    padding: 8px 12px;
  }

  /* Hide separators on very small screens */
  .ti-promo-bar__sep { display: none; }

  .ti-promo-bar__inner {
    flex-direction: column;
    gap: 2px;
  }
}

/* =============================================================
   Category Chips (horizontal scroll)
   ============================================================= */

.ti-section--cats {
  background: var(--ti-light);
  padding: 52px 0;
}

.ti-cat-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ti-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  background: var(--ti-white);
  border: 1.5px solid var(--ti-border);
  border-radius: 50px;
  text-decoration: none;
  color: var(--ti-text);
  font-family: var(--ti-font);
  font-size: .84rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: border-color var(--ti-transition),
              background  var(--ti-transition),
              color       var(--ti-transition),
              transform   var(--ti-transition);
}

.ti-cat-chip:hover {
  border-color: var(--ti-primary);
  background: #FFF3EF;
  color: var(--ti-primary);
  transform: translateY(-2px);
}

.ti-cat-chip__icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.ti-cat-chip__name {
  font-weight: 600;
  color: inherit;
}

.ti-cat-chip__count {
  font-style: normal;
  font-size: .72rem;
  font-weight: 400;
  color: var(--ti-muted);
  background: var(--ti-light);
  border-radius: 50px;
  padding: 1px 7px;
  flex-shrink: 0;
}

.ti-cat-chip:hover .ti-cat-chip__count {
  background: rgba(255,107,53,.1);
  color: var(--ti-primary);
}

/* Mobile: horizontal scroll (no wrap) */
@media (max-width: 768px) {
  .ti-cat-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
    /* subtle fade on right edge to hint scroll */
    -webkit-mask: linear-gradient(90deg, #000 85%, transparent);
    mask: linear-gradient(90deg, #000 85%, transparent);
  }

  .ti-cat-chips::-webkit-scrollbar { display: none; }
}

/* =============================================================
   Floating WhatsApp Button
   ============================================================= */

.ti-float-wa {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 14px;
  background: var(--ti-wa);
  color: var(--ti-white) !important;
  border-radius: 50px;
  text-decoration: none !important;
  font-family: var(--ti-font);
  font-size: .9rem;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  transition: background var(--ti-transition),
              box-shadow   var(--ti-transition),
              transform    var(--ti-transition);
  /* Pulse animation to draw attention */
  animation: ti-wa-pulse 3s ease-in-out infinite;
}

.ti-float-wa:hover {
  background: var(--ti-wa-dk);
  box-shadow: 0 6px 28px rgba(37,211,102,.55);
  transform: translateY(-2px);
  animation: none;
  color: var(--ti-white) !important;
}

.ti-float-wa__icon {
  flex-shrink: 0;
}

.ti-float-wa__label {
  white-space: nowrap;
}

@keyframes ti-wa-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.45); }
  50%       { box-shadow: 0 4px 30px rgba(37,211,102,.70); }
}

/* Mobile: show icon only (no label) */
@media (max-width: 480px) {
  .ti-float-wa {
    bottom: 16px;
    right: 16px;
    padding: 14px;
    border-radius: 50%;
  }

  .ti-float-wa__label { display: none; }
}

/* =============================================================
   Hero: mobile tweaks for compact height
   ============================================================= */

@media (max-width: 640px) {
  .ti-hero {
    min-height: 360px;
  }

  .ti-hero__content {
    padding: 44px 0 52px;
  }

  .ti-hero h1 {
    font-size: clamp(2.4rem, 10vw, 3.6rem);
  }
}

/* =============================================================
   Archive / Category / Search page
   ============================================================= */

/* ── Archive Header ──────────────────────────────────────────── */
.ti-archive__header {
  background: var(--ti-white);
  border-bottom: 1px solid var(--ti-border);
  padding: 18px 0 16px;
}

.ti-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  color: var(--ti-muted);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ti-breadcrumb a {
  color: var(--ti-muted);
  text-decoration: none;
}
.ti-breadcrumb a:hover { color: var(--ti-primary); }

.ti-breadcrumb span[aria-current="page"] {
  color: var(--ti-text);
  font-weight: 600;
}

.ti-archive__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ti-archive__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ti-dark);
  margin: 0 0 4px;
  line-height: 1.2;
}

.ti-archive__count {
  font-size: .8rem;
  color: var(--ti-muted);
  margin: 0;
}

/* ── Archive Search Bar ──────────────────────────────────────── */
.ti-archive__search {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--ti-light);
  border: 1.5px solid var(--ti-border);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  max-width: 300px;
  width: 100%;
  transition: border-color var(--ti-transition), box-shadow var(--ti-transition);
}

.ti-archive__search:focus-within {
  border-color: var(--ti-primary);
  box-shadow: 0 0 0 3px rgba(255,107,53,.12);
}

.ti-archive__search input[type="search"] {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 12px;
  font-family: var(--ti-font);
  font-size: .84rem;
  color: var(--ti-text);
  outline: none;
  min-width: 0;
}

.ti-archive__search button {
  background: var(--ti-primary);
  border: none;
  color: #fff;
  padding: 0 14px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--ti-transition);
}

.ti-archive__search button:hover { background: var(--ti-primary-dk); }

/* ── Category chips bar ──────────────────────────────────────── */
.ti-archive__chips-wrap {
  background: var(--ti-white);
  border-bottom: 1px solid var(--ti-border);
  padding: 12px 0;
}

.ti-cat-chips--compact .ti-cat-chip {
  padding: 6px 12px;
  font-size: .78rem;
}

.ti-cat-chip--active {
  background: var(--ti-primary) !important;
  color: #fff !important;
  border-color: var(--ti-primary) !important;
}

.ti-cat-chip--active .ti-cat-chip__count {
  background: rgba(255,255,255,.25) !important;
  color: #fff !important;
}

.ti-cat-chip--all {
  background: var(--ti-light);
  border-color: var(--ti-border);
}

/* ── Archive Body & Grid ─────────────────────────────────────── */
.ti-archive__body {
  padding: 28px 0 48px;
}

.ti-product-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* ── Pagination ──────────────────────────────────────────────── */
.ti-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.ti-pagination a,
.ti-pagination span,
.ti-pagination__prev a,
.ti-pagination__next a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1.5px solid var(--ti-border);
  background: var(--ti-white);
  color: var(--ti-text);
  font-family: var(--ti-font);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--ti-transition);
}

.ti-pagination a:hover,
.ti-pagination__prev a:hover,
.ti-pagination__next a:hover {
  background: var(--ti-primary);
  border-color: var(--ti-primary);
  color: #fff;
}

.ti-pagination .current,
.ti-pagination span.current {
  background: var(--ti-primary);
  border-color: var(--ti-primary);
  color: #fff;
  cursor: default;
}

.ti-pagination .dots {
  border: none;
  background: transparent;
  color: var(--ti-muted);
  pointer-events: none;
}

.ti-pagination__numbers {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.ti-pagination__prev,
.ti-pagination__next {
  font-weight: 700;
}

/* ── Empty state ─────────────────────────────────────────────── */
.ti-archive__empty {
  text-align: center;
  padding: 60px 24px;
  max-width: 480px;
  margin: 0 auto;
}

.ti-archive__empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.ti-archive__empty h2 {
  font-size: 1.4rem;
  color: var(--ti-dark);
  margin-bottom: 8px;
}

.ti-archive__empty p {
  color: var(--ti-muted);
  margin-bottom: 24px;
}

.ti-cat-chips--centered {
  justify-content: center;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ti-archive__title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .ti-archive__search {
    max-width: 100%;
  }

  .ti-archive__title {
    font-size: 1.2rem;
  }

  .ti-product-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 480px) {
  .ti-product-grid--wide {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .ti-pagination a,
  .ti-pagination span {
    min-width: 36px;
    height: 36px;
    font-size: .8rem;
  }
}

/* =============================================================
   Single Product Page — snackshop.id style (v2.0.0)
   Narrow centered · Full-width image · Dark price bar · Sticky WA
   ============================================================= */

/* Page wrapper */
.ti-pp {
  background: #f2f3f5;
  min-height: 100vh;
  padding-bottom: 72px; /* room for sticky bar */
}

/* ① Promo banner */
.ti-pp__promo {
  background: #c0392b;
  color: #fff;
  text-align: center;
  font-family: var(--ti-font);
  font-size: .72rem;
  font-weight: 700;
  padding: 8px 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* Narrow content body — like snackshop.id */
.ti-pp__body {
  max-width: 540px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 2px 16px rgba(0,0,0,.06);
}

/* ② Breadcrumb */
.ti-pp__breadcrumb {
  padding: 8px 14px;
  background: #fafafa;
  border-bottom: 1px solid #efefef;
  overflow: hidden;
}

/* schema.org breadcrumb list */
.ti-pp__breadcrumb ol.woocommerce-breadcrumb {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  align-items: center;
  gap: 4px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: .72rem !important;
  color: #aaa !important;
  white-space: nowrap;
}

.ti-pp__breadcrumb ol.woocommerce-breadcrumb li {
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  white-space: nowrap;
}

/* Last item = current page, allow more width */
.ti-pp__breadcrumb ol.woocommerce-breadcrumb li:last-child {
  color: #555;
  max-width: 160px;
}

.ti-pp__breadcrumb ol.woocommerce-breadcrumb li a,
.ti-pp__breadcrumb .woocommerce-breadcrumb a {
  color: #aaa !important;
  text-decoration: none;
}

.ti-pp__breadcrumb .ti-pp__bc-sep {
  color: #ccc;
  font-size: .65rem;
  flex-shrink: 0;
  max-width: none;
}

/* Fallback for non-list breadcrumb */
.ti-pp__breadcrumb .woocommerce-breadcrumb:not(ol) {
  font-size: .72rem !important;
  margin: 0 !important;
  color: #aaa !important;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ti-pp__breadcrumb .woocommerce-breadcrumb:not(ol) a { color: #aaa !important; }

/* ③ Gallery — full width (CRITICAL: BFC + clearfix stops Storefront float) */
.ti-pp__product {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

.ti-pp__gallery {
  width: 100%;
  display: block;
  overflow: hidden; /* BFC: contains any internal float */
}

/* Clearfix after gallery */
.ti-pp__gallery::after {
  content: "";
  display: table;
  clear: both;
}

/* Force the WooCommerce gallery to be full-width — use high-specificity ID */
#ti-pp .woocommerce-product-gallery,
#ti-pp div.images,
#ti-pp .images.woocommerce-product-gallery,
.ti-pp .woocommerce-product-gallery,
.ti-pp div.images.woocommerce-product-gallery {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  position: relative !important;
}

.ti-pp__gallery .woocommerce-product-gallery__image {
  text-align: center;
  background: #fff;
  display: block;
}

.ti-pp__gallery .woocommerce-product-gallery__image a {
  display: block;
}

.ti-pp__gallery .woocommerce-product-gallery__image img,
#ti-pp .woocommerce-product-gallery__image img {
  width: 100% !important;
  max-height: 420px !important;
  height: auto !important;
  object-fit: contain !important;
  background: #fff !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Thumbnail strip — horizontal scroll */
.ti-pp__gallery .flex-control-thumbs,
.ti-pp__gallery ol.flex-control-thumbs,
#ti-pp ol.flex-control-thumbs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 6px;
  padding: 8px 12px !important;
  margin: 0 !important;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid #f0f0f0;
  list-style: none !important;
  background: #fff;
}
.ti-pp__gallery .flex-control-thumbs::-webkit-scrollbar,
#ti-pp ol.flex-control-thumbs::-webkit-scrollbar { display: none; }

.ti-pp__gallery .flex-control-thumbs li,
#ti-pp ol.flex-control-thumbs li {
  list-style: none;
  flex-shrink: 0;
}

.ti-pp__gallery .flex-control-thumbs li img,
#ti-pp ol.flex-control-thumbs li img {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .15s;
}
.ti-pp__gallery .flex-control-thumbs li img.flex-active,
.ti-pp__gallery .flex-control-thumbs li img:hover,
#ti-pp ol.flex-control-thumbs li img.flex-active {
  border-color: var(--ti-primary) !important;
}

/* ── FlexSlider containment — pastikan slide tidak meluap keluar viewport ── */
/* flex-viewport: clipping container yang dibuat FlexSlider secara inline.
   Tambah override CSS agar overflow:hidden tidak ter-reset oleh rule lain. */
.ti-pp__gallery .flex-viewport,
#ti-pp .flex-viewport {
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
}
/* Slide wrapper (figure yang dijadikan "ul.slides" oleh FlexSlider) */
.ti-pp__gallery .woocommerce-product-gallery__wrapper,
#ti-pp .woocommerce-product-gallery__wrapper {
  position: relative !important;
}
/* Setiap slide: float left agar FlexSlider bisa geser horizontal */
.ti-pp__gallery .woocommerce-product-gallery__image,
#ti-pp .flex-viewport .woocommerce-product-gallery__image {
  float: left !important;
  display: block !important;
  position: relative !important;
}

/* Sale badge */
#ti-pp .woocommerce-product-gallery .onsale {
  left: 10px !important;
  top: 10px !important;
  border-radius: 6px !important;
}

/* ④ Price bar — dark background */
.ti-pp__price-bar {
  clear: both; /* CRITICAL: clear any residual float from gallery */
  background: #1a1a2e;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ti-pp__disc-badge {
  background: var(--ti-primary);
  color: #fff;
  font-family: var(--ti-font);
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  letter-spacing: .4px;
}

.ti-pp__price-num {
  font-family: var(--ti-font);
  font-size: 1.55rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

/* WooCommerce price markup inside dark bar */
.ti-pp__price-num .woocommerce-Price-amount.amount,
.ti-pp__price-num bdi {
  color: #fff !important;
}

.ti-pp__price-num > del,
.ti-pp__price-num > del .woocommerce-Price-amount,
.ti-pp__price-num > del bdi {
  font-size: .82rem !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.45) !important;
  text-decoration: line-through;
}

/* ⑤ Info section */
.ti-pp__info {
  padding: 14px 16px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.ti-pp__title {
  font-family: var(--ti-font) !important;
  font-size: .97rem !important;
  font-weight: 600 !important;
  color: #1a1a2e !important;
  line-height: 1.55 !important;
  margin: 0 0 10px !important;
}

.ti-pp__meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.ti-pp__star {
  color: #f59e0b;
  font-size: .82rem;
  font-weight: 600;
}

.ti-pp__sold {
  color: #6c757d;
  font-size: .82rem;
}

.ti-pp__sku-cat .product_meta {
  font-size: .75rem !important;
  color: #bbb !important;
  margin: 4px 0 0 !important;
}
.ti-pp__sku-cat .product_meta > span {
  display: block;
  margin-bottom: 2px;
}
.ti-pp__sku-cat .product_meta a { color: #bbb !important; }

/* ⑥ Short description */
.ti-pp__short-desc {
  padding: 10px 16px;
  font-size: .83rem;
  color: #555;
  line-height: 1.7;
  border-left: 3px solid var(--ti-primary);
  background: #fdf5f0;
}

/* ⑥b In-stock badge */
.ti-pp__stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 600;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

/* ⑥c Trust strip (like snackshop.id's guarantee section) */
.ti-pp__trust {
  border-top: 1px solid #f0f0f0;
  border-bottom: 6px solid #f2f3f5;
}

.ti-pp__trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid #f5f5f5;
  font-size: .82rem;
  color: #444;
  line-height: 1.4;
}

.ti-pp__trust-item:last-child {
  border-bottom: none;
}

.ti-pp__trust-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.ti-pp__trust-text strong {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 1px;
}

.ti-pp__trust-text span {
  font-size: .75rem;
  color: #888;
}

/* ⑦ Form section */
.ti-pp__form {
  border-top: 0;
}

.ti-pp__form .tiwa-checkout {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 16px !important;
}

.ti-pp__form-fallback {
  padding: 16px;
}

/* ⑧ Tabs */
.ti-pp__tabs {
  border-top: 6px solid #f2f3f5;
}

/* Override Storefront/WC tab styling inside narrow layout */
.ti-pp__tabs .woocommerce-tabs {
  margin-top: 0 !important;
  padding: 0 !important;
}
.ti-pp__tabs .woocommerce-tabs ul.tabs {
  padding: 0 16px !important;
  margin: 0 !important;
  border-bottom: 2px solid #f0f0f0 !important;
  background: #fff !important;
  float: none !important;
  width: 100% !important;
}
/* Hapus segitiga/arrow Storefront dari tab aktif */
.ti-pp__tabs .woocommerce-tabs ul.tabs li::before,
.ti-pp__tabs .woocommerce-tabs ul.tabs li::after,
.ti-pp__tabs .woocommerce-tabs ul.tabs li a::before,
.ti-pp__tabs .woocommerce-tabs ul.tabs li a::after {
  display: none !important;
  content: '' !important;
}
.ti-pp__tabs .woocommerce-tabs .panel {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px !important;
  border: none !important;
  background: #fff !important;
}

/* Related products inside ti-pp__tabs */
.ti-pp__tabs .related.products,
.ti-pp__tabs .upsells.products {
  clear: both;
  padding: 16px;
  border-top: 6px solid #f2f3f5;
  background: #fff;
}
.ti-pp__tabs .related.products h2,
.ti-pp__tabs .upsells.products h2 {
  font-family: var(--ti-font) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin: 0 0 14px !important;
}
.ti-pp__tabs ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

/* ⑨ Sticky order bar */
.ti-sticky-order {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e9ecef;
  padding: 10px 16px env(safe-area-inset-bottom, 0px);
  z-index: 999;
  box-shadow: 0 -4px 16px rgba(0,0,0,.1);
}

.ti-sticky-order__inner {
  display: flex;
  gap: 10px;
  max-width: 540px;
  margin: 0 auto;
}

.ti-sticky-order__quick {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 16px;
  min-height: 46px;
  background: #f2f3f5;
  color: #333 !important;
  border-radius: 10px;
  font-family: var(--ti-font);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none !important;
  border: 1.5px solid #e0e0e0;
  white-space: nowrap;
  transition: background .15s;
}
.ti-sticky-order__quick:hover {
  background: #e5e6e8;
  color: #333 !important;
}

.ti-sticky-order__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  background: var(--ti-wa);
  color: #fff !important;
  border-radius: 10px;
  font-family: var(--ti-font);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background .18s;
  box-shadow: 0 3px 12px rgba(37,211,102,.35);
}
.ti-sticky-order__btn:hover {
  background: var(--ti-wa-dk);
  color: #fff !important;
}

/* ─── Override: hide Storefront summary/sidebar on ti-pp ─────── */
.ti-pp .entry-summary.summary,
.ti-pp #secondary.widget-area {
  display: none !important;
}

/* Hide sidebar-related layout floats on product page */
.ti-pp #primary,
.ti-pp .site-main {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Product inner div: reset Storefront padding */
.ti-pp .woocommerce div.product,
.ti-pp div.product {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Float buttons (tiwa submit sticky on mobile) */
@media (max-width: 540px) {
  .ti-pp__body {
    box-shadow: none;
  }
  .ti-pp__price-num {
    font-size: 1.35rem;
  }
}

/* On desktop: tiwa-submit-btn NOT sticky (that's for mobile plugin) */
@media (min-width: 541px) {
  .tiwa-submit-btn {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    box-shadow: 0 4px 16px rgba(37,211,102,.35) !important;
  }
}

/* Float WA button: hide on product page (sticky bar replaces it) */
.ti-pp .ti-float-wa {
  display: none !important;
}

/* =============================================================
   Catalog Homepage — snackshop.id style (v2.1.0)
   Narrow centered · Store profile · Category tabs · Product grid
   ============================================================= */

.ti-catalog {
  background: #f2f3f5;
  min-height: 100vh;
  padding-bottom: 72px; /* room for sticky WA bar */
}

/* ── ① Store profile header ─────────────────────────────────── */
.ti-catalog__profile {
  background: var(--ti-dark);
  padding: 14px 16px;
  max-width: 540px;
  margin: 0 auto;
}

.ti-catalog__profile-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ti-catalog__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.ti-catalog__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ti-catalog__avatar-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.ti-catalog__profile-info {
  flex: 1;
  min-width: 0;
}

.ti-catalog__store-name {
  font-family: var(--ti-font);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ti-catalog__store-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: .7rem;
  color: rgba(255,255,255,.7);
  margin-top: 2px;
}

.ti-catalog__dot {
  color: rgba(255,255,255,.3);
}

.ti-catalog__wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 7px 13px;
  background: var(--ti-wa);
  color: #fff !important;
  border-radius: 50px;
  font-family: var(--ti-font);
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .15s;
}

.ti-catalog__wa-btn:hover {
  background: var(--ti-wa-dk);
  color: #fff !important;
}

/* ── ② Promo ticker ─────────────────────────────────────────── */

/* =============================================================
   Header v2.3.0 — Dark minimal (snackshop.id style)
   ============================================================= */

/* Dark background */
.ti-header {
  background: var(--ti-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.ti-header.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,.4) !important;
}

/* Logo white on dark bg */
.ti-header .ti-logo-tools,
.ti-header__logo-link .ti-logo-tools { color: #fff; }

/* Logo link */
.ti-header__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* Search bar — ghost style on dark bg */
.ti-header .ti-search-input,
.ti-header__search .ti-search-input {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

.ti-header .ti-search-input::placeholder,
.ti-header__search .ti-search-input::placeholder {
  color: rgba(255,255,255,.45) !important;
}

.ti-header .ti-search-input:focus,
.ti-header__search .ti-search-input:focus {
  background: rgba(255,255,255,.15) !important;
  border-color: var(--ti-primary) !important;
}

/* Mobile search bar inherits dark */
.ti-header__mobile-search {
  background: var(--ti-mid);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.ti-header__mobile-search .ti-search-input {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

.ti-header__mobile-search .ti-search-input::placeholder {
  color: rgba(255,255,255,.45) !important;
}

/* Hide hamburger — no nav menu in v2.3 header */
.ti-menu-toggle { display: none !important; }

/* =============================================================
   Footer v2.3.0 — Narrow content matching catalog width
   ============================================================= */

/* Cap footer inner content to match catalog width */
.ti-footer .ti-wrap {
  max-width: 600px;
}

.ti-footer__trust-items {
  max-width: 600px !important;
  padding: 0 16px !important;
}

/* Footer grid in narrow container: 2 columns max */
.ti-footer__grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 32px 24px !important;
}

/* Mobile search bar also narrow */
.ti-header__mobile-search {
  max-width: 100%;          /* full-width container */
}

.ti-header__mobile-search .ti-search-form {
  max-width: 600px;
  margin: 0 auto;
}

/* On small screens, footer grid single column */
@media (max-width: 480px) {
  .ti-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .ti-footer__trust-item:nth-child(n+3) { display: flex !important; }
}

/* =============================================================
   ti-wrap override inside footer (narrow everything)
   ============================================================= */
.ti-footer__bottom .ti-wrap,
.ti-footer__main .ti-wrap {
  max-width: 600px;
  padding-left: 16px;
  padding-right: 16px;
}
.ti-catalog__ticker {
  background: #c0392b;
  color: #fff;
  text-align: center;
  font-family: var(--ti-font);
  font-size: .68rem;
  font-weight: 700;
  padding: 6px 16px;
  letter-spacing: .5px;
  text-transform: uppercase;
  max-width: 540px;
  margin: 0 auto;
}

/* ── ③ Search ────────────────────────────────────────────────── */
.ti-catalog__search-wrap {
  background: #fff;
  padding: 10px 14px;
  border-bottom: 1px solid #efefef;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  max-width: 540px;
  margin: 0 auto;
}

.ti-catalog__search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  border: 1.5px solid #e8e8e8;
  border-radius: 10px;
  padding: 0 6px 0 12px;
  transition: border-color .18s, box-shadow .18s;
}

.ti-catalog__search:focus-within {
  border-color: var(--ti-primary);
  box-shadow: 0 0 0 3px rgba(255,107,53,.1);
  background: #fff;
}

.ti-catalog__search svg {
  color: #aaa;
  flex-shrink: 0;
}

.ti-catalog__search input[type="search"] {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--ti-font);
  font-size: .88rem;
  color: var(--ti-text);
  padding: 11px 0;
  outline: none;
  min-width: 0;
}

.ti-catalog__search button {
  background: var(--ti-primary);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 0 15px;
  height: 36px;
  font-family: var(--ti-font);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}

.ti-catalog__search button:hover {
  background: var(--ti-primary-dk);
}

/* ── ④ Category tabs ─────────────────────────────────────────── */
.ti-catalog__tabs-wrap {
  background: #fff;
  border-bottom: 1px solid #efefef;
  max-width: 540px;
  margin: 0 auto;
}

.ti-catalog__tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 8px;
}

.ti-catalog__tabs::-webkit-scrollbar { display: none; }

.ti-catalog__tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 11px 12px;
  font-family: var(--ti-font);
  font-size: .78rem;
  font-weight: 600;
  color: #666;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border-bottom: 2.5px solid transparent;
  transition: color .15s, border-color .15s;
}

.ti-catalog__tab:hover {
  color: var(--ti-primary);
  text-decoration: none;
}

.ti-catalog__tab--active {
  color: var(--ti-primary);
  border-bottom-color: var(--ti-primary);
}

/* ── ⑤ Product grid ──────────────────────────────────────────── */
.ti-catalog__body {
  background: #fff;
  max-width: 540px;
  margin: 8px auto 0;
  padding: 14px 12px 20px;
}

.ti-catalog__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ti-catalog__section-head > span {
  font-family: var(--ti-font);
  font-size: .9rem;
  font-weight: 700;
  color: var(--ti-dark);
}

.ti-catalog__section-head > a {
  font-family: var(--ti-font);
  font-size: .75rem;
  font-weight: 600;
  color: var(--ti-primary);
  text-decoration: none;
}

.ti-catalog__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Product card */
.ti-catalog__card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s, transform .15s;
}

.ti-catalog__card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transform: translateY(-2px);
}

.ti-catalog__card-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  background: #e53e3e;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  z-index: 1;
}

.ti-catalog__card-img {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f9f9f9;
}

.ti-catalog__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}

.ti-catalog__card:hover .ti-catalog__card-img img {
  transform: scale(1.04);
}

.ti-catalog__card-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.ti-catalog__card-meta {
  display: flex;
  gap: 5px;
  font-size: .68rem;
  color: #999;
  flex-wrap: wrap;
}

.ti-catalog__card-body h3 {
  font-family: var(--ti-font);
  font-size: .8rem;
  font-weight: 600;
  color: #222;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ti-catalog__card-body h3 a {
  color: inherit;
  text-decoration: none;
}

.ti-catalog__card-price {
  font-family: var(--ti-font);
  font-weight: 700;
  font-size: .9rem;
  color: var(--ti-primary);
}

.ti-catalog__card-price del,
.ti-catalog__card-price .woocommerce-Price-amount del {
  color: #bbb;
  font-weight: 400;
  font-size: .72rem;
}

.ti-catalog__card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: auto;
  padding: 8px;
  background: var(--ti-wa);
  color: #fff !important;
  font-family: var(--ti-font);
  font-size: .76rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background .18s;
}

.ti-catalog__card-btn:hover {
  background: var(--ti-wa-dk);
  color: #fff !important;
}

/* View all */
.ti-catalog__view-all {
  text-align: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
}

.ti-catalog__view-all a {
  font-family: var(--ti-font);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ti-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 24px;
  border: 1.5px solid var(--ti-primary);
  border-radius: 50px;
  transition: all .18s;
}

.ti-catalog__view-all a:hover {
  background: var(--ti-primary);
  color: #fff !important;
}

/* ── ⑥ Sticky WA bar ────────────────────────────────────────── */
.ti-catalog__sticky-wa {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 10px 16px env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-top: 1px solid #e9ecef;
  box-shadow: 0 -4px 16px rgba(0,0,0,.1);
}

/* =============================================================
   Layout v2.4.0 — Narrow centered cards (snackshop.id style)
   Body = gray, header & footer = gray outer + dark card inner
   ============================================================= */

/* Gray body */
body { background: #e5e7eb !important; }

/* ── Topbar: transparent outer, narrow orange pill ── */
.ti-topbar {
  background: transparent !important;
  padding: 8px 0 0 !important;
}
.ti-topbar__inner {
  background: var(--ti-primary);
  max-width: 600px;
  margin: 0 auto;
  padding: 6px 16px;
  border-radius: 0 0 12px 12px;
  font-family: var(--ti-font);
  font-size: .72rem;
  font-weight: 500;
  color: #fff;
  text-align: center;
  letter-spacing: .3px;
}

/* ── Header outer: gray, inner: dark card ── */
.ti-header {
  background: #e5e7eb !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.ti-header.scrolled { box-shadow: none !important; }
.ti-header__inner {
  background: var(--ti-dark);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  gap: 10px;
}
.ti-header .ti-logo-tools,
.ti-header__logo-link .ti-logo-tools { color: #fff; }

/* ── Search: ghost pill inside dark card ── */
.ti-header__search {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.1);
  border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,.18);
  overflow: hidden;
  min-width: 0;
  max-width: none;
}
.ti-header__search .ti-search-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  padding: 7px 12px !important;
  height: auto !important;
}
.ti-header__search .ti-search-input::placeholder { color: rgba(255,255,255,.45) !important; }
.ti-header__search .ti-search-btn {
  background: var(--ti-primary) !important;
  border: none !important;
  border-radius: 0 50px 50px 0 !important;
  height: 34px !important;
  padding: 0 12px !important;
  flex-shrink: 0;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ti-header__search .ti-search-btn:hover { background: var(--ti-primary-dk) !important; }

/* ── Cart icon ── */
.ti-header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: rgba(255,255,255,.75) !important;
  text-decoration: none !important;
  flex-shrink: 0;
}
.ti-header__cart svg { display: block; }
.ti-header__cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--ti-primary);
  color: #fff;
  font-size: .55rem;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ── WA button in header ── */
.ti-header__wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ti-wa);
  color: #fff !important;
  font-size: .78rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 50px;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}
.ti-header__wa-btn:hover { background: var(--ti-wa-dk); color: #fff !important; }

/* ── Mobile search: gray outer, dark pill ── */
.ti-header__mobile-search {
  background: #e5e7eb !important;
  border-bottom: none !important;
  padding: 4px 16px 10px !important;
}
.ti-mobile-search-form {
  display: flex;
  background: var(--ti-dark);
  border-radius: 50px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.12);
  max-width: 600px;
  margin: 0 auto;
}
.ti-mobile-search-form .ti-search-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  padding: 9px 14px !important;
  height: auto !important;
}
.ti-mobile-search-form .ti-search-input::placeholder { color: rgba(255,255,255,.45) !important; }
.ti-mobile-search-form .ti-search-btn {
  background: var(--ti-primary) !important;
  border: none !important;
  border-radius: 0 50px 50px 0 !important;
  padding: 0 14px !important;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* ── Footer: gray outer, dark card centered ── */
.ti-footer {
  background: #e5e7eb !important;
  padding: 16px 16px 32px !important;
}
.ti-footer-card {
  max-width: 600px;
  margin: 0 auto;
  background: var(--ti-dark);
  border-radius: 16px;
  overflow: hidden;
}
.ti-footer-card .ti-wrap {
  max-width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.ti-footer-card .ti-footer__grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 24px 16px !important;
}
.ti-footer-card .ti-footer__bottom-inner {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 6px;
}
.ti-footer-card .ti-footer__trust-items {
  max-width: 100% !important;
  padding: 0 !important;
}
@media (max-width: 480px) {
  .ti-footer-card .ti-footer__grid { grid-template-columns: 1fr !important; }
}

.ti-catalog__sticky-wa a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 512px;
  margin: 0 auto;
  min-height: 48px;
  background: var(--ti-wa);
  color: #fff !important;
  border-radius: 12px;
  font-family: var(--ti-font);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 3px 12px rgba(37,211,102,.35);
  transition: background .18s;
}

.ti-catalog__sticky-wa a:hover {
  background: var(--ti-wa-dk);
  color: #fff !important;
}

/* On catalog page: hide old floating WA (sticky bar replaces) */
.ti-catalog .ti-float-wa { display: none !important; }

/* Narrow wrapper for ticker/search/tabs — full-width on wide screens */
@media (min-width: 541px) {
  /* Center the catalog content strip on wide screens */
  .ti-catalog {
    background: #e8e9ec;
  }

  .ti-catalog__profile,
  .ti-catalog__ticker,
  .ti-catalog__search-wrap,
  .ti-catalog__tabs-wrap,
  .ti-catalog__body {
    box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.05);
  }
}

/* =============================================================
   Product Page Variants — ti-pp__variant
   ============================================================= */

.ti-pp__variants {
  border-top: 6px solid #f2f3f5;
  padding: 0 0 4px;
}

.ti-pp__variant {
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
}

.ti-pp__variant-label {
  font-family: var(--ti-font);
  font-size: .72rem;
  font-weight: 700;
  color: #777;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}

.ti-pp__variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ti-pp__variant-chip {
  padding: 5px 14px;
  background: #f5f5f5;
  border: 1.5px solid #e0e0e0;
  border-radius: 50px;
  font-family: var(--ti-font);
  font-size: .78rem;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  line-height: 1.4;
}

.ti-pp__variant-chip:hover {
  border-color: var(--ti-primary);
  color: var(--ti-primary);
  background: #fff3ef;
}

.ti-pp__variant-chip.active,
.ti-pp__variant-chip[aria-pressed="true"] {
  background: var(--ti-primary);
  border-color: var(--ti-primary);
  color: #fff;
  font-weight: 700;
}

.ti-pp__variant-note {
  margin: 10px 0 0;
  font-size: .7rem;
  color: #aaa;
  padding: 0 16px;
}

/* =============================================================
   Archive page extras (ti-arc__*)
   Shares .ti-catalog layout; only adds archive-specific pieces.
   ============================================================= */

/* Archive header: slightly different background to hint navigation */
.ti-arc__header {
  background: var(--ti-mid) !important; /* slightly lighter than dark */
}

/* Pagination */
.ti-arc__pagination {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.ti-arc__pag-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ti-arc__pag-btn a,
.ti-arc__pag-nums a,
.ti-arc__pag-nums span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  color: var(--ti-text);
  font-family: var(--ti-font);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
}

.ti-arc__pag-btn a:hover,
.ti-arc__pag-nums a:hover {
  background: var(--ti-primary);
  border-color: var(--ti-primary);
  color: #fff;
}

.ti-arc__pag-nums span.current {
  background: var(--ti-primary);
  border-color: var(--ti-primary);
  color: #fff;
  cursor: default;
}

.ti-arc__pag-nums span.dots {
  border: none;
  background: transparent;
  color: #ccc;
}

.ti-arc__pag-nums {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Empty state */
.ti-arc__empty {
  text-align: center;
  padding: 48px 20px 32px;
}

.ti-arc__empty-icon {
  font-size: 2.8rem;
  margin-bottom: 12px;
}

.ti-arc__empty h2 {
  font-family: var(--ti-font);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ti-dark);
  margin: 0 0 8px;
}

.ti-arc__empty p {
  font-size: .85rem;
  color: var(--ti-muted);
  margin: 0 0 20px;
}

.ti-arc__empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: var(--ti-primary);
  color: #fff !important;
  border-radius: 50px;
  font-family: var(--ti-font);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background .15s;
}

.ti-arc__empty-btn:hover { background: var(--ti-primary-dk); }

/* =============================================================
   v2.4.1 — Cart button, background fixes, polish
   ============================================================= */

/* Fix: #page / .hfeed white background bleeding through */
#page,
.hfeed,
main.ti-catalog,
main.site-main.ti-catalog {
  background: transparent !important;
}

/* ── Product card: Beli + Cart buttons ── */
.ti-catalog__card-footer {
  display: flex;
  gap: 6px;
  margin-top: auto;
}
.ti-catalog__card-addcart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(37,211,102,.12);
  color: var(--ti-wa) !important;
  font-size: .9rem;
  text-decoration: none !important;
  border: 1.5px solid var(--ti-wa);
  transition: background .18s, color .18s;
  cursor: pointer;
}
.ti-catalog__card-addcart:hover,
.ti-catalog__card-addcart.added {
  background: var(--ti-wa) !important;
  color: #fff !important;
}
.ti-catalog__card-footer .ti-catalog__card-btn {
  flex: 1;
  padding: 8px 6px;
  font-size: .75rem;
}

/* ── Topbar refinement: no gap above pill ── */
.ti-topbar {
  padding-top: 0 !important;
}
.ti-topbar__inner {
  border-radius: 0 0 10px 10px;
}

/* ── Header: ensure sticky + dark card gap filled ── */
.ti-header {
  padding-bottom: 0 !important;
}
.ti-header__inner {
  padding-bottom: 10px;
}

/* ── Catalog strip: consistent gap to footer ── */
.ti-catalog {
  padding-bottom: 0;
  margin-bottom: 0;
}
.ti-catalog__body {
  margin-bottom: 0;
}

/* ── Footer: reduce top gap, smooth transition from content ── */
.ti-footer {
  padding-top: 12px !important;
}
.ti-footer-card {
  box-shadow: 0 -4px 24px rgba(0,0,0,.12);
}

/* ── Footer trust bar 2×2 grid inside card ── */
.ti-footer-card .ti-footer__trust-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.ti-footer-card .ti-footer__trust-item {
  padding: 12px 16px;
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .7rem;
}
.ti-footer-card .ti-footer__trust-item:nth-child(even) { border-right: none; }
.ti-footer-card .ti-footer__trust-item:nth-child(n+3) { border-bottom: none; display: flex !important; }

/* =============================================================
   v2.5.0 — Header restructure: announce inside dark card,
             mini-cart popup, no WA button
   ============================================================= */

/* Utility */
.ti-hidden { display: none !important; }

/* ── Header: gray outer, dark card inner (block, NOT flex-row) ── */
.ti-header {
  background: #e5e7eb !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.ti-header.scrolled { box-shadow: none !important; }
.ti-header__inner {
  display: block !important;
  height: auto !important;
  padding: 0 !important;
  background: var(--ti-dark);
  max-width: 600px;
  margin: 0 auto;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 6px 28px rgba(0,0,0,.22);
  overflow: hidden;
  gap: unset !important;
}

/* ── Announce strip — orange at top of dark card ── */
.ti-header__announce {
  background: var(--ti-primary);
  color: #fff;
  font-family: var(--ti-font);
  font-size: .7rem;
  font-weight: 500;
  text-align: center;
  padding: 5px 16px;
  letter-spacing: .3px;
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Header row: flex for logo | search | cart ── */
.ti-header__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 10px;
  min-height: 50px;
}
.ti-header__row .ti-header__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none !important;
  flex-shrink: 0;
}
.ti-header__row .ti-logo-tools { color: #fff; }
.ti-header__row .ti-logo-indo  { color: var(--ti-primary); }

/* Search inside row */
.ti-header__row .ti-header__search {
  flex: 1;
  min-width: 0;
  max-width: none;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.1);
  border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,.18);
  overflow: hidden;
}
.ti-header__row .ti-search-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
  padding: 7px 12px !important;
  font-size: .82rem;
  min-width: 0;
  height: auto !important;
}
.ti-header__row .ti-search-input::placeholder { color: rgba(255,255,255,.45) !important; }
.ti-header__row .ti-search-btn {
  background: var(--ti-primary) !important;
  border: none !important;
  border-radius: 0 50px 50px 0 !important;
  width: 36px;
  height: 34px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.ti-header__row .ti-search-btn:hover { background: var(--ti-primary-dk) !important; }

/* ── Cart wrap + toggle button ── */
.ti-header__cart-wrap { position: relative; flex-shrink: 0; }
.ti-header__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 36px;
  height: 36px;
  background: transparent !important;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.8) !important;
  padding: 0;
  transition: color .15s;
}
.ti-header__cart:hover { color: #fff !important; }
.ti-header__cart svg { display: block; pointer-events: none; }
.ti-header__cart-count {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--ti-primary);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  line-height: 1;
}

/* ── Mini-cart popup ──
   position:fixed so it escapes overflow:hidden on .ti-header__inner
   (which has border-radius and clips absolute children).
   right: max(16px, (vw-600px)/2) keeps the popup aligned with the
   right edge of the 600px content card on any screen width. */
.ti-header__minicart {
  display: none;
  position: fixed;
  top: 58px;
  right: max(16px, calc((100vw - 600px) / 2));
  width: 300px;
  max-height: 460px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  z-index: 9999;
  flex-direction: column;
  overflow: hidden;
  max-width: calc(100vw - 24px) !important;
}
.ti-header__minicart.ti-minicart--open { display: flex; }
.ti-header__minicart::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 13px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0,0,0,.05);
  z-index: -1;
}

.ti-minicart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  font-family: var(--ti-font);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ti-dark);
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.ti-minicart__count {
  margin-left: auto !important;
  margin-right: 10px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: #fff2e8 !important;
  color: #ff6b35 !important;
  font-family: var(--ti-font) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.ti-minicart__close {
  background: #f5f5f5;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: .78rem;
  color: #777;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ti-minicart__close:hover { background: #e0e0e0; color: #222; }

.ti-minicart__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ti-minicart__summary {
  margin: 10px 12px 0 !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  background: #fff2e8 !important;
  color: #f97316 !important;
  font-family: var(--ti-font) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

/* WooCommerce mini-cart items */
.ti-minicart__body .woocommerce-mini-cart { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.ti-minicart__body .woocommerce-mini-cart-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #f5f5f5 !important;
}
.ti-minicart__body .woocommerce-mini-cart-item img {
  width: 52px !important; height: 52px !important;
  object-fit: cover !important; border-radius: 8px !important; flex-shrink: 0 !important;
}
.ti-minicart__body .woocommerce-mini-cart-item a:not(.remove) {
  font-family: var(--ti-font); font-size: .78rem;
  color: var(--ti-dark) !important; text-decoration: none; line-height: 1.3;
}
.ti-minicart__body .woocommerce-mini-cart-item .quantity {
  font-size: .72rem; color: var(--ti-primary); font-weight: 600; margin-top: 3px;
}
.ti-minicart__body .woocommerce-mini-cart-item .remove {
  color: #ccc !important; font-size: 1.1rem; margin-left: auto;
  text-decoration: none !important; flex-shrink: 0; line-height: 1;
}
.ti-minicart__body .woocommerce-mini-cart-item .remove:hover { color: #e53e3e !important; }
.ti-minicart__body .woocommerce-mini-cart__total {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 10px 14px !important; font-family: var(--ti-font);
  font-size: .82rem; font-weight: 700; color: var(--ti-dark);
  border-top: 2px solid #f0f0f0;
}
.ti-minicart__body .woocommerce-mini-cart__total .amount { color: var(--ti-primary); }
.ti-minicart__body .woocommerce-mini-cart__empty-message {
  text-align: center; padding: 28px 14px; color: #aaa; font-size: .82rem;
}

/* Minicart footer */
.ti-minicart__foot {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 10px 14px 14px;
  border-top: 1px solid #f0f0f0; flex-shrink: 0;
}
.ti-minicart__foot.ti-hidden {
  display: none !important;
}
.ti-minicart__view-cart,
.ti-minicart__checkout {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 9px 6px; border-radius: 10px;
  font-family: var(--ti-font); font-size: .75rem; font-weight: 700;
  text-decoration: none !important; text-align: center; transition: all .15s;
  min-width: 0 !important;
  white-space: normal !important;
}
.ti-minicart__view-cart {
  background: #f5f5f5; color: var(--ti-dark) !important; border: 1.5px solid #e0e0e0;
}
.ti-minicart__view-cart:hover { background: #e8e8e8; }
.ti-minicart__checkout { background: var(--ti-wa); color: #fff !important; }
.ti-minicart__checkout:hover { background: var(--ti-wa-dk); }

/* WA button: hidden in header */
.ti-header__wa-btn { display: none !important; }

/* Mobile search */
.ti-header__mobile-search {
  background: #e5e7eb !important;
  border-bottom: none !important;
  padding: 4px 16px 10px !important;
}
@media (min-width: 769px) {
  .ti-header__mobile-search { display: none !important; }
}
@media (max-width: 480px) {
  .ti-header__minicart {
    right: 8px;
    left: 8px;
    width: auto;
    max-width: calc(100vw - 16px);
  }
}

/* =============================================================
   v2.5.1 — Header: logo+cart only (no search row),
             Footer: 540px to match catalog,
             Order form: country select + intl shipping note
   ============================================================= */

/* ── Header row: logo left, cart right (no search) ── */
.ti-header__row {
  justify-content: space-between;
}
.ti-header__row .ti-header__search { display: none !important; }
.ti-header__cart-wrap { margin-left: 0; }

/* ── Header: floating card look (gray gap above dark card) ── */
.ti-header { padding-top: 6px !important; }
.ti-header__inner { border-radius: 10px 10px 18px 18px !important; }

/* ── Mini-cart: localStorage items list ── */
.ti-minicart__list {
  list-style: none !important;
  padding: 8px 0 !important;
  margin: 0 !important;
}
.ti-minicart__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #f5f5f5 !important;
}
.ti-minicart__item-img {
  width: 52px !important;
  height: 52px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}
.ti-minicart__item-info { flex: 1; min-width: 0; }
.ti-minicart__item-name {
  display: block;
  font-size: .78rem;
  color: #222 !important;
  text-decoration: none !important;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 3px;
}
.ti-minicart__item-price {
  font-size: .75rem;
  color: var(--ti-primary);
  font-weight: 700;
  margin-bottom: 6px;
}
.ti-minicart__item-qty {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ti-mc-qty {
  width: 24px;
  height: 24px;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.ti-mc-qty:hover { background: #e0e0e0; }
.ti-mc-qty-val { font-size: .8rem; font-weight: 700; min-width: 20px; text-align: center; }
.ti-mc-remove {
  background: none;
  border: none;
  color: #ccc;
  font-size: .9rem;
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px;
  margin-top: 2px;
}
.ti-mc-remove:hover { color: #e53e3e; }

.ti-minicart__empty {
  text-align: center;
  padding: 30px 14px;
  color: #aaa;
  font-size: .85rem;
}
.ti-minicart__empty p { margin: 8px 0 0; }

.ti-minicart__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-size: .82rem;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 8px;
}
.ti-minicart__total-row strong { color: var(--ti-primary); font-size: .9rem; }

/* Override: WA order button style for minicart */
#ti-minicart-wa-btn {
  width: 100%;
  min-width: 0 !important;
  background: var(--ti-wa) !important;
  color: #fff !important;
  border: none;
  border-radius: 10px;
  padding: 11px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 6px;
  transition: background .15s;
  font-family: var(--ti-font);
}
#ti-minicart-wa-btn:hover { background: var(--ti-wa-dk) !important; }
#ti-minicart-clear {
  width: 100%;
  min-width: 0 !important;
  background: #f5f5f5 !important;
  color: #666 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px;
  padding: 8px;
  font-size: .75rem;
  cursor: pointer;
  font-family: var(--ti-font);
}
#ti-minicart-clear:hover { background: #fee2e2 !important; color: #e53e3e !important; border-color: #fca5a5 !important; }

/* =============================================================
   v2.6.1 — Cart button emoji fix + simplified footer
   ============================================================= */

/* ── Cart button: force emoji visible ── */
.ti-catalog__card-addcart {
  appearance: none !important;
  -webkit-appearance: none !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  color: #333 !important;   /* emoji always visible regardless of theme */
  font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important;
}

/* ── Simplified footer: brand-only ── */
.ti-footer__brand-simple {
  padding: 28px 24px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ti-footer__brand-simple .ti-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  margin-bottom: 10px;
}
.ti-footer__brand-simple .ti-logo-tools { color: #fff; font-size: 1.6rem; }
.ti-footer__brand-simple .ti-logo-indo  { color: var(--ti-primary); font-size: 1.6rem; }
.ti-footer__brand-simple .ti-footer__tagline {
  color: rgba(255,255,255,.55);
  font-size: .8rem;
  line-height: 1.6;
  margin: 0;
}

/* Bottom bar inside simplified footer */
.ti-footer-card .ti-footer__bottom {
  padding: 14px 0;
}
.ti-footer-card .ti-footer__bottom-inner {
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px;
  text-align: center;
  max-width: 100% !important;
  padding: 0 16px !important;
}
.ti-footer__bottom p { margin: 0; font-size: .75rem; color: rgba(255,255,255,.4); }
.ti-footer__bottom-links { display: flex; gap: 10px; align-items: center; }
.ti-footer__bottom-links a { font-size: .72rem; color: rgba(255,255,255,.45); text-decoration: none; }
.ti-footer__bottom-links a:hover { color: var(--ti-primary); }
.ti-footer__bottom-links span { color: rgba(255,255,255,.2); }

/* ── Footer: match catalog 540px width ── */
.ti-footer-card { max-width: 540px !important; }
.ti-footer .ti-wrap { max-width: 540px !important; }
.ti-footer__bottom .ti-wrap,
.ti-footer__main .ti-wrap { max-width: 540px !important; padding-left: 16px !important; padding-right: 16px !important; }
.ti-footer__trust-items { max-width: 540px !important; padding: 0 16px !important; }
.ti-footer-card .ti-footer__trust-items { max-width: 100% !important; padding: 0 !important; }

/* ── Order form: select field ── */
.tiwa-select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--tiwa-border, #e0e0e0);
  border-radius: 10px;
  font-family: inherit;
  font-size: .9rem;
  color: var(--tiwa-text, #222);
  background: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.tiwa-select:focus {
  outline: none;
  border-color: #25d366;
  box-shadow: 0 0 0 3px rgba(37,211,102,.12);
}

/* ── Shipping note ── */
.tiwa-shipping-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .8rem;
  color: #166534;
  line-height: 1.5;
  margin-bottom: 16px;
}
.tiwa-shipping-note.tiwa-ship-intl {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

/* =============================================================
   v2.6.2 — Logo images + cart SVG button + footer total reset
   ============================================================= */

/* ── Header logo image ── */
.ti-header__logo-link { line-height: 1; display: flex; align-items: center; }
.ti-header__logo-img {
  height: 32px;
  width: auto;
  display: block;
  background: #fff;
  padding: 3px 8px;
  border-radius: 8px;
  object-fit: contain;
}

/* ── Store-profile avatar (square logo) ── */
.ti-catalog__avatar-img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: #fff !important;
  padding: 2px !important;
}

/* ── Cart add-button: SVG stroke inherits colour ── */
.ti-catalog__card-addcart {
  font-size: 0 !important;
  line-height: 1 !important;
}
.ti-catalog__card-addcart svg {
  display: block;
  stroke: currentColor;
  flex-shrink: 0;
  pointer-events: none;
}

/* ── FOOTER v3.0.0 — complete layout reset ── */

/* Hide every old section removed from footer.php */
.ti-footer-card .ti-footer__grid,
.ti-footer-card .ti-footer__main,
.ti-footer-card .ti-footer__trust-bar,
.ti-footer-card .ti-footer__trust-items,
.ti-footer-card .ti-footer__contact,
.ti-footer-card .ti-footer__wa-btn {
  display: none !important;
}

/* Footer outer: gray body background */
.ti-footer { background: #e5e7eb !important; padding: 12px 0 0 !important; }

/* Footer card: dark centered box */
.ti-footer-card {
  max-width: 540px !important;
  margin: 0 auto !important;
  background: #1c2537 !important;
  border-radius: 18px 18px 0 0 !important;
  overflow: hidden !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.15) !important;
  padding: 0 !important;
}

/* Brand block */
.ti-footer__brand-simple {
  padding: 24px 20px 16px !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background: transparent !important;
}

/* Logo image in footer */
.ti-footer__logo {
  display: inline-block !important;
  margin-bottom: 10px !important;
  text-decoration: none !important;
}
.ti-footer__logo-img {
  height: 36px;
  width: auto;
  display: block;
  background: #fff;
  padding: 3px 10px;
  border-radius: 8px;
  object-fit: contain;
  margin: 0 auto;
}

/* Tagline */
.ti-footer__tagline {
  color: rgba(255,255,255,.5) !important;
  font-size: .78rem !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  font-family: var(--ti-font) !important;
}

/* Bottom bar */
.ti-footer__bottom {
  padding: 12px 0 !important;
  background: transparent !important;
}
.ti-footer__bottom-inner,
.ti-footer-card .ti-footer__bottom-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  text-align: center !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}
.ti-footer__bottom p,
.ti-footer-card .ti-footer__bottom p {
  margin: 0 !important;
  font-size: .72rem !important;
  color: rgba(255,255,255,.32) !important;
  font-family: var(--ti-font) !important;
}
.ti-footer__bottom-links {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
}
.ti-footer__bottom-links a {
  font-size: .7rem !important;
  color: rgba(255,255,255,.38) !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
.ti-footer__bottom-links a:hover { color: var(--ti-primary) !important; }
.ti-footer__bottom-links span {
  color: rgba(255,255,255,.18) !important;
  font-size: .6rem !important;
  line-height: 1 !important;
}

/* =============================================================
   v2.6.3 — White header (logo fits naturally) + footer polish
   ============================================================= */

/* ── Header: WHITE card (logo2.png has white bg → blends in) ── */
.ti-header {
  background: #e5e7eb !important;
  padding: 0 !important;           /* no floating gap */
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}
.ti-header__inner {
  background: #ffffff !important;  /* white card */
  max-width: 540px !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.10) !important;
  overflow: hidden !important;
  border-top: none !important;
}
.ti-header.scrolled .ti-header__inner {
  box-shadow: 0 6px 24px rgba(0,0,0,.14) !important;
}

/* Announce strip — orange on white, looks like a notification bar */
.ti-header__announce {
  background: var(--ti-primary) !important;
  color: #fff !important;
  font-size: .68rem !important;
  letter-spacing: .2px !important;
  padding: 4px 12px !important;
  border-radius: 0 !important;
}

/* Logo row — on white background */
.ti-header__row {
  padding: 8px 14px 10px !important;
  background: #ffffff !important;
}

/* Logo image: NO white pill — just show directly on white header */
.ti-header__logo-img {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  height: 30px !important;
  width: auto !important;
}

/* Cart icon on white header: use dark color */
.ti-header__cart {
  color: #333 !important;
}
.ti-header__cart:hover { color: var(--ti-primary) !important; }

/* Mobile search strip — white to match header */
.ti-header__mobile-search {
  background: #ffffff !important;
  max-width: 540px !important;
  margin: 0 auto !important;
}

/* ── Footer: polish text sizes & spacing ── */
.ti-footer-card { border-radius: 18px 18px 0 0 !important; }
.ti-footer__brand-simple { padding: 20px 16px 14px !important; }
.ti-footer__tagline {
  font-size: .76rem !important;
  line-height: 1.6 !important;
  margin-top: 4px !important;
}
.ti-footer__logo-img { height: 32px !important; }

/* =============================================================
   v2.6.4 — Footer total rewrite (tif-* classes, zero conflicts)
   ============================================================= */

/* Outer wrapper: gray body */
.tif-outer {
  background: #e5e7eb;
  padding: 12px 0 0;
  margin: 0;
  border: none !important;
  box-shadow: none !important;
}

/* Hide anything Storefront injects alongside our markup */
.tif-outer .col-full,
.tif-outer .site-info,
.tif-outer .widget-area,
.tif-outer > *:not(.tif-card) { display: none !important; }
.tif-outer .tif-card { display: block !important; }

/* Dark card centered at 540 px */
.tif-card {
  max-width: 540px;
  margin: 0 auto;
  background: #1c2537;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}

/* ── Brand block ── */
.tif-brand {
  padding: 24px 20px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Logo link + image */
.tif-brand__logo-link {
  display: inline-block;
  margin-bottom: 12px;
  line-height: 0;
  text-decoration: none !important;
}
.tif-brand__logo-link img {
  height: 34px;
  width: auto;
  display: block;
  background: #fff;
  padding: 4px 10px;
  border-radius: 8px;
  object-fit: contain;
}

/* Description text — force muted white, never orange */
.tif-brand__desc {
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.52) !important;
  font-size: .78rem !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  font-family: 'Poppins', sans-serif !important;
  text-align: center !important;
  background: none !important;
  border: none !important;
}

/* ── Bottom bar ── */
.tif-bottom {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.tif-bottom__copy {
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.3) !important;
  font-size: .71rem !important;
  font-weight: 400 !important;
  font-family: 'Poppins', sans-serif !important;
  background: none !important;
  border: none !important;
}
.tif-bottom__links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tif-bottom__links a {
  color: rgba(255,255,255,.38) !important;
  font-size: .7rem !important;
  text-decoration: none !important;
  font-family: 'Poppins', sans-serif !important;
  transition: color .15s;
}
.tif-bottom__links a:hover { color: #ff6b35 !important; }
.tif-bottom__links span {
  color: rgba(255,255,255,.18) !important;
  font-size: .6rem !important;
  line-height: 1;
}

/* =============================================================
   v2.6.5 — White footer (= header), trust copy, back-to-top fix
   ============================================================= */

/* ── Override: white card instead of dark ── */
.tif-card {
  background: #ffffff !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08) !important;
}

/* ── Brand block on white ── */
.tif-brand {
  padding: 28px 24px 20px !important;
  text-align: center !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.tif-brand__logo-link img {
  height: 44px !important;
  width: auto !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Tagline headline */
.tif-brand__tagline {
  margin: 14px 0 16px !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: #1c2537 !important;
  font-family: 'Poppins', sans-serif !important;
  line-height: 1.4 !important;
}

/* Trust list */
.tif-trust {
  list-style: none !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  text-align: left !important;
  max-width: 340px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.tif-trust li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: .8rem !important;
  color: #374151 !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
.tif-trust__icon {
  flex-shrink: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

/* Description paragraph */
.tif-brand__desc {
  color: #6b7280 !important;
  font-size: .78rem !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  font-family: 'Poppins', sans-serif !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  max-width: 380px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Bottom bar on white ── */
.tif-bottom {
  padding: 14px 16px !important;
  border-top: 1px solid #f0f0f0 !important;
  background: #fafafa !important;
}
.tif-bottom__copy {
  color: #9ca3af !important;
  font-size: .72rem !important;
  font-family: 'Poppins', sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}
.tif-bottom__links a {
  color: #6b7280 !important;
  font-size: .71rem !important;
  font-family: 'Poppins', sans-serif !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
.tif-bottom__links a:hover { color: #ff6b35 !important; }
.tif-bottom__links span { color: #d1d5db !important; font-size: .6rem !important; }

/* ── Back-to-top button — sleek dark navy ── */
#ti-back-top {
  position: fixed !important;
  bottom: 20px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: #1c2537 !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.22) !important;
  z-index: 9000 !important;
  padding: 0 !important;
  font-size: 0 !important;
  display: none;              /* hidden by default — no !important */
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .15s !important;
}
#ti-back-top.ti-back-top--visible {
  display: flex !important;
}
#ti-back-top:hover {
  background: #ff6b35 !important;
  transform: translateY(-2px) !important;
}
#ti-back-top svg {
  display: block !important;
  pointer-events: none !important;
  stroke: #fff !important;
}

/* =============================================================
   v2.6.5-patch — Kill dark Storefront footer background
   ============================================================= */
html, body {
  background-color: #e5e7eb !important;
}
#colophon,
.site-footer,
.tif-outer {
  background: #e5e7eb !important;
  color: inherit !important;
}
/* make sure nothing inside tif-outer besides tif-card shows dark */
.tif-outer > *:not(.tif-card) {
  display: none !important;
}

/* =============================================================
   v2.6.7 — Footer logo bigger · Category dropdown · Archive branding
   ============================================================= */

/* ── Footer logo: 60 px tall (was 44 px) ── */
.tif-brand__logo-link img {
  height: 60px !important;
  width: auto !important;
  display: block !important;
  margin: 0 auto !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

/* ── Category dropdown wrapper ── */
.ti-cat-dd {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Button inherits the .ti-catalog__tab look but is a real <button> */
.ti-cat-dd__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  background: none !important;
  border: 1px solid #e2e8f0 !important;
  font-family: 'Poppins', sans-serif !important;
  padding: inherit !important;
  line-height: inherit !important;
}
.ti-cat-dd__btn svg {
  flex-shrink: 0;
  transition: transform .2s;
  pointer-events: none;
}
.ti-cat-dd__btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.ti-cat-dd__btn[aria-expanded="true"] {
  background: #ff6b35 !important;
  color: #fff !important;
  border-color: #ff6b35 !important;
}

/* Panel */
.ti-cat-dd__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  max-width: 270px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.16);
  z-index: 9999;
  padding: 6px 0;
  border: 1px solid #f0f0f0;
  -webkit-overflow-scrolling: touch;
}
.ti-cat-dd__panel[hidden] {
  display: none !important;
}

/* Items inside the panel */
.ti-cat-dd__item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 14px !important;
  text-decoration: none !important;
  color: #374151 !important;
  font-size: .82rem !important;
  font-family: 'Poppins', sans-serif !important;
  transition: background .12s !important;
  line-height: 1.3 !important;
}
.ti-cat-dd__item:hover {
  background: #fff7f3 !important;
  color: #ff6b35 !important;
}
.ti-cat-dd__item-icon {
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
.ti-cat-dd__item-name {
  flex: 1 !important;
  font-weight: 500 !important;
}
.ti-cat-dd__item-count {
  font-size: .72rem !important;
  color: #9ca3af !important;
  flex-shrink: 0 !important;
}

/* ── Archive page — avatar image (logo.png) ── */
.ti-arc__header .ti-catalog__avatar-img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  background: #fff !important;
  padding: 4px !important;
  display: block !important;
}

/* =============================================================
   v2.6.8 — Fix: category dropdown visible + overflow unblock
   ============================================================= */

/*
 * .ti-catalog__tabs has overflow-x:auto which implicitly forces
 * overflow-y:hidden, clipping the absolutely-positioned dropdown panel.
 * Since the tabs now only have "Semua" + "Kategori ▾" (no horizontal
 * scroll needed), setting overflow:visible is safe.
 */
.ti-catalog__tabs-wrap,
.ti-catalog__tabs {
  overflow: visible !important;
}

/* Keep the white pill background on the tabs row itself */
.ti-catalog__tabs-wrap {
  position: relative !important; /* anchor for the dropdown */
}

/* =============================================================
   v2.6.9 — Standalone product page topbar + misc
   ============================================================= */

/* ── Product page: own sticky topbar ── */
.ti-pp__topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  max-width: 540px !important;
  margin: 0 auto !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
}

/* Back button */
.ti-pp__back {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #f5f5f5 !important;
  color: #333 !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  transition: background .15s, color .15s !important;
}
.ti-pp__back:hover {
  background: #ff6b35 !important;
  color: #fff !important;
}
.ti-pp__back svg { pointer-events: none !important; }

/* Center title */
.ti-pp__topbar-title {
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: #1c2537 !important;
  font-family: 'Poppins', sans-serif !important;
  text-align: center !important;
  flex: 1 !important;
  padding: 0 8px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Right: mini logo */
.ti-pp__topbar-logo {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}
.ti-pp__topbar-logo img {
  height: 22px !important;
  width: auto !important;
  display: block !important;
}

/* ── Body background on standalone page ── */
.ti-pp-page {
  background: #f5f5f5 !important;
}

/* ── Remove ticker from anywhere it still appears ── */
.ti-catalog__ticker,
.ti-pp__promo {
  display: none !important;
}

/* =============================================================
   v2.6.10 — Pre-order badges (cards + single product)
   ============================================================= */

/* Card pre-order strip — sits above the discount badge */
.ti-catalog__card-preorder {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(28, 37, 55, .82) !important;
  color: #fff !important;
  font-size: .65rem !important;
  font-weight: 600 !important;
  font-family: 'Poppins', sans-serif !important;
  letter-spacing: .2px !important;
  padding: 3px 8px !important;
  text-align: center !important;
  z-index: 3 !important;
  border-radius: 10px 10px 0 0 !important;
}

/* Make sure the card image wrapper is position:relative so the strip anchors */
.ti-catalog__card {
  position: relative !important;
}

/* Push the card image down so it doesn't overlap the strip */
.ti-catalog__card-img {
  padding-top: 22px !important;
  display: block !important;
}

/* Single product page — inline badge next to stock badge */
.ti-pp__preorder-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #fff3cd !important;
  color: #856404 !important;
  font-size: .74rem !important;
  font-weight: 600 !important;
  font-family: 'Poppins', sans-serif !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid #ffe08a !important;
  white-space: nowrap !important;
}

/* =============================================================
   v2.6.11 — Eliminate header/footer gaps
   ============================================================= */

/* Root cause: min-height:100vh stretches catalog to fill viewport
   even with only a few products, leaving a blank gap before footer */
.ti-catalog {
  min-height: 0 !important;
  padding-bottom: 0 !important;
}

/* Kill any extra padding Storefront injects on #page / #primary */
#page.hfeed,
#page.site {
  padding: 0 !important;
  margin: 0 !important;
}
#primary.site-main,
main.site-main.ti-catalog {
  padding: 0 !important;
  margin: 0 !important;
}

/* Give the product grid a tight bottom clearance */
.ti-catalog__body {
  padding-bottom: 16px !important;
  margin-bottom: 0 !important;
}

/* Footer: close the gray gap between content and the white card */
.tif-outer {
  padding: 4px 0 0 !important;
  margin-top: 0 !important;
}

/* =============================================================
   v2.6.12 — Kategori page + Sort filter tabs
   ============================================================= */

/* ── Kategori page ──────────────────────────────────────────── */
.ti-kat-page {
  background: #f2f3f5 !important;
  min-height: 0 !important;
}

/* White header strip: "Semua Kategori · N kategori" */
.ti-kat__header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  padding: 14px 16px 12px !important;
  background: #fff !important;
  border-bottom: 1px solid #eee !important;
  gap: 8px !important;
}

.ti-kat__title {
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: #1c2537 !important;
  font-family: 'Poppins', sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1.2 !important;
}

.ti-kat__subtitle {
  font-size: .72rem !important;
  color: #888 !important;
  font-family: 'Poppins', sans-serif !important;
  white-space: nowrap !important;
}

/* White card list */
.ti-kat__list {
  background: #fff !important;
  margin: 8px 0 0 !important;
}

/* Single category row */
.ti-kat__item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: background .12s !important;
  cursor: pointer !important;
}

.ti-kat__item:last-child {
  border-bottom: none !important;
}

.ti-kat__item:hover,
.ti-kat__item:focus-visible {
  background: #fafafa !important;
  outline: none !important;
}

/* Left thumbnail box */
.ti-kat__item-thumb {
  flex-shrink: 0 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #f5f5f5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ti-kat__item-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Emoji fallback */
.ti-kat__item-icon {
  font-size: 1.65rem !important;
  line-height: 1 !important;
  display: block !important;
}

/* Text stack: name + count */
.ti-kat__item-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.ti-kat__item-name {
  font-size: .875rem !important;
  font-weight: 600 !important;
  color: #1c2537 !important;
  font-family: 'Poppins', sans-serif !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

.ti-kat__item-count {
  font-size: .72rem !important;
  color: #888 !important;
  font-family: 'Poppins', sans-serif !important;
  display: block !important;
}

/* Right chevron */
.ti-kat__chevron {
  flex-shrink: 0 !important;
  color: #bbb !important;
  transition: transform .15s !important;
}

.ti-kat__item:hover .ti-kat__chevron {
  transform: translateX(2px) !important;
  color: #f97316 !important;
}

/* Empty state */
.ti-kat__empty {
  padding: 40px 16px !important;
  text-align: center !important;
  color: #888 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: .85rem !important;
}

/* ── Sort / filter tabs ─────────────────────────────────────── */
.ti-sort-bar {
  display: flex !important;
  align-items: stretch !important;
  background: #fff !important;
  border-bottom: 2px solid #eee !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: 0 4px !important;
  /* NOT sticky — keeps layout simple */
  gap: 0 !important;
}

.ti-sort-bar::-webkit-scrollbar {
  display: none !important;
}

.ti-sort-tab {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 14px !important;
  font-size: .79rem !important;
  font-weight: 500 !important;
  font-family: 'Poppins', sans-serif !important;
  color: #555 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;  /* overlap bar bottom border */
  transition: color .15s, border-color .15s !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

.ti-sort-tab:hover {
  color: #f97316 !important;
}

.ti-sort-tab.is-active {
  color: #f97316 !important;
  font-weight: 700 !important;
  border-bottom-color: #f97316 !important;
}

/* ── Produk / Kategori nav tabs ─────────────────────────────── */
.ti-nav-tabs {
  display: flex !important;
  background: #fff !important;
  border-bottom: 2px solid #eee !important;
  padding: 0 4px !important;
}

.ti-nav-tab {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 11px 8px !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  font-family: 'Poppins', sans-serif !important;
  color: #888 !important;
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: color .15s, border-color .15s !important;
  -webkit-appearance: none !important;
}

.ti-nav-tab.is-active {
  color: #f97316 !important;
  font-weight: 700 !important;
  border-bottom-color: #f97316 !important;
}

.ti-nav-tab:hover {
  color: #f97316 !important;
}

/* Kategori pane: make sure white list card sits flush */
#fp-kategori .ti-kat__list,
#arc-kategori .ti-kat__list {
  margin-top: 0 !important;
}

/* =============================================================
   v2.6.14 — Layout centering + mobile UX audit fixes
   ============================================================= */

/* ── Bug 1: nav tabs missing 540px centering ────────────────── */
.ti-nav-tabs {
  max-width: 540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* White background flush with adjacent cards */
  background: #fff !important;
}

/* ── Bug 1b: sort bar missing 540px centering ───────────────── */
.ti-sort-bar {
  max-width: 540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Bug 1c: tab panes missing 540px centering ──────────────── */
.ti-tab-pane {
  max-width: 540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Inside a centered pane, kat__list fills 100% — no extra margin */
.ti-tab-pane .ti-kat__list {
  margin: 0 !important;
  border-radius: 0 !important;
}

/* The sort bar inside a pane fills the pane (pane already centered) */
.ti-tab-pane .ti-sort-bar {
  max-width: 100% !important;
  margin: 0 !important;
}

/* ── Bug 5/6: iOS touch — 44px min height, no tap flash ────── */
.ti-nav-tab,
.ti-sort-tab,
.ti-kat__item {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.ti-nav-tab {
  min-height: 44px !important;
}

.ti-sort-tab {
  min-height: 44px !important;
}

.ti-kat__item {
  min-height: 56px !important;  /* already set by thumb size, but enforce */
}

/* ── Bug 7: product image inconsistent height ───────────────── */
/* Force square image area so grid rows align cleanly */
.ti-catalog__card-img {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  display: block !important;
  padding-top: 0 !important;   /* remove old padding-top hack */
  position: relative !important;
}

/* Pre-order badge stays at top regardless of aspect-ratio fix */
.ti-catalog__card {
  display: flex !important;
  flex-direction: column !important;
}

/* Constrain the preorder badge to sit above image */
.ti-catalog__card-preorder {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  border-radius: 0 !important;
}

.ti-catalog__card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #fafafa !important;
  display: block !important;
}

/* ── Misc: white gap between header dark card and nav tabs ──── */
/* A 1px white seam can appear between profile card and nav tabs */
.ti-catalog__profile {
  margin-bottom: 0 !important;
}
.ti-catalog__search-wrap {
  margin-bottom: 0 !important;
}

/* ── Storefront main padding reset (belt-and-suspenders) ────── */
.woocommerce-page #primary,
.archive #primary,
.home #primary {
  padding: 0 !important;
  margin: 0 !important;
}

/* =============================================================
   v2.6.15 — Remove "Tanya" btn; full-width "Beli Sekarang"
   ============================================================= */
.ti-sticky-order__btn--full {
  flex: 1 !important;
  width: 100% !important;
  justify-content: center !important;
  font-size: .95rem !important;
  padding: 0 24px !important;
  gap: 8px !important;
}

/* =============================================================
   v2.6.16 — Sticky bar constrained + related products polish
   ============================================================= */

/* ── Sticky bar: constrain to 540px card (not full viewport) ── */
.ti-sticky-order {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 540px !important;
  border-left: 1px solid #e0e0e0 !important;
  border-right: 1px solid #e0e0e0 !important;
  /* Keep full-width backdrop on very narrow screens */
  padding: 10px 14px env(safe-area-inset-bottom, 0px) !important;
}

/* Inner already has max-width — override to fill the constrained bar */
.ti-sticky-order__inner {
  max-width: 100% !important;
}

/* ── Bottom spacer: room for sticky bar + iPhone safe area ──── */
.ti-pp__spacer {
  height: 70px;
  height: calc(70px + env(safe-area-inset-bottom, 0px));
}

/* ── Related products: tighter separator, no double gray band ── */
.ti-pp__tabs .related.products,
.ti-pp__tabs .upsells.products {
  border-top: 1px solid #f0f0f0 !important;
  padding: 14px 12px !important;
  margin: 0 !important;
}

.ti-pp__tabs .related.products h2,
.ti-pp__tabs .upsells.products h2 {
  font-size: .85rem !important;
  margin: 0 0 12px !important;
}

/* ── Related product cards: match .ti-catalog__card look ─────── */
.ti-pp__tabs ul.products li.product {
  background: #fff !important;
  border: 1px solid #f0f0f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

/* Product image — square aspect, contain (full product visible) */
.ti-pp__tabs ul.products li.product a.woocommerce-LoopProduct-link {
  display: block !important;
  text-decoration: none !important;
}

.ti-pp__tabs ul.products li.product img {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  background: #fafafa !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Product title */
.ti-pp__tabs ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Poppins', sans-serif !important;
  font-size: .73rem !important;
  font-weight: 500 !important;
  color: #222 !important;
  padding: 8px 10px 4px !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.4 !important;
}

/* Price */
.ti-pp__tabs ul.products li.product .price {
  display: block !important;
  padding: 2px 10px 8px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  color: #e53e3e !important;
  margin: 0 !important;
}

.ti-pp__tabs ul.products li.product .price del {
  color: #aaa !important;
  font-weight: 400 !important;
  font-size: .7rem !important;
}

/* Add-to-cart / Lihat Detail button */
.ti-pp__tabs ul.products li.product a.button,
.ti-pp__tabs ul.products li.product .button {
  display: block !important;
  margin: auto 10px 10px !important;
  padding: 7px 10px !important;
  background: #f97316 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background .15s !important;
}

.ti-pp__tabs ul.products li.product a.button:hover,
.ti-pp__tabs ul.products li.product .button:hover {
  background: #ea6c10 !important;
  color: #fff !important;
}

/* Gap between woocommerce-tabs panel and related products — remove */
.ti-pp__tabs .woocommerce-tabs {
  margin-bottom: 0 !important;
}

/* ── v2.6.17 iOS / Safari fixes ──────────────────────────────────────────── */

/* 1. Horizontal scroll bars: smooth momentum scrolling on iOS */
.ti-sort-bar,
.ti-nav-tabs {
  -webkit-overflow-scrolling: touch !important;
}

/* 2. aspect-ratio fallback for iOS < 15 (Safari < 15) via padding-top hack
      @supports not (aspect-ratio: 1) catches devices that don't support it   */
@supports not (aspect-ratio: 1) {
  .ti-catalog__card-img {
    position: relative !important;
    height: 0 !important;
    padding-top: 100% !important;       /* 1:1 square */
    overflow: hidden !important;
  }
  .ti-catalog__card-img img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  /* Related-products thumbnail fallback */
  .ti-pp__tabs ul.products li.product .woocommerce-loop-product__link img,
  .ti-pp__tabs ul.products li.product a > img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: unset !important;
  }
  .ti-pp__tabs ul.products li.product .woocommerce-loop-product__link,
  .ti-pp__tabs ul.products li.product a.woocommerce-loop-product__link {
    display: block !important;
    position: relative !important;
    height: 0 !important;
    padding-top: 100% !important;
    overflow: hidden !important;
  }
  .ti-pp__tabs ul.products li.product .woocommerce-loop-product__link img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

/* 3. iOS-safe sticky bar — use padding-bottom for notch, not margin */
.ti-sticky-order {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  /* Ensure height accounts for safe area so content isn't cut off */
  box-sizing: content-box !important;
}
/* Spacer compensates for sticky bar height + notch */
.ti-pp__spacer {
  height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

/* 4. Topbar safe-area padding on iOS notch (landscape especially) */
.ti-pp__topbar {
  padding-left: max(12px, env(safe-area-inset-left, 12px)) !important;
  padding-right: max(12px, env(safe-area-inset-right, 12px)) !important;
}

/* 5. Prevent iOS Safari text-size-adjust */
body.ti-pp-page,
.ti-catalog,
.tif-outer {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* 6. Inputs: minimum 16px font-size to block iOS auto-zoom */
input,
textarea,
select {
  font-size: max(16px, 1rem) !important;
}

/* 7. Gallery swipe: allow horizontal touch scroll inside gallery */
.ti-pp__gallery,
.woocommerce-product-gallery {
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
}

/* 8. WooCommerce product gallery thumbnails — fix overflow on iOS */
.woocommerce-product-gallery__wrapper {
  -webkit-transform: translateZ(0) !important; /* force GPU layer */
  transform: translateZ(0) !important;
}

/* 9. Tap-highlight removal for all interactive elements (belt-and-braces) */
a, button, [role="button"],
.ti-pp__variant-chip,
.ti-sort-tab,
.ti-nav-tab,
.ti-sticky-order__btn {
  -webkit-tap-highlight-color: transparent !important;
}

/* 10. Smooth scroll on iOS for tabs / sort bar children */
.ti-sort-bar {
  scroll-snap-type: x mandatory !important;
  scroll-padding: 0 12px !important;
}
.ti-sort-tab {
  scroll-snap-align: start !important;
}

/* =============================================================
   v2.6.18 — Sticky bar bottom-sheet redesign
   ============================================================= */

/* Reset conflicting v2.6.17 sticky overrides */
.ti-sticky-order {
  box-sizing: border-box !important;     /* undo content-box from v2.6.17 */
}

/* Bottom-sheet style: rounded top corners, shadow only (no side borders) */
.ti-sticky-order {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 540px !important;
  border-radius: 16px 16px 0 0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.13) !important;
  background: #fff !important;
  padding: 12px 14px !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Inner: full width, single button */
.ti-sticky-order__inner {
  max-width: 100% !important;
  gap: 0 !important;
}

/* Button: taller, full-width, orange brand colour, rounded */
.ti-sticky-order__btn--full {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 0 20px !important;
  background: #f97316 !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(249,115,22,.35) !important;
  transition: background .15s, box-shadow .15s !important;
  -webkit-tap-highlight-color: transparent !important;
}
.ti-sticky-order__btn--full:hover,
.ti-sticky-order__btn--full:active {
  background: #ea6c10 !important;
  box-shadow: 0 2px 8px rgba(249,115,22,.25) !important;
  color: #fff !important;
}

/* Spacer: height = button (52px) + bar padding (12px*2) + safe-area */
.ti-pp__spacer {
  height: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}

/* =============================================================
   v2.6.20 — Card buttons orange; remove Chat WA button
   ============================================================= */

/* "Beli" text button — orange */
.ti-catalog__card-btn {
  background: #f97316 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(249,115,22,.25) !important;
}
.ti-catalog__card-btn:hover,
.ti-catalog__card-btn:active {
  background: #ea6c10 !important;
  color: #fff !important;
}

/* Cart icon button — orange outline + fill on hover */
.ti-catalog__card-addcart {
  background: rgba(249,115,22,.10) !important;
  color: #f97316 !important;
  border-color: #f97316 !important;
}
.ti-catalog__card-addcart:hover,
.ti-catalog__card-addcart:active,
.ti-catalog__card-addcart.added {
  background: #f97316 !important;
  color: #fff !important;
  border-color: #f97316 !important;
}
.ti-catalog__card-addcart svg {
  stroke: currentColor !important;
}

/* Hide Chat WA button everywhere (removed from PHP, belt-and-braces) */
.ti-catalog__wa-btn {
  display: none !important;
}

/* =============================================================
   v2.6.21 — Production final: clean-up + iOS + UX polish
   ============================================================= */

/* 1. Kill dead announce-bar CSS (HTML removed v2.6.19) */
.ti-header__announce {
  display: none !important;
}

/* 2. Viewport safe-area: header topbar for iOS notch / Dynamic Island */
.ti-header__inner {
  padding-left: max(0px, env(safe-area-inset-left)) !important;
  padding-right: max(0px, env(safe-area-inset-right)) !important;
}

/* 3. Standardise primary orange to #f97316 everywhere via custom prop override */
:root {
  --ti-primary:    #f97316 !important;
  --ti-primary-dk: #ea6c10 !important;
}

/* 4. Re-color anything still using old WA-green for non-WA actions */
/* (WA-specific buttons intentionally stay green) */

/* 5. Pre-order badge — softer, readable on all backgrounds */
.ti-catalog__card-preorder {
  background: rgba(249,115,22,.12) !important;
  color: #c2540a !important;
  border: 1px solid rgba(249,115,22,.3) !important;
  font-weight: 600 !important;
}
.ti-pp__preorder-badge {
  background: rgba(249,115,22,.10) !important;
  color: #c2540a !important;
  border: 1px solid rgba(249,115,22,.25) !important;
  font-weight: 600 !important;
}

/* 6. Card: tighten spacing on very small screens (320px) */
@media (max-width: 360px) {
  .ti-catalog__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .ti-catalog__card-name {
    font-size: .72rem !important;
  }
  .ti-catalog__card-price {
    font-size: .85rem !important;
  }
}

/* 7. Category list: better tap target on mobile */
.ti-kat__item {
  min-height: 60px !important;
  align-items: center !important;
}

/* 8. Sort tabs: minimum 44px height for iOS touch */
.ti-sort-tab {
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 14px !important;
}

/* 9. Nav tabs: consistent 44px touch target */
.ti-nav-tab {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 10. Product title: 2-line clamp on all card sizes */
.ti-catalog__card-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 11. Price color: always orange for sale price */
.ti-catalog__card-price {
  color: #f97316 !important;
}

/* 12. Focus-visible rings for keyboard nav (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #f97316 !important;
  outline-offset: 2px !important;
}

/* 13. WooCommerce notices: hide default (we have our own cart UX) */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  display: none !important;
}

/* 14. Breadcrumb on product page — subtle */
.ti-pp__breadcrumb .woocommerce-breadcrumb {
  font-size: .72rem !important;
  color: #888 !important;
}
.ti-pp__breadcrumb .woocommerce-breadcrumb a {
  color: #888 !important;
  text-decoration: none !important;
}
.ti-pp__breadcrumb .woocommerce-breadcrumb a:hover {
  color: #f97316 !important;
}

/* 15. Scroll behaviour: smooth on all pages */
html {
  scroll-behavior: smooth !important;
}

/* 16. Footer: bottom safe-area so content not cut off on iPhone */
.tif-outer {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* 17. Header: ensure no gap below header on iOS rubber-band scroll */
.site-header.ti-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* 18. Back-to-top: position accounts for sticky bar on product pages */
#ti-back-top {
  bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
}

/* 19. Image skeleton: prevent layout shift before image loads */
.ti-catalog__card-img img,
.ti-pp__gallery img {
  background-color: #f5f5f5 !important;
}

/* 20. Minicart: accessible focus trap appearance */
.ti-header__minicart.ti-minicart--open {
  box-shadow: 0 8px 32px rgba(0,0,0,.18) !important;
}

/* 21. Remove any double-border on category page product cards */
.ti-pp__tabs ul.products li.product {
  border: none !important;
  outline: none !important;
}

/* 22. Touch action on product gallery for smooth swipe */
.woocommerce-product-gallery__image {
  touch-action: pan-y !important;
}

/* ================================================================
   23. Review form — mobile-friendly, Indonesian-style, v2.6.32
   ================================================================ */

/* Container */
#reviews,
.ti-pp__tabs #reviews {
  padding: 0 16px 16px !important;
}
#reviews > h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: 0 0 12px !important;
  color: var(--ti-dark) !important;
}

/* "There are no reviews yet" notice */
.woocommerce-noreviews {
  font-size: .85rem !important;
  color: #888 !important;
  padding: 8px 0 16px !important;
  border-left: 3px solid var(--ti-primary) !important;
  padding-left: 10px !important;
}

/* Respond / write-review section */
.comment-respond {
  padding-top: 16px !important;
  border-top: 1px solid #f0f0f0 !important;
}
.comment-respond .comment-reply-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: 14px !important;
  color: var(--ti-dark) !important;
}

/* Small note above the form */
.comment-notes {
  font-size: .78rem !important;
  color: #999 !important;
  margin-bottom: 12px !important;
}

/* Each form row */
.comment-form > p,
.comment-form-rating {
  margin-bottom: 14px !important;
}

/* Labels */
.comment-form label {
  display: block !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  margin-bottom: 5px !important;
  color: #444 !important;
}

/* Text / email inputs */
.comment-form input[type="text"],
.comment-form input[type="email"] {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: .88rem !important;
  font-family: var(--ti-font) !important;
  background: #fafafa !important;
  color: #333 !important;
  -webkit-appearance: none !important;
}

/* Textarea */
.comment-form textarea#comment {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: .88rem !important;
  font-family: var(--ti-font) !important;
  background: #fafafa !important;
  color: #333 !important;
  min-height: 100px !important;
  resize: vertical !important;
}

/* Focus state */
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea#comment:focus {
  outline: none !important;
  border-color: var(--ti-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,.1) !important;
}

/* Cookie consent checkbox row */
.comment-form-cookies-consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: .78rem !important;
  color: #777 !important;
}
.comment-form-cookies-consent input[type="checkbox"] {
  margin-top: 2px !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--ti-primary) !important;
}

/* ── SUBMIT BUTTON — orange, full-width, prominent ── */
.form-submit {
  margin-top: 4px !important;
}
.form-submit #submit,
#commentform .form-submit input[type="submit"] {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 20px !important;
  background: var(--ti-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-family: var(--ti-font) !important;
  cursor: pointer !important;
  transition: background .15s !important;
  -webkit-appearance: none !important;
  letter-spacing: .01em !important;
}
.form-submit #submit:hover,
#commentform .form-submit input[type="submit"]:hover {
  background: #ea6c10 !important;
}
.form-submit #submit:active,
#commentform .form-submit input[type="submit"]:active {
  background: #d45e0a !important;
  transform: scale(.98) !important;
}

/* Star rating */
.woocommerce-product-rating .star-rating,
.comment-form-rating .stars {
  font-size: 1.3rem !important;
}
.comment-form-rating .stars a {
  color: #ccc !important;
  text-decoration: none !important;
}
.comment-form-rating .stars a.active,
.comment-form-rating .stars a:hover,
.comment-form-rating .stars a.selected {
  color: #f4a400 !important;
}

/* =============================================================
   Legal pages (Kebijakan Privasi, Syarat Ketentuan) — page-legal.php
   ============================================================= */
.ti-legal {
  background: #f5f5f5;
  min-height: calc(100vh - 80px);
  padding: 28px 16px 60px;
}
.ti-legal__inner {
  max-width: 680px;
  margin: 0 auto;
}
.ti-legal__card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
  padding: 32px 24px 40px;
}
.ti-legal__title {
  font-family: var(--ti-font);
  font-size: 1.4rem;
  font-weight: 800;
  color: #1c2537;
  margin: 0 0 8px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}
.ti-legal__content {
  font-family: var(--ti-font);
  font-size: .9rem;
  line-height: 1.8;
  color: #444;
  margin-top: 20px;
}
.ti-legal__content h2 { display: none; } /* title already shown in ti-legal__title */
.ti-legal__content h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1c2537;
  margin: 24px 0 8px;
}
.ti-legal__content p {
  margin: 0 0 12px;
}
.ti-legal__content ul, .ti-legal__content ol {
  padding-left: 20px;
  margin: 0 0 12px;
}
.ti-legal__content a {
  color: var(--ti-primary);
  text-decoration: underline;
}
.ti-legal__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  padding: 10px 20px;
  background: #f2f3f5;
  border-radius: 10px;
  font-family: var(--ti-font);
  font-size: .85rem;
  font-weight: 600;
  color: #333 !important;
  text-decoration: none !important;
  transition: background .15s;
}
.ti-legal__back-link:hover { background: #e5e6e8; }
@media (max-width: 600px) {
  .ti-legal__card { padding: 20px 16px 28px; border-radius: 12px; }
  .ti-legal__title { font-size: 1.2rem; }
}

/* =============================================================
   Product page topbar — cart button (right side)
   ============================================================= */
.ti-pp__topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
.ti-pp__topbar-cart {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #f5f5f5 !important;
  border: none !important;
  cursor: pointer !important;
  color: #333 !important;
  transition: background .15s, color .15s !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
.ti-pp__topbar-cart:hover { background: #ff6b35 !important; color: #fff !important; }
.ti-pp__topbar-cart svg {
  position: relative !important;
  z-index: 1 !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  color: #333 !important;
  stroke: #333 !important;
  fill: none !important;
  opacity: 1 !important;
}
.ti-pp__topbar-cart .ti-cart-icon-fallback {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #333 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
.ti-pp__topbar-cart:hover svg {
  color: #fff !important;
  stroke: #fff !important;
}
.ti-pp__topbar-cart:hover .ti-cart-icon-fallback {
  color: #fff !important;
}
.ti-pp__topbar-cart .ti-cart-count-badge {
  position: absolute !important;
  top: -3px !important; right: -3px !important;
  background: #ff6b35 !important;
  color: #fff !important;
  font-size: .6rem !important;
  font-weight: 700 !important;
  font-family: var(--ti-font) !important;
  border-radius: 99px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  z-index: 4 !important;
}
.ti-pp__topbar-cart .ti-cart-count-badge.ti-hidden { display: none !important; }
/* Final cart icon hardening */
.ti-header__cart {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 0 !important;
  line-height: 1 !important;
  overflow: visible !important;
}
.ti-header__cart::after {
  content: attr(data-count) !important;
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  z-index: 12 !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #ff6b35 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px #fff !important;
  font-family: var(--ti-font) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 17px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transform: scale(.8) !important;
  pointer-events: none !important;
}
.ti-header__cart.ti-cart-has-items::after {
  display: flex !important;
  opacity: 1 !important;
  transform: scale(1) !important;
}
.ti-header__cart .ti-cart-count-badge,
.ti-header__cart .ti-header__cart-count {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  z-index: 10 !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #ff6b35 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px #fff !important;
  font-family: var(--ti-font) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 17px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: none !important;
}
.ti-header__cart.ti-cart-has-items .ti-cart-count-badge,
.ti-header__cart.ti-cart-has-items .ti-header__cart-count {
  display: flex !important;
}
.ti-header__cart .ti-cart-count-badge.ti-hidden,
.ti-header__cart .ti-header__cart-count.ti-hidden {
  display: none !important;
}
.ti-header__cart.ti-cart-has-items .ti-cart-count-badge.ti-hidden,
.ti-header__cart.ti-cart-has-items .ti-header__cart-count.ti-hidden {
  display: flex !important;
}
.ti-header__cart svg {
  position: relative !important;
  z-index: 1 !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
}
.ti-header__cart-count {
  top: -4px !important;
  right: -4px !important;
  min-width: 16px !important;
  width: auto !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  text-align: center !important;
  background: var(--ti-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px #fff !important;
  z-index: 2 !important;
}

/* Final product detail polish: reviews and related products */
.ti-pp__tabs #reviews,
.ti-pp__tabs #review_form_wrapper,
.ti-pp__tabs #review_form,
.ti-pp__tabs #commentform {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.ti-pp__tabs #reviews {
  padding: 14px 12px 92px !important;
}
.ti-pp__tabs #commentform {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.ti-pp__tabs #commentform > p,
.ti-pp__tabs .comment-form-rating {
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.ti-pp__tabs #commentform .comment-notes,
.ti-pp__tabs #commentform .comment-form-rating,
.ti-pp__tabs #commentform .comment-form-comment,
.ti-pp__tabs #commentform .comment-form-cookies-consent,
.ti-pp__tabs #commentform .form-submit {
  grid-column: 1 / -1 !important;
}
.ti-pp__tabs #commentform input[type="text"],
.ti-pp__tabs #commentform input[type="email"],
.ti-pp__tabs #commentform textarea {
  max-width: 100% !important;
}
.ti-pp__tabs #commentform .comment-form-cookies-consent {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: start !important;
  line-height: 1.45 !important;
}
.ti-pp__tabs #commentform .comment-form-cookies-consent label {
  min-width: 0 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
}
.ti-pp__tabs #commentform .form-submit {
  margin-top: 2px !important;
}
.ti-pp__tabs .related.products,
.ti-pp__tabs .upsells.products {
  padding: 14px 12px 92px !important;
  overflow: hidden !important;
}
.ti-pp__tabs .related.products ul.products,
.ti-pp__tabs .upsells.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  align-items: stretch !important;
}
.ti-pp__tabs .related.products ul.products::before,
.ti-pp__tabs .related.products ul.products::after,
.ti-pp__tabs .upsells.products ul.products::before,
.ti-pp__tabs .upsells.products ul.products::after {
  display: none !important;
  content: none !important;
}
.ti-pp__tabs .related.products ul.products li.product,
.ti-pp__tabs .upsells.products ul.products li.product {
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  grid-column: auto !important;
}
.ti-pp__tabs .related.products ul.products li.product a.woocommerce-loop-product__link,
.ti-pp__tabs .upsells.products ul.products li.product a.woocommerce-loop-product__link {
  min-width: 0 !important;
}

/* Final product review notice + sticky action color */
.ti-pp__tabs .woocommerce-noreviews,
.ti-pp__tabs #reviews .woocommerce-noreviews {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 0 18px !important;
  padding: 11px 14px 11px 16px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
  background: #f8f9fb !important;
  border-left: 3px solid var(--ti-primary) !important;
  border-radius: 0 8px 8px 0 !important;
  color: #68707d !important;
  font-size: .86rem !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}
.ti-pp__tabs .woocommerce-noreviews::before,
.ti-pp__tabs .woocommerce-noreviews::after {
  display: none !important;
  content: none !important;
}
.ti-sticky-order__btn,
.ti-sticky-order__btn:visited,
.ti-sticky-order__btn--full,
.ti-sticky-order__btn--full:visited {
  background: var(--ti-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(249,115,22,.35) !important;
}
.ti-sticky-order__btn:hover,
.ti-sticky-order__btn:active,
.ti-sticky-order__btn--full:hover,
.ti-sticky-order__btn--full:active {
  background: var(--ti-primary-dk) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(249,115,22,.25) !important;
}
.ti-sticky-order__wa-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  display: block !important;
}

/* Storefront side product navigation conflicts with the custom product UI. */
.single-product .storefront-product-pagination,
.ti-pp .storefront-product-pagination {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}