/*
 * Boga Jaya Commerce -- header redesign (Phase 2B, second pass).
 *
 * Design direction: a compact premium dropdown with product cards for
 * "E-Commerce" (a mega-panel would be too heavy for a company-profile
 * site with only 4 SKUs), and a branded cart control with a text pill
 * and a solid, custom-styled mini-cart panel -- both reusing Blocksy's
 * own proven hover/toggle interaction and WooCommerce's real AJAX cart
 * fragments, so nothing here is a from-scratch reimplementation of
 * already-solved interaction logic. Only the surface is new.
 *
 * Brand tokens (same ones introduced in commerce.css):
 *   --bjf-green        #55a630
 *   --bjf-green-dark    #438b22
 *   --bjf-green-deep   #213631
 *   --bjf-ink          #0f1a17
 *   --bjf-gold         #c6a15b  (restrained accent only)
 */

/* ============================================================
   E-COMMERCE MEGA-PANEL (product-card dropdown)
   ============================================================ */

/* Give the panel room and stop it from clipping/blending into content. */
li.bjf-ecommerce-trigger {
	position: relative;
}

li.bjf-ecommerce-trigger > .sub-menu {
	background: #ffffff !important;
	border: 1px solid rgba(33, 54, 49, 0.08) !important;
	border-radius: 16px !important;
	box-shadow: 0 18px 40px -12px rgba(15, 26, 23, 0.22), 0 4px 12px rgba(15, 26, 23, 0.06) !important;
	padding: 20px !important;
	min-width: 340px;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	backdrop-filter: none !important;
}

/* "Beli Produk" section heading, pure CSS -- no extra markup needed. */
li.bjf-ecommerce-trigger > .sub-menu::before {
	content: "Beli Produk";
	grid-column: 1 / -1;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bjf-gold, #c6a15b);
	margin-bottom: 4px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(33, 54, 49, 0.08);
}

li.bjf-ecommerce-trigger .sub-menu li {
	width: auto;
}

li.bjf-ecommerce-trigger .sub-menu li a.ct-menu-link {
	display: block;
	padding: 0;
	height: auto;
	line-height: normal;
	border-radius: 12px;
	transition: background-color 0.15s ease;
}

li.bjf-ecommerce-trigger .sub-menu li:not(.bjf-panel-card-link) a.ct-menu-link:hover {
	background: var(--theme-palette-color-6, #F8FAFB);
}

/* Product card content (built via nav_menu_item_title filter). */
.bjf-panel-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
}

.bjf-panel-card__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	background: var(--theme-palette-color-5, #F0F2F3);
}

.bjf-panel-card__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.bjf-panel-card__badge {
	align-self: flex-start;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 2px 9px;
	border-radius: 999px;
	margin-bottom: 2px;
}

.bjf-panel-card__badge--retail {
	background: var(--bjf-green, #55a630);
	color: #ffffff;
}

.bjf-panel-card__badge--inquiry {
	background: transparent;
	border: 1px solid var(--bjf-gold, #c6a15b);
	color: var(--bjf-green-deep, #213631);
}

.bjf-panel-card__name {
	font-size: 13px;
	font-weight: 600;
	color: var(--bjf-ink, #0f1a17);
	line-height: 1.3;
}

.bjf-panel-card__meta {
	font-size: 12px;
	color: var(--bjf-green-deep, #213631);
	font-weight: 600;
}

.bjf-panel-card__meta .woocommerce-Price-amount {
	font-size: 12px;
}

/* "Lihat Semua Produk" footer link -- full width, visually distinct from the cards. */
li.bjf-panel-card-link {
	grid-column: 1 / -1;
}

li.bjf-panel-card-link > a.ct-menu-link {
	text-align: center !important;
	font-size: 13px !important;
	font-weight: 600;
	color: var(--bjf-green-deep, #213631) !important;
	padding: 12px !important;
	margin-top: 6px;
	border-top: 1px solid rgba(33, 54, 49, 0.08);
	border-radius: 0 !important;
}

li.bjf-panel-card-link > a.ct-menu-link:hover {
	color: var(--bjf-green, #55a630) !important;
	background: transparent !important;
}

@media (max-width: 480px) {
	li.bjf-ecommerce-trigger > .sub-menu {
		grid-template-columns: 1fr;
		min-width: 260px;
	}
}

/* ============================================================
   CART CONTROL -- branded icon, text pill, solid panel
   ============================================================ */

.ct-header-cart {
	position: relative;
}

/*
 * Icon: recolor to brand ink/green instead of the default neutral
 * tone. The bag icon (blocksy:header:cart:icons filter, see
 * boga-jaya-commerce-core.php) is drawn with stroke="currentColor",
 * not a fill path -- so it is recolored via the SVG's inherited CSS
 * `color`, not a `path { fill }` override (that would have no effect
 * on a stroke-only icon).
 */
.ct-header-cart .ct-icon-container svg {
	width: 20px !important;
	height: 20px !important;
	color: var(--bjf-green-deep, #213631);
}

.ct-header-cart .ct-cart-item:hover .ct-icon-container svg {
	color: var(--bjf-green, #55a630);
}

/* Branded "N item" pill instead of a plain numeric bubble. */
.ct-header-cart .ct-dynamic-count-cart {
	position: absolute;
	top: -10px;
	right: -14px;
	min-width: auto;
	height: auto;
	background: var(--bjf-green, #55a630) !important;
	color: #ffffff !important;
	font-size: 10px !important;
	font-weight: 700;
	line-height: 1;
	padding: 4px 8px !important;
	border-radius: 999px !important;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(33, 54, 49, 0.25);
}

.ct-header-cart .ct-dynamic-count-cart::after {
	content: " item";
	font-weight: 500;
}

/* Hide the pill entirely when the cart is empty. Blocksy sets
   data-count="0" on the count span itself when refreshed via AJAX, and
   the wrapper carries data-cart="hide-empty" from the has_empty_cart
   setting -- this rule is the actual hiding behavior for both the
   initial server render and every subsequent AJAX fragment refresh. */
.ct-header-cart[data-cart="hide-empty"] .ct-dynamic-count-cart[data-count="0"] {
	display: none !important;
}

/*
 * Root cause of the whole cart trigger disappearing at zero items
 * (not just the badge): Blocksy's own base stylesheet
 * (wp-content/themes/blocksy/static/sass/frontend/8-integrations/
 * woocommerce/cart-header-element.scss, always loaded, not lazy) ships
 * `.ct-header-cart[data-cart="hide-empty"]:has([data-count="0"]) {
 * display: none; }` -- a :has() rule that hides the ENTIRE trigger
 * <div>, not just the count pill, whenever any descendant reports
 * data-count="0". That is Blocksy's own "has_empty_cart" behavior, one
 * level more aggressive than this design wants (owner rule: only the
 * item-count badge disappears at zero; the cart icon/control itself
 * must always stay visible and clickable). The rule immediately above
 * already hides just the badge, so this restores the trigger element's
 * own visibility -- .ct-header-cart is a plain <div> here (confirmed in
 * the live DOM), so `display: block` is its correct, undoing value,
 * not a guessed replacement.
 */
.ct-header-cart[data-cart="hide-empty"] {
	display: block !important;
}

/*
 * ------------------------------------------------------------------
 * Mini-cart panel (.ct-cart-content) -- visual rework pass.
 *
 * Root-cause background fix (unchanged from the previous pass, still
 * required): Blocksy's own rule is
 * `background: var(--mini-cart-background-color);` with NO fallback,
 * and that variable is never defined anywhere in this site's compiled
 * CSS -- it resolves to transparent, which is what let page content
 * show through. Fixed by setting the variable itself (Blocksy's own
 * mechanism), plus the matching --theme-text-color/
 * --mini-cart-divider-color it also depends on (their defaults assume
 * a dark panel, which is not what this design uses).
 *
 * This pass's job is the composition on top of that opaque surface:
 * a wider, better-proportioned panel; a real heading; a proper
 * image/info/remove grid per item; an internally-scrollable item list
 * so the footer (subtotal + actions) never gets pushed off-panel by a
 * long cart; a vertical action stack sized for this panel's actual
 * width instead of Blocksy's cramped 2-column button grid.
 * ------------------------------------------------------------------
 */
.ct-header-cart .ct-cart-content {
	--mini-cart-background-color: #ffffff;
	--theme-text-color: var(--bjf-ink, #0f1a17);
	--mini-cart-divider-color: rgba(33, 54, 49, 0.08);
	--theme-link-initial-color: var(--bjf-ink, #0f1a17);

	display: flex;
	flex-direction: column;
	background: #ffffff !important;
	border: 1px solid rgba(33, 54, 49, 0.08) !important;
	border-radius: 12px !important;
	box-shadow: 0 20px 44px -14px rgba(15, 26, 23, 0.24), 0 6px 16px rgba(15, 26, 23, 0.07) !important;
	padding: 22px !important;
	width: 372px !important;
	max-width: calc(100vw - 32px) !important;
	z-index: 999 !important;
	backdrop-filter: none !important;

	/* Anchor the panel by its right edge and open it leftward, away
	   from whatever sits to the right of the cart trigger in the
	   header (the "Hubungi Kami" button) -- deterministic regardless
	   of Blocksy's own [data-placement] runtime state, which could not
	   be confirmed without a browser. */
	left: auto !important;
	right: 0 !important;
}

.ct-header-cart .ct-cart-content::before {
	content: "Keranjang Anda";
	display: block;
	flex: none;
	font-size: 15px;
	font-weight: 700;
	color: var(--bjf-green-deep, #213631);
	margin-bottom: 18px;
}

/* Item list -- the only part that scrolls, so the subtotal/actions
   footer stays reachable no matter how many products are in the cart. */
.ct-header-cart .woocommerce-mini-cart {
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 0 -6px 0 0 !important;
	padding: 0 6px 0 0 !important;
}

/*
 * Real markup (confirmed via the actual wc-ajax=get_refreshed_fragments
 * response, not assumed from WooCommerce's raw core template -- Blocksy
 * enhances the mini-cart item's filters to produce this):
 *   <li class="woocommerce-mini-cart-item mini_cart_item">
 *     <a class="remove remove_from_cart_button"><svg class="ct-icon">...</svg></a>
 *     <a class="ct-media-container" href="..."><img ...></a>
 *     <div class="product-data">
 *       <a class="product-title" href="...">Name</a>
 *       <span class="quantity">2 &times; Rp14.500</span>
 *     </div>
 *   </li>
 * A proper icon-based remove control and a dedicated .product-data
 * wrapper already exist; this lays them out as an explicit
 * image / info / remove grid instead of a loose flex row, so the three
 * pieces stop competing for space.
 */
.ct-header-cart .widget_shopping_cart_content .woocommerce-mini-cart-item {
	display: grid;
	grid-template-columns: 68px 1fr 28px;
	align-items: center;
	column-gap: 14px;
	padding: 16px 0 !important;
	border-bottom: 1px solid rgba(33, 54, 49, 0.07) !important;
}

.ct-header-cart .woocommerce-mini-cart-item:first-child {
	padding-top: 2px !important;
}

.ct-header-cart .woocommerce-mini-cart-item:last-child {
	border-bottom: none !important;
	padding-bottom: 2px !important;
}

.ct-header-cart .woocommerce-mini-cart-item .ct-media-container {
	grid-column: 1;
	width: 68px;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bjf-surface, #F8FAFB);
	border-radius: 10px;
	overflow: hidden;
}

.ct-header-cart .woocommerce-mini-cart-item .ct-media-container img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 7px;
}

.ct-header-cart .woocommerce-mini-cart-item .product-data {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.ct-header-cart .woocommerce-mini-cart-item .product-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bjf-green-deep, #213631) !important;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ct-header-cart .woocommerce-mini-cart-item .quantity {
	display: block;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.55;
}

.ct-header-cart .woocommerce-mini-cart-item .remove {
	grid-column: 3;
	position: static !important;
	justify-self: end;
	align-self: start;
	width: 26px;
	height: 26px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	opacity: 0.4;
	text-decoration: none;
}

.ct-header-cart .woocommerce-mini-cart-item .remove svg,
.ct-header-cart .woocommerce-mini-cart-item .remove .ct-icon {
	width: 11px;
	height: 11px;
	fill: var(--bjf-ink, #0f1a17);
}

.ct-header-cart .woocommerce-mini-cart-item .remove:hover {
	background: rgba(163, 51, 51, 0.08);
	opacity: 1;
}

.ct-header-cart .woocommerce-mini-cart-item .remove:hover svg,
.ct-header-cart .woocommerce-mini-cart-item .remove:hover .ct-icon {
	fill: #a33;
}

/* Subtotal footer -- deliberately connected to the actions below it: a
   divider above, then subtotal, then the action stack, all inside one
   visual footer group with consistent spacing. */
.ct-header-cart .woocommerce-mini-cart__total {
	flex: none;
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	margin: 16px 0 0 !important;
	padding: 16px 0 0 !important;
	border-top: 1.5px solid rgba(33, 54, 49, 0.12) !important;
	font-size: 14px;
	font-weight: 600;
	text-transform: none !important;
	color: var(--bjf-ink, #0f1a17) !important;
}

.ct-header-cart .woocommerce-mini-cart__total .woocommerce-Price-amount {
	color: var(--bjf-green-deep, #213631);
	font-size: 17px;
	font-weight: 800;
}

/* Vertical action stack -- Blocksy's own 2-column button grid is
   cramped at this panel width; Checkout (primary) leads, View Cart
   (secondary) follows, both full width. Reordered visually via CSS
   `order` since WooCommerce always renders "View cart" first in the
   markup -- no template override needed for this. */
.ct-header-cart .woocommerce-mini-cart__buttons {
	flex: none;
	display: flex !important;
	flex-direction: column;
	gap: 10px;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	border: none !important;
}

.ct-header-cart .woocommerce-mini-cart__buttons .button {
	grid-column: auto !important;
	width: 100%;
	border-radius: 9px !important;
	text-align: center !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	padding: 13px 16px !important;
	text-transform: none !important;
}

.ct-header-cart .woocommerce-mini-cart__buttons .checkout.wc-forward {
	order: 1;
	background: var(--bjf-green-deep, #213631) !important;
	color: #ffffff !important;
	border: none !important;
}

.ct-header-cart .woocommerce-mini-cart__buttons .checkout.wc-forward:hover {
	background: var(--bjf-green, #55a630) !important;
}

.ct-header-cart .woocommerce-mini-cart__buttons .wc-forward:first-child {
	order: 2;
	background: transparent !important;
	color: var(--bjf-green-deep, #213631) !important;
	border: 1.5px solid rgba(33, 54, 49, 0.18) !important;
}

.ct-header-cart .woocommerce-mini-cart__buttons .wc-forward:first-child:hover {
	border-color: var(--bjf-green-deep, #213631) !important;
}

/*
 * Deliberate empty state. Confirmed via the real
 * wc-ajax=get_refreshed_fragments response: this renders WooCommerce's
 * own cart/cart-empty.php content (the same template the full Cart
 * page uses when empty) -- a ".cart-empty" notice plus a
 * ".return-to-shop" button. The two-line "Keranjang masih kosong /
 * Belum ada produk di keranjang Anda." copy is set via the gettext
 * filter in boga-jaya-commerce-core.php (wp_kses_post-safe markup,
 * real accessible text -- not CSS-generated content); the button is
 * retargeted to the branded catalog page and relabeled "Lihat Produk"
 * via WooCommerce's own woocommerce_return_to_shop_redirect/_text
 * filters. This block only styles both.
 */
.ct-header-cart .woocommerce-mini-cart__empty-message,
.ct-header-cart .wc-empty-cart-message .cart-empty {
	font-size: 14px;
	font-weight: 700;
	color: var(--bjf-green-deep, #213631);
	text-align: center;
	padding: 8px 0 4px;
	margin: 0;
	background: none !important;
	border: none !important;
}

.ct-header-cart .bjf-mini-cart-empty-sub {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.65;
}

.ct-header-cart .return-to-shop {
	margin: 16px 0 0;
	text-align: center;
}

.ct-header-cart .return-to-shop .button.wc-backward {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 13px 16px !important;
	border-radius: 9px !important;
	background: var(--bjf-green-deep, #213631) !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	text-decoration: none;
}

.ct-header-cart .return-to-shop .button.wc-backward:hover {
	background: var(--bjf-green, #55a630) !important;
}

@media (max-width: 480px) {
	.ct-header-cart .ct-cart-content {
		width: calc(100vw - 24px) !important;
		padding: 18px !important;
	}
	.ct-header-cart .widget_shopping_cart_content .woocommerce-mini-cart-item {
		grid-template-columns: 56px 1fr 26px;
		column-gap: 10px;
	}
	.ct-header-cart .woocommerce-mini-cart-item .ct-media-container {
		width: 56px;
		height: 56px;
	}
}