/*
 * Matches cut-popup.local's own layout grid: 1440px container, 12 columns —
 * sidebar takes 3/12, the product grid the remaining 9/12. A site with a
 * different container width/column count would need these three values
 * (max-width, and the two column spans below) adjusted to match its own grid.
 */
.dgg-bd-box {
	--dgg-bd-accent: #b3812f;

	display: grid;
	grid-template-columns: 9fr 3fr;
	gap: 24px;
	max-width: 1440px;
	margin: 0 auto 24px;
}
.dgg-bd-box * {
	box-sizing: border-box;
}

.dgg-bd-box-grid {
	min-width: 0;
}
/* Invisible marker box-builder.js watches (only meaningful on mobile, see the
   680px media query below) — never rendered as anything itself. */
.dgg-bd-box-sidebar-sentinel {
	height: 1px;
}
/* The pinned mobile preview (see the 680px media query below, which is where
   it actually gets shown/positioned) — never shown on desktop. Must come
   BEFORE that media query in source order so its display:block there wins. */
.dgg-bd-box-sidebar-floating {
	display: none;
}
.dgg-bd-box-sidebar {
	min-width: 0;
	/* Sticks to the viewport while the (usually much taller) product grid
	   column scrolls past — align-self: start keeps it at its own natural
	   height instead of the grid's default stretch-to-row-height behavior,
	   which would otherwise leave no room for "sticky" to do anything. It
	   stops sticking once it hits the bottom of .dgg-bd-box (its containing
	   block), so it never overlaps whatever comes after the section. */
	position: sticky;
	top: 20px;
	align-self: start;
}
/* Grid renders first in the markup either way (content order); this setting
   only swaps which side it visually sits on for wide screens. */
.dgg-bd-box--sidebar-left {
	grid-template-columns: 3fr 9fr;
}
.dgg-bd-box--sidebar-left .dgg-bd-box-grid {
	order: 2;
}
.dgg-bd-box--sidebar-left .dgg-bd-box-sidebar {
	order: 1;
}

.dgg-bd-box-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* overridden inline per Project's "Số sản phẩm mỗi dòng" */
	gap: 14px;
}
.dgg-bd-box-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e5e5e5;
	/* Always matches the Project's "Độ bo viền" setting (same one .dgg-bd-progress
	   uses) — set as a custom property on .dgg-bd-box so both stay in sync. */
	border-radius: var(--dgg-bd-border-radius, 8px);
	padding: 0px;
	background: #fff;
	transition: border-color 0.15s ease;
}
/* A card with something already added gets the same "reached" affordance as
   the tier ladder (progress-bar.css) — an accent-colored border + ring. */
.dgg-bd-box-card:has(.dgg-bd-box-stepper) {
	border-color: var(--dgg-bd-accent);
	box-shadow: 0 0 0 2px #ECE4D7;
}
.dgg-bd-box-card-thumb {
	display: block;
	position: relative; /* containing block for Flatsome's absolutely-positioned hover/back-image */
	overflow: hidden;
}
.dgg-bd-box-card-thumb img {
	display: block;
	width: 100%;
	height: auto;
	/* No radius of its own — .dgg-bd-card's own overflow:hidden + border-radius
	   clips this flush-mounted image's top corners instead. */
	border-radius: 0;
}
/* Title + price/action row share this padded body — the thumb above it
   deliberately sits flush against the card's edges (see .dgg-bd-box-card). */
.dgg-bd-box-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 12px;
}
/* The title/price inside are WooCommerce's own loop markup
   (woocommerce_template_loop_product_title()/_price(), see
   class-box-builder.php) — deliberately no font-size/color override here so
   they render exactly like the theme's "Product Small" elsewhere; this class
   just resets the h2/.price's own default margin for the card layout. */
.dgg-bd-box-card-title {
	display: block;
	margin-bottom: 8px;
	color: inherit;
	text-decoration: none;
}
.dgg-bd-box-card-title > * {
	margin: 0;
}
.dgg-bd-box-card-row {
	display: flex;
	align-items: center; /* price and Add/stepper vertically centered against each other */
	justify-content: space-between; /* price left, Add/stepper right */
	gap: 8px;
	margin-top: auto;
}
.dgg-bd-box-card-price > * {
	margin: 0;
}

.dgg-bd-box-add {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Fixed height (also matched by .dgg-bd-box-stepper below) so the Add
	   state and the +/- stepper state are pixel-identical — resets Flatsome's
	   global .button sizing (min-height/line-height/uppercase/bold, from the
	   theme's own class our button also carries), which otherwise made the
	   Add state noticeably taller and shifted .dgg-bd-box-card-row's
	   position when a card switched between the two. */
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0 16px;
	background: transparent;
	border: 1px solid var(--dgg-bd-accent);
	border-radius: 20px;
	color: var(--dgg-bd-accent);
	font-size: 13px;
	font-weight: 600;
	line-height: normal;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.dgg-bd-box-add:hover {
	background: var(--dgg-bd-accent);
	color: #fff;
}
.dgg-bd-box-add--disabled,
.dgg-bd-box-add--disabled:hover {
	border-style: dashed;
	border-color: #ccc;
	color: #999;
	background: transparent;
	cursor: not-allowed;
}

.dgg-bd-box-stepper {
	display: flex;
	flex: 0 0 auto;
	height: 40px; /* matches .dgg-bd-box-add exactly, see comment there */
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
	border: 1px solid var(--dgg-bd-accent);
	border-radius: 20px;
}
.dgg-bd-box-stepper-plus,
.dgg-bd-box-stepper-minus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin-right: 0px;
	padding: 0 10px;
	background: transparent;
	border: none;
	color: var(--dgg-bd-accent);
	font-size: 15px;
	cursor: pointer;
}
.dgg-bd-box-stepper-qty {
	min-width: 1.2em;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
}

.dgg-bd-box-loadmore-wrap {
	margin: 16px 0 0;
	text-align: center;
}
/* Colors/border/radius come from the Project's "Load more" settings as an
   inline style (see Box_Builder::loadmore_style()) — no shared `.button`
   class here, so it never inherits the theme's global button margin/sizing. */
.dgg-bd-box-loadmore {
	display: inline-block;
	margin-bottom: 0;
	margin-left: 0;
	padding: 10px 24px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.dgg-bd-box-loadmore:hover {
	opacity: 0.85;
}
.dgg-bd-box-loadmore:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* The real cart's contents, inside the sidebar — plain custom markup (not
   WooCommerce's own mini-cart template), but every line here IS a genuine
   cart item; see Box_Builder::render_cart_list(). */
.dgg-bd-box-cart-list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.dgg-bd-box-cart-line {
	display: flex;
	align-items: flex-start; /* the name can wrap to several lines (see .dgg-bd-box-cart-name) — center would misalign it against the single-line qty/price and remove button */
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--dgg-bd-border, #e8dfd0);
	font-size: 13px;
}
.dgg-bd-box-cart-name {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
}
.dgg-bd-box-cart-qtyprice {
	flex: 0 0 auto;
	padding-top: 1px; /* nudges baseline back in line with the name's first line now that align-items is flex-start */
	color: #8a7f6b;
	white-space: nowrap;
}
.dgg-bd-box-cart-remove {
	flex: 0 0 auto;
	padding: 0 2px;
	background: transparent;
	border: none;
	color: #8a7f6b;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.dgg-bd-box-cart-remove:hover {
	color: var(--dgg-bd-accent);
}
.dgg-bd-box-cart-empty {
	padding: 14px 0 0;
	list-style: none;
	font-size: 13px;
	color: #8a7f6b;
}

/* Cards / Box saving / Box total + the single checkout button. */
.dgg-bd-box-summary {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--dgg-bd-border, #e8dfd0);
}
.dgg-bd-box-summary-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 6px;
	font-size: 13px;
}
.dgg-bd-box-summary-saving span:first-child {
	font-weight: 600;
}
.dgg-bd-box-summary-saving span:last-child {
	color: var(--dgg-bd-accent);
	font-weight: 600;
}
.dgg-bd-box-summary-total {
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 700;
}
.dgg-bd-box-summary-total span:last-child {
	font-size: 20px;
}
/* "View Cart" link — colors/border/radius come from the Project's own
   settings as an inline style (see Box_Builder::view_cart_style()), no
   hardcoded background/color/border here anymore. A link, not a button
   (it just navigates to the real cart page — there's nothing left to
   "submit"), so text-align/text-decoration/box-sizing need setting
   explicitly instead of getting a button's usual free reset. */
.dgg-bd-box-checkout {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.dgg-bd-box-checkout:hover {
	opacity: 0.9;
}
/* The price's own WooCommerce/theme markup carries an explicit color that
   plain inheritance from the link can't win against — force it to match
   the link's configured text color instead. */
.dgg-bd-box-checkout-price,
.dgg-bd-box-checkout-price .woocommerce-Price-amount,
.dgg-bd-box-checkout-price .amount {
	color: inherit !important;
}

/* "Go to Checkout" — a plain secondary link under the primary "View Cart"
   one above, for shoppers who just want to skip straight to checkout. */
.dgg-bd-box-goto-checkout {
	display: block;
	margin-top: 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--dgg-bd-accent);
	text-decoration: underline;
}
.dgg-bd-box-goto-checkout:hover {
	opacity: 0.8;
}

@media (max-width: 680px) {
	.dgg-bd-box,
	.dgg-bd-box--sidebar-left {
		grid-template-columns: 1fr; /* stack: grid above sidebar, regardless of the desktop position setting */
	}
	.dgg-bd-box--sidebar-left .dgg-bd-box-grid,
	.dgg-bd-box--sidebar-left .dgg-bd-box-sidebar {
		order: initial;
	}
	/* Project's "Số sản phẩm mỗi dòng" is a desktop-grid setting — always fall
	   back to 2 per row on narrow screens regardless of that value (it's set
	   as an inline style, so overriding it here needs !important). */
	.dgg-bd-box-cards {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	/* Sticky reads oddly once grid/sidebar are stacked in one column — the
	   sidebar would float over the grid below it while scrolling. This is now
	   the ONLY rule governing the real sidebar on mobile — it just sits in
	   the page like any other content, appearing exactly when scrolled to,
	   with no JS-driven show/hide of its own (see .dgg-bd-box-sidebar-floating
	   below for the pinned preview shown before that point). */
	.dgg-bd-box-sidebar {
		position: static;
	}
	/* A separate, decorative copy of the sidebar (same server-rendered markup,
	   kept in sync by box-builder.js's applySidebar() on every cart change)
	   pinned to the bottom of the screen while the shopper is still scrolling
	   through the grid above, so the tier ladder/counter stays visible
	   without hunting for it — the picked-items list and price summary/
	   checkout button are hidden here (no room for them at this size; the
	   real ones are one scroll away in the sidebar above). Being a distinct
	   element from .dgg-bd-box-sidebar itself (rather than that element
	   temporarily repositioned) means this can fade/slide away on its own
	   timeline via box-builder.js's scroll-driven `is-visible` toggle without
	   the real sidebar ever needing to wait on that animation — it's already
	   sitting in the page, unaffected, the moment scrolling reaches it. */
	.dgg-bd-box-sidebar-floating {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		margin: 0;
		padding: 0 12px 12px; /* keeps the card off the screen edges — this wrapper itself stays transparent, the .dgg-bd-progress card inside carries its own background/border/shadow */
		max-width: none;
		max-height: 60vh;
		overflow-y: auto;
		background: transparent;
		transform: translateY(100%);
		opacity: 0;
		transition: transform 1s ease, opacity 1s ease;
		pointer-events: none; /* invisible while hidden — mustn't eat taps meant for the page underneath */
	}
	.dgg-bd-box-sidebar-floating.is-visible {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}
	.dgg-bd-box-sidebar-floating .dgg-bd-box-cart-list,
	.dgg-bd-box-sidebar-floating .dgg-bd-box-summary {
		display: none;
	}
	@media (prefers-reduced-motion: reduce) {
		.dgg-bd-box-sidebar-floating {
			transition: none;
		}
	}
}