/* =========================================================
   Royal Furniture Jepara — Design Tokens
   Palette terinspirasi kayu jati & tekstil Jepara: warm ivory,
   walnut, dan sage hijau daun sebagai aksen (bukan terracotta/hitam generik).
   ========================================================= */
:root{
	--rfj-bg: #F7F4EE;
	--rfj-surface: #FFFFFF;
	--rfj-ink: #2A2420;
	--rfj-ink-muted: #6B6156;
	--rfj-walnut: #6B4226;
	--rfj-walnut-dark: #4A2D19;
	--rfj-sage: #3F6B4A;
	--rfj-sage-dark: #2E4F37;
	--rfj-border: #E4DBCB;
	--rfj-badge-new: #3F6B4A;
	--rfj-badge-best: #A9722F;
	--rfj-badge-soon: #6B6156;

	--rfj-font-display: 'Fraunces', Georgia, serif;
	--rfj-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

	--rfj-radius: 6px;
	--rfj-container: 1200px;
}

body{
	font-family: var(--rfj-font-body);
	color: var(--rfj-ink);
	background: var(--rfj-bg);
	line-height: 1.6;
	font-size: 16px;
}

h1,h2,h3,h4{
	font-family: var(--rfj-font-display);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 0.5em;
	color: var(--rfj-ink);
}
h1{ font-size: clamp(2rem, 4vw, 2.75rem); }
h2{ font-size: clamp(1.5rem, 3vw, 2rem); }
p{ margin: 0 0 1em; max-width: 65ch; }

.rfj-container{
	max-width: var(--rfj-container);
	margin: 0 auto;
	padding: 0 24px;
}

.rfj-skip-link{
	position:absolute; left:-9999px; top:0; background:var(--rfj-ink); color:#fff; padding:10px 16px; z-index:1000;
}
.rfj-skip-link:focus{ left:16px; top:16px; }

/* ===== Buttons ===== */
.rfj-btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--rfj-radius);
	font-weight: 600;
	font-size: 0.95rem;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
	white-space: nowrap;
}
.rfj-btn--wa{ background: var(--rfj-sage); color: #fff; }
.rfj-btn--wa:hover{ background: var(--rfj-sage-dark); }
.rfj-btn--outline{ background: transparent; color: var(--rfj-walnut); border: 1.5px solid var(--rfj-walnut); }
.rfj-btn--outline:hover{ background: var(--rfj-walnut); color: #fff; }
.rfj-btn--sm{ padding: 8px 14px; font-size: 0.85rem; width: 100%; justify-content: center; }
.rfj-btn--lg{ padding: 16px 28px; font-size: 1.05rem; }

/* ===== Top bar ===== */
.rfj-topbar{ background: var(--rfj-walnut-dark); color: #EDE3D6; font-size: 0.85rem; }
.rfj-topbar__inner{ display:flex; justify-content: space-between; align-items:center; padding: 8px 24px; flex-wrap: wrap; gap: 8px; }
.rfj-topbar a{ color: inherit; }
.rfj-topbar a:hover{ text-decoration: underline; }
.rfj-topbar__contact{ display:flex; gap:10px; align-items:center; }
.rfj-topbar__social{ display:flex; gap:14px; }

/* ===== Header ===== */
.rfj-header{ background: var(--rfj-surface); border-bottom: 1px solid var(--rfj-border); position: sticky; top:0; z-index: 100; }
.rfj-header__inner{ display:flex; align-items:center; gap: 32px; padding: 16px 24px; }
.rfj-branding img{ max-height: 56px; width:auto; }
.rfj-branding__text{ font-family: var(--rfj-font-display); font-size:1.4rem; font-weight:700; color: var(--rfj-walnut); }
.rfj-nav{ flex: 1; }
.rfj-nav__list{ display:flex; gap: 28px; }
.rfj-nav__list a{ font-weight: 500; }
.rfj-nav__list a:hover{ color: var(--rfj-walnut); }
.rfj-header__cta{ flex-shrink:0; }
.rfj-nav-toggle{ display:none; background:none; border:none; padding:8px; flex-direction:column; gap:5px; }
.rfj-nav-toggle span{ width:24px; height:2px; background: var(--rfj-ink); display:block; }
.rfj-nav-mobile{ border-top:1px solid var(--rfj-border); padding: 16px 24px; }
.rfj-nav-mobile__list{ display:flex; flex-direction:column; gap:14px; margin-bottom:16px; }

@media (max-width: 860px){
	.rfj-nav, .rfj-header__cta{ display:none; }
	.rfj-nav-toggle{ display:flex; }
	.rfj-topbar__social{ display:none; }
}

/* ===== Hero ===== */
.rfj-hero{ padding: 64px 0; background: var(--rfj-surface); }
.rfj-hero__inner{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; }
.rfj-hero__content p{ color: var(--rfj-ink-muted); font-size: 1.1rem; }
.rfj-hero__actions{ display:flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.rfj-hero__image img{ border-radius: var(--rfj-radius); }
@media (max-width: 860px){ .rfj-hero__inner{ grid-template-columns: 1fr; } .rfj-hero__image{ order:-1; } }

/* ===== Sections ===== */
.rfj-section{ padding: 64px 0; }
.rfj-section--muted{ background: var(--rfj-surface); border-top:1px solid var(--rfj-border); border-bottom:1px solid var(--rfj-border); }
.rfj-section__title{ margin-bottom: 32px; }
.rfj-section__more{ text-align:center; margin-top: 32px; }

/* ===== Category grid ===== */
.rfj-category-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 20px; }
.rfj-category-card{ position:relative; display:block; border-radius: var(--rfj-radius); overflow:hidden; aspect-ratio: 4/3; background: var(--rfj-border); }
.rfj-category-card img{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.rfj-category-card:hover img{ transform: scale(1.05); }
.rfj-category-card__placeholder{ width:100%; height:100%; background: linear-gradient(135deg, var(--rfj-border), var(--rfj-bg)); }
.rfj-category-card__label{ position:absolute; left:0; right:0; bottom:0; padding: 14px 16px; background: linear-gradient(0deg, rgba(42,36,32,.85), transparent); color:#fff; font-family: var(--rfj-font-display); font-weight:600; font-size:1.1rem; }
.rfj-category-card__label small{ display:block; font-family: var(--rfj-font-body); font-weight:400; font-size:0.8rem; opacity:.85; }

/* ===== Product grid & card ===== */
.rfj-product-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 24px; }
.rfj-product-card{ background: var(--rfj-surface); border: 1px solid var(--rfj-border); border-radius: var(--rfj-radius); overflow:hidden; display:flex; flex-direction:column; }
.rfj-product-card__media{ position:relative; display:block; aspect-ratio: 1/1; background: var(--rfj-border); }
.rfj-product-card__media img{ width:100%; height:100%; object-fit:cover; }
.rfj-product-card__placeholder{ width:100%; height:100%; background: linear-gradient(135deg, var(--rfj-border), var(--rfj-bg)); }
.rfj-product-card__body{ padding: 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.rfj-product-card__cat{ font-size:0.78rem; color: var(--rfj-sage-dark); font-weight:600; margin:0; }
.rfj-product-card__title{ font-size: 1.05rem; margin: 0; }
.rfj-product-card__title a:hover{ color: var(--rfj-walnut); }
.rfj-product-card__sku{ font-size:0.82rem; color: var(--rfj-ink-muted); margin:0 0 8px; }
.rfj-product-card__body .rfj-btn{ margin-top:auto; }

.rfj-badge{ position:absolute; top:10px; left:10px; padding: 4px 10px; border-radius: 4px; font-size:0.72rem; font-weight:700; color:#fff; }
.rfj-badge--new{ background: var(--rfj-badge-new); }
.rfj-badge--best_seller{ background: var(--rfj-badge-best); }
.rfj-badge--coming_soon{ background: var(--rfj-badge-soon); }

/* ===== CTA banner ===== */
.rfj-cta-banner{ background: var(--rfj-walnut); color:#fff; padding: 56px 0; }
.rfj-cta-banner h2{ color:#fff; }
.rfj-cta-banner p{ color: #EDE3D6; margin:0; }
.rfj-cta-banner__inner{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }

/* ===== Breadcrumb ===== */
.rfj-breadcrumb ol{ display:flex; flex-wrap:wrap; gap: 6px; list-style:none; padding:0; margin: 0 0 12px; font-size:0.85rem; color: var(--rfj-ink-muted); }
.rfj-breadcrumb li:not(:last-child)::after{ content:'/'; margin-left:6px; }
.rfj-breadcrumb a:hover{ color: var(--rfj-walnut); }

.rfj-page-header{ padding: 40px 0 8px; }
.rfj-page-header--tight{ padding-bottom:0; }

/* ===== Archive layout ===== */
.rfj-archive-layout{ display:grid; grid-template-columns: 220px 1fr; gap: 40px; padding: 24px 24px 64px; align-items:start; }
.rfj-archive-sidebar h2{ font-size:1rem; text-transform:none; }
.rfj-archive-sidebar__list li{ margin-bottom:8px; }
.rfj-archive-sidebar__list a{ color: var(--rfj-ink-muted); }
.rfj-archive-sidebar__list li.is-current a, .rfj-archive-sidebar__list a:hover{ color: var(--rfj-walnut); font-weight:600; }
@media (max-width: 780px){ .rfj-archive-layout{ grid-template-columns: 1fr; } }

.rfj-pagination{ margin-top: 40px; display:flex; justify-content:center; gap:16px; }
.rfj-pagination .page-numbers{ padding:8px 14px; border:1px solid var(--rfj-border); border-radius:4px; }
.rfj-pagination .page-numbers.current{ background: var(--rfj-walnut); color:#fff; border-color: var(--rfj-walnut); }

/* ===== Single product ===== */
.rfj-product-single{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 24px 24px 64px; }
.rfj-product-single__main-image{ position:relative; aspect-ratio: 1/1; border-radius: var(--rfj-radius); overflow:hidden; background: var(--rfj-border); }
.rfj-product-single__main-image img{ width:100%; height:100%; object-fit:cover; }
.rfj-product-single__thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.rfj-thumb{ border:2px solid transparent; border-radius:4px; padding:0; overflow:hidden; background:none; width:64px; height:64px; }
.rfj-thumb img{ width:100%; height:100%; object-fit:cover; }
.rfj-thumb.is-active{ border-color: var(--rfj-walnut); }
.rfj-product-single__cat{ display:inline-block; color: var(--rfj-sage-dark); font-weight:600; font-size:0.85rem; margin-bottom:8px; }
.rfj-product-single__sku{ color: var(--rfj-ink-muted); }
.rfj-product-single__excerpt{ color: var(--rfj-ink-muted); }
.rfj-spec-table{ width:100%; border-collapse: collapse; margin: 20px 0; }
.rfj-spec-table th, .rfj-spec-table td{ text-align:left; padding: 10px 0; border-bottom:1px solid var(--rfj-border); }
.rfj-spec-table th{ width: 40%; color: var(--rfj-ink-muted); font-weight:500; }
.rfj-product-single__cta{ margin-top: 12px; }
.rfj-product-single__note{ font-size:0.82rem; color: var(--rfj-ink-muted); margin-top:10px; }
.rfj-product-single__description{ grid-column: 1 / -1; border-top:1px solid var(--rfj-border); padding-top: 32px; margin-top: 16px; }
@media (max-width: 780px){ .rfj-product-single{ grid-template-columns: 1fr; } }

/* ===== Page content ===== */
.rfj-page-content{ padding: 24px 24px 64px; }
.rfj-page-content__thumb{ margin-bottom: 24px; border-radius: var(--rfj-radius); overflow:hidden; }

/* ===== 404 ===== */
.rfj-404{ text-align:center; padding: 96px 24px; }
.rfj-404 h1{ font-size: 5rem; color: var(--rfj-border); }

/* ===== Footer ===== */
.rfj-footer{ background: var(--rfj-walnut-dark); color: #D8CBB8; padding: 56px 0 24px; margin-top: 40px; }
.rfj-footer__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.rfj-footer h3{ color:#fff; font-size:1rem; margin-bottom:16px; }
.rfj-footer a{ color:#D8CBB8; }
.rfj-footer a:hover{ color:#fff; }
.rfj-footer ul li{ margin-bottom:8px; }
.rfj-footer__brand{ font-family: var(--rfj-font-display); font-size:1.3rem; color:#fff; font-weight:700; }
.rfj-footer__bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:20px; font-size:0.82rem; text-align:center; }
@media (max-width: 780px){ .rfj-footer__grid{ grid-template-columns: 1fr 1fr; } }

/* ===== Floating WA button (mobile-friendly quick CTA) ===== */
.rfj-wa-float{
	position: fixed; right: 20px; bottom: 20px; width: 56px; height:56px; border-radius:50%;
	background: var(--rfj-sage); color:#fff; display:flex; align-items:center; justify-content:center;
	box-shadow: 0 6px 16px rgba(0,0,0,.25); z-index: 200;
}
.rfj-wa-float:hover{ background: var(--rfj-sage-dark); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
	.rfj-category-card img{ transition:none; }
}

/* =========================================================
   Perbaikan responsif untuk konten dari editor (the_content)
   ========================================================= */

/* Cegah horizontal-scroll di seluruh halaman kalau ada elemen
   yang lebih lebar dari viewport (jaring pengaman terakhir). */
html, body{ max-width: 100%; overflow-x: hidden; }

/* WordPress "Classic Editor" caption ([caption]) & galeri lama
   menyisipkan inline style="width:1080px" dsb pada wrapper-nya.
   Ini penyebab utama teks "kepotong"/layout melebar di HP —
   override paksa supaya ikut menyusut sesuai container. */
.wp-caption,
.gallery,
figure.wp-block-image,
figure.wp-block-gallery{
	max-width: 100% !important;
	width: auto !important;
}
.wp-caption img,
.wp-caption-text,
.wp-block-image img{
	max-width: 100% !important;
	height: auto !important;
}
.wp-caption-text{ font-size: 0.85rem; color: var(--rfj-ink-muted); text-align:center; padding: 6px 0 0; }

/* Alignment classes bawaan WP */
.alignleft{ float:left; margin: 0 20px 16px 0; max-width: 45%; }
.alignright{ float:right; margin: 0 0 16px 20px; max-width: 45%; }
.aligncenter{ display:block; margin: 0 auto 16px; }
@media (max-width: 600px){
	.alignleft, .alignright{ float:none; margin: 0 0 16px; max-width: 100%; }
}

/* Jaring pengaman umum: kalau konten yang di-paste (dari Word/Canva/dsb)
   membawa inline width tetap di area artikel, paksa menyesuaikan lebar layar. */
.rfj-product-single__description [style*="width"],
.rfj-page-content [style*="width"]{
	max-width: 100% !important;
	width: auto !important;
}

/* Tabel spesifikasi/konten yang lebih lebar dari layar HP —
   biarkan scroll horizontal di dalam tabelnya saja, bukan seluruh halaman. */
.rfj-product-single__description table,
.rfj-page-content table{
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Kata/URL panjang tanpa spasi (mis. judul produk panjang, link) jangan
   sampai memaksa container melebar — patahkan ke baris berikutnya. */
.rfj-product-single__description,
.rfj-page-content,
.rfj-product-single__info,
.rfj-product-card__body{
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Video/iframe embed (YouTube dll) ikut menyesuaikan lebar */
.rfj-product-single__description iframe,
.rfj-page-content iframe{
	max-width: 100%;
}