/*
 * Ibariki Package Calculator — theming reads from CSS custom properties so
 * the widget inherits whatever the active theme exposes (block theme
 * theme.json presets, Elementor globals, or classic theme customizer colors)
 * via the `ibariki_css_variables` PHP filter.
 */

.ibariki-calculator {
	--ibariki-font-heading: var(--wp--preset--font-family--heading, var(--e-global-typography-primary-font-family, inherit));
	--ibariki-font-body: var(--wp--preset--font-family--body, inherit);
	--ibariki-color-primary: var(--wp--preset--color--primary, var(--e-global-color-primary, #1d4ed8));
	--ibariki-color-primary-contrast: #fff;
	--ibariki-color-text: var(--wp--preset--color--foreground, #1a1a1a);
	--ibariki-color-muted: #6b7280;
	--ibariki-color-bg: var(--wp--preset--color--background, #fff);
	--ibariki-color-surface: #f7f7f8;
	--ibariki-color-border: #e2e2e4;
	--ibariki-color-success: #1a7f37;
	--ibariki-color-error: #c62828;
	--ibariki-radius: var(--wp--custom--border--radius, 8px);

	/* Fixed dark surfaces for the summary panel and quantity controls — kept
	   independent of the theme's inherited text color (which is white on
	   this site), so contrast is guaranteed rather than fought. */
	--ibariki-color-dark-surface: #0e0e0e;
	--ibariki-color-dark-surface-alt: rgba(255, 255, 255, 0.06);
	--ibariki-color-dark-border: rgba(255, 255, 255, 0.16);
	--ibariki-color-dark-text: #f4f7f5;
	--ibariki-color-dark-muted: #a9b8ae;
	--ibariki-color-dark-success: #6ee7a0;

	box-sizing: border-box;
	font-family: var(--ibariki-font-body);
	color: var(--ibariki-color-text);
	background: var(--ibariki-color-bg);
	max-width: 100%;
	padding: 50px 0;
}

.ibariki-calculator *,
.ibariki-calculator *::before,
.ibariki-calculator *::after {
	box-sizing: inherit;
}

.ibariki-calculator__loading {
	padding: 40px;
	text-align: center;
	color: var(--ibariki-color-muted);
}

.ibariki-calculator__error-banner {
	background: #fdecea;
	border: 1px solid var(--ibariki-color-error);
	color: var(--ibariki-color-error);
	border-radius: var(--ibariki-radius);
	padding: 12px 16px;
	margin-bottom: 16px;
}

.ibariki-calculator__header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 24px;
}

.ibariki-calculator__heading {
	font-family: var(--ibariki-font-heading);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.15;
	color: var(--ibariki-color-text);
	margin: 0 0 12px;
}

.ibariki-calculator__subtext {
	color: #374151;
	font-size: 1.15rem;
	line-height: 1.6;
	margin: 0;
}

/* The full-bleed breakout below has no way to know how wide the
   browser's own scrollbar is — `100vw` always measures the full
   viewport including that reserved strip, so on any browser that draws
   a classic (non-overlay) scrollbar the header ends up a few pixels
   wider than the actually-visible page and a second, phantom
   horizontal scrollbar appears. There is no scrollbar-aware viewport
   unit to swap in for `100vw` here, so the standard fix is to clip
   that harmless sliver of overflow instead — scoped to just the pages
   that render the shop layout (shop archive + cart, which mirrors it)
   so it can't mask a real overflow bug elsewhere on the site. */
body.woocommerce-shop,
body.woocommerce-cart {
	overflow-x: hidden;
}

/* Shop-page hero — badge + heading + description on a full-bleed dark
   gradient with rounded bottom corners, matching the "About Us"/
   "Contact Us" page heroes (built as Elementor sections there; this
   page is WooCommerce's own shop archive, driven entirely by this
   plugin, so the same look is reproduced here in plain CSS). Scoped to
   the shop layout, which the cart page also renders so the two are
   identical — the dedicated calculator page keeps the grid layout's
   plain, compact header. */
.ibariki-calculator[data-layout="shop"] .ibariki-calculator__header {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: -50px;
	margin-bottom: 44px;
	padding: 100px 0;
	background-color: #0b1f16;
	background-image:
		radial-gradient(ellipse 70% 60% at 75% 15%, rgba(34, 110, 68, 0.55), transparent 60%),
		radial-gradient(ellipse 65% 65% at 20% 95%, rgba(20, 80, 50, 0.5), transparent 60%),
		linear-gradient(135deg, #0b1f16 0%, #123420 100%);
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
}

/* Same box math as the site header (boxed_width: 1200px + 32px side
   padding), so the badge/heading/description line up flush with the
   header logo instead of sitting in their own independently-centered
   820px column. */
.ibariki-calculator[data-layout="shop"] .ibariki-calculator__header-inner {
	/* `.header` is a column flex container (see the base
	   `.ibariki-calculator__header` rule) — a flex item with an `auto`
	   cross-axis margin doesn't stretch to the container's width by
	   default, it shrinks to fit its own content instead, so `width:
	   100%` has to be explicit here or the max-width below never
	   actually gets reached. */
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
	box-sizing: border-box;
	text-align: left;
}

.ibariki-calculator[data-layout="shop"] .ibariki-calculator__heading,
.ibariki-calculator[data-layout="shop"] .ibariki-calculator__subtext {
	max-width: 760px;
}

.ibariki-calculator[data-layout="shop"] .ibariki-calculator__badge {
	display: inline-block;
	padding: 6px 16px;
	margin-bottom: 18px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.ibariki-calculator[data-layout="shop"] .ibariki-calculator__heading {
	color: #ffffff;
	font-size: 2.6rem;
}

.ibariki-calculator[data-layout="shop"] .ibariki-calculator__subtext {
	color: rgba(255, 255, 255, 0.78);
	font-size: 1.05rem;
}

@media (max-width: 767px) {
	.ibariki-calculator[data-layout="shop"] .ibariki-calculator__header {
		padding: 56px 0;
		margin-top: -40px;
	}

	.ibariki-calculator[data-layout="shop"] .ibariki-calculator__header-inner {
		padding: 0 20px;
	}

	.ibariki-calculator[data-layout="shop"] .ibariki-calculator__heading {
		font-size: 1.9rem;
	}
}

.ibariki-calculator__toolbar {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.ibariki-calculator__search,
.ibariki-calculator__filter {
	padding: 10px 12px;
	border: 1px solid var(--ibariki-color-border);
	border-radius: var(--ibariki-radius);
	font-size: 0.95rem;
	background: var(--ibariki-color-bg);
	color: var(--ibariki-color-text);
}

.ibariki-calculator__search {
	flex: 1;
	min-width: 200px;
}

.ibariki-calculator__layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 28px;
	align-items: start;
}

.ibariki-calculator__products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.ibariki-calculator__empty {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--ibariki-color-muted);
	padding: 40px 0;
}

/* ------------------------------------------------ shop layout (grouped by category) */

.ibariki-category-nav {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 0;
	margin: 0 0 28px;
	background: var(--ibariki-color-bg);
	border-bottom: 1px solid var(--ibariki-color-border);
}

.ibariki-category-nav__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ibariki-category-nav__btn {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid var(--ibariki-color-border);
	background: var(--ibariki-color-surface);
	color: var(--ibariki-color-text);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Ancestor-scoped like every other interactive rule in this file — a bare
   `.ibariki-category-nav__btn:hover` can lose to the theme's own link/hover
   color rules at matching specificity, which was leaving the pill text its
   default (dark) color on hover instead of switching to white. */
.ibariki-calculator .ibariki-category-nav__btn:hover,
.ibariki-calculator .ibariki-category-nav__btn:focus-visible {
	background: var(--ibariki-color-primary);
	border-color: var(--ibariki-color-primary);
	color: var(--ibariki-color-primary-contrast);
}

/* Scoped under .ibariki-calculator (not just .ibariki-category-nav__toggle
   alone): the theme's reset.css styles bare button/[type="button"] elements
   at the same specificity as a single class selector, so a plain
   `.ibariki-category-nav__toggle{...}` rule can lose that tie depending on
   stylesheet load order. The ancestor prefix reliably wins regardless. */
.ibariki-calculator .ibariki-category-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid var(--ibariki-color-primary);
	background: transparent;
	color: var(--ibariki-color-primary);
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.ibariki-calculator .ibariki-category-nav__toggle:hover,
.ibariki-calculator .ibariki-category-nav__toggle:focus-visible {
	background: var(--ibariki-color-primary);
	color: var(--ibariki-color-primary-contrast);
}

.ibariki-calculator .ibariki-category-nav__toggle.is-active {
	background: var(--ibariki-color-primary);
	color: var(--ibariki-color-primary-contrast);
}

/* Tablet and mobile: a shorter sticky bar that leaves more room for the
   products below it. The pill group and the toggle button share a single
   row — the links scroll horizontally within their own space instead of
   wrapping onto a second (or third) line and growing the bar taller. */
@media (max-width: 1024px) {
	.ibariki-category-nav {
		flex-wrap: nowrap;
		gap: 8px;
		padding: 8px 0;
	}

	.ibariki-category-nav__links {
		flex: 1 1 auto;
		flex-wrap: nowrap;
		overflow-x: auto;
		min-width: 0;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ibariki-category-nav__links::-webkit-scrollbar {
		display: none;
	}

	.ibariki-category-nav__btn {
		flex: 0 0 auto;
		white-space: nowrap;
		padding: 6px 14px;
		font-size: 0.82rem;
	}

	.ibariki-calculator .ibariki-category-nav__toggle {
		flex: 0 0 auto;
		padding: 6px 14px;
		font-size: 0.82rem;
	}
}

/* Hidden by default — only swapped in for the pills on mobile below. */
.ibariki-category-nav__select {
	display: none;
}

/* Mobile: a dropdown reads better here than a scrolling row of pills,
   especially once there are more than a handful of categories. */
@media (max-width: 782px) {
	.ibariki-category-nav__links {
		display: none;
	}

	.ibariki-calculator .ibariki-category-nav__select {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		padding: 8px 32px 8px 14px;
		border-radius: 999px;
		border: 1px solid var(--ibariki-color-border);
		background: var(--ibariki-color-surface);
		color: var(--ibariki-color-text);
		font-weight: 600;
		font-size: 0.85rem;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 12px center;
	}
}

/* The base .ibariki-calculator__products rule makes this a CSS grid (for the
   flat layout's auto-fill card grid) — in the shop layout its direct
   children are whole <section> blocks that need to stack top to bottom
   instead, so this modifier switches it back to normal block flow. Each
   section lays out its own cards in a grid via .ibariki-category-section__grid. */
.ibariki-calculator__products--grouped {
	display: block;
}

.ibariki-category-section {
	margin-bottom: 56px;
	/* Clears the sticky category-nav bar above when jumped to via anchor link. */
	scroll-margin-top: 74px;
}

.ibariki-category-section:last-child {
	margin-bottom: 0;
}

/* A filled, bordered band rather than a thin underline — scrolling past it
   needs to read as "I've left one category and entered another", not just
   a slightly different heading in the same continuous list. */
.ibariki-category-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 40px;
	padding: 14px 20px;
	background: var(--ibariki-color-surface);
	border-left: 5px solid var(--ibariki-color-primary);
	border-bottom: 5px solid var(--ibariki-color-primary);
	border-radius: var(--ibariki-radius);
}

.ibariki-category-section__title {
	font-family: var(--ibariki-font-heading);
	font-size: 1.8rem !important;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.ibariki-category-section__count {
	flex: 0 0 auto;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ibariki-color-muted);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.ibariki-category-section__header {
		flex-wrap: wrap;
		padding: 12px 16px;
	}

	.ibariki-category-section__title {
		font-size: 1.3rem;
	}
}

.ibariki-category-section__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.ibariki-category-section__load-more {
	text-align: center;
	margin-top: 24px;
}

.ibariki-calculator .ibariki-load-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 28px;
	border-radius: var(--ibariki-radius);
	border: 1px solid var(--ibariki-color-border);
	background: transparent;
	color: var(--ibariki-color-text);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ibariki-calculator .ibariki-load-more-btn:hover {
	background: #000000;
	color: #ffffff;
	border-color: #000000;
}

.ibariki-product-card {
	border: 1px solid var(--ibariki-color-border);
	border-radius: var(--ibariki-radius);
	background: var(--ibariki-color-bg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s ease;
}

.ibariki-product-card--selected {
	box-shadow: 0 0 0 2px var(--ibariki-color-primary);
}

.ibariki-product-card__image-wrap {
	position: relative;
}

.ibariki-product-card__image {
	width: 100%;
	aspect-ratio: 5 / 5;
	object-fit: contain;
	background: var(--ibariki-color-surface);
	padding: 14px;
	display: block;
}

/* Overlaid on the image itself (top-left corner) instead of sitting in the
   card body below — one less line of text competing with the title/price
   for space now that cards are smaller. */
.ibariki-product-card__format {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #ffffff;
	background: #22c55e;
	border: none;
	border-radius: 999px;
	padding: 3px 10px;
	width: fit-content;
	box-shadow: 0 0 10px rgba(34, 197, 94, 0.7), 0 0 3px rgba(34, 197, 94, 0.9);
}

.ibariki-product-card__body {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

/* Ancestor-scoped like every other text rule in this file that collides
   with the theme's own link color — a bare `.ibariki-product-card__name`
   was losing its dark color to the theme's default link-green now that the
   title is an <a>. */
.ibariki-calculator .ibariki-product-card__name {
	font-weight: 600;
	margin: 0;
	/* font-size: 1.125rem; */
	color: var(--ibariki-color-text);
	text-decoration: none;
	display: block;
}

.ibariki-calculator a.ibariki-product-card__name:hover {
	color: var(--ibariki-color-primary);
	text-decoration: underline;
}

.ibariki-product-card__status {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ibariki-color-error);
}

.ibariki-product-card__price {
	margin: 2px 0 0;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--ibariki-color-primary);
}

.ibariki-product-card__price-was {
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--ibariki-color-muted);
	text-decoration: line-through;
}

.ibariki-product-card__price-unit {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--ibariki-color-muted);
}

.ibariki-product-card__footer {
	margin-top: auto;
	padding-top: 8px;
}

.ibariki-product-card__error {
	font-size: 0.78rem;
	color: var(--ibariki-color-error);
	min-height: 1em;
}

/* Every rule below that styles a <button> is scoped under .ibariki-calculator
   — the theme's reset.css styles bare button/[type="button"] elements at the
   same specificity as a single class selector, so unscoped rules like
   `.ibariki-btn{...}` alone can lose that tie depending on stylesheet load
   order. The ancestor prefix reliably wins regardless of order. */
.ibariki-calculator .ibariki-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: none;
	border-radius: var(--ibariki-radius);
	padding: 10px 16px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	background: var(--ibariki-color-primary);
	color: var(--ibariki-color-primary-contrast);
	width: 100%;
}

.ibariki-calculator .ibariki-btn:hover:not(:disabled) {
	background: #000000;
	color: #ffffff;
}

.ibariki-calculator .ibariki-btn:disabled {
	background: var(--ibariki-color-border);
	color: var(--ibariki-color-muted);
	cursor: not-allowed;
}

.ibariki-calculator .ibariki-btn--secondary {
	background: transparent;
	color: var(--ibariki-color-text);
	border: 1px solid var(--ibariki-color-border);
}

.ibariki-calculator .ibariki-btn--secondary:hover:not(:disabled) {
	background: #000000;
	color: #ffffff;
	border-color: #000000;
}

/* Selected-state control row: quantity stepper + a small round remove
   button side by side, so a selected card takes up exactly the same
   height as an unselected one (just an "Add to Package" button) instead of
   growing a second full-width button underneath. */
.ibariki-product-card__controls {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.ibariki-product-card__controls .ibariki-qty-stepper {
	flex: 1;
	min-width: 0;
}

.ibariki-calculator .ibariki-product-card__remove {
	flex: 0 0 auto;
	width: 40px;
	border: 1px solid var(--ibariki-color-error);
	border-radius: 50%;
	background: #ffffff;
	color: var(--ibariki-color-error);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ibariki-calculator .ibariki-product-card__remove:hover {
	background: var(--ibariki-color-error);
	border-color: var(--ibariki-color-error);
	color: #ffffff;
}

.ibariki-calculator .ibariki-qty-stepper {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--ibariki-color-dark-border);
	border-radius: var(--ibariki-radius);
	overflow: hidden;
	background: var(--ibariki-color-dark-surface);
}

.ibariki-calculator .ibariki-qty-stepper__btn {
	background: transparent;
	border: none;
	width: 36px;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	color: var(--ibariki-color-dark-text);
}

.ibariki-qty-stepper__btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.1);
}

.ibariki-qty-stepper__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.ibariki-calculator .ibariki-qty-stepper__value {
	flex: 1;
	border: none;
	text-align: center;
	font-weight: 600;
	width: 100%;
	background: transparent;
	color: var(--ibariki-color-dark-text);
	cursor: default;
	/* Quantity changes only happen via the +/- buttons. */
	-moz-appearance: textfield;
	appearance: textfield;
}

.ibariki-qty-stepper__value::-webkit-outer-spin-button,
.ibariki-qty-stepper__value::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ibariki-calculator__summary {
	position: sticky;
	/* Matches .ibariki-category-section's scroll-margin-top — on the shop
	   layout the category nav bar is also sticky at top:0, so a smaller
	   offset here let it sit behind the nav and hide the first cart-review
	   row's product name. */
	top: 74px;
	/* Caps the panel to the visible viewport and scrolls its own content —
	   without this, a tall panel (several selected products + package
	   details) just overflowed past the bottom of the screen, and the only
	   way to reach that part was to scroll the whole page past every
	   product first. */
	max-height: calc(100vh - 98px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--ibariki-color-dark-border) transparent;
	border: 1px solid var(--ibariki-color-dark-border);
	border-radius: var(--ibariki-radius);
	background: var(--ibariki-color-dark-surface);
	color: var(--ibariki-color-dark-text);
	padding: 20px;
}

.ibariki-calculator__summary::-webkit-scrollbar {
	width: 6px;
}

.ibariki-calculator__summary::-webkit-scrollbar-thumb {
	background: var(--ibariki-color-dark-border);
	border-radius: 999px;
}

.ibariki-summary__row {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	font-size: 0.92rem;
}

.ibariki-summary__row--total {
	border-top: 1px solid var(--ibariki-color-dark-border);
	margin-top: 8px;
	padding-top: 12px;
	font-size: 1.1rem;
	font-weight: 700;
}

.ibariki-summary__savings {
	color: var(--ibariki-color-dark-success);
}

.ibariki-summary__package {
	font-family: var(--ibariki-font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--ibariki-color-dark-success);
}

.ibariki-summary__progress {
	background: var(--ibariki-color-dark-surface-alt);
	border: 1px solid var(--ibariki-color-dark-border);
	border-radius: var(--ibariki-radius);
	padding: 10px 12px;
	font-size: 0.85rem;
	margin: 12px 0;
	color: var(--ibariki-color-dark-text);
}

.ibariki-summary__gifts {
	margin: 12px 0;
	padding: 12px;
	background: var(--ibariki-color-dark-surface-alt);
	border-radius: var(--ibariki-radius);
	border: 1px dashed var(--ibariki-color-dark-border);
	color: var(--ibariki-color-dark-text);
}

.ibariki-calculator .ibariki-summary__gifts h4 {
	margin: 0 0 6px;
	font-size: 0.9rem;
	color: var(--ibariki-color-dark-success);
}

.ibariki-summary__gifts ul {
	margin: 0;
	padding-left: 18px;
	font-size: 0.85rem;
}

.ibariki-summary__disclaimer {
	font-size: 0.75rem;
	color: var(--ibariki-color-dark-muted);
	margin-top: 12px;
}

.ibariki-summary__cta {
	margin-top: 16px;
}

/* Cart review — the selected-products list inside the summary panel,
   styled like a checkout cart review table. */
.ibariki-cart-review {
	margin: 12px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ibariki-cart-review__row {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ibariki-color-dark-border);
}

.ibariki-cart-review__row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.ibariki-cart-review__image {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: calc(var(--ibariki-radius) / 2);
	background: rgba(255, 255, 255, 0.08);
}

.ibariki-cart-review__info {
	min-width: 0;
}

/* Ancestor-scoped like the other text rules in this file: the Elementor
   Kit's global `.elementor-kit-174 p{margin-block-end:1em}` rule outranks a
   bare single-class selector, so these three <p>s were keeping a ~1em gap
   between them no matter what margin this file set — pushing "name" up
   behind the sticky category nav in the process. */
.ibariki-calculator .ibariki-cart-review__name {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ibariki-color-dark-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Tightened so name, qty × price, and total read as one compact block
   instead of three loosely-spaced lines. */
.ibariki-calculator .ibariki-cart-review__meta {
	margin: 1px 0 0;
	font-size: 0.78rem;
	color: var(--ibariki-color-dark-muted);
}

.ibariki-calculator .ibariki-cart-review__total {
	margin: 1px 0 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ibariki-color-dark-text);
	white-space: nowrap;
}

.ibariki-calculator .ibariki-cart-review__remove {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #ffffff;
	border: none;
	color: var(--ibariki-color-error);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
}

.ibariki-calculator .ibariki-cart-review__remove:hover {
	background: var(--ibariki-color-error);
	color: #ffffff;
}

.ibariki-summary__error {
	color: var(--ibariki-color-error);
	font-size: 0.85rem;
	margin: 8px 0 0;
}

/* Close button — only shown when the summary is open as a mobile popup.
   Ancestor-scoped like the other rules in this file: a bare
   `.ibariki-summary__close{display:none}` was losing to the theme's own
   button reset (display + a stray pink border) on desktop, leaving the
   close button visibly stuck in the corner of the summary panel. */
.ibariki-calculator .ibariki-summary__close {
	display: none;
}

/* Mobile bottom bar (collapsed summary) — hidden on desktop. */
.ibariki-mobile-summary-bar {
	display: none;
}

.ibariki-summary-backdrop {
	display: none;
}

/* Responsive: collapse to single column; the full summary panel is hidden
   by default and instead opens as a popup over a compact bottom bar. */
@media (max-width: 782px) {
	.ibariki-calculator__layout {
		grid-template-columns: 1fr;
		padding-bottom: 220px;
	}

	.ibariki-calculator__summary {
		display: none;
	}

	.ibariki-calculator__summary.is-open {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		border-radius: var(--ibariki-radius) var(--ibariki-radius) 0 0;
		z-index: 100000;
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
		max-height: 85vh;
		overflow-y: auto;
	}

	.ibariki-calculator .ibariki-summary__close {
		display: block;
		position: absolute;
		top: 10px;
		right: 12px;
		background: transparent;
		border: none;
		color: var(--ibariki-color-dark-text);
		font-size: 1.4rem;
		line-height: 1;
		cursor: pointer;
		padding: 4px;
	}

	.ibariki-summary-backdrop:not([hidden]) {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 99999;
	}

	.ibariki-mobile-summary-bar {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--ibariki-color-dark-surface);
		color: var(--ibariki-color-dark-text);
		padding: 14px 16px;
		z-index: 9999;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
	}

	.ibariki-mobile-summary-bar__content {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.ibariki-mobile-summary-bar__heading {
		margin: 0 0 2px;
		font-family: var(--ibariki-font-heading);
		font-size: 1rem;
		font-weight: 700;
	}

	.ibariki-mobile-summary-bar__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		font-size: 0.88rem;
	}

	.ibariki-mobile-summary-bar__row span {
		color: var(--ibariki-color-dark-muted);
	}

	.ibariki-mobile-summary-bar__row strong {
		font-weight: 700;
	}

	.ibariki-mobile-summary-bar [data-role="mobile-bar-toggle"] {
		width: 100%;
		padding: 10px 14px;
	}
}

.ibariki-calculator :focus-visible {
	outline: 2px solid var(--ibariki-color-primary);
	outline-offset: 2px;
}