/* ═══════════════════════════════════════════════════════════════════
   Floriste Catalog — Main CSS
   Design: Minimalist · Primary: Black · Background: White
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens ─────────────────────────────────────────────── */
:root {
	/* Primary brand color — diatur dari Appearance → Floriste Settings → Tipografi & Warna.
	   Default: #0a0a0a (hitam). Di-override via wp_head (floriste_customizer_css). */
	--color-primary:      #0a0a0a;
	/* Turunan primary — dipakai untuk hover, background halus, & fokus.
	   Lapisan 1 = fallback solid (browser lama). Lapisan 2 = color-mix
	   yang otomatis mengikuti --color-primary (Chrome 111+/Safari 16.2+). */
	--color-primary-hover: #000000;
	--color-primary-soft:  #f4f4f4;
	--color-primary-ring:  rgba(10, 10, 10, 0.35);
	--color-on-primary:    #ffffff;

	/* Warna teks heading & body — diatur dari panel admin.
	   Default: heading mengikuti primary, body memakai gray-800 netral. */
	--color-heading:      var(--color-primary);
	--color-body:         #1f1f1f;

	--color-black:        var(--color-primary);
	--color-white:        #ffffff;
	--color-gray-50:      #fafafa;
	--color-gray-100:     #f4f4f4;
	--color-gray-200:     #e8e8e8;
	--color-gray-300:     #d4d4d4;
	--color-gray-400:     #a0a0a0;
	--color-gray-600:     #6b6b6b;
	--color-gray-700:     #404040;
	--color-accent:       #c9a96e;   /* warm gold — hanya untuk valentine */
	--color-discount:     #e63946;   /* badge diskon */

	--font-sans:          'Inter', system-ui, -apple-system, sans-serif;
	/* Font heading & body — diatur terpisah dari panel admin.
	   Heading default = font sans yang sama, tapi variabel TERPISAH sehingga
	   memilih font heading tidak ikut mengubah body (dan sebaliknya). */
	--font-heading:       var(--font-sans);
	--font-body:          var(--font-sans);
	--font-size-xs:       0.6875rem; /* 11px */
	--font-size-sm:       0.8125rem; /* 13px */
	--font-size-base:     0.9375rem; /* 15px */
	--font-size-lg:       1.0625rem; /* 17px */
	--font-size-xl:       1.25rem;
	--font-size-2xl:      1.5rem;

	--radius-sm:          4px;
	--radius-md:          8px;
	--radius-lg:          14px;

	--transition-fast:    150ms ease;
	--transition-base:    250ms ease;

	--header-height:      64px;
	--page-max-width:     1280px;
	--page-padding:       clamp(1rem, 4vw, 2.5rem);
}

/* ── 2. Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family:      var(--font-sans);
	font-size:        var(--font-size-base);
	line-height:      1.6;
	color:            var(--color-black);
	background-color: var(--color-on-primary, var(--color-white));
	-webkit-font-smoothing: antialiased;
}

img, video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

/* ── 3. Google Font ───────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* ── 3.5 Site Preloader ───────────────────────────────────────────── */
.site-preloader {
	position:         fixed;
	inset:            0;
	z-index:          99999;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	background-color: var(--color-on-primary, var(--color-white));
	opacity:          1;
	visibility:       visible;
	transform:        scale(1);
	transition:       opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
	                  transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
	                  visibility 500ms;
	will-change:      opacity, transform;
}

.site-preloader.is-hidden {
	opacity:        0;
	visibility:     hidden;
	transform:      scale(1.03);
	pointer-events: none;
}

.site-preloader__content {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	text-align:      center;
	padding:         20px;
	user-select:     none;
}

.site-preloader__icon-wrap {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           56px;
	height:          56px;
	color:           var(--color-black);
	margin-bottom:   18px;
}

.site-preloader__flower {
	width:      48px;
	height:     48px;
	overflow:   visible;
}

.preloader-bloom {
	transform-origin: 24px 24px;
	animation:        preloaderBloom 2.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes preloaderBloom {
	0% {
		transform: rotate(0deg) scale(0.88);
		opacity:   0.8;
	}
	50% {
		transform: rotate(180deg) scale(1.06);
		opacity:   1;
	}
	100% {
		transform: rotate(360deg) scale(0.88);
		opacity:   0.8;
	}
}

.site-preloader__brand {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            4px;
}

.site-preloader__title {
	font-family:    var(--font-sans);
	font-size:      15px;
	font-weight:    600;
	color:          var(--color-black);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	animation:      preloaderTitle 2.4s ease-in-out infinite alternate;
}

@keyframes preloaderTitle {
	0% {
		letter-spacing: 0.2em;
		opacity:        0.85;
	}
	100% {
		letter-spacing: 0.26em;
		opacity:        1;
	}
}

.site-preloader__subtitle {
	font-family:    var(--font-sans);
	font-size:      10px;
	font-weight:    500;
	color:          var(--color-gray-400);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.site-preloader__bar {
	width:            56px;
	height:           2px;
	background-color: var(--color-gray-200);
	border-radius:    10px;
	overflow:         hidden;
	margin-top:       22px;
	position:         relative;
}

.site-preloader__bar-fill {
	position:         absolute;
	top:              0;
	left:             0;
	height:           100%;
	width:            50%;
	background-color: var(--color-black);
	border-radius:    10px;
	animation:        preloaderBar 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes preloaderBar {
	0% {
		left:  -50%;
		width: 30%;
	}
	50% {
		width: 60%;
	}
	100% {
		left:  100%;
		width: 30%;
	}
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.preloader-bloom,
	.site-preloader__title,
	.site-preloader__bar-fill,
	.t2-preloader__ring--outer,
	.t2-preloader__ring--inner,
	.t2-preloader__icon,
	.t2-preloader__bar-fill {
		animation: none !important;
	}
	.site-preloader {
		transition: opacity 200ms ease;
	}
}

.site-preloader--t2 {
	background-color: #faf9f6;
}

/* ── 4. Site Header ───────────────────────────────────────────────── */
.site-header {
	position:         sticky;
	top:              0;
	z-index:          100;
	background-color: var(--color-on-primary, var(--color-white));
	border-bottom:    1px solid var(--color-gray-200);
	height:           var(--header-height);
}

.site-header__inner {
	max-width:       var(--page-max-width);
	margin:          0 auto;
	padding:         0 var(--page-padding);
	height:          100%;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}

.site-logo {
	display:         inline-flex;
	align-items:     center;
	text-decoration: none;
	color:           var(--color-black);
	transition:      opacity var(--transition-fast);
}

.site-logo:hover {
	opacity: 0.8;
}

.site-logo--text {
	display:        inline-flex;
	flex-direction: column;
	line-height:    1.15;
}

.site-logo__title {
	font-size:      var(--font-size-xl);
	font-weight:    600;
	letter-spacing: -0.04em;
	color:          var(--color-black);
	text-transform: uppercase;
}

.site-logo__tagline {
	font-size:      10px;
	font-weight:    500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color:          var(--color-gray-500);
	margin-top:     3px;
}

.site-logo--image {
	display:     inline-flex;
	align-items: center;
	line-height: 0;
}

.site-logo__img {
	display:    block;
	max-width:  100%;
	object-fit: contain;
	height:     auto;
}

.site-preloader__logo-img {
	max-height: 44px;
	width:      auto;
	object-fit: contain;
	display:    block;
	animation:  preloaderTitle 2.4s ease-in-out infinite alternate;
}

/* Desktop Primary Navigation */
.site-nav {
	display:     flex;
	align-items: center;
}

.site-nav__list {
	display:         flex;
	align-items:     center;
	gap:             30px;
	list-style:      none;
	margin:          0;
	padding:         0;
}

.site-nav__list > li {
	position: relative;
}

.site-nav__list > li > a {
	display:          inline-flex;
	align-items:      center;
	gap:              6px;
	padding:          8px 0;
	font-size:        var(--font-size-sm);
	font-weight:      500;
	color:            var(--color-gray-600);
	text-decoration:  none;
	letter-spacing:   -0.01em;
	transition:       color var(--transition-fast);
	position:         relative;
}

.site-nav__list > li > a::after {
	content:          '';
	position:         absolute;
	bottom:           0;
	left:             0;
	width:            0;
	height:           2px;
	background-color: var(--color-black);
	transition:       width var(--transition-fast);
}

.site-nav__list > li > a:hover {
	color: var(--color-black);
}

.site-nav__list > li > a:hover::after,
.site-nav__list > li.current-menu-item > a::after,
.site-nav__list > li.current_page_item > a::after {
	width: 100%;
}

.site-nav__list > li.current-menu-item > a,
.site-nav__list > li.current_page_item > a {
	color:       var(--color-black);
	font-weight: 600;
}

/* Dropdown Sub-menu on Desktop */
.site-nav__list .sub-menu {
	position:         absolute;
	top:              calc(100% + 4px);
	left:             0;
	min-width:        190px;
	background-color: var(--color-on-primary, var(--color-white));
	border:           1px solid var(--color-gray-200);
	border-radius:    var(--radius-sm);
	box-shadow:       0 8px 24px rgba(0, 0, 0, 0.08);
	padding:          8px 0;
	list-style:       none;
	margin:           0;
	opacity:          0;
	visibility:       hidden;
	transform:        translateY(6px);
	transition:       opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index:          105;
}

.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu {
	opacity:    1;
	visibility: visible;
	transform:  translateY(0);
}

.site-nav__list .sub-menu li a {
	display:         block;
	padding:         8px 18px;
	font-size:       var(--font-size-xs);
	font-weight:     500;
	color:           var(--color-gray-700);
	text-decoration: none;
	transition:      background-color 0.15s, color 0.15s;
}

.site-nav__list .sub-menu li a:hover {
	background-color: var(--color-gray-50);
	color:            var(--color-black);
}

/* Header Right Actions */
.site-header__actions {
	display:     flex;
	align-items: center;
	gap:         10px;
}

/* Menu toggle button (Kontak & Lokasi) */
.site-header__menu-btn {
	display:          inline-flex;
	align-items:      center;
	gap:              8px;
	padding:          7px 15px;
	border:           1.5px solid var(--color-gray-200);
	border-radius:    100px;
	background-color: var(--color-on-primary, var(--color-white));
	color:            var(--color-black);
	font-family:      inherit;
	font-size:        var(--font-size-sm);
	font-weight:      500;
	cursor:           pointer;
	transition:       border-color var(--transition-fast),
	                  background-color var(--transition-fast),
	                  transform var(--transition-fast),
	                  box-shadow var(--transition-fast);
}

.site-header__menu-btn:hover {
	border-color:     var(--color-black);
	background-color: var(--color-gray-50);
	transform:        translateY(-1px);
	box-shadow:       0 2px 8px rgba(0, 0, 0, 0.06);
}

.site-header__menu-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

.menu-btn__icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	color:           var(--color-black);
}

/* Hamburger Navigation Toggle Button */
.site-header__nav-toggle {
	display:          none;
	align-items:      center;
	justify-content:  center;
	width:            38px;
	height:           38px;
	border-radius:    50%;
	border:           1.5px solid var(--color-gray-200);
	background-color: var(--color-on-primary, var(--color-white));
	cursor:           pointer;
	padding:          0;
	transition:       border-color var(--transition-fast), background-color var(--transition-fast);
}

.site-header__nav-toggle:hover {
	border-color:     var(--color-black);
	background-color: var(--color-gray-50);
}

.nav-toggle__lines {
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	width:           17px;
	height:          13px;
}

.nav-toggle__line {
	display:          block;
	width:            100%;
	height:           1.75px;
	background-color: var(--color-black);
	border-radius:    2px;
	transition:       transform 0.22s ease, opacity 0.22s ease;
}

.site-header__nav-toggle.is-active .nav-toggle__line:nth-child(1) {
	transform: translateY(5.5px) rotate(45deg);
}

.site-header__nav-toggle.is-active .nav-toggle__line:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.site-header__nav-toggle.is-active .nav-toggle__line:nth-child(3) {
	transform: translateY(-5.5px) rotate(-45deg);
}

/* ── Mobile Navigation Drawer ──────────────────────────────────────── */
body.mobile-nav-open {
	overflow: hidden;
}

.site-mobile-nav {
	position:       fixed;
	inset:          0;
	z-index:        150;
	visibility:     hidden;
	pointer-events: none;
	transition:     visibility 0.3s ease;
}

.site-mobile-nav.is-open {
	visibility:     visible;
	pointer-events: auto;
}

.site-mobile-nav__backdrop {
	position:                 absolute;
	inset:                    0;
	background-color:         rgba(0, 0, 0, 0.45);
	backdrop-filter:          blur(4px);
	-webkit-backdrop-filter:  blur(4px);
	opacity:                  0;
	transition:               opacity 0.3s ease;
}

.site-mobile-nav.is-open .site-mobile-nav__backdrop {
	opacity: 1;
}

.site-mobile-nav__panel {
	position:        absolute;
	top:             0;
	left:            0;
	bottom:          0;
	width:           85%;
	max-width:       320px;
	background:      var(--color-white);
	box-shadow:      4px 0 24px rgba(0, 0, 0, 0.15);
	display:         flex;
	flex-direction:  column;
	transform:       translateX(-100%);
	transition:      transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index:         2;
}

.site-mobile-nav.is-open .site-mobile-nav__panel {
	transform: translateX(0);
}

.site-mobile-nav__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         18px 20px;
	border-bottom:   1px solid var(--color-gray-200);
}

.site-mobile-nav__close {
	width:            36px;
	height:           36px;
	border-radius:    50%;
	border:           1px solid var(--color-gray-200);
	background:       transparent;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	cursor:           pointer;
	color:            var(--color-black);
	transition:       background-color var(--transition-fast);
}

.site-mobile-nav__close:hover {
	background-color: var(--color-gray-100);
}

.site-mobile-nav__body {
	flex:       1;
	overflow-y: auto;
	padding:    12px 20px;
}

.mobile-nav__list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
}

.mobile-nav__list > li {
	border-bottom: 1px solid var(--color-gray-100);
	position:      relative;
}

.mobile-nav__list > li > a {
	display:         block;
	padding:         14px 0;
	font-size:       1rem;
	font-weight:     500;
	color:           var(--color-black);
	text-decoration: none;
	transition:      color var(--transition-fast);
}

.mobile-nav__list > li.current-menu-item > a,
.mobile-nav__list > li.current_page_item > a {
	color:       var(--color-primary);
	font-weight: 700;
}

/* Mobile Submenu Accordion */
.mobile-nav__list .menu-item-has-children {
	display:   flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.mobile-nav__list .menu-item-has-children > a {
	flex: 1;
}

.mobile-sub-toggle {
	width:           34px;
	height:          34px;
	border:          none;
	background:      transparent;
	display:         flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	color:           var(--color-gray-600);
	transition:      transform 0.2s ease;
}

.mobile-sub-toggle.is-expanded {
	transform: rotate(180deg);
}

.mobile-nav__list .sub-menu {
	width:      100%;
	list-style: none;
	margin:     0;
	padding:    0 0 10px 16px;
	display:    none;
}

.mobile-nav__list .sub-open > .sub-menu {
	display: block;
}

.mobile-nav__list .sub-menu li a {
	display:         block;
	padding:         8px 0;
	font-size:       var(--font-size-sm);
	color:           var(--color-gray-700);
	text-decoration: none;
}

.site-mobile-nav__footer {
	padding:       16px 20px;
	border-top:    1px solid var(--color-gray-200);
	background:    var(--color-gray-50);
}

.mobile-nav-contact-btn {
	width:            100%;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	gap:              8px;
	padding:          12px 16px;
	background-color: var(--color-on-primary, var(--color-white));
	border:           1.5px solid var(--color-gray-200);
	border-radius:    100px;
	font-family:      inherit;
	font-size:        var(--font-size-sm);
	font-weight:      600;
	color:            var(--color-black);
	cursor:           pointer;
	transition:       border-color var(--transition-fast), background-color var(--transition-fast);
}

.mobile-nav-contact-btn:hover {
	border-color:     var(--color-black);
	background-color: var(--color-gray-50);
}

/* Responsiveness for Navigation */
@media (max-width: 992px) {
	.site-nav {
		display: none;
	}

	.site-header__nav-toggle {
		display: inline-flex;
	}
}

@media (max-width: 640px) {
	.site-header__menu-btn .menu-btn__label {
		display: none;
	}

	.site-header__menu-btn {
		padding: 8px;
		border-radius: 50%;
		width: 38px;
		height: 38px;
		justify-content: center;
	}
}

/* ── 5. Catalog Page Layout ───────────────────────────────────────── */
.catalog-page {
	min-height: calc(100dvh - var(--header-height));
}

/* ── 5. Catalog Page & 2-Column Layout ─────────────────────────────── */
.catalog-page {
	min-height: calc(100dvh - var(--header-height));
	background-color: var(--color-background);
}

.catalog-container {
	max-width: var(--page-max-width);
	margin:    0 auto;
	padding:   clamp(1.25rem, 3vw, 2.5rem) var(--page-padding);
}

.catalog-layout {
	display:        flex;
	flex-direction: column;
	gap:            24px;
}

@media (min-width: 1024px) {
	.catalog-layout {
		display:               grid;
		grid-template-columns: minmax(280px, 320px) 1fr;
		gap:                   36px;
		align-items:           start;
	}
}

/* ── Sticky Left Sidebar (Desktop >= 1024px) ───────────────────────── */
.catalog-sidebar {
	display: none;
}

@media (min-width: 1024px) {
	.catalog-sidebar {
		display:       block;
		position:      sticky;
		top:           90px;
		max-height:    calc(100vh - 110px);
		overflow-y:    auto;
		overflow-x:    hidden;
		background:    var(--color-white);
		border:        1px solid var(--color-gray-200);
		border-radius: var(--radius-xl);
		padding:       22px;
		box-shadow:    0 4px 20px rgba(0, 0, 0, 0.03);
	}

	.catalog-sidebar::-webkit-scrollbar {
		width: 5px;
	}
	.catalog-sidebar::-webkit-scrollbar-track {
		background: transparent;
	}
	.catalog-sidebar::-webkit-scrollbar-thumb {
		background: var(--color-gray-300);
		border-radius: 4px;
	}
	.catalog-sidebar::-webkit-scrollbar-thumb:hover {
		background: var(--color-gray-400);
	}
}

.catalog-sidebar__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding-bottom:  14px;
	border-bottom:   1px solid var(--color-gray-100);
	margin-bottom:   18px;
}

.catalog-sidebar__title {
	display:     inline-flex;
	align-items: center;
	gap:         8px;
	font-size:   15px;
	font-weight: 700;
	color:       var(--color-black);
	margin:      0;
}

.catalog-sidebar__title svg {
	color: var(--color-gray-500);
}

.catalog-sidebar__count {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	min-width:        18px;
	height:           18px;
	padding:          0 5px;
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	border-radius:    10px;
	font-size:        10px;
	font-weight:      700;
}

.catalog-sidebar__reset {
	font-size:       var(--font-size-xs);
	color:           var(--color-gray-500);
	text-decoration: underline;
	transition:      color var(--transition-fast);
}

.catalog-sidebar__reset:hover {
	color: #d63638;
}

/* Sidebar Search Box */
.sidebar-search-wrap {
	margin-bottom: 18px;
}

.sidebar-search-form {
	margin: 0;
}

.sidebar-search-box {
	position:         relative;
	display:          flex;
	align-items:      center;
	height:           40px;
	padding:          0 10px 0 12px;
	background-color: var(--color-gray-50);
	border:           1.5px solid var(--color-gray-200);
	border-radius:    var(--radius-md);
	transition:       all var(--transition-fast);
}

.sidebar-search-box:focus-within {
	border-color:     var(--color-black);
	background-color: var(--color-on-primary, var(--color-white));
	box-shadow:       0 2px 8px rgba(0, 0, 0, 0.05);
}

.sidebar-search-box.is-active {
	border-color: var(--color-black);
}

.sidebar-search-icon {
	color:        var(--color-gray-400);
	margin-right: 8px;
	flex-shrink:  0;
}

.sidebar-search-box:focus-within .sidebar-search-icon {
	color: var(--color-black);
}

.sidebar-search-input {
	flex:        1;
	border:      none;
	background:  transparent;
	font-family: inherit;
	font-size:   13px;
	color:       var(--color-black);
	outline:     none;
	width:       100%;
}

.sidebar-search-clear {
	color:           var(--color-gray-400);
	font-size:       16px;
	line-height:     1;
	text-decoration: none;
	padding:         2px;
	cursor:          pointer;
	transition:      color var(--transition-fast);
}

.sidebar-search-clear:hover {
	color: var(--color-black);
}

/* Sidebar Groups */
.sidebar-groups {
	display:        flex;
	flex-direction: column;
	gap:            18px;
}

.sidebar-group {
	border-top:  1px solid var(--color-gray-100);
	padding-top: 14px;
}

.sidebar-group__title {
	font-size:      12px;
	font-weight:    700;
	color:          var(--color-gray-900);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin:         0 0 10px 0;
}

.sidebar-group__list {
	display:        flex;
	flex-direction: column;
	gap:            3px;
}

.sidebar-link {
	display:         flex;
	align-items:     center;
	gap:             9px;
	padding:         6px 9px;
	border-radius:   var(--radius-sm);
	color:           var(--color-gray-700);
	font-size:       13px;
	text-decoration: none;
	transition:      all var(--transition-fast);
}

.sidebar-link:hover {
	background-color: var(--color-gray-100);
	color:            var(--color-black);
}

.sidebar-link.is-active {
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	font-weight:      600;
}

.sidebar-link__radio {
	width:            13px;
	height:           13px;
	border-radius:    50%;
	border:           1.5px solid var(--color-gray-400);
	background-color: var(--color-on-primary, var(--color-white));
	flex-shrink:      0;
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	transition:       all var(--transition-fast);
}

.sidebar-link.is-active .sidebar-link__radio {
	border-color: var(--color-on-primary, var(--color-white));
	background-color: var(--color-on-primary, var(--color-white));
	box-shadow:       inset 0 0 0 3px var(--color-black);
}

.sidebar-link__label {
	flex: 1;
}

.sidebar-link__count {
	font-size:        11px;
	color:            var(--color-gray-400);
	background-color: var(--color-gray-100);
	padding:          1px 6px;
	border-radius:    10px;
}

.sidebar-link.is-active .sidebar-link__count {
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--color-on-primary, var(--color-white));
}

/* Sidebar Size Pills */
.sidebar-size-grid {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px;
}

.sidebar-size-pill {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	min-width:        40px;
	height:           32px;
	padding:          0 10px;
	border-radius:    var(--radius-sm);
	background-color: var(--color-on-primary, var(--color-white));
	border:           1px solid var(--color-gray-200);
	color:            var(--color-gray-700);
	font-size:        12px;
	font-weight:      500;
	text-decoration:  none;
	transition:       all var(--transition-fast);
}

.sidebar-size-pill:hover {
	border-color: var(--color-black);
	color:        var(--color-black);
}

.sidebar-size-pill.is-active {
	background-color: var(--color-black);
	border-color:     var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	font-weight:      600;
}

/* Sidebar Price Form */
.sidebar-price-form {
	margin: 0;
}

.sidebar-price-boxes {
	margin-bottom: 12px;
}

.sidebar-presets {
	display:       flex;
	flex-wrap:     wrap;
	gap:           5px;
	margin-top:    12px;
	margin-bottom: 12px;
}

.sidebar-preset-pill {
	font-size:        11px;
	padding:          3px 8px;
	border-radius:    100px;
	background-color: var(--color-gray-100);
	border:           1px solid var(--color-gray-200);
	color:            var(--color-gray-700);
	text-decoration:  none;
	transition:       all var(--transition-fast);
}

.sidebar-preset-pill:hover {
	border-color: var(--color-black);
	color:        var(--color-black);
}

.sidebar-preset-pill.is-selected {
	background-color: var(--color-black);
	border-color:     var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	font-weight:      600;
}

.sidebar-price-submit {
	width:            100%;
	height:           34px;
	border-radius:    var(--radius-md);
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	border:           none;
	font-family:      inherit;
	font-size:        12px;
	font-weight:      600;
	cursor:           pointer;
	transition:       background-color var(--transition-fast), transform var(--transition-fast);
}

.sidebar-price-submit:hover {
	background-color: var(--color-primary-hover);
	transform:        translateY(-1px);
}

/* ── Right Column: Catalog Main Area ───────────────────────────────── */
.catalog-main {
	min-width: 0;
}

.catalog-topbar {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             14px;
	padding-bottom:  16px;
	border-bottom:   1px solid var(--color-gray-200);
	margin-bottom:   18px;
}

/* ── Mobile Search Bar (hidden on desktop, visible on mobile) ────── */
.catalog-mobile-search {
	display: none; /* Hidden on desktop; shown via media query below */
	width:   100%;
}

.catalog-mobile-search__form {
	margin: 0;
	width:  100%;
}

.catalog-mobile-search__box {
	position:         relative;
	display:          flex;
	align-items:      center;
	height:           44px;
	padding:          0 10px 0 12px;
	background-color: var(--color-gray-50);
	border:           1.5px solid var(--color-gray-200);
	border-radius:    var(--radius-md);
	transition:       all var(--transition-fast);
	gap:              6px;
}

.catalog-mobile-search__box:focus-within,
.catalog-mobile-search__box.is-active {
	border-color:     var(--color-black);
	background-color: var(--color-on-primary, var(--color-white));
	box-shadow:       0 2px 8px rgba(0, 0, 0, 0.06);
}

.catalog-mobile-search__icon {
	color:       var(--color-gray-400);
	flex-shrink: 0;
	display:     flex;
	align-items: center;
}

.catalog-mobile-search__box:focus-within .catalog-mobile-search__icon {
	color: var(--color-black);
}

.catalog-mobile-search__input {
	flex:        1;
	border:      none;
	background:  transparent;
	font-family: inherit;
	font-size:   14px;
	color:       var(--color-black);
	outline:     none;
	width:       100%;
	min-width:   0;
}

.catalog-mobile-search__clear {
	color:           var(--color-gray-400);
	font-size:       18px;
	line-height:     1;
	text-decoration: none;
	padding:         2px 4px;
	cursor:          pointer;
	flex-shrink:     0;
	transition:      color var(--transition-fast);
}

.catalog-mobile-search__clear:hover {
	color: var(--color-black);
}

.catalog-mobile-search__btn {
	flex-shrink:      0;
	height:           32px;
	padding:          0 14px;
	background-color: var(--color-black);
	color: var(--color-on-primary, #fff);
	border:           none;
	border-radius:    var(--radius-sm);
	font-size:        13px;
	font-weight:      600;
	font-family:      inherit;
	cursor:           pointer;
	transition:       background-color var(--transition-fast);
	white-space:      nowrap;
}

.catalog-mobile-search__btn:hover {
	background-color: #333;
}


.catalog-topbar__left {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}

.catalog-topbar__count {
	font-size:   15px;
	color:       var(--color-gray-600);
	margin:      0;
	line-height: 1.4;
}

.catalog-topbar__chips {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         6px;
}

.catalog-topbar__right {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-left: auto;
}

/* Instagram Quick Prompt — baris ajakan ringkas di antara topbar & grid */
.catalog-instagram-quick {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       9px 14px;
	margin-bottom: 16px;
	background:    var(--color-gray-50, #faf9f6);
	border:        1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	font-size:     var(--font-size-xs);
	line-height:   1.5;
	color:         var(--color-gray-600);
}

.catalog-instagram-quick svg {
	flex-shrink: 0;
	color:       var(--color-gray-400);
	transition:  color var(--transition-fast);
}

.catalog-instagram-quick span {
	min-width: 0;
}

.catalog-instagram-quick a {
	color:           var(--color-gray-700);
	font-weight:     500;
	text-decoration: none;
	transition:      color var(--transition-fast);
}

.catalog-instagram-quick a strong {
	font-weight: 700;
}

.catalog-instagram-quick a:hover {
	color:           var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.catalog-instagram-quick:hover svg {
	color: var(--color-primary);
}

@media (max-width: 600px) {
	.catalog-instagram-quick {
		align-items: flex-start;
		line-height: 1.6;
	}
}

.catalog-instagram-notice {
	display:          flex;
	align-items:      center;
	gap:              8px;
	padding:          10px 14px;
	background-color: #fdf2f8;
	border:           1px solid #fbcfe8;
	border-radius:    var(--radius-md);
	font-size:        var(--font-size-xs);
	color:            #9d174d;
	margin-bottom:    20px;
}

.catalog-instagram-notice svg {
	color:       #db2777;
	flex-shrink: 0;
}

.catalog-instagram-notice a {
	color:           #be185d;
	text-decoration: none;
	transition:      color var(--transition-fast);
}

.catalog-instagram-notice a:hover {
	text-decoration: underline;
}

/* ── 6. Filter Bar & Dropdown Menus ───────────────────────────────── */
.filter-bar {
	position:         relative;
	z-index:          90;
	background-color: var(--color-on-primary, var(--color-white));
	border-bottom:    1px solid var(--color-gray-200);
}

.filter-bar__inner {
	max-width:       var(--page-max-width);
	margin:          0 auto;
	padding:         10px var(--page-padding);
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             10px;
}

.filter-bar__group {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         8px;
}

.filter-bar__group--secondary {
	margin-left: auto;
}

/* ── Filter Dropdown Component ─────────────────────────────────────── */
.filter-dropdown {
	position:  relative;
	display:   inline-block;
	max-width: 100%;
}

.filter-dropdown.is-open {
	z-index: 96;
}

.filter-dropdown__trigger {
	display:          inline-flex;
	align-items:      center;
	gap:              7px;
	height:           38px;
	padding:          0 14px;
	background-color: var(--color-on-primary, var(--color-white));
	border:           1.5px solid var(--color-gray-200);
	border-radius:    100px;
	font-family:      inherit;
	font-size:        var(--font-size-sm);
	color:            var(--color-gray-700);
	cursor:           pointer;
	outline:          none;
	white-space:      nowrap;
	user-select:      none;
	max-width:        100%;
	box-sizing:       border-box;
	transition:       border-color var(--transition-fast),
	                  color var(--transition-fast),
	                  background-color var(--transition-fast),
	                  box-shadow var(--transition-fast);
}

.filter-dropdown__trigger:hover {
	border-color: var(--color-black);
	color:        var(--color-black);
}

.filter-dropdown__trigger:focus-visible {
	border-color: var(--color-black);
	box-shadow:   0 0 0 2px rgba(0, 0, 0, 0.08);
}

/* Active state (when a filter is actively chosen) */
.filter-dropdown__trigger.is-active {
	border-color:     var(--color-black);
	background-color: var(--color-gray-50);
	color:            var(--color-black);
	font-weight:      500;
}

.filter-dropdown.is-open .filter-dropdown__trigger {
	border-color: var(--color-black);
	box-shadow:   0 0 0 2px rgba(0, 0, 0, 0.06);
}

.filter-dropdown__icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	color:           var(--color-gray-400);
	flex-shrink:     0;
	transition:      color var(--transition-fast);
}

.filter-dropdown__trigger:hover .filter-dropdown__icon,
.filter-dropdown__trigger.is-active .filter-dropdown__icon {
	color: var(--color-black);
}

.filter-dropdown__prefix {
	font-size:      11px;
	font-weight:    600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color:          var(--color-gray-400);
	flex-shrink:    0;
}

.filter-dropdown__trigger.is-active .filter-dropdown__prefix {
	color: var(--color-gray-600);
}

.filter-dropdown__current {
	font-weight:   500;
	color:         var(--color-black);
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
	min-width:     0;
}

.filter-dropdown__clear {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	width:            18px;
	height:           18px;
	margin-left:      2px;
	border-radius:    50%;
	background-color: var(--color-gray-200);
	color:            var(--color-gray-700);
	text-decoration:  none;
	flex-shrink:      0;
	transition:       background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.filter-dropdown__clear:hover {
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	transform:        scale(1.1);
}

.filter-dropdown__arrow {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	margin-left:     2px;
	color:           var(--color-gray-400);
	flex-shrink:     0;
	transition:      transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
	                 color var(--transition-fast);
}

.filter-dropdown__trigger:hover .filter-dropdown__arrow,
.filter-dropdown__trigger.is-active .filter-dropdown__arrow {
	color: var(--color-black);
}

.filter-dropdown.is-open .filter-dropdown__arrow {
	transform: rotate(180deg);
	color:     var(--color-black);
}

/* ── Panel / Floating Menu ─────────────────────────────────────────── */
.filter-dropdown__panel {
	position:         absolute;
	top:              calc(100% + 8px);
	left:             0;
	min-width:        230px;
	max-width:        340px;
	background-color: var(--color-on-primary, var(--color-white));
	border:           1px solid var(--color-gray-200);
	border-radius:    14px;
	box-shadow:       0 16px 36px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
	padding:          8px 6px;
	visibility:       hidden;
	opacity:          0;
	transform:        translateY(-6px) scale(0.98);
	transition:       opacity 180ms ease,
	                  transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
	                  visibility 180ms;
	pointer-events:   none;
	z-index:          99;
}

.filter-dropdown--right .filter-dropdown__panel {
	left:  auto;
	right: 0;
}

.filter-dropdown.is-open .filter-dropdown__panel {
	visibility:     visible;
	opacity:        1;
	transform:      translateY(0) scale(1);
	pointer-events: auto;
}

.filter-dropdown__panel-title {
	padding:        6px 12px 8px;
	font-size:      11px;
	font-weight:    700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--color-gray-400);
	border-bottom:  1px solid var(--color-gray-100);
	margin-bottom:  4px;
}

.filter-dropdown__list {
	max-height: 280px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color-gray-300) transparent;
}

.filter-dropdown__item {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             10px;
	padding:         9px 12px;
	border-radius:   8px;
	font-size:       var(--font-size-sm);
	color:           var(--color-gray-700);
	text-decoration: none;
	transition:      background-color var(--transition-fast), color var(--transition-fast);
}

.filter-dropdown__item:hover {
	background-color: var(--color-gray-100);
	color:            var(--color-black);
}

.filter-dropdown__item.is-selected {
	background-color: var(--color-gray-100);
	color:            var(--color-black);
	font-weight:      600;
}

.filter-dropdown__item-label {
	flex: 1;
}

.filter-dropdown__item-count {
	font-size:        11px;
	font-weight:      500;
	color:            var(--color-gray-500);
	background-color: var(--color-gray-200);
	padding:          2px 6px;
	border-radius:    10px;
}

.filter-dropdown__check {
	display:     inline-flex;
	align-items: center;
	color:       var(--color-black);
	flex-shrink: 0;
}

/* ── Price Range Dropdown & Slider ─────────────────────────────────── */
.filter-dropdown__panel--price {
	min-width: 320px;
	max-width: 340px;
	padding:   16px 16px 14px;
}

.price-slider-form {
	display:        flex;
	flex-direction: column;
	width:          100%;
}

.price-dropdown__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding-bottom:  8px;
	margin-bottom:   12px;
	border-bottom:   1px solid var(--color-gray-100);
}

.price-dropdown__title {
	font-size:      11px;
	font-weight:    700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--color-gray-400);
}

.price-dropdown__reset-link {
	font-size:       11px;
	font-weight:     600;
	color:           var(--color-gray-500);
	text-decoration: none;
	transition:      color var(--transition-fast);
}

.price-dropdown__reset-link:hover {
	color: var(--color-black);
}

/* Boxed Min & Max Prices */
.price-boxes {
	display:               grid;
	grid-template-columns: 1fr auto 1fr;
	align-items:           center;
	gap:                   8px;
	margin-bottom:         14px;
}

.price-box {
	display:          flex;
	flex-direction:   column;
	gap:              2px;
	padding:          7px 10px;
	background-color: var(--color-gray-50);
	border:           1px solid var(--color-gray-200);
	border-radius:    8px;
}

.price-box__label {
	font-size:      10px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color:          var(--color-gray-400);
}

.price-box__val {
	font-size:      13px;
	font-weight:    700;
	color:          var(--color-black);
	letter-spacing: -0.01em;
	white-space:    nowrap;
}

.price-boxes__sep {
	color:       var(--color-gray-300);
	font-weight: 600;
	font-size:   14px;
}

/* Dual Range Interactive Slider */
.price-slider-widget {
	width:         100%;
	margin-bottom: 14px;
	padding:       4px 2px;
}

.price-slider-track-wrap {
	position:    relative;
	width:       100%;
	height:      24px;
	display:     flex;
	align-items: center;
}

.price-slider-track {
	position:         absolute;
	left:             0;
	right:            0;
	height:           4px;
	background-color: var(--color-gray-200);
	border-radius:    2px;
	pointer-events:   none;
}

.price-slider-highlight {
	position:         absolute;
	left:             var(--min-percent, 0%);
	width:            calc(var(--max-percent, 100%) - var(--min-percent, 0%));
	height:           4px;
	background-color: var(--color-black);
	border-radius:    2px;
	pointer-events:   none;
}

.price-slider-input {
	position:           absolute;
	left:               0;
	top:                0;
	width:              100%;
	height:             100%;
	margin:             0;
	padding:            0;
	background:         transparent;
	pointer-events:     none;
	-webkit-appearance: none;
	appearance:         none;
	z-index:            2;
}

/* WebKit Thumb */
.price-slider-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance:         none;
	pointer-events:     auto;
	width:              18px;
	height:             18px;
	border-radius:      50%;
	background-color:   var(--color-black);
	border:             2.5px solid var(--color-white);
	box-shadow:         0 2px 6px rgba(0, 0, 0, 0.25);
	cursor:             grab;
	transition:         transform var(--transition-fast), box-shadow var(--transition-fast);
}

.price-slider-input::-webkit-slider-thumb:hover {
	transform:  scale(1.2);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.price-slider-input::-webkit-slider-thumb:active {
	cursor:     grabbing;
	transform:  scale(1.25);
}

/* Firefox Thumb */
.price-slider-input::-moz-range-thumb {
	pointer-events:     auto;
	width:              18px;
	height:             18px;
	border-radius:      50%;
	background-color:   var(--color-black);
	border:             2.5px solid var(--color-white);
	box-shadow:         0 2px 6px rgba(0, 0, 0, 0.25);
	cursor:             grab;
	transition:         transform var(--transition-fast), box-shadow var(--transition-fast);
}

.price-slider-input::-moz-range-thumb:hover {
	transform: scale(1.2);
}

.price-slider-input::-moz-range-thumb:active {
	cursor: grabbing;
}

/* Quick Presets Grid */
.price-presets-wrap {
	margin-bottom: 14px;
	padding-top:   10px;
	border-top:    1px solid var(--color-gray-100);
}

.price-presets__label {
	font-size:      10px;
	font-weight:    600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color:          var(--color-gray-400);
	margin-bottom:  6px;
}

.price-presets-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   6px;
}

.price-preset-pill {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	padding:          7px 8px;
	font-size:        12px;
	font-weight:      500;
	color:            var(--color-gray-700);
	background-color: var(--color-on-primary, var(--color-white));
	border:           1px solid var(--color-gray-200);
	border-radius:    8px;
	text-decoration:  none;
	transition:       all var(--transition-fast);
	text-align:       center;
	white-space:      nowrap;
}

.price-preset-pill:hover {
	background-color: var(--color-gray-100);
	border-color:     var(--color-gray-300);
	color:            var(--color-black);
}

.price-preset-pill.is-selected {
	background-color: var(--color-black);
	border-color:     var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	font-weight:      600;
}

/* Actions */
.price-dropdown__actions {
	width: 100%;
}

.price-submit-btn {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	width:            100%;
	height:           38px;
	border-radius:    100px;
	border:           1.5px solid var(--color-black);
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	font-family:      inherit;
	font-size:        13px;
	font-weight:      600;
	cursor:           pointer;
	transition:       background-color var(--transition-fast),
	                  transform var(--transition-fast);
}

.price-submit-btn:hover {
	background-color: var(--color-primary-hover);
	border-color:     var(--color-primary-hover);
	transform:        translateY(-1px);
}

.price-submit-btn:active {
	transform: translateY(0);
}

/* ── Mobile Filter Action Bar & Active Chips ──────────────────────── */
.mobile-filter-bar {
	display: none; /* Disembunyikan di desktop */
}

.active-filter-chips {
	background-color: var(--color-on-primary, var(--color-white));
	border-bottom:    1px solid var(--color-gray-100);
}

.active-filter-chips__list {
	max-width:                 var(--page-max-width);
	margin:                    0 auto;
	padding:                   8px var(--page-padding) 10px;
	display:                   flex;
	align-items:               center;
	gap:                       8px;
	overflow-x:                auto;
	scrollbar-width:           none;
	-webkit-overflow-scrolling: touch;
}

.active-filter-chips__list::-webkit-scrollbar {
	display: none;
}

.active-chip {
	display:          inline-flex;
	align-items:      center;
	gap:              6px;
	padding:          5px 12px;
	border-radius:    100px;
	background-color: var(--color-gray-100);
	border:           1px solid var(--color-gray-200);
	color:            var(--color-black);
	font-size:        var(--font-size-xs);
	font-weight:      500;
	text-decoration:  none;
	white-space:      nowrap;
	flex-shrink:      0;
	transition:       all var(--transition-fast);
}

.active-chip svg {
	color:      var(--color-gray-400);
	transition: color var(--transition-fast);
}

.active-chip:hover {
	background-color: var(--color-black);
	border-color:     var(--color-black);
	color: var(--color-on-primary, var(--color-white));
}

.active-chip:hover svg {
	color: var(--color-on-primary, var(--color-white));
}

.active-chip--reset-all {
	background-color: transparent;
	border-color:     transparent;
	color:            var(--color-gray-500);
	text-decoration:  underline;
	padding:          5px 6px;
}

.active-chip--reset-all:hover {
	background-color: transparent;
	border-color:     transparent;
	color:            var(--color-black);
}

/* ── Filter Drawer Dialog Component ───────────────────────────────── */
body.drawer-open {
	overflow: hidden !important;
}

dialog.filter-drawer {
	border:     none;
	padding:    0;
	margin:     0;
	background: transparent;
	color:      inherit;
	position:   fixed;
	inset:      0 0 0 auto;
	width:      420px;
	max-width:  90vw;
	height:     100vh;
	max-height: 100vh;
	z-index:    1000;
	overflow:   visible;
}

dialog.filter-drawer:not([open]) {
	display: none;
}

dialog.filter-drawer::backdrop {
	background-color:        rgba(0, 0, 0, 0.45);
	backdrop-filter:         blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation:               drawerFadeIn 220ms ease;
}

@keyframes drawerFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.filter-drawer__inner {
	display:          flex;
	flex-direction:   column;
	height:           100%;
	background-color: var(--color-on-primary, var(--color-white));
	box-shadow:       -12px 0 40px rgba(0, 0, 0, 0.15);
	animation:        drawerSlideRight 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes drawerSlideRight {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

.filter-drawer__header {
	padding:          12px 20px 14px;
	border-bottom:    1px solid var(--color-gray-200);
	background-color: var(--color-on-primary, var(--color-white));
	flex-shrink:      0;
}

.filter-drawer__grab-handle {
	display: none;
}

.filter-drawer__header-row {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}

.filter-drawer__title-wrap {
	display:     flex;
	align-items: center;
	gap:         10px;
}

.filter-drawer__title {
	font-size:   var(--font-size-base);
	font-weight: 700;
	color:       var(--color-black);
	margin:      0;
}

.filter-drawer__count-badge {
	font-size:        11px;
	font-weight:      600;
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	padding:          2px 8px;
	border-radius:    100px;
}

.filter-drawer__close {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	width:            32px;
	height:           32px;
	border-radius:    50%;
	border:           none;
	background-color: var(--color-gray-100);
	color:            var(--color-gray-600);
	cursor:           pointer;
	transition:       all var(--transition-fast);
}

.filter-drawer__close:hover {
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
}

.filter-drawer__form {
	display:        flex;
	flex-direction: column;
	flex:           1;
	min-height:     0; /* Allow flex child to scroll */
}

.filter-drawer__body {
	flex:            1;
	overflow-y:      auto;
	padding:         20px;
	display:         flex;
	flex-direction:  column;
	gap:             22px;
	scrollbar-width: thin;
	scrollbar-color: var(--color-gray-300) transparent;
}

.filter-drawer__section-title {
	font-size:      11px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:          var(--color-gray-400);
	margin-bottom:  10px;
}

.drawer-chips-grid {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
}

.drawer-chip {
	position:         relative;
	display:          inline-flex;
	align-items:      center;
	gap:              6px;
	padding:          8px 14px;
	border-radius:    100px;
	border:           1.5px solid var(--color-gray-200);
	background-color: var(--color-on-primary, var(--color-white));
	color:            var(--color-gray-700);
	font-size:        var(--font-size-sm);
	font-weight:      500;
	cursor:           pointer;
	user-select:      none;
	transition:       all var(--transition-fast);
}

.drawer-chip input[type="radio"] {
	position:       absolute;
	opacity:        0;
	pointer-events: none;
	width:          0;
	height:         0;
	margin:         0;
}

.drawer-chip:hover {
	border-color: var(--color-black);
	color:        var(--color-black);
}

.drawer-chip:has(input:checked),
.drawer-chip.is-selected {
	background-color: var(--color-black);
	border-color:     var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	font-weight:      600;
}

.drawer-chip__count {
	font-size:        11px;
	padding:          1px 6px;
	border-radius:    10px;
	background-color: var(--color-gray-100);
	color:            var(--color-gray-500);
	font-weight:      500;
	transition:       all var(--transition-fast);
}

.drawer-chip:has(input:checked) .drawer-chip__count,
.drawer-chip.is-selected .drawer-chip__count {
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--color-on-primary, var(--color-white));
}

.drawer-preset-btn {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	padding:          8px 10px;
	font-size:        12px;
	font-weight:      500;
	font-family:      inherit;
	color:            var(--color-gray-700);
	background-color: var(--color-on-primary, var(--color-white));
	border:           1px solid var(--color-gray-200);
	border-radius:    8px;
	cursor:           pointer;
	transition:       all var(--transition-fast);
}

.drawer-preset-btn:hover {
	border-color:     var(--color-gray-300);
	background-color: var(--color-gray-100);
	color:            var(--color-black);
}

.drawer-preset-btn.is-selected {
	background-color: var(--color-black);
	border-color:     var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	font-weight:      600;
}

.filter-drawer__footer {
	display:          grid;
	grid-template-columns: 1fr 1.6fr;
	gap:              12px;
	padding:          14px 20px;
	border-top:       1px solid var(--color-gray-200);
	background-color: var(--color-on-primary, var(--color-white));
	flex-shrink:      0;
	box-shadow:       0 -4px 16px rgba(0, 0, 0, 0.04);
}

.drawer-footer-reset {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	height:           44px;
	border-radius:    100px;
	border:           1.5px solid var(--color-gray-200);
	background-color: var(--color-on-primary, var(--color-white));
	color:            var(--color-gray-700);
	font-size:        var(--font-size-sm);
	font-weight:      600;
	text-decoration:  none;
	transition:       all var(--transition-fast);
}

.drawer-footer-reset:hover {
	border-color: var(--color-black);
	color:        var(--color-black);
}

.drawer-footer-apply {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	height:           44px;
	border-radius:    100px;
	border:           1.5px solid var(--color-black);
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	font-size:        var(--font-size-sm);
	font-weight:      600;
	font-family:      inherit;
	cursor:           pointer;
	transition:       background-color var(--transition-fast), transform var(--transition-fast);
}

.drawer-footer-apply:hover {
	background-color: var(--color-primary-hover);
	border-color:     var(--color-primary-hover);
	transform:        translateY(-1px);
}

/* ── 7. Catalog Meta (item count) ─────────────────────────────────── */
.catalog-meta {
	background-color: var(--color-gray-50);
	border-bottom:    1px solid var(--color-gray-200);
}

.catalog-meta__inner {
	max-width:       var(--page-max-width);
	margin:          0 auto;
	padding:         10px var(--page-padding);
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
}

.catalog-count {
	font-size:   var(--font-size-sm);
	color:       var(--color-gray-600);
	font-weight: 400;
}

.catalog-reset-btn {
	display:          inline-flex;
	align-items:      center;
	gap:              6px;
	padding:          4px 12px;
	border-radius:    100px;
	border:           1px solid var(--color-gray-200);
	background-color: var(--color-on-primary, var(--color-white));
	color:            var(--color-gray-600);
	font-size:        var(--font-size-xs);
	font-weight:      500;
	text-decoration:  none;
	transition:       border-color var(--transition-fast),
	                  color var(--transition-fast),
	                  background-color var(--transition-fast);
}

.catalog-reset-btn:hover {
	border-color:     var(--color-black);
	color:            var(--color-black);
	background-color: var(--color-gray-50);
}

.catalog-reset-btn svg {
	color: var(--color-gray-400);
}

.catalog-reset-btn:hover svg {
	color: var(--color-black);
}

/* ── 8. Catalog Grid Section ─────────────────────────────────────── */
.catalog-grid-section {
	max-width: var(--page-max-width);
	margin:    0 auto;
	padding:   clamp(1.5rem, 4vw, 2.5rem) var(--page-padding);
}

/* ── Catalog Title Search Bar (Diatas Grid Items) ──────────────────── */
.catalog-search-bar {
	width:         100%;
	max-width:     580px;
	margin:        0 auto clamp(20px, 3.5vw, 32px);
}

.catalog-search-form {
	width:   100%;
	margin:  0;
	display: block;
}

.catalog-search-box {
	position:         relative;
	display:          flex;
	align-items:      center;
	height:           48px;
	padding:          4px 5px 4px 18px;
	background-color: var(--color-on-primary, var(--color-white));
	border:           1.5px solid var(--color-gray-200);
	border-radius:    100px;
	box-shadow:       0 2px 10px rgba(0, 0, 0, 0.04);
	transition:       border-color var(--transition-fast),
	                  box-shadow var(--transition-fast),
	                  background-color var(--transition-fast);
	box-sizing:       border-box;
}

.catalog-search-box:hover {
	border-color: var(--color-gray-300);
}

.catalog-search-box:focus-within {
	border-color:     var(--color-black);
	box-shadow:       0 4px 18px rgba(0, 0, 0, 0.08);
	background-color: var(--color-on-primary, var(--color-white));
}

.catalog-search-box.is-active {
	border-color:     var(--color-black);
}

.catalog-search-icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	color:           var(--color-gray-400);
	margin-right:    10px;
	flex-shrink:     0;
	transition:      color var(--transition-fast);
	pointer-events:  none;
}

.catalog-search-box:focus-within .catalog-search-icon,
.catalog-search-box.is-active .catalog-search-icon {
	color: var(--color-black);
}

.catalog-search-input {
	flex:        1;
	min-width:   0;
	height:      100%;
	border:      none;
	background:  transparent;
	font-family: inherit;
	font-size:   var(--font-size-sm);
	color:       var(--color-black);
	padding:     0;
	margin:      0;
	outline:     none;
}

.catalog-search-input::placeholder {
	color: var(--color-gray-400);
}

/* Remove default webkit search cancel & decoration */
.catalog-search-input::-webkit-search-decoration,
.catalog-search-input::-webkit-search-cancel-button,
.catalog-search-input::-webkit-search-results-button,
.catalog-search-input::-webkit-search-results-decoration {
	display: none;
}

.catalog-search-clear {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	width:            22px;
	height:           22px;
	border-radius:    50%;
	background-color: var(--color-gray-100);
	color:            var(--color-gray-500);
	text-decoration:  none;
	margin-right:     8px;
	flex-shrink:      0;
	transition:       background-color var(--transition-fast), color var(--transition-fast);
}

.catalog-search-clear:hover {
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
}

.catalog-search-btn {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	gap:              7px;
	height:           40px;
	padding:          0 22px;
	border:           none;
	border-radius:    100px;
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	font-family:      inherit;
	font-size:        var(--font-size-xs);
	font-weight:      600;
	letter-spacing:   0.02em;
	cursor:           pointer;
	flex-shrink:      0;
	outline:          none;
	transition:       background-color var(--transition-fast),
	                  transform var(--transition-fast),
	                  box-shadow var(--transition-fast);
	box-shadow:       0 2px 6px rgba(0, 0, 0, 0.12);
}

.catalog-search-btn:hover {
	background-color: var(--color-primary-hover);
	transform:        translateY(-1px);
	box-shadow:       0 4px 12px rgba(0, 0, 0, 0.18);
}

.catalog-search-btn:active {
	transform:  translateY(0);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.catalog-search-btn:focus-visible {
	box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-black);
}

.catalog-search-btn svg {
	flex-shrink: 0;
}

/* ── Catalog Search Subnote (Instagram Prompt) ───────────────────── */
.catalog-search-subnote {
	margin-top:      12px;
	text-align:      center;
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             7px;
	font-size:       var(--font-size-xs);
	color:           var(--color-gray-600);
}

.catalog-search-subnote svg {
	color:       #d6249f;
	flex-shrink: 0;
}

.catalog-search-subnote a {
	color:           #d6249f;
	text-decoration: none;
	font-weight:     600;
	transition:      color var(--transition-fast);
}

.catalog-search-subnote a:hover {
	color:           var(--color-black);
	text-decoration: underline;
}

/* Grid: auto-fill dengan min 240px per kolom */
.catalog-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap:                   clamp(1rem, 2.5vw, 1.75rem);
}

/* ── 9. Catalog Card ─────────────────────────────────────────────── */
.catalog-card {
	container-type: inline-size; /* container queries */
	border:         1px solid var(--color-gray-200);
	border-radius:  var(--radius-lg);
	overflow:       hidden;
	background:     var(--color-white);
	display:        flex;
	flex-direction: column;
	transition:     box-shadow var(--transition-base),
	                transform  var(--transition-base),
	                border-color var(--transition-base);
}

.catalog-card:hover {
	box-shadow:   0 8px 32px rgba(0,0,0,0.10);
	transform:    translateY(-3px);
	border-color: var(--color-gray-400);
}

/* Image wrapper */
.catalog-card__link {
	display: block;
}

.catalog-card__image {
	position:        relative;
	aspect-ratio:    1 / 1;
	overflow:        hidden;
	background-color: var(--color-gray-100);
}

.catalog-card__image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.catalog-card:hover .catalog-card__image img {
	transform: scale(1.04);
}

/* Placeholder jika tidak ada gambar */
.catalog-card__image-placeholder {
	width:           100%;
	height:          100%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           var(--color-gray-400);
}

/* Discount badge */
.catalog-card__badge {
	position:         absolute;
	top:              12px;
	left:             12px;
	background-color: var(--color-discount);
	color: var(--color-on-primary, var(--color-white));
	font-size:        var(--font-size-xs);
	font-weight:      600;
	letter-spacing:   0.06em;
	padding:          3px 8px;
	border-radius:    var(--radius-sm);
	pointer-events:   none;
}

/* Card body */
.catalog-card__body {
	padding:        14px 16px 18px;
	display:        flex;
	flex-direction: column;
	gap:            4px;
	flex:           1 1 auto;
}

.catalog-card__category {
	font-size:      var(--font-size-xs);
	font-weight:    600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--color-gray-400);
}

.catalog-card__title {
	font-size:   var(--font-size-base);
	font-weight: 500;
	line-height: 1.35;
	margin-top:  2px;
}

.catalog-card__title a {
	color: var(--color-black);
}

.catalog-card__title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.catalog-card__flower-type {
	font-size:  var(--font-size-sm);
	color:      var(--color-gray-600);
	margin-top: 2px;
}

/* Pricing */
.catalog-card__pricing {
	margin-top: 10px;
	display:    flex;
	flex-wrap:  wrap;
	align-items: baseline;
	gap:        6px;
}

.catalog-card__price {
	font-size:   var(--font-size-base);
	font-weight: 600;
	color:       var(--color-black);
}

.catalog-card__price--sale {
	color: var(--color-discount);
}

.catalog-card__price--original {
	font-size:       var(--font-size-sm);
	font-weight:     400;
	color:           var(--color-gray-400);
	text-decoration: line-through;
}

.catalog-card__valentine {
	display:      flex;
	align-items:  center;
	gap:          4px;
	font-size:    var(--font-size-sm);
	color:        var(--color-accent);
	font-weight:  500;
	width:        100%; /* force baris baru */
	margin-top:   2px;
}

/* ── 10. Card Action Button (Detail Button) ────────────────────────── */

.catalog-card__actions {
	margin-top:  auto;
	padding-top: 12px;
	width:       100%;
}

.catalog-card__detail-btn {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	gap:              8px;
	width:            100%;
	height:           40px;
	padding:          0 16px;
	box-sizing:       border-box;
	border-radius:    var(--radius-md);
	background-color: var(--color-gray-50);
	border:           1px solid var(--color-gray-200);
	color:            var(--color-black);
	font-size:        var(--font-size-sm);
	font-weight:      500;
	letter-spacing:   0.01em;
	text-decoration:  none;
	white-space:      nowrap;
	cursor:           pointer;
	user-select:      none;
	transition:       background-color var(--transition-fast),
	                  border-color     var(--transition-fast),
	                  color            var(--transition-fast),
	                  transform        var(--transition-fast),
	                  box-shadow       var(--transition-fast);
}

.catalog-card__detail-btn svg {
	flex-shrink: 0;
	transition:  transform var(--transition-fast), color var(--transition-fast);
}

.catalog-card__detail-arrow {
	color:      var(--color-gray-400);
	transition: transform var(--transition-fast), color var(--transition-fast);
}

.catalog-card__detail-btn:hover {
	background-color: var(--color-black);
	border-color:     var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	transform:        translateY(-1px);
	box-shadow:       0 4px 14px rgba(10, 10, 10, 0.15);
}

.catalog-card__detail-btn:hover svg {
	color: var(--color-on-primary, var(--color-white));
}

.catalog-card__detail-btn:hover .catalog-card__detail-arrow {
	color: var(--color-on-primary, var(--color-white));
	transform: translateX(3px);
}

.catalog-card__detail-btn:active {
	transform:  translateY(0);
	box-shadow: none;
}

.catalog-card__detail-btn:focus-visible {
	outline:        2px solid var(--color-black);
	outline-offset: 2px;
}

/* ── 11. Empty State ─────────────────────────────────────────────── */
.catalog-empty {
	grid-column:     1 / -1;
	text-align:      center;
	padding:         70px 20px 90px;
	color:           var(--color-gray-600);
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
}

.catalog-empty__icon {
	width:            64px;
	height:           64px;
	border-radius:    50%;
	background-color: var(--color-gray-100);
	color:            var(--color-gray-400);
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	margin-bottom:    16px;
}

.catalog-empty__title {
	font-size:     var(--font-size-lg);
	font-weight:   600;
	color:         var(--color-black);
	margin-bottom: 8px;
}

.catalog-empty__desc {
	font-size:     var(--font-size-sm);
	color:         var(--color-gray-600);
	max-width:     440px;
	margin:        0 auto 20px;
	line-height:   1.5;
}

.catalog-empty__reset-btn {
	display:          inline-flex;
	align-items:      center;
	gap:              6px;
	height:           38px;
	padding:          0 18px;
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	border-radius:    100px;
	font-size:        var(--font-size-xs);
	font-weight:      600;
	text-decoration:  none;
	transition:       background-color var(--transition-fast);
}

.catalog-empty__reset-btn:hover {
	background-color: var(--color-primary-hover);
	color: var(--color-on-primary, var(--color-white));
}

/* Empty state IG hint */
.catalog-empty__ig-hint {
	margin-top:  16px;
	font-size:   var(--font-size-sm);
	color:       var(--color-gray-600);
	line-height: 1.5;
}

.catalog-empty__ig-hint a {
	color:           #d6249f;
	text-decoration: none;
	font-weight:     600;
	transition:      color var(--transition-fast);
}

.catalog-empty__ig-hint a:hover {
	color:           var(--color-black);
	text-decoration: underline;
}

/* ── 10b. Catalog Instagram Inspiration Banner ─────────────────────── */
.catalog-instagram-banner {
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	gap:              24px;
	margin-top:       clamp(36px, 6vw, 56px);
	padding:          clamp(22px, 3.5vw, 30px) clamp(22px, 4vw, 34px);
	background:       linear-gradient(135deg, #ffffff 0%, #fdfbf9 100%);
	border:           1.5px solid #ebd9c5;
	border-radius:    var(--radius-lg);
	box-shadow:       0 4px 20px rgba(0, 0, 0, 0.04);
	transition:       border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.catalog-instagram-banner:hover {
	border-color:     #d6249f;
	box-shadow:       0 8px 30px rgba(214, 36, 159, 0.10);
}

.catalog-instagram-banner__icon {
	width:            52px;
	height:           52px;
	border-radius:    14px;
	background:       radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	color:            #ffffff;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	flex-shrink:      0;
	box-shadow:       0 4px 14px rgba(214, 36, 159, 0.28);
}

.catalog-instagram-banner__content {
	flex:      1;
	min-width: 0;
}

.catalog-instagram-banner__tag {
	display:          inline-block;
	font-size:        0.7rem;
	font-weight:      700;
	text-transform:   uppercase;
	letter-spacing:   0.06em;
	color:            #9d2d79;
	background-color: #fcecf6;
	padding:          3px 10px;
	border-radius:    var(--radius-full);
	margin-bottom:    6px;
}

.catalog-instagram-banner__title {
	margin:         0 0 6px;
	font-size:      clamp(1.05rem, 2vw, 1.25rem);
	font-weight:    700;
	color:          var(--color-black);
	letter-spacing: -0.01em;
}

.catalog-instagram-banner__desc {
	margin:      0;
	font-size:   var(--font-size-sm);
	color:       var(--color-gray-600);
	line-height: 1.55;
}

.catalog-instagram-banner__action {
	flex-shrink: 0;
}

.catalog-instagram-banner__btn {
	display:          inline-flex;
	align-items:      center;
	gap:              8px;
	padding:          12px 22px;
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	border-radius:    var(--radius-full);
	font-size:        var(--font-size-sm);
	font-weight:      600;
	text-decoration:  none;
	white-space:      nowrap;
	box-shadow:       0 2px 10px rgba(0, 0, 0, 0.12);
	transition:       background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.catalog-instagram-banner__btn:hover {
	background:  radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 70%, #285AEB 100%);
	color:       #ffffff;
	transform:   translateY(-1px);
	box-shadow:  0 6px 18px rgba(214, 36, 159, 0.32);
}

.catalog-instagram-banner__btn svg {
	transition: transform var(--transition-fast);
}

.catalog-instagram-banner__btn:hover svg {
	transform: translate(2px, -2px);
}

@media (max-width: 1023px) {
	.catalog-sidebar {
		display: none !important;
	}

	.catalog-instagram-banner {
		flex-direction: column;
		align-items:    flex-start;
		gap:            16px;
	}

	.catalog-instagram-banner__action {
		width: 100%;
	}

	.catalog-instagram-banner__btn {
		width:           100%;
		justify-content: center;
	}
}

/* ── 11. Pagination ──────────────────────────────────────────────── */
.catalog-pagination {
	border-top: 1px solid var(--color-gray-200);
	padding:    clamp(1.5rem, 4vw, 2rem) var(--page-padding);
}

.catalog-pagination__inner {
	max-width: var(--page-max-width);
	margin:    0 auto;
}

/* WordPress paginate_links() outputs <ul class="page-numbers"> */
.page-numbers {
	list-style: none;
	display:    flex;
	flex-wrap:  wrap;
	gap:        6px;
	justify-content: center;
}

.page-numbers li {
	display: contents; /* flatten list items */
}

.page-numbers a,
.page-numbers span,
.page-numbers .current {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	min-width:        40px;
	height:           40px;
	padding:          0 12px;
	border:           1.5px solid var(--color-gray-200);
	border-radius:    var(--radius-md);
	font-size:        var(--font-size-sm);
	font-weight:      500;
	color:            var(--color-black);
	transition:       border-color var(--transition-fast),
	                  background   var(--transition-fast);
}

.page-numbers a:hover {
	border-color:     var(--color-black);
	background-color: var(--color-gray-50);
}

.page-numbers .current {
	border-color:     var(--color-black);
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
}

.page-numbers .dots {
	border: none;
	color:  var(--color-gray-400);
}

/* ── 12. Site Footer ─────────────────────────────────────────────── */
.site-footer {
	background-color: var(--color-black);
	color:            var(--color-gray-400);
	margin-top:       auto;
}

.site-footer__inner {
	max-width:  var(--page-max-width);
	margin:     0 auto;
	padding:    24px var(--page-padding);
}

.site-footer p {
	font-size: var(--font-size-sm);
}

/* ── 13. Responsive: Filter bar & dropdowns on mobile ─────────────── */
@media (max-width: 768px) {
	/* Sembunyikan filter bar desktop dropdown di mobile */
	.filter-bar__inner {
		display: none !important;
	}

	.mobile-filter-bar {
		display:         flex;
		align-items:     center;
		justify-content: space-between;
		gap:             12px;
		max-width:       var(--page-max-width);
		margin:          0 auto;
		padding:         12px var(--page-padding);
	}

	.mobile-filter-btn {
		display:          inline-flex;
		align-items:      center;
		gap:              8px;
		height:           40px;
		padding:          0 18px;
		border-radius:    100px;
		border:           1.5px solid var(--color-black);
		background-color: var(--color-black);
		color: var(--color-on-primary, var(--color-white));
		font-family:      inherit;
		font-size:        var(--font-size-sm);
		font-weight:      600;
		cursor:           pointer;
		transition:       all var(--transition-fast);
		box-shadow:       0 2px 8px rgba(0, 0, 0, 0.12);
	}

	.mobile-filter-btn:hover {
		background-color: var(--color-primary-hover);
		border-color:     var(--color-primary-hover);
	}

	.mobile-filter-badge {
		display:          inline-flex;
		align-items:      center;
		justify-content:  center;
		width:            19px;
		height:           19px;
		border-radius:    50%;
		background-color: var(--color-on-primary, var(--color-white));
		color:            var(--color-black);
		font-size:        11px;
		font-weight:      700;
	}

	.mobile-filter-quick-info {
		display:     flex;
		align-items: center;
		gap:         6px;
	}

	.mobile-filter-btn {
		flex-shrink: 0;
	}

	.mobile-sort-label {
		font-size:        12px;
		font-weight:      500;
		color:            var(--color-gray-600);
		background-color: var(--color-gray-100);
		padding:          6px 12px;
		border-radius:    100px;
		border:           1px solid var(--color-gray-200);
		max-width:        150px;
		overflow:         hidden;
		text-overflow:    ellipsis;
		white-space:      nowrap;
		display:          inline-block;
	}

	/* ── Catalog Topbar Mobile Optimization (iPhone 16 Friendly) ─────── */
	.catalog-topbar {
		display:        flex;
		flex-direction: column;
		align-items:    stretch;
		gap:            12px;
		padding-bottom: 14px;
		margin-bottom:  16px;
	}

	/* Show mobile search bar on small screens */
	.catalog-mobile-search {
		display: block;
		width:   100%;
	}

	.catalog-topbar__left {
		width: 100%;
		gap:   8px;
	}

	.catalog-topbar__count {
		font-size: 13.5px;
	}

	.catalog-topbar__chips {
		gap: 6px;
	}

	.active-chip {
		max-width: 100%;
	}

	.active-chip span {
		overflow:      hidden;
		text-overflow: ellipsis;
		white-space:   nowrap;
		min-width:     0;
	}

	.catalog-topbar__right {
		width:          100%;
		margin-left:    0;
		display:        flex;
		flex-direction: column; /* Masing-masing select terpisah, 1 row penuh per select */
		gap:            8px;
	}

	.catalog-topbar__right .filter-dropdown {
		width:     100%;
		max-width: 100%;
		display:   block;
	}

	.catalog-topbar__right .filter-dropdown.is-open {
		z-index: 105;
	}

	.catalog-topbar__right .filter-dropdown__trigger {
		width:            100%;
		height:           44px; /* Touch target standar iOS / mobile */
		padding:          0 14px;
		display:          flex;
		align-items:      center;
		justify-content:  flex-start;
		border-radius:    10px;
		background-color: var(--color-on-primary, var(--color-white));
		border:           1.5px solid var(--color-gray-200);
		font-size:        13.5px;
		box-sizing:       border-box;
		touch-action:     manipulation;
	}

	.catalog-topbar__right .filter-dropdown__icon {
		flex-shrink:  0;
		margin-right: 4px;
	}

	.catalog-topbar__right .filter-dropdown__prefix {
		flex-shrink: 0;
	}

	.catalog-topbar__right .filter-dropdown__current {
		flex:          1 1 auto;
		min-width:     0;
		text-align:    left;
		overflow:      hidden;
		text-overflow: ellipsis;
		white-space:   nowrap;
	}

	.catalog-topbar__right .filter-dropdown__arrow {
		flex-shrink: 0;
		margin-left: auto;
	}

	.catalog-topbar__right .filter-dropdown__panel {
		left:          0 !important;
		right:         0 !important;
		width:         100% !important;
		min-width:     0 !important;
		max-width:     100% !important;
		box-sizing:    border-box;
		border-radius: 12px;
		box-shadow:    0 12px 28px rgba(0, 0, 0, 0.14);
	}

	.catalog-search-bar {
		margin-bottom: 20px;
	}

	.catalog-search-box {
		height:  44px;
		padding: 3px 4px 3px 14px;
	}

	.catalog-search-input {
		font-size: 13px;
	}

	.catalog-search-btn {
		height:  36px;
		padding: 0 16px;
	}

	/* Modal Dialog di mobile menjadi Bottom Sheet elegan */
	dialog.filter-drawer {
		inset:         auto 0 0 0;
		width:         100%;
		max-width:     100%;
		height:        auto;
		max-height:    88vh;
		border-radius: 20px 20px 0 0;
		overflow:      hidden;
	}

	.filter-drawer__inner {
		height:        100%;
		max-height:    88vh;
		border-radius: 20px 20px 0 0;
		box-shadow:    0 -10px 40px rgba(0, 0, 0, 0.2);
		animation:     drawerSlideUp 280ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	@keyframes drawerSlideUp {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}

	.filter-drawer__grab-handle {
		display:          block;
		width:            38px;
		height:           4px;
		background-color: var(--color-gray-300);
		border-radius:    2px;
		margin:           2px auto 8px auto;
	}

	.filter-drawer__header {
		padding: 8px 18px 12px;
	}

	.filter-drawer__body {
		padding: 16px 18px 24px;
		gap:     20px;
	}

	.filter-drawer__footer {
		padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
	}
}

/* ── 14. Container queries pada card ─────────────────────────────── */
/* Jika card sangat lebar (misal: 1-col di mobile landscape),
   tampilkan layout horizontal */
@container (min-width: 400px) {
	.catalog-card__body {
		padding: 18px 20px 22px;
	}
	.catalog-card__title {
		font-size: var(--font-size-lg);
	}
}

/* ═══════════════════════════════════════════════════════════════════
   15. Slide-out Right Sidebar (WhatsApp, Instagram, Maps)
   ═══════════════════════════════════════════════════════════════════ */

/* Kunci scrolling pada body saat sidebar terbuka */
body.sidebar-open {
	overflow: hidden;
	touch-action: none;
}

/* Backdrop Overlay */
.site-sidebar-backdrop {
	position:                 fixed;
	inset:                    0;
	background-color:         rgba(10, 10, 10, 0.45);
	backdrop-filter:          blur(4px);
	-webkit-backdrop-filter:  blur(4px);
	z-index:                  998;
	opacity:                  0;
	visibility:               hidden;
	pointer-events:           none;
	transition:               opacity 350ms cubic-bezier(0.16, 1, 0.3, 1),
	                          visibility 350ms;
}

.site-sidebar-backdrop.is-active {
	opacity:        1;
	visibility:     visible;
	pointer-events: auto;
}

/* Right Drawer Panel */
.site-sidebar {
	position:                 fixed;
	top:                      0;
	right:                    0;
	bottom:                   0;
	width:                    min(420px, 92vw);
	height:                   100dvh;
	background-color: var(--color-on-primary, var(--color-white));
	z-index:                  999;
	box-shadow:               -8px 0 36px rgba(0, 0, 0, 0.12);
	transform:                translateX(100%);
	transition:               transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
	display:                  flex;
	flex-direction:           column;
	overflow:                 hidden;
	will-change:              transform;
}

.site-sidebar.is-open {
	transform: translateX(0);
}

/* Sidebar Header */
.site-sidebar__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         20px 24px;
	border-bottom:   1px solid var(--color-gray-200);
	background:      var(--color-white);
}

.site-sidebar__brand {
	display:        flex;
	flex-direction: column;
	gap:            2px;
}

.site-sidebar__title {
	font-size:      var(--font-size-lg);
	font-weight:    600;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color:          var(--color-black);
}

.site-sidebar__subtitle {
	font-size:   var(--font-size-xs);
	color:       var(--color-gray-400);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.site-sidebar__close-btn {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	width:            36px;
	height:           36px;
	border-radius:    50%;
	border:           1px solid var(--color-gray-200);
	background-color: var(--color-on-primary, var(--color-white));
	color:            var(--color-black);
	cursor:           pointer;
	transition:       background-color var(--transition-fast),
	                  transform var(--transition-fast),
	                  border-color var(--transition-fast);
}

.site-sidebar__close-btn:hover {
	background-color: var(--color-gray-100);
	border-color:     var(--color-gray-400);
	transform:        rotate(90deg);
}

/* Sidebar Scrollable Body */
.site-sidebar__body {
	flex:                      1;
	overflow-y:                auto;
	padding:                   22px 24px;
	display:                   flex;
	flex-direction:            column;
	gap:                       22px;
	-webkit-overflow-scrolling: touch;
}

/* Section styling */
.sidebar-section {
	display:        flex;
	flex-direction: column;
	gap:            10px;
}

.sidebar-section__label {
	display: flex;
	align-items: center;
}

.sidebar-section__tag {
	font-size:      var(--font-size-xs);
	font-weight:    600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--color-gray-400);
}

/* Contact & Social Cards */
.sidebar-card {
	display:          flex;
	align-items:      center;
	gap:              14px;
	padding:          14px 16px;
	border-radius:    var(--radius-md);
	border:           1.5px solid var(--color-gray-200);
	background-color: var(--color-on-primary, var(--color-white));
	text-decoration:  none;
	color:            var(--color-black);
	transition:       border-color var(--transition-base),
	                  transform var(--transition-base),
	                  box-shadow var(--transition-base);
}

.sidebar-card:hover {
	border-color: var(--color-black);
	transform:    translateY(-2px);
	box-shadow:   0 6px 20px rgba(0, 0, 0, 0.06);
}

/* Card Icons */
.sidebar-card__icon {
	width:           44px;
	height:          44px;
	border-radius:   var(--radius-md);
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
}

.sidebar-card__icon--wa {
	background-color: #1a8a4a;
	color:            #ffffff;
}

.sidebar-card__icon--ig {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	color:      #ffffff;
}

/* Card Content */
.sidebar-card__content {
	flex:           1;
	min-width:      0;
	display:        flex;
	flex-direction: column;
	gap:            2px;
}

.sidebar-card__status {
	display:     inline-flex;
	align-items: center;
	gap:         6px;
	margin-bottom: 2px;
}

.status-indicator {
	width:            7px;
	height:           7px;
	border-radius:    50%;
	background-color: #25D366;
	box-shadow:       0 0 0 0 rgba(37, 211, 102, 0.7);
	animation:        pulse-green 2s infinite;
}

@keyframes pulse-green {
	0% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
	}
	70% {
		box-shadow: 0 0 0 6px rgba(37, 211, 102, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
	}
}

.status-text {
	font-size:   var(--font-size-xs);
	font-weight: 500;
	color:       #128C7E;
}

.sidebar-card__meta {
	font-size:   var(--font-size-xs);
	color:       var(--color-gray-400);
	font-weight: 500;
}

.sidebar-card__title {
	font-size:     var(--font-size-base);
	font-weight:   600;
	color:         var(--color-black);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.sidebar-card__desc {
	font-size:     var(--font-size-xs);
	color:         var(--color-gray-600);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.sidebar-card__arrow {
	color:      var(--color-gray-400);
	transition: transform var(--transition-fast), color var(--transition-fast);
	flex-shrink: 0;
}

.sidebar-card:hover .sidebar-card__arrow {
	color:     var(--color-black);
	transform: translateX(3px);
}

/* Location Card & Maps View */
.sidebar-location-card {
	padding:          16px;
	border-radius:    var(--radius-md);
	border:           1.5px solid var(--color-gray-200);
	background-color: var(--color-on-primary, var(--color-white));
	display:          flex;
	flex-direction:   column;
	gap:              12px;
}

.sidebar-location__address {
	display:     flex;
	align-items: flex-start;
	gap:         10px;
	color:       var(--color-gray-600);
	font-size:   var(--font-size-sm);
	line-height: 1.5;
}

.sidebar-location__address svg {
	color:       var(--color-black);
	flex-shrink: 0;
	margin-top:  2px;
}

.sidebar-location__name {
	display:        block;
	font-size:      var(--font-size-base);
	font-weight:    600;
	color:          var(--color-black);
	margin-bottom:  2px;
}

/* Schedule / Hari & Jam Buka Card */
.sidebar-schedule {
	padding:          12px 14px;
	border-radius:    var(--radius-sm);
	background-color: var(--color-gray-50);
	border:           1px solid var(--color-gray-200);
	display:          flex;
	flex-direction:   column;
	gap:              8px;
}

.sidebar-schedule__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding-bottom:  6px;
	border-bottom:   1px solid var(--color-gray-200);
}

.sidebar-schedule__title {
	display:        flex;
	align-items:    center;
	gap:            6px;
	font-size:      var(--font-size-xs);
	font-weight:    600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color:          var(--color-black);
}

.sidebar-schedule__title svg {
	color: var(--color-gray-600);
}

.sidebar-schedule__badge {
	font-size:        0.625rem;
	font-weight:      600;
	letter-spacing:   0.05em;
	text-transform:   uppercase;
	padding:          2px 8px;
	border-radius:    100px;
	background-color: #e6f9ed;
	color:            #128c7e;
	border:           1px solid rgba(18, 140, 126, 0.2);
}

.sidebar-schedule__list {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.sidebar-schedule__row {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	font-size:       var(--font-size-xs);
	line-height:     1.4;
	gap:             8px;
}

.schedule-day {
	color:       var(--color-gray-600);
	font-weight: 400;
}

.schedule-time {
	color:       var(--color-black);
	font-weight: 600;
	white-space: nowrap;
}

.schedule-full {
	color:       var(--color-gray-600);
	font-weight: 500;
}

.sidebar-maps {
	border-radius: var(--radius-sm);
	overflow:      hidden;
	border:        1px solid var(--color-gray-200);
	background:    var(--color-gray-100);
	line-height:   0;
}

.sidebar-maps iframe {
	display: block;
	width:   100%;
	height:  190px;
	border:  none;
}

.sidebar-maps__btn {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	gap:              8px;
	padding:          10px 14px;
	border-radius:    var(--radius-sm);
	border:           1.5px solid var(--color-black);
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	font-size:        var(--font-size-sm);
	font-weight:      500;
	text-decoration:  none;
	transition:       background-color var(--transition-fast),
	                  color var(--transition-fast),
	                  transform var(--transition-fast);
}

.sidebar-maps__btn:hover {
	background-color: #333333;
	border-color:     #333333;
	color: var(--color-on-primary, var(--color-white));
	transform:        translateY(-1px);
}

.sidebar-maps__btn:active {
	transform: translateY(0);
}

/* Operational Hours Box */
.sidebar-hours {
	display:          flex;
	align-items:      center;
	gap:              9px;
	padding:          10px 14px;
	border-radius:    var(--radius-sm);
	background-color: var(--color-gray-50);
	border:           1px solid var(--color-gray-200);
	color:            var(--color-gray-600);
	font-size:        var(--font-size-xs);
}

.sidebar-hours svg {
	color:       var(--color-gray-400);
	flex-shrink: 0;
}

/* Sidebar Footer */
.site-sidebar__footer {
	padding:       16px 24px;
	border-top:    1px solid var(--color-gray-200);
	background:    var(--color-gray-50);
	font-size:     var(--font-size-xs);
	color:         var(--color-gray-400);
	text-align:    center;
}

/* ==========================================================================
   Product Detail Page (Single Catalog)
   Design: Simple, Minimalis, & UI/UX Friendly
   ========================================================================== */

.product-detail-page {
	background-color: var(--color-on-primary, var(--color-white));
	min-height:       80vh;
}

/* Navigation & Breadcrumb Bar */
.product-breadcrumb-bar {
	border-bottom:    1px solid var(--color-gray-200);
	background-color: var(--color-on-primary, var(--color-white));
	padding:          14px 24px;
	position:         sticky;
	top:              0;
	z-index:          20;
	backdrop-filter:  blur(8px);
	background-color: rgba(255, 255, 255, 0.95);
}

.product-breadcrumb-bar__inner {
	max-width:       1200px;
	margin:          0 auto;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
}

.product-back-btn {
	display:          inline-flex;
	align-items:      center;
	gap:              8px;
	font-size:        var(--font-size-xs);
	font-weight:      600;
	letter-spacing:   0.04em;
	text-transform:   uppercase;
	color:            var(--color-gray-600);
	text-decoration:  none;
	padding:          7px 14px;
	border-radius:    var(--radius-sm);
	border:           1px solid var(--color-gray-200);
	background-color: var(--color-on-primary, var(--color-white));
	transition:       all var(--transition-fast);
}

.product-back-btn svg {
	transition: transform var(--transition-fast);
}

.product-back-btn:hover {
	color:            var(--color-black);
	border-color:     var(--color-black);
	background-color: var(--color-gray-50);
}

.product-back-btn:hover svg {
	transform: translateX(-3px);
}

.product-breadcrumbs {
	display:     inline-flex;
	align-items: center;
	gap:         8px;
	list-style:  none;
	margin:      0;
	padding:     0;
	font-size:   var(--font-size-xs);
	color:       var(--color-gray-400);
}

.product-breadcrumbs a {
	color:           var(--color-gray-600);
	text-decoration: none;
	transition:      color var(--transition-fast);
}

.product-breadcrumbs a:hover {
	color:           var(--color-black);
	text-decoration: underline;
}

.product-breadcrumbs__sep {
	color: var(--color-gray-300);
}

.product-breadcrumbs__current {
	color:         var(--color-black);
	font-weight:   600;
	max-width:     320px;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

/* Hero Section */
.product-hero-section {
	padding: 48px 24px 72px;
}

.product-hero__inner {
	max-width:             1200px;
	margin:                0 auto;
	display:               grid;
	grid-template-columns: 1fr 1.1fr;
	gap:                   60px;
	align-items:           start;
}

/* Left Column: Product Media */
.product-media {
	position: sticky;
	top:      72px;
}

.product-media__frame {
	position:         relative;
	border-radius:    var(--radius-md);
	overflow:         hidden;
	background-color: var(--color-gray-100);
	border:           1px solid var(--color-gray-200);
	aspect-ratio:     4 / 5;
	box-shadow:       0 8px 30px rgba(0, 0, 0, 0.04);
}

.product-media__img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-media__frame:hover .product-media__img {
	transform: scale(1.03);
}

.product-media__placeholder {
	width:           100%;
	height:          100%;
	min-height:      460px;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             12px;
	color:           var(--color-gray-400);
	font-size:       var(--font-size-sm);
}

.product-badge {
	position:         absolute;
	top:              16px;
	left:             16px;
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	font-size:        var(--font-size-xs);
	font-weight:      700;
	letter-spacing:   0.06em;
	padding:          6px 14px;
	border-radius:    100px;
	text-transform:   uppercase;
	z-index:          2;
	box-shadow:       0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Right Column: Product Information */
.product-info {
	display:        flex;
	flex-direction: column;
	gap:            26px;
}

.product-tags {
	display:     flex;
	flex-wrap:   wrap;
	gap:         8px;
	align-items: center;
}

.product-tag {
	display:         inline-flex;
	align-items:     center;
	padding:         5px 13px;
	border-radius:   100px;
	font-size:       var(--font-size-xs);
	font-weight:     600;
	text-decoration: none;
	text-transform:  uppercase;
	letter-spacing:  0.06em;
	transition:      all var(--transition-fast);
}

.product-tag--cat {
	background-color: var(--color-gray-100);
	color:            var(--color-black);
	border:           1px solid var(--color-gray-200);
}

.product-tag--cat:hover {
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	border-color:     var(--color-black);
}

.product-tag--flower {
	background-color: #faf6f0;
	color:            var(--color-primary);
	border:           1px solid #ebd9c5;
}

.product-tag--flower:hover {
	background-color: var(--color-primary);
	color:            #ffffff;
	border-color:     var(--color-primary);
}

.product-tag--size {
	background-color: #f1f5f9;
	color:            #334155;
	border:           1px solid #cbd5e1;
	display:          inline-flex;
	align-items:      center;
	gap:              5px;
	cursor:           pointer;
	text-decoration:  none;
	transition:       all var(--transition-fast);
}

.product-tag--size svg {
	color:      #64748b;
	transition: color var(--transition-fast);
}

.product-tag--size:hover {
	background-color: #334155;
	color:            #ffffff;
	border-color:     #334155;
}

.product-tag--size:hover svg {
	color: #ffffff;
}

.product-tag--additional {
	background-color: #fdf2f8;
	color:            #9d174d;
	border:           1px solid #fbcfe8;
	display:          inline-flex;
	align-items:      center;
	gap:              5px;
	cursor:           pointer;
	text-decoration:  none;
	transition:       all var(--transition-fast);
}

.product-tag--additional:hover {
	background-color: #9d174d;
	color:            #ffffff;
	border-color:     #9d174d;
}

.product-title {
	font-size:      clamp(1.75rem, 3vw, 2.4rem);
	font-weight:    700;
	line-height:    1.25;
	color:          var(--color-black);
	letter-spacing: -0.025em;
	margin:         0;
}

/* Pricing Block */
.product-pricing {
	display:        flex;
	flex-wrap:      wrap;
	align-items:    baseline;
	gap:            12px;
	padding-bottom: 22px;
	border-bottom:  1px solid var(--color-gray-200);
}

.product-price {
	font-size:      1.95rem;
	font-weight:    700;
	color:          var(--color-black);
	letter-spacing: -0.02em;
	line-height:    1;
}

.product-price--sale {
	color: #d32f2f;
}

.product-price--original {
	font-size:       1.25rem;
	font-weight:     400;
	color:           var(--color-gray-400);
	text-decoration: line-through;
	line-height:     1;
}

.product-discount-pill {
	display:          inline-flex;
	align-items:      center;
	font-size:        var(--font-size-xs);
	font-weight:      700;
	color:            #d32f2f;
	background-color: #ffebee;
	border:           1px solid rgba(211, 47, 47, 0.2);
	padding:          4px 10px;
	border-radius:    100px;
	text-transform:   uppercase;
	letter-spacing:   0.04em;
}

.product-price-valentine {
	width:            100%;
	display:          flex;
	align-items:      center;
	gap:              8px;
	margin-top:       6px;
	padding:          10px 14px;
	background-color: #fff1f2;
	border:           1px dashed #fda4af;
	border-radius:    var(--radius-sm);
	color:            #be123c;
	font-size:        var(--font-size-sm);
}

.product-price-valentine strong {
	font-size: 1.05rem;
	color:     #9f1239;
}

/* Feature & Service Highlights */
.product-highlights {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   12px;
}

.product-highlight-item {
	display:          flex;
	align-items:      flex-start;
	gap:              12px;
	padding:          14px;
	border-radius:    var(--radius-sm);
	background-color: var(--color-gray-50);
	border:           1px solid var(--color-gray-200);
	transition:       border-color var(--transition-fast), background-color var(--transition-fast);
}

.product-highlight-item:hover {
	border-color:     var(--color-gray-400);
	background-color: var(--color-on-primary, var(--color-white));
}

.product-highlight-icon {
	font-size:   1.35rem;
	line-height: 1;
	flex-shrink: 0;
	margin-top:  1px;
}

.product-highlight-text {
	display:        flex;
	flex-direction: column;
	gap:            2px;
}

.product-highlight-text strong {
	font-size:   var(--font-size-xs);
	font-weight: 700;
	color:       var(--color-black);
}

.product-highlight-text span {
	font-size:   0.75rem;
	color:       var(--color-gray-600);
	line-height: 1.35;
}

.product-highlight-item--full {
	grid-column: 1 / -1;
}

/* Delivery Box & Options */
.product-delivery-box {
	grid-column:      1 / -1;
	border-radius:    var(--radius-sm);
	background-color: var(--color-gray-50);
	border:           1px solid var(--color-gray-200);
	padding:          14px 16px;
	display:          flex;
	flex-direction:   column;
	gap:              12px;
}

.product-delivery-box__label {
	display:        flex;
	align-items:    center;
	gap:            8px;
	font-size:      var(--font-size-xs);
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--color-black);
}

.product-delivery-box__label svg {
	color: var(--color-gray-600);
}

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

.product-delivery-option {
	display:          flex;
	align-items:      flex-start;
	gap:              10px;
	padding:          12px 14px;
	border-radius:    var(--radius-sm);
	background-color: var(--color-on-primary, var(--color-white));
	border:           1px solid var(--color-gray-200);
	transition:       border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.product-delivery-option:hover {
	border-color: var(--color-gray-400);
	box-shadow:   0 2px 8px rgba(0, 0, 0, 0.04);
}

.product-delivery-icon {
	font-size:   1.3rem;
	line-height: 1;
	margin-top:  1px;
	flex-shrink: 0;
}

.product-delivery-text {
	display:        flex;
	flex-direction: column;
	gap:            3px;
}

.product-delivery-text strong {
	font-size:   var(--font-size-xs);
	font-weight: 700;
	color:       var(--color-black);
}

.product-delivery-text span {
	font-size:   0.75rem;
	color:       var(--color-gray-600);
	line-height: 1.35;
}

.delivery-badge-note {
	display:          inline-flex;
	align-items:      center;
	width:            fit-content;
	padding:          2px 7px;
	border-radius:    4px;
	background-color: #fef3c7;
	color:            #92400e;
	font-weight:      600 !important;
	font-size:        0.7rem !important;
	letter-spacing:   0.01em;
	border:           1px solid #fde68a;
}

/* CTA Actions */
.product-actions {
	display:     flex;
	gap:         12px;
	align-items: stretch;
}

.product-wa-btn {
	flex:             1;
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	gap:              10px;
	background-color: #1a8a4a;
	color:            #ffffff;
	font-size:        var(--font-size-base);
	font-weight:      600;
	padding:          16px 24px;
	border-radius:    var(--radius-sm);
	text-decoration:  none;
	border:           none;
	box-shadow:       0 4px 16px rgba(26, 138, 74, 0.25);
	transition:       all var(--transition-fast);
}

.product-wa-btn:hover {
	background-color: #16733d;
	color:            #ffffff;
	transform:        translateY(-2px);
	box-shadow:       0 8px 24px rgba(26, 138, 74, 0.32);
}

.product-wa-btn:active {
	transform: translateY(0);
}

.product-share-btn {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	gap:              8px;
	padding:          16px 20px;
	border-radius:    var(--radius-sm);
	border:           1.5px solid var(--color-gray-200);
	background-color: var(--color-on-primary, var(--color-white));
	color:            var(--color-black);
	font-size:        var(--font-size-sm);
	font-weight:      600;
	cursor:           pointer;
	transition:       all var(--transition-fast);
	white-space:      nowrap;
}

.product-share-btn:hover {
	border-color:     var(--color-black);
	background-color: var(--color-gray-50);
}

.product-share-btn.is-copied {
	background-color: var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	border-color:     var(--color-black);
}

/* Description Card */
.product-description-card {
	padding:          22px;
	border-radius:    var(--radius-sm);
	background-color: var(--color-on-primary, var(--color-white));
	border:           1px solid var(--color-gray-200);
}

.product-description-title {
	font-size:      var(--font-size-xs);
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:          var(--color-black);
	margin:         0 0 12px 0;
	padding-bottom: 8px;
	border-bottom:  1px solid var(--color-gray-200);
}

.product-description-content {
	font-size:   var(--font-size-sm);
	color:       var(--color-gray-600);
	line-height: 1.7;
}

.product-description-content p {
	margin: 0 0 12px;
}

.product-description-content p:last-child {
	margin-bottom: 0;
}

.product-description-content ul,
.product-description-content ol {
	margin:       8px 0 12px 20px;
	padding-left: 0;
}

/* Reassurance & Customization Note */
.product-order-note {
	border-radius:    var(--radius-sm);
	background-color: #faf8f5;
	border:           1px solid #ebd9c5;
	border-left:      3.5px solid var(--color-primary);
	padding:          14px 16px;
	display:          flex;
	flex-direction:   column;
	gap:              8px;
	box-shadow:       0 2px 8px rgba(124, 94, 61, 0.04);
}

.product-order-note__header {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.product-order-note__icon {
	font-size:   1rem;
	line-height: 1;
}

.product-order-note__title {
	font-size:      var(--font-size-xs);
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--color-primary);
}

.product-order-note__text {
	font-size:   var(--font-size-xs);
	color:       var(--color-gray-700);
	line-height: 1.55;
	margin:      0;
}

.product-order-note__chips {
	display:     flex;
	flex-wrap:   wrap;
	gap:         6px;
	margin-top:  2px;
}

.order-note-chip {
	display:          inline-flex;
	align-items:      center;
	gap:              5px;
	font-size:        0.725rem;
	font-weight:      600;
	color:            #6b4e31;
	background-color: #f2e8dc;
	border:           1px solid #e5d5c3;
	padding:          3px 9px;
	border-radius:    100px;
}

/* Instagram Model Inspiration Card */
.product-instagram-card {
	grid-column:      1 / -1;
	display:          flex;
	align-items:      flex-start;
	gap:              14px;
	padding:          16px 18px;
	background:       linear-gradient(135deg, #ffffff 0%, #fdfbf9 100%);
	border:           1.5px solid #ebd9c5;
	border-radius:    var(--radius-sm);
	box-shadow:       0 2px 10px rgba(0, 0, 0, 0.03);
	transition:       border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.product-instagram-card:hover {
	border-color:     #d6249f;
	box-shadow:       0 6px 20px rgba(214, 36, 159, 0.09);
}

.product-instagram-card__icon {
	width:            40px;
	height:           40px;
	border-radius:    10px;
	background:       radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	color:            #ffffff;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	flex-shrink:      0;
	box-shadow:       0 3px 10px rgba(214, 36, 159, 0.25);
}

.product-instagram-card__body {
	flex:           1;
	min-width:      0;
	display:        flex;
	flex-direction: column;
	gap:            4px;
}

.product-instagram-card__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             8px;
	flex-wrap:       wrap;
}

.product-instagram-card__title {
	font-size:      var(--font-size-xs);
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--color-black);
}

.product-instagram-card__tag {
	font-size:        0.7rem;
	font-weight:      600;
	color:            #9d2d79;
	background-color: #fcecf6;
	padding:          2px 8px;
	border-radius:    var(--radius-full);
}

.product-instagram-card__desc {
	font-size:   var(--font-size-xs);
	color:       var(--color-gray-600);
	line-height: 1.5;
	margin:      2px 0 8px 0;
}

.product-instagram-card__btn {
	display:          inline-flex;
	align-items:      center;
	align-self:       flex-start;
	gap:              6px;
	font-size:        var(--font-size-xs);
	font-weight:      600;
	color:            #ffffff;
	background-color: var(--color-black);
	padding:          7px 14px;
	border-radius:    var(--radius-full);
	text-decoration:  none;
	transition:       background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.product-instagram-card__btn:hover {
	background:  radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 70%, #285AEB 100%);
	color:       #ffffff;
	transform:   translateY(-1px);
	box-shadow:  0 4px 12px rgba(214, 36, 159, 0.3);
}

.product-instagram-card__btn svg {
	transition: transform var(--transition-fast);
}

.product-instagram-card__btn:hover svg {
	transform: translate(2px, -2px);
}

/* Related Products Section */
.product-related-section {
	border-top:       1px solid var(--color-gray-200);
	background-color: var(--color-gray-50);
	padding:          64px 24px 80px;
}

.product-related__inner {
	max-width:      1200px;
	margin:         0 auto;
	display:        flex;
	flex-direction: column;
	gap:            32px;
}

.product-related__header {
	display:         flex;
	align-items:     flex-end;
	justify-content: space-between;
	gap:             16px;
	flex-wrap:       wrap;
}

.product-related__sub {
	font-size:      var(--font-size-xs);
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:          var(--color-gray-400);
	display:        block;
	margin-bottom:  4px;
}

.product-related__title {
	font-size:   clamp(1.4rem, 2.5vw, 1.85rem);
	font-weight: 700;
	color:       var(--color-black);
	margin:      0;
}

.product-related__link {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	font-size:       var(--font-size-sm);
	font-weight:     600;
	color:           var(--color-black);
	text-decoration: none;
	transition:      gap var(--transition-fast);
}

.product-related__link:hover {
	gap: 12px;
}

/* ── Related Carousel ──────────────────────────────────────────────────────── */
.related-carousel {
	position: relative;
}

.related-carousel__track-wrap {
	overflow:   hidden;
	border-radius: var(--radius-md);
}

.related-carousel__track {
	display:    flex;
	will-change: transform;
}

.related-carousel__slide {
	min-width:  calc(100% / 4);
	padding:    0 8px;
	box-sizing: border-box;
	flex-shrink: 0;
	display:    flex;
}

.related-carousel__slide .catalog-card {
	width: 100%;
}

/* Nav buttons */
.related-carousel__btn {
	position:         absolute;
	top:              50%;
	transform:        translateY(-50%);
	width:            40px;
	height:           40px;
	border-radius:    50%;
	background:       var(--color-white);
	border:           1.5px solid var(--color-gray-200);
	box-shadow:       0 2px 10px rgba(0,0,0,0.10);
	color:            var(--color-black);
	cursor:           pointer;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	transition:       background var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
	z-index:          2;
}

.related-carousel__btn:hover:not(:disabled) {
	background:  var(--color-black);
	color: var(--color-on-primary, var(--color-white));
	border-color: var(--color-black);
	box-shadow:  0 4px 16px rgba(0,0,0,0.18);
}

.related-carousel__btn--prev {
	left: -20px;
}

.related-carousel__btn--next {
	right: -20px;
}

/* Dots */
.related-carousel__dots {
	display:         flex;
	justify-content: center;
	gap:             8px;
	margin-top:      24px;
}

.related-carousel__dot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    var(--color-gray-300);
	border:        none;
	padding:       0;
	cursor:        pointer;
	transition:    background var(--transition-fast), width var(--transition-fast), border-radius var(--transition-fast);
}

.related-carousel__dot.is-active {
	width:         24px;
	border-radius: 4px;
	background:    var(--color-black);
}

/* Related Carousel Instagram Footer */
.related-carousel__ig-footer {
	text-align:       center;
	margin-top:       28px;
	padding:          14px 22px;
	background-color: var(--color-on-primary, var(--color-white));
	border:           1.5px dashed var(--color-gray-300);
	border-radius:    var(--radius-md);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	gap:              10px;
	font-size:        var(--font-size-sm);
	color:            var(--color-gray-600);
	transition:       border-color var(--transition-fast), background-color var(--transition-fast);
}

.related-carousel__ig-footer:hover {
	border-color:     #d6249f;
	background-color: #fffbfe;
}

.related-carousel__ig-icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	color:           #d6249f;
	flex-shrink:     0;
}

.related-carousel__ig-footer strong {
	color: var(--color-black);
}

.related-carousel__ig-footer a {
	display:         inline-flex;
	align-items:     center;
	gap:             4px;
	color:           #d6249f;
	font-weight:     600;
	text-decoration: none;
	transition:      color var(--transition-fast);
}

.related-carousel__ig-footer a:hover {
	color:           var(--color-black);
	text-decoration: underline;
}

/* Mobile & Tablet Responsiveness for Product Page */
@media (max-width: 992px) {
	.product-hero__inner {
		grid-template-columns: 1fr;
		gap:                   36px;
	}

	.product-media {
		position:  static;
		max-width: 580px;
		margin:    0 auto;
		width:     100%;
	}

	.related-carousel__slide {
		min-width: calc(100% / 2);
	}

	.related-carousel__btn--prev {
		left: -12px;
	}

	.related-carousel__btn--next {
		right: -12px;
	}
}

@media (max-width: 640px) {
	.product-hero-section {
		padding: 24px 16px 48px;
	}

	.product-breadcrumb-bar {
		padding: 10px 16px;
	}

	.product-breadcrumbs {
		display: none;
	}

	.product-highlights {
		grid-template-columns: 1fr;
	}

	.product-delivery-options {
		grid-template-columns: 1fr;
	}

	.product-actions {
		flex-direction: column;
	}

	.product-wa-btn {
		width: 100%;
	}

	.product-share-btn {
		width: 100%;
	}

	.related-carousel__slide {
		min-width: 100%;
	}

	.related-carousel__btn {
		width:  34px;
		height: 34px;
	}

	.product-related-section {
		padding: 40px 16px 60px;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   TIPOGRAFI & WARNA KUSTOM (diatur dari panel admin)
   Nilai variabel di-inject via wp_head — lihat floriste_customizer_css().
   Blok ini hanya memastikan variabel benar-benar terpakai.
   ═══════════════════════════════════════════════════════════════════ */

/* Body memakai font body kustom + warna teks body */
body {
	font-family: var(--font-body, var(--font-sans));
	color: var(--color-body, var(--color-primary));
}

/* Semua heading memakai font heading kustom — cakupan diperluas agar
   elemen judul di seluruh T1 ikut, bukan hanya tag h1-h6. */
h1, h2, h3, h4, h5, h6,
.site-logo__title,
.site-preloader__title,
.page-title,
.section-title,
.floriste-section-heading,
.catalog-card__title,
.catalog-card__title a,
.product-title,
.product-detail__title,
.related-section__title,
.product-related__title,
.product-description-title,
.floriste-section-heading h2,
.sidebar-group__title,
.sidebar-card__title,
.filter-dropdown__panel-title,
.catalog-empty__title,
.filter-drawer__section-title,
.hero__title,
.catalog-hero__title {
	font-family: var(--font-heading, var(--font-sans));
	color: var(--color-heading, var(--color-primary));
}

/* Elemen brand memakai primary color */
.site-logo__title,
a:hover,
a:focus {
	color: var(--color-primary, var(--color-black));
}