/*
Theme Name: KRB WooCommerce Child
Template: larismanis-wp
*/

/* ==========================================================================
   STYLING_CORE — Erday Looks
   Global + Header + Footer + Cart/Checkout
   Mobile-first: base → @media (min-width:48rem) → @media (min-width:64rem)
   Semua warna lewat token (tokens.css). Nol hex di file ini.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ALIAS --ss-* PARENT → TOKEN ERDAY LOOKS
   Parent Laris Manis default: primary biru Bootstrap, accent pink.
   Token define di child-theme/tokens.css; di sini cukup di-alias supaya
   seluruh komponen parent (header, tombol, badge, harga, breadcrumb)
   otomatis ikut palette. Specificity sama (:root), load order lebih akhir
   (tokens 20 > larismanis 15) sehingga menang.
   -------------------------------------------------------------------------- */
:root {
  /* Brand / accent */
  --ss-primary: var(--brand);
  --ss-primary-strong: var(--brand-hover);
  --ss-primary-bold: var(--brand-hover);
  --ss-accent: var(--brand);
  --ss-accent-strong: var(--brand-hover);
  --ss-accent-bold: var(--brand-hover);

  /* Body / typography */
  --ss-body-bg: var(--surface-base);
  --ss-body-color: var(--text-primary);
  --ss-body-font-family: var(--font-body);
  --ss-body-font-size: var(--step-1);
  --ss-body-line-height: 1.5;
  --ss-heading-font-family: var(--font-display);
  --ss-heading-color: var(--text-primary);
  --ss-heading-font-weight: 600;

  /* Link */
  --ss-link-color: var(--brand);
  --ss-link-hover-color: var(--brand-hover);

  /* Border & box */
  --ss-border-color: var(--border);
  --ss-border-radius: var(--radius-sm);
  --ss-box-bg: var(--surface-raised);
  --ss-box-shadow: var(--shadow-card);
  --ss-container-max-width: 1280px;

  /* Buttons — satu primer (brand), satu sekunder (subtle) */
  --ss-btn-primary-bg: var(--brand);
  --ss-btn-primary-color: var(--brand-fg);
  --ss-btn-primary-hover-bg: var(--brand-hover);
  --ss-btn-primary-hover-color: var(--brand-fg);
  --ss-btn-accent-bg: var(--brand);
  --ss-btn-accent-color: var(--brand-fg);
  --ss-btn-accent-hover-bg: var(--brand-hover);
  --ss-btn-accent-hover-color: var(--brand-fg);
  --ss-btn-secondary-bg: var(--surface-muted);
  --ss-btn-secondary-color: var(--text-primary);
  --ss-btn-subtle-bg: var(--surface-base);
  --ss-btn-subtle-color: var(--text-primary);
  --ss-btn-border-radius: var(--radius-sm);

  /* Badge */
  --ss-badge-bg: var(--brand);
  --ss-badge-color: var(--brand-fg);

  /* Page title banner (bukan biru Bootstrap) */
  --ss-header-bg: var(--surface-base);
  --ss-header-title-color: var(--text-primary);
  --ss-header-description-color: var(--text-secondary);
  --ss-header-alignment: left;
  --ss-header-padding-top: clamp(1.5rem, 4vw, 3rem);
  --ss-header-padding-bottom: clamp(1.5rem, 4vw, 3rem);

  /* Navigation — sticky putih (Page Blueprint: header latar putih) */
  --ss-navigation-bg: var(--surface-base);
  --ss-navigation-sticky-bg: var(--surface-base);
  --ss-navigation-brand-color: var(--text-primary);
  --ss-navigation-brand-hover-color: var(--brand);
  --ss-navigation-menu-color: var(--text-primary);
  --ss-navigation-menu-hover-color: var(--brand);
  --ss-navigation-icon-color: var(--text-primary);
  --ss-navigation-icon-hover-color: var(--brand);
  --ss-navigation-badge-bg: var(--brand);
  --ss-navigation-badge-color: var(--brand-fg);
  --ss-navigation-dropdown-bg: var(--surface-base);
  --ss-navigation-dropdown-hover-bg: var(--brand-subtle);
  --ss-navigation-font-size: var(--step-0);
  --ss-navigation-brand-font-size: var(--step-2);
  --ss-navigation-padding-y: clamp(0.75rem, 1.5vw, 1.25rem);

  /* Topbar (jika aktif) */
  --ss-topbar-bg: var(--brand-subtle);
  --ss-topbar-color: var(--text-primary);
  --ss-topbar-link-color: var(--text-primary);
  --ss-topbar-link-hover-color: var(--brand-hover);
  --ss-topbar-font-size: var(--step-0);

  /* Breadcrumb */
  --ss-breadcrumb-bg: var(--surface-base);
  --ss-breadcrumb-color: var(--text-secondary);
  --ss-breadcrumb-link-color: var(--brand);
  --ss-breadcrumb-link-hover-color: var(--brand-hover);

  /* Footer — surface-muted (Page Blueprint) */
  --ss-footer-bg: var(--surface-muted);
  --ss-footer-color: var(--text-primary);
  --ss-footer-link-color: var(--text-secondary);
  --ss-footer-link-hover-color: var(--brand-hover);
  --ss-footer-widgets-bg: var(--surface-muted);
  --ss-footer-padding-y: clamp(2.5rem, 6vw, 4rem);

  /* Harga produk — brand, bukan pink default */
  --ss-product-grid-box-bg: var(--surface-base);
  --ss-product-grid-box-title-color: var(--text-primary);
  --ss-product-grid-box-price-color: var(--brand);
  --ss-product-grid-box-border-width: 0;
  --ss-product-cta-box-price-color: var(--brand);

  /* Form */
  --ss-form-input-bg: var(--surface-base);
  --ss-form-input-border-color: var(--border);
  --ss-focus-ring-width: 2px;

  /* WooCommerce Blocks (cart & checkout) */
  --wc-primary: var(--brand);
  --wc-primary-text: var(--brand-fg);
  --wc-accent: var(--brand);
  --wc-highlight: var(--brand);
  --wc-form-border-color: var(--border);
  --wc-form-border-radius: var(--radius-sm);
  --wc-card-border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   2. GLOBAL
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--surface-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 var(--space-xs);
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }

a {
  color: var(--brand); /* brand on white = 4.9:1 ✓ */
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--brand-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

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

::selection {
  background-color: var(--brand-subtle);
  color: var(--text-primary);
}

/* :focus-visible wajib terlihat — jangan outline:none tanpa pengganti */
:focus-visible {
  outline: 2px solid var(--brand); /* brand on white = 4.9:1 ✓ */
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.ss-container {
  max-width: var(--container);
  padding-inline: var(--container-pad);
}

/* --------------------------------------------------------------------------
   3. HEADER
   -------------------------------------------------------------------------- */
.site-navigation {
  background-color: var(--ss-navigation-bg);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.site-navigation-sticky-active {
  background-color: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sticky);
}

/* Brand / logo */
.site-brand-logo.site-navigation-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.site-brand-logo.site-navigation-brand img {
  height: 2rem;
  width: auto;
  object-fit: contain;
}

/* Menu desktop */
.site-navigation-menu-nav .ss-nav-link {
  font-family: var(--font-body);
  font-size: var(--ss-navigation-font-size);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-primary); /* 16.3:1 on white ✓ */
  padding-block: var(--space-xs);
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.site-navigation-menu-nav .ss-nav-link:hover,
.site-navigation-menu-nav .ss-nav-item.current-menu-item .ss-nav-link,
.site-navigation-menu-nav .ss-nav-item.current_page_item .ss-nav-link {
  color: var(--brand); /* 4.9:1 on white ✓ */
  text-decoration: none;
}

/* Quicknav (search, cart, account) */
.site-navigation-quicknav .ss-nav-link {
  color: var(--text-primary);
  transition: color 0.15s ease;
  position: relative;
}

.site-navigation-quicknav .ss-nav-link:hover {
  color: var(--brand);
}

.quicknav-minicart .ss-nav-link {
  position: relative;
}

.quicknav-minicart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: var(--badge-hot-bg);
  color: var(--badge-hot-fg);
  border-radius: 9999px;
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1;
  min-width: 1rem;
  padding: 0.15rem 0.35rem;
  text-align: center;
}

.quicknav-minicart-count:empty {
  display: none !important;
}

/* Dropdown search */
.site-navigation-quicknav .ss-dropdown-menu {
  background-color: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sticky);
  padding: var(--space-sm);
}

.search-form .ss-form-control {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface-base);
  color: var(--text-primary);
  padding: var(--space-xs);
}

/* Page title banner */
.site-header {
  background-color: var(--ss-header-bg);
}

.site-header .site-title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  color: var(--text-primary); /* 16.3:1 ✓ */
  margin: 0;
}

.site-header .site-description {
  color: var(--text-secondary); /* 5.1:1 on white ✓ */
  font-size: var(--step-1);
  margin: var(--space-2xs) 0 0;
}

/* Off-canvas navigation + minicart */
.site-offcanvas-navigation,
.site-offcanvas-minicart {
  background-color: var(--surface-base);
}

.site-offcanvas-navigation .ss-nav-link {
  color: var(--text-primary);
}

.site-offcanvas-navigation .ss-nav-link:hover {
  color: var(--brand);
  background-color: var(--brand-subtle);
}

.site-offcanvas-minicart .ss-btn-close {
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   4. BREADCRUMB
   -------------------------------------------------------------------------- */
.site-breadcrumb {
  background-color: var(--ss-breadcrumb-bg);
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-xs);
}

.ss-breadcrumb-item {
  color: var(--text-secondary); /* 5.1:1 ✓ */
  font-size: var(--step-0);
}

.ss-breadcrumb-item a {
  color: var(--brand);
}

.ss-breadcrumb-item a:hover {
  color: var(--brand-hover);
}

.ss-breadcrumb-item.ss-active {
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   5. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--ss-footer-bg);
  color: var(--text-primary);
  padding-block: var(--ss-footer-padding-y);
}

.site-footer a {
  color: var(--text-secondary); /* ~5.1:1 on muted ✓ */
  transition: color 0.15s ease;
}

.site-footer a:hover {
  color: var(--brand-hover);
  text-decoration: underline;
}

.site-footer-text {
  color: var(--text-secondary);
  font-size: var(--step-0);
}

/* Footer sticky (mobile bottom bar, plugin laristurbo).
   Wrapper selalu dirender (bisa kosong) — styling di INNER, karena plugin
   sudah hide `.lt-footer-sticky-inner:empty` → wrapper kosong jadi 0px,
   tidak meninggalkan garis fixed melintang. */
.lt-footer-sticky {
  /* polos — styling pindah ke inner */
}

.lt-footer-sticky .lt-footer-sticky-inner {
  background-color: var(--surface-base);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-sticky);
}

.lt-footer-sticky a {
  color: var(--text-primary);
  font-size: var(--step-0);
}

.lt-footer-sticky a:hover {
  color: var(--brand);
  text-decoration: none;
}

/* Back to top */
.site-backtotop {
  color: var(--brand);
  background-color: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: 9999px; /* pill — hanya badge/back-to-top */
  transition: background-color 0.15s ease, color 0.15s ease;
}

.site-backtotop:hover {
  background-color: var(--brand);
  color: var(--brand-fg);
}

/* --------------------------------------------------------------------------
   6. BUTTONS (global)
   -------------------------------------------------------------------------- */
.ss-btn,
.button,
button.button,
.wc-block-components-button {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Primer — brand */
.ss-btn-primary,
.button.alt,
.single_add_to_cart_button,
.wc-block-components-button--primary {
  background-color: var(--brand);
  border: 1px solid var(--brand);
  color: var(--brand-fg); /* white on brand = 4.9:1 ✓ */
}

.ss-btn-primary:hover,
.button.alt:hover,
.single_add_to_cart_button:hover,
.wc-block-components-button--primary:hover {
  background-color: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--brand-fg);
  text-decoration: none;
}

/* Sekunder — subtle outline */
.ss-btn-subtle,
.button.secondary,
.lt-wc-whatsapp-button-link {
  background-color: var(--surface-base);
  border: 1px solid var(--border);
  color: var(--text-primary); /* 16.3:1 ✓ */
}

.ss-btn-subtle:hover,
.lt-wc-whatsapp-button-link:hover {
  border-color: var(--brand);
  color: var(--brand);
  background-color: var(--brand-subtle);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   7. CART & CHECKOUT (WooCommerce Blocks)
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout {
  color: var(--text-primary);
  padding-block: var(--space-2xl); /* clamp(3rem,5vw,4rem) — layout fluid */
}

/* Summary card */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-order-summary {
  background-color: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper {
  border-top: 1px solid var(--border);
}

/* Form fields */
.wc-block-components-text-input input,
.wc-block-components-form input,
.wc-block-components-form select,
.wp-block-woocommerce-cart input[type="text"],
.wp-block-woocommerce-cart input[type="email"],
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"],
.wp-block-woocommerce-checkout select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  padding: var(--space-xs) var(--space-sm);
}

.wc-block-components-text-input input:focus,
.wp-block-woocommerce-cart input:focus,
.wp-block-woocommerce-checkout input:focus,
.wp-block-woocommerce-checkout select:focus {
  border-color: var(--border-focus);
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-subtle);
}

/* Labels & helper text */
.wc-block-components-text-input label,
.wc-block-components-form label,
.wp-block-woocommerce-checkout label {
  color: var(--text-primary);
  font-size: var(--step-0);
  font-weight: 500;
}

/* Radio / checkbox rows (shipping method, payment) */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option,
.wc-block-components-radio-control__option {
  border-bottom: 1px solid var(--border);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__input,
.wc-block-components-radio-control__input {
  accent-color: var(--brand);
}

/* Totals / prices di checkout — brand untuk angka penting */
.wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item__total-price {
  color: var(--text-primary);
  font-weight: 600;
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__value,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon-link {
  color: var(--text-primary);
  font-weight: 600;
}

/* Proceed to checkout — primer */
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button {
  background-color: var(--brand);
  border: 1px solid var(--brand);
  color: var(--brand-fg);
  font-weight: 600;
}

.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover {
  background-color: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--brand-fg);
}

/* Empty cart */
.wc-block-cart__empty-cart__title {
  font-family: var(--font-display);
  color: var(--text-primary);
}

/* Link "New in store" grid (empty cart) — biarkan grid WooBlocks apa adanya,
   hanya rapiin judul */
.wp-block-woocommerce-product-new .wc-block-grid__product-title,
.wc-block-grid__product-title {
  color: var(--text-primary);
  font-size: var(--step-1);
  font-weight: 500;
}

.wc-block-grid__product-price {
  color: var(--brand);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. NOTICES (woocommerce-message/error/info)
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top: 3px solid var(--brand);
  background-color: var(--brand-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}

.woocommerce-error {
  border-top-color: var(--error);
}

.woocommerce-message .button,
.woocommerce-info .button {
  background-color: var(--brand);
  color: var(--brand-fg);
}

/* --------------------------------------------------------------------------
   9. BREAKPOINT ≥48rem (768px)
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  body {
    font-size: var(--step-1);
  }

  h1 { font-size: var(--step-6); }
  h2 { font-size: var(--step-5); }

  /* Menu wrap fix 768–1023: gap lebih kecil + nowrap (Known issue #5) */
  .site-navigation-menu-nav {
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  .site-navigation-menu-nav .ss-nav-link {
    white-space: nowrap;
  }

  .site-brand-logo.site-navigation-brand img {
    height: 2.25rem;
  }

  /* Konten kartu cart/checkout lebih lega di tablet+ */
  .wp-block-woocommerce-cart,
  .wp-block-woocommerce-checkout {
    padding-block: var(--space-3xl); /* clamp(4rem,7vw,5rem) */
  }
}

/* --------------------------------------------------------------------------
   11. HOMEPAGE (STYLING_HOME) — Page Blueprint: hero → kategori → produk → trust
   Homepage = page 245 dengan entry-content kosong; sections dirender via
   template part (child-theme/template-parts/*). Konten parent dibungkus
   `.ss-col-lg-8` (66.67%) — di homepage dipaksa full width.
   -------------------------------------------------------------------------- */

/* Full-width container reset untuk homepage, tentang kami, dan kontak */
.home .site-content,
.page-id-140 .site-content,
.page-id-141 .site-content {
  padding-block: 0;
}

.home .site-content > .ss-container,
.page-id-140 .site-content > .ss-container,
.page-id-141 .site-content > .ss-container {
  max-width: 100%;
  padding-inline: 0;
  width: 100%;
}

.home .site-content .ss-row,
.page-id-140 .site-content .ss-row,
.page-id-141 .site-content .ss-row {
  margin-inline: 0;
  width: 100%;
}

.home #content.content,
.home .content.ss-col-lg-8,
.page-id-140 #content.content,
.page-id-140 .content.ss-col-lg-8,
.page-id-141 #content.content,
.page-id-141 .content.ss-col-lg-8 {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  padding-inline: 0;
}

.home article.entry-page,
.home .entry-inner,
.home .entry-content,
.page-id-140 article.entry-page,
.page-id-140 .entry-inner,
.page-id-140 .entry-content,
.page-id-141 article.entry-page,
.page-id-141 .entry-inner,
.page-id-141 .entry-content {
  padding: 0;
  margin: 0;
  width: 100%;
}

/* Section wrapper umum — berjarak pas dan centered container */
.jne-section {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.jne-section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

@media (min-width: 36rem) {
  .jne-section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
  }
}

.jne-section-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--space-2xs);
}

.jne-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.jne-section-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-size: var(--step-0);
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 9999px;
  background-color: var(--brand-tint);
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.jne-link-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.jne-section-link:hover {
  background-color: var(--brand);
  color: var(--brand-fg);
  text-decoration: none;
  transform: translateY(-1px);
}

.jne-section-link:hover .jne-link-arrow {
  transform: translateX(4px);
}

/* --- Hero: Editorial split layout, luxurious typography & framing --- */
.jne-hero {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, var(--brand-tint) 0%, var(--surface-raised) 55%, var(--surface-base) 100%);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.25rem, 5vw, 4.5rem);
  overflow: hidden;
}

.jne-hero-ambient {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 50%;
  background: radial-gradient(ellipse at 50% 0%, var(--brand-glow) 0%, transparent 70%);
  pointer-events: none;
}

.jne-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.jne-hero-copy {
  max-width: 38rem;
}

.jne-hero-eyebrow-box {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-xs);
}

.jne-hero-eyebrow-badge {
  display: inline-block;
  background-color: var(--brand);
  color: var(--brand-fg);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

.jne-hero-eyebrow-text {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.jne-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
  letter-spacing: -0.02em;
}

.jne-hero-sub {
  font-size: clamp(0.95rem, 2.5vw, 1.2rem);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-md);
  max-width: 36rem;
}

.jne-hero-highlights {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-md);
}

.jne-highlight-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-primary);
}

.jne-highlight-icon {
  width: 16px;
  height: 16px;
  color: var(--brand);
  flex-shrink: 0;
}

.jne-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.jne-hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  color: var(--brand-fg);
  font-weight: 600;
  font-size: var(--step-0);
  padding: 13px 20px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.jne-hero-cta:hover {
  background-color: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--brand-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sticky);
  text-decoration: none;
}

.jne-cta-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.jne-hero-cta:hover .jne-cta-arrow {
  transform: translateX(4px);
}

.jne-hero-cta-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--step-0);
  padding: 13px 20px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.jne-hero-cta-secondary:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
  text-decoration: none;
}

.jne-btn-icon {
  width: 18px;
  height: 18px;
  color: var(--success);
  flex-shrink: 0;
}

/* Hero media showcase */
.jne-hero-showcase {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  margin-top: var(--space-xs);
}

.jne-hero-frame {
  background-color: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sticky);
}

.jne-hero-image-box {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--surface-raised);
}

.jne-hero-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.jne-hero-frame:hover .jne-hero-image-box img {
  transform: scale(1.04);
}

.jne-hero-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--surface-base);
  border-top: 1px solid var(--border);
}

.jne-caption-left {
  display: flex;
  flex-direction: column;
}

.jne-caption-label {
  font-size: var(--step--1);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.jne-caption-name {
  font-size: var(--step-0);
  color: var(--text-primary);
  font-weight: 700;
}

.jne-caption-right {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.jne-caption-price {
  font-weight: 700;
  color: var(--brand);
  font-size: var(--step-0);
}

.jne-caption-link {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--brand-fg);
  background-color: var(--brand);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.jne-caption-link:hover {
  background-color: var(--brand-hover);
  color: var(--brand-fg);
  text-decoration: none;
  transform: translateY(-1px);
}

/* --- Trust Strip: Minimalist brand guarantees --- */
.jne-trust-strip {
  width: 100%;
  background-color: var(--surface-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-md);
}

.jne-trust-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.jne-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-primary);
}

.jne-trust-item--link {
  transition: color 0.2s ease;
}

.jne-trust-item--link:hover {
  color: var(--brand);
  text-decoration: none;
}

.jne-trust-icon-box {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background-color: var(--brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}

.jne-trust-icon {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--brand);
}

.jne-trust-text {
  display: flex;
  flex-direction: column;
}

.jne-trust-title {
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.jne-trust-desc {
  font-size: var(--step--1);
  color: var(--text-secondary);
}

/* --- Kategori: Editorial Collection Showcase --- */
.jne-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
}

.jne-category-card {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.25s ease;
}

.jne-category-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: var(--shadow-sticky);
  text-decoration: none;
}

.jne-category-media-box {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background-color: var(--surface-raised);
}

.jne-category-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.jne-category-card:hover .jne-category-media img {
  transform: scale(1.06);
}

.jne-category-media--empty {
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--surface-raised);
}

.jne-category-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
  padding: 2px 6px;
}

.jne-category-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 10px 10px;
  background-color: var(--surface-base);
  border-top: 1px solid var(--border);
}

.jne-category-tag {
  display: block;
  font-size: var(--step--1);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.jne-category-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--text-primary);
  margin: 0;
  transition: color 0.2s ease;
}

.jne-category-card:hover .jne-category-name {
  color: var(--brand);
}

.jne-category-arrow {
  color: var(--brand);
  font-weight: 700;
  transition: transform 0.2s ease;
}

.jne-category-card:hover .jne-category-arrow {
  transform: translateX(4px);
}

/* --- Brand Pillars: Standar Kualitas Erday Looks --- */
.jne-pillars {
  background-color: var(--surface-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.jne-section-head.jne-section-head--center,
.jne-section-head--center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  width: 100%;
}

.jne-section-head--center .jne-section-eyebrow,
.jne-section-head--center .jne-section-title,
.jne-section-head--center .jne-section-desc {
  text-align: center;
  width: 100%;
}

.jne-section-desc {
  font-size: var(--step-0);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: var(--space-xs);
}

.jne-pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.jne-pillar-card {
  background-color: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}

.jne-pillar-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: var(--shadow-sticky);
}

.jne-pillar-icon-box {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background-color: var(--brand-tint);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}

.jne-pillar-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--brand);
}

.jne-pillar-title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
}

.jne-pillar-desc {
  font-size: var(--step-0);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* --- Featured Products: Clean Luxury Showcase --- */
.jne-featured {
  background-color: var(--surface-base);
}

.jne-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.jne-featured-item {
  background-color: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.25s ease;
}

.jne-featured-item:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: var(--shadow-sticky);
}

.jne-featured-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.jne-featured-link:hover {
  text-decoration: none;
}

.jne-featured-media-box {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background-color: var(--surface-raised);
}

.jne-featured-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background-color: var(--surface-base);
  color: var(--brand);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 700;
  padding: 2px 6px;
  box-shadow: var(--shadow-card);
  letter-spacing: 0.05em;
}

.jne-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.jne-featured-item:hover .jne-featured-media img {
  transform: scale(1.06);
}

.jne-featured-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--space-xs);
}

.jne-featured-cat {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.jne-featured-title {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 var(--space-2xs);
  max-height: 2.6em;
  overflow: hidden;
  transition: color 0.2s ease;
}

.jne-featured-item:hover .jne-featured-title {
  color: var(--brand);
}

.jne-featured-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--border);
}

.jne-featured-price {
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--brand);
}

.jne-featured-action {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--brand);
  transition: transform 0.2s ease;
}

.jne-featured-item:hover .jne-featured-action {
  transform: translateX(3px);
}

/* --- Brand Story: Heritage & Offline Presence --- */
.jne-story {
  background-color: var(--surface-raised);
  border-top: 1px solid var(--border);
}

.jne-story-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.jne-story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.jne-story-content {
  max-width: 38rem;
}

.jne-story-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  margin: var(--space-xs) 0 var(--space-md);
  letter-spacing: -0.01em;
}

.jne-story-text {
  font-size: var(--step-0);
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-sm);
}

.jne-story-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.jne-stat-item {
  display: flex;
  flex-direction: column;
}

.jne-stat-number {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 4px;
}

.jne-stat-label {
  font-size: var(--step--1);
  color: var(--text-secondary);
  font-weight: 600;
}

.jne-story-locations-wrapper {
  width: 100%;
}

.jne-locations-box {
  background-color: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

.jne-locations-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
}

.jne-loc-icon {
  width: 22px;
  height: 22px;
  color: var(--brand);
  flex-shrink: 0;
}

.jne-locations-desc {
  font-size: var(--step-0);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.jne-store-card {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  background-color: var(--surface-raised);
}

.jne-store-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--brand);
  margin-top: 6px;
  flex-shrink: 0;
}

.jne-store-name {
  display: block;
  font-size: var(--step-0);
  color: var(--text-primary);
}

.jne-store-addr {
  display: block;
  font-size: var(--step--1);
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.jne-store-meta {
  display: block;
  font-size: var(--step--1);
  color: var(--text-muted);
}

.jne-store-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.jne-store-link {
  display: inline-flex;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--brand);
  transition: transform 0.2s ease;
}

.jne-store-link:hover {
  text-decoration: underline;
  transform: translateX(3px);
}

.jne-store-social {
  display: inline-flex;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.jne-store-social:hover {
  color: var(--brand);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   12. BREAKPOINT ≥48rem (768px) — HOMEPAGE
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .jne-hero {
    padding-block: clamp(3rem, 5vw, 5rem);
  }

  .jne-hero-inner {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-2xl);
  }

  .jne-hero-highlights {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .jne-hero-actions {
    flex-direction: row;
    align-items: center;
    width: auto;
  }

  .jne-hero-cta,
  .jne-hero-cta-secondary {
    width: auto;
  }

  .jne-trust-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .jne-category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .jne-category-info {
    padding: var(--space-sm);
  }

  .jne-category-name {
    font-size: var(--step-0);
  }

  .jne-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .jne-featured-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .jne-featured-info {
    padding: var(--space-sm);
  }

  .jne-featured-title {
    font-size: var(--step-0);
  }

  .jne-featured-price {
    font-size: var(--step-1);
  }

  .jne-story-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* Tentang Kami & Kontak responsive 48rem */
  .jne-about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .jne-channels-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

/* --------------------------------------------------------------------------
   13. BREAKPOINT ≥64rem (1024px) — HOMEPAGE & EDITORIAL PAGES
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .site-brand-logo.site-navigation-brand img {
    height: 2.5rem;
  }

  .site-navigation-menu-nav .ss-nav-link {
    padding-block: var(--space-sm);
  }

  .wp-block-woocommerce-checkout-totals-block {
    padding-inline-start: var(--space-sm);
  }

  .jne-section {
    padding-block: var(--space-3xl);
  }

  .jne-section-head {
    margin-bottom: var(--space-lg);
  }

  .jne-hero-inner {
    grid-template-columns: 1.25fr 1fr;
    gap: var(--space-3xl);
  }

  .jne-trust-inner {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }

  /* Kategori: 4 kolom rapi berjejer di desktop */
  .jne-category-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }

  /* Pillars: 4 kolom rapi berjejer di desktop */
  .jne-pillars-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }

  /* Produk: 4 kolom berjejer di desktop */
  .jne-featured-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }

  /* Brand Story: 2 kolom berimbang di desktop */
  .jne-story-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-3xl);
  }

  .jne-story-stats {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Tentang Kami & Kontak responsive 64rem */
  .jne-about-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-3xl);
  }

  .jne-about-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .jne-contact-split {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-3xl);
  }
}

/* ==========================================================================
   EDITORIAL STATIC PAGES (TENTANG KAMI & KONTAK)
   ========================================================================== */

.jne-page {
  width: 100%;
  overflow: hidden;
}

/* Page Hero Banner */
.jne-page-hero {
  width: 100%;
  background: linear-gradient(180deg, var(--brand-tint) 0%, var(--surface-raised) 55%, var(--surface-base) 100%);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.25rem, 5vw, 4.5rem);
}

.jne-page-hero-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  text-align: center;
}

.jne-page-hero-eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.jne-eyebrow-badge {
  background-color: var(--brand);
  color: var(--brand-fg);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

.jne-eyebrow-sub {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-secondary);
}

.jne-page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--text-primary);
  margin: 0 auto var(--space-xs);
  max-width: 50rem;
  letter-spacing: -0.02em;
}

.jne-page-hero-desc {
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 42rem;
}

/* --- Halaman Tentang Kami --- */
.jne-about-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.jne-about-story {
  background-color: var(--surface-base);
}

.jne-about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.jne-about-heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  margin: var(--space-xs) 0 var(--space-md);
  letter-spacing: -0.01em;
}

.jne-about-p {
  font-size: var(--step-0);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.jne-about-quote {
  margin: var(--space-md) 0 0;
  padding: var(--space-md);
  background-color: var(--surface-raised);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
}

.jne-about-quote p {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.55;
  margin-bottom: var(--space-xs);
}

.jne-about-quote cite {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--brand);
  font-style: normal;
}

.jne-about-card-frame {
  background-color: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sticky);
  max-width: 440px;
  margin-inline: auto;
}

.jne-about-image-box {
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--surface-raised);
}

.jne-about-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.jne-about-card-frame:hover .jne-about-image-box img {
  transform: scale(1.04);
}

.jne-about-card-caption {
  padding: var(--space-sm) var(--space-md);
  background-color: var(--surface-base);
  border-top: 1px solid var(--border);
}

.jne-card-caption-tag {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.jne-card-caption-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-0);
  color: var(--text-primary);
}

.jne-card-caption-desc {
  display: block;
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* About Stats Strip */
.jne-about-stats-section {
  background-color: var(--surface-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-xl);
}

.jne-about-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.jne-stat-box {
  background-color: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  box-shadow: var(--shadow-card);
}

.jne-stat-big {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.jne-stat-title {
  display: block;
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.jne-stat-sub {
  display: block;
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* About Offline Stores */
.jne-about-stores {
  background-color: var(--surface-base);
}

.jne-stores-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.jne-store-box {
  background-color: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  position: relative;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}

.jne-store-box:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: var(--shadow-sticky);
}

.jne-store-badge {
  display: inline-block;
  background-color: var(--brand-tint);
  color: var(--brand);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.jne-store-box-title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
}

.jne-store-box-addr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--step-0);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.jne-store-ic {
  width: 18px;
  height: 18px;
  color: var(--brand);
  flex-shrink: 0;
}

.jne-store-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jne-store-features li {
  font-size: var(--step--1);
  color: var(--text-secondary);
  padding-left: var(--space-sm);
  position: relative;
}

.jne-store-features li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: bold;
}

.jne-store-cta-btn {
  display: inline-flex;
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--brand);
  transition: transform 0.2s ease;
}

.jne-store-cta-btn:hover {
  text-decoration: underline;
  transform: translateX(4px);
}

/* About CTA Section */
.jne-about-cta-section {
  background-color: var(--surface-raised);
  border-top: 1px solid var(--border);
  padding-block: var(--space-2xl);
}

.jne-about-cta-card {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

.jne-about-cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.jne-about-cta-desc {
  font-size: var(--step-0);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.jne-about-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.jne-cta-solid-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  color: var(--brand-fg);
  font-weight: 600;
  font-size: var(--step-0);
  padding: 13px 20px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.jne-cta-solid-btn:hover {
  background-color: var(--brand-hover);
  color: var(--brand-fg);
  text-decoration: none;
  transform: translateY(-2px);
}

.jne-cta-outline-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--step-0);
  padding: 13px 20px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

@media (min-width: 36rem) {
  .jne-about-cta-actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
  }

  .jne-cta-solid-btn,
  .jne-cta-outline-btn {
    width: auto;
  }
}

.jne-cta-outline-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  text-decoration: none;
  transform: translateY(-2px);
}

/* --- Halaman Kontak --- */
.jne-contact-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.jne-contact-channels {
  background-color: var(--surface-base);
}

.jne-channels-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.jne-channel-card {
  background-color: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}

.jne-channel-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: var(--shadow-sticky);
}

.jne-channel-icon-box {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background-color: var(--brand-tint);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}

.jne-channel-ic {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--brand);
}

.jne-channel-label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.jne-channel-title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
}

.jne-channel-desc {
  font-size: var(--step-0);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-md);
}

.jne-channel-meta {
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-md);
}

.jne-channel-meta strong {
  font-size: var(--step-0);
  color: var(--text-primary);
}

.jne-channel-meta span {
  font-size: var(--step--1);
  color: var(--text-muted);
}

.jne-channel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand);
  color: var(--brand-fg);
  font-size: var(--step-0);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.jne-channel-btn:hover {
  background-color: var(--brand-hover);
  color: var(--brand-fg);
  text-decoration: none;
}

.jne-channel-dual-links {
  display: flex;
  gap: var(--space-sm);
}

.jne-channel-sublink {
  flex: 1;
  text-align: center;
  background-color: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: var(--step--1);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.jne-channel-sublink:hover {
  border-color: var(--brand);
  color: var(--brand);
  text-decoration: none;
}

/* Contact Main Split (Stores & Inquiry Form) */
.jne-contact-main {
  background-color: var(--surface-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.jne-contact-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.jne-contact-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--space-xs) 0 var(--space-xs);
}

.jne-contact-intro-p {
  font-size: var(--step-0);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.jne-contact-store-card {
  display: flex;
  gap: var(--space-md);
  background-color: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-card);
}

.jne-store-num-dot {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background-color: var(--brand-tint);
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jne-store-card-name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px;
}

.jne-store-card-addr {
  font-size: var(--step-0);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.jne-store-specs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.jne-store-dir-btn {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--brand);
  transition: transform 0.2s ease;
}

.jne-store-dir-btn:hover {
  text-decoration: underline;
  transform: translateX(4px);
}

/* Contact Form Card */
.jne-form-card {
  background-color: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sticky);
}

.jne-form-head {
  margin-bottom: var(--space-md);
}

.jne-form-title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.jne-form-desc {
  font-size: var(--step--1);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.jne-quick-inquiry-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.jne-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jne-form-label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-primary);
}

.jne-form-input,
.jne-form-textarea {
  width: 100%;
  background-color: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--text-primary);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.jne-form-input:focus-visible,
.jne-form-textarea:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-color: var(--border-focus);
  background-color: var(--surface-base);
}

.jne-form-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  color: var(--brand-fg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-0);
  padding: 12px 20px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.jne-form-submit-btn:hover {
  background-color: var(--brand-hover);
  color: var(--brand-fg);
  transform: translateY(-2px);
}

.jne-form-submit-btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.jne-form-btn-arrow {
  transition: transform 0.2s ease;
}

.jne-form-submit-btn:hover .jne-form-btn-arrow {
  transform: translateX(4px);
}

.jne-form-footer-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--border);
}

.jne-note-ic {
  width: 16px;
  height: 16px;
  color: var(--brand);
  flex-shrink: 0;
}

/* Contact FAQ */
.jne-contact-faq {
  background-color: var(--surface-base);
}

.jne-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.jne-faq-item {
  background-color: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
}

.jne-faq-q {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
}

.jne-faq-a {
  font-size: var(--step--1);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   14. ARCHIVE / SHOP (STYLING_ARCHIVE) — Page Blueprint: filter bar
   horizontal → grid 4-3-2 kolom → kartu flat (gambar → badge → judul → harga)
   Body classes: shop = woocommerce-shop / post-type-archive-product,
   kategori = tax-product_cat. Kartu juga dipakai di related products.
   -------------------------------------------------------------------------- */

/* --- Filter bar: result count kiri + dropdown sort kanan (blueprint #2) --- */
.woocommerce .woocommerce-result-count {
  color: var(--text-muted); /* 4.5:1 on white ✓ — teks bantu, bukan judul */
  font-size: var(--step-0);
  margin: 0 0 var(--space-sm);
  float: none;
}

.woocommerce .woocommerce-ordering {
  float: none;
  margin: 0 0 var(--space-md);
}

.woocommerce .woocommerce-ordering select.orderby {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface-base);
  color: var(--text-primary); /* 16.3:1 ✓ */
  font-family: var(--font-body);
  font-size: var(--step-0);
  padding: var(--space-2xs) var(--space-xs);
  transition: border-color 0.15s ease;
}

.woocommerce .woocommerce-ordering select.orderby:focus {
  border-color: var(--border-focus);
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-subtle);
}

/* --- Grid: blueprint 2 kolom mobile, 3 tablet, 4 desktop.
   Parent force gap:2rem!important + kolom 3/4 via !important →
   perlu !important di sini supaya menang (lawan !important parent). --- */
.woocommerce ul.products {
  gap: var(--space-xs) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin: 0 0 var(--space-2xl);
}

/* --- Kartu produk: flat (radius 0), satu isyarat hover = shadow masuk --- */
.woocommerce ul.products li.product .product-inner {
  border-radius: var(--radius-none); /* blueprint: kartu flat 0px */
  border-width: 0; /* latar putih + foto cukup, tanpa border */
  background-color: var(--surface-base);
  transition: box-shadow 0.15s ease; /* satu isyarat: shadow saat hover */
}

.woocommerce ul.products li.product .product-inner:hover {
  box-shadow: var(--shadow-card); /* 0 2px 8px rgba(0,0,0,0.06) — subtle */
}

/* Gambar 1:1 cover (placeholder sudah 1:1) */
.woocommerce ul.products li.product .product-image-box a img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  border-radius: var(--radius-none);
}

/* Detail box: padding pas, tanpa border atas */
.woocommerce ul.products li.product .product-detail-box {
  padding: var(--space-xs) !important;
  border-top: 0;
  text-align: left;
}

/* Judul produk: maks 2 baris (blueprint #4) */
.woocommerce ul.products li.product .product-detail-box .woocommerce-loop-product__title {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary); /* 16.3:1 ✓ */
  padding: 0;
  margin: 0 0 var(--space-2xs);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Harga: brand — lebih berat dari judul (blueprint) */
.woocommerce ul.products li.product .tp-shop-price-default .price {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--brand); /* brand on white = 4.9:1 ✓ */
  margin: 0;
}

.woocommerce ul.products li.product .price del {
  color: var(--text-muted); /* 4.5:1 ✓ */
  font-size: var(--step-1);
  font-weight: 400;
}

/* Badge onsale (brand) & soldout (netral gelap tint brand, bukan abu Bootstrap) */
.woocommerce span.onsale {
  background-color: var(--brand);
  color: var(--brand-fg); /* white on brand = 4.9:1 ✓ */
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: var(--space-2xs) var(--space-xs);
  min-height: 0;
  top: var(--space-xs);
  left: var(--space-xs);
}

.woocommerce span.onsale.soldout {
  background-color: var(--text-secondary); /* 5.1:1 vs white ✓ */
  color: var(--text-on-brand);
}

/* Wishlist plugin (laristurbo) — sudah absolute top-right; rapikan warna
   ikon, teks sudah di-hide plugin */
.lt-wc-wishlist-shop-classic .lt-wc-wishlist-icon svg {
  fill: var(--text-secondary); /* 5.1:1 on white ✓ */
}

.lt-wc-wishlist-shop-classic .lt-wc-wishlist-btn:hover .lt-wc-wishlist-icon svg {
  fill: var(--brand); /* hover: satu isyarat warna */
}

/* Pagination (jika muncul — saat ini <1 halaman produk) */
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.current,
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers:hover {
  background-color: var(--brand);
  border-color: var(--brand);
  color: var(--brand-fg);
}

/* --------------------------------------------------------------------------
   15. BREAKPOINT ≥48rem (768px) — ARCHIVE
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  /* Filter bar: result count kiri, sort kanan, satu baris */
  .woocommerce .woocommerce-result-count {
    float: left;
    margin: var(--space-2xs) 0 var(--space-md);
  }

  .woocommerce .woocommerce-ordering {
    float: right;
    margin: 0 0 var(--space-md);
  }

  .woocommerce ul.products {
    clear: both;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* tablet 3 */
    gap: var(--space-md) !important;
  }

  .woocommerce ul.products li.product .product-detail-box {
    padding: var(--space-sm) var(--space-sm) var(--space-md) !important;
  }

  .woocommerce ul.products li.product .product-detail-box .woocommerce-loop-product__title {
    font-size: var(--step-2);
  }

  .woocommerce ul.products li.product .tp-shop-price-default .price {
    font-size: var(--step-2);
  }
}

/* --------------------------------------------------------------------------
   16. BREAKPOINT ≥64rem (1024px) — ARCHIVE
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* desktop 4 */
    gap: var(--space-md) !important;
  }

  .woocommerce ul.products li.product .product-detail-box {
    padding: var(--space-md);
  }
}

/* --------------------------------------------------------------------------
   17. SINGLE PRODUCT (STYLING_SINGLE) — Page Blueprint: breadcrumb → galeri
   (kiri 50%) + info (kanan 50%) → tabs → related → sticky ATC (mobile).
   Judul produk h1 di summary (bukan banner — banner di-hide via
   larismanis_header_is_active di functions.php). Thumbnail swiper tetap
   horizontal di bawah (playbook known issue #2: galeri Swiper, styling cukup
   aspect-ratio + cover; jangan lawan arah Swiper).
   -------------------------------------------------------------------------- */

/* --- Kolom: galeri kiri, summary kanan. Parent ss-row pakai gutter padding
   (bukan gap) — JANGAN tambah gap di .single-product-row, nanti kolom
   wrap (556+556+gap > 1112). Jarak antar kolom via padding summary di
   breakpoint ≥48rem. --- */
.single-product-row {
  gap: 0;
}

/* --- Galeri: gambar utama 1:1 cover, wrapper flat (tanpa border parent) --- */
.tp-product-images-wrapper {
  border: 0;
  padding: 0;
}

.tp-product-images-wrapper .swiper-slide img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* Thumbnail: slide kecil, active = border brand, hover = opacity naik */
.tp-product-thumbnails-wrapper {
  margin-top: var(--space-xs);
}

.tp-product-thumbnails-swiper .swiper-slide {
  opacity: 0.55;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.tp-product-thumbnails-swiper .swiper-slide:hover {
  opacity: 0.85;
}

.tp-product-thumbnails-swiper .swiper-slide-thumb-active {
  opacity: 1;
  border-color: var(--brand);
}

.tp-product-thumbnails-swiper img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  display: block;
  border: 0;
  padding: 0;
}

/* Nav panah Swiper — subtle, tint brand */
.tp-product-images-container .swiper-button-next,
.tp-product-images-container .swiper-button-prev {
  background-color: var(--surface-base);
  color: var(--text-primary);
  border: 1px solid var(--border);
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -1.125rem;
}

.tp-product-images-container .swiper-button-next:hover,
.tp-product-images-container .swiper-button-prev:hover {
  background-color: var(--brand-subtle);
  color: var(--brand);
}

/* --- Summary: urutan blueprint — judul → harga → deskripsi → varian →
   qty+ATC full-width → meta. Jarak vertikal lega (spacing 1.5x). --- */
.single-product .summary.entry-summary {
  padding-block: 0;
}

/* Judul produk: h1 28px / 500 (blueprint #2) */
.single-product .product_title {
  font-family: var(--font-display);
  font-size: var(--step-4); /* 28px */
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-primary); /* 16.3:1 on white ✓ */
  margin: 0 0 var(--space-sm);
}

/* Harga: 28px / 600 brand (blueprint #3 — lebih berat dari judul) */
.single-product .summary .price,
.single-product .summary .woocommerce-variation-price .price,
.lt-wc-atc-popup .lt-wc-product-price-final {
  font-size: var(--step-4); /* 28px */
  font-weight: 600;
  color: var(--brand); /* brand on white = 4.9:1 ✓ */
  margin: 0 0 var(--space-sm);
}

.single-product .summary .price del,
.lt-wc-atc-popup .lt-wc-product-price-final del {
  color: var(--text-muted); /* 4.5:1 ✓ */
  font-size: var(--step-2);
  font-weight: 400;
}

.single-product .summary .price ins,
.lt-wc-atc-popup .lt-wc-product-price-final ins {
  text-decoration: none;
}

/* Rating + review (jika ada review) */
.single-product .woocommerce-product-rating {
  margin: 0 0 var(--space-sm);
}

.single-product .woocommerce-product-rating .star-rating {
  color: var(--brand);
}

.single-product .woocommerce-review-link {
  color: var(--text-muted); /* 4.5:1 ✓ */
  font-size: var(--step-0);
}

/* Short description */
.single-product .woocommerce-product-details__short-description {
  color: var(--text-secondary); /* 5.1:1 ✓ */
  font-size: var(--step-1);
  margin: 0 0 var(--space-md);
}

/* Varian: label kecil + select dropdown (bukan swatch parent) */
.single-product table.variations {
  border: 0;
  margin: 0 0 var(--space-sm);
}

.single-product table.variations tr {
  border: 0;
}

.single-product table.variations td,
.single-product table.variations th {
  border: 0;
  padding: var(--space-2xs) 0;
}

.single-product table.variations .label {
  display: block;
  width: 100%;
}

.single-product table.variations label {
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--text-secondary); /* 5.1:1 ✓ */
  margin-bottom: var(--space-2xs);
}

.single-product table.variations select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface-base);
  color: var(--text-primary); /* 16.3:1 ✓ */
  font-family: var(--font-body);
  font-size: var(--step-0);
  padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);
  transition: border-color 0.15s ease;
}

.single-product table.variations select:focus {
  border-color: var(--border-focus);
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-subtle);
}

/* Quantity selector: compact, border token */
.single-product form.cart div.quantity .qty {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--step-1);
  padding: var(--space-xs) var(--space-sm);
  width: 4.5rem;
  text-align: center;
}

/* ATC full-width (blueprint #8) — parent sudah width:100% di
   .woocommerce-product-button .button; pastikan tinggi konsisten */
.single-product .woocommerce-product-button .single_add_to_cart_button {
  min-height: 2.75rem;
}

/* Button group wrapper: lega */
.woocommerce-product-button-group {
  margin: var(--space-sm) 0 var(--space-md);
}

/* WhatsApp (plugin) — outline sekunder, konsisten dgn tombol lain */
.lt-wc-whatsapp-button-product {
  margin-top: var(--space-xs);
}

/* Marketplace (plugin) — teks kecil muted */
.lt-wc-shop-marketplace-text {
  color: var(--text-muted); /* 4.5:1 ✓ */
  font-size: var(--step-0);
}

/* Meta: SKU + kategori — muted, border atas tipis */
.single-product .product_meta {
  border-top: 1px solid var(--border);
  color: var(--text-muted); /* 4.5:1 ✓ */
  font-size: var(--step-0);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
}

.single-product .product_meta .sku {
  color: var(--text-secondary); /* 5.1:1 ✓ */
}

.single-product .product_meta a {
  color: var(--text-secondary); /* 5.1:1 ✓ */
  transition: color 0.15s ease;
}

.single-product .product_meta a:hover {
  color: var(--brand);
}

/* Social share (plugin) — ikon kecil muted */
.tp-social-share {
  margin-top: var(--space-sm);
}

.tp-social-share .tp-social-icon {
  color: var(--text-muted); /* 4.5:1 ✓ */
  transition: color 0.15s ease;
}

.tp-social-share .tp-social-icon:hover {
  color: var(--brand);
}

/* --- Tabs: bawah galeri, horizontal, active = underline brand (blueprint #3:
   Deskripsi | Informasi Produk | Ulasan — bukan accordion) --- */
.woocommerce-tabs {
  margin-top: var(--space-2xl);
}

.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.tabs.wc-tabs {
  border-bottom: 1px solid var(--border);
  padding: 0 !important;
  margin: 0 0 var(--space-md) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: var(--space-sm) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  white-space: nowrap !important;
  list-style: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs.wc-tabs::before {
  display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs.wc-tabs li {
  background-color: transparent !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs.wc-tabs li::before,
.woocommerce-tabs ul.tabs.wc-tabs li::after {
  display: none !important;
  content: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs.wc-tabs li a {
  color: var(--text-secondary); /* 5.1:1 ✓ */
  font-size: var(--step-0);
  font-weight: 500;
  padding: var(--space-xs) var(--space-2xs);
  display: inline-block !important;
  width: auto !important;
  white-space: nowrap !important;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a,
.woocommerce-tabs ul.tabs.wc-tabs li:hover a {
  color: var(--brand);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.tabs.wc-tabs li.active {
  background-color: transparent !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs.wc-tabs li.active a {
  color: var(--brand) !important; /* 4.9:1 ✓ */
  border-bottom-color: var(--brand) !important;
  font-weight: 600;
}

/* Panel tabs */
.woocommerce-tabs .woocommerce-Tabs-panel {
  padding: var(--space-sm) 0 var(--space-md);
}

.woocommerce-tabs .woocommerce-Tabs-panel h2 {
  font-size: var(--step-3);
  font-weight: 600;
  margin: 0 0 var(--space-sm);
}

/* Tabel atribut produk (tab Informasi Produk) */
.woocommerce-tabs table.woocommerce-product-attributes {
  border-top: 1px solid var(--border);
}

.woocommerce-tabs table.woocommerce-product-attributes th,
.woocommerce-tabs table.woocommerce-product-attributes td {
  border-bottom: 1px solid var(--border);
  padding: var(--space-xs) var(--space-sm);
}

.woocommerce-tabs table.woocommerce-product-attributes th {
  color: var(--text-secondary); /* 5.1:1 ✓ */
  font-weight: 500;
  width: 35%;
}

/* --- Related: "Produk Terkait", grid kartu reuse section 14/15/16 --- */
.related.products {
  margin-top: var(--space-2xl);
}

.related.products > h2 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  color: var(--text-primary); /* 16.3:1 ✓ */
  margin: 0 0 var(--space-md);
}

/* --- Sticky ATC (mobile, plugin laristurbo) — bar fixed bottom + popup --- */
.lt-wc-button-sticky {
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
}

.lt-wc-button-sticky .single_add_to_cart_button {
  min-height: 2.75rem;
}

/* Popup bottom sheet: putih, radius atas, konten lega */
.lt-wc-atc-popup .ss-modal-content {
  background-color: var(--surface-base);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: var(--space-md);
}

.lt-wc-atc-popup .lt-wc-atc-popup-header {
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.lt-wc-atc-popup .lt-wc-product-title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--text-primary); /* 16.3:1 ✓ */
  margin: 0;
}

.lt-wc-atc-popup .lt-wc-product-price-final {
  margin: var(--space-2xs) 0 0;
}

/* Popup: varian + qty + ATC full-width */
.lt-wc-atc-popup .woocommerce-product-button {
  flex: 1 1 auto;
}

.lt-wc-atc-popup .single_add_to_cart_button {
  min-height: 2.75rem;
}

/* --------------------------------------------------------------------------
   18. BREAKPOINT ≥48rem (768px) — SINGLE PRODUCT
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  /* Galeri: jarak thumbnails lebih lega */
  .tp-product-thumbnails-wrapper {
    margin-top: var(--space-xs);
  }

  .tp-product-thumbnails-swiper .swiper-slide {
    opacity: 0.6;
  }

  /* Summary: padding kiri antar kolom dari parent gutter sudah cukup */
  .single-product .summary.entry-summary {
    padding-inline-start: var(--space-sm);
  }

  .single-product .product_title {
    margin-bottom: var(--space-sm);
  }

  .woocommerce-tabs {
    margin-top: var(--space-3xl);
  }

  .related.products {
    margin-top: var(--space-3xl);
  }
}

/* --------------------------------------------------------------------------
   19. BREAKPOINT ≥64rem (1024px) — SINGLE PRODUCT
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  /* Parent gutter (padding kolom) sudah beri jarak — tidak perlu gap agar
     tidak wrap. Summary cukup padding-inline-start. */
  .single-product .summary.entry-summary {
    padding-inline-start: var(--space-md);
  }

  .single-product .product_title {
    font-size: var(--step-4); /* tetap 28px — hierarki harga 600 vs judul 500 */
  }

  .woocommerce-tabs ul.tabs.wc-tabs {
    gap: var(--space-lg);
  }
}