/**
 * WGP Vendor Cart — vendor blocks.
 *
 * No colours and no components of its own: everything inherits the theme's body
 * type. The only decoration is a hairline separating one vendor from the next,
 * and a deliberate spacing asymmetry so each total reads as the end of the
 * block above it rather than as something floating between two vendors.
 */

.wgp-group {
	line-height: 1.45;
}

.wgp-group--header {
	padding: 22px 0 10px;
	border-top: 1px solid rgba(128, 128, 128, .3);
}

.wgp-group__title {
	/* calc keeps it exactly two pixels up from whatever the theme sets around
	   it, rather than pinning a size the theme would have to fight. */
	font-size: calc(1em + 2px);
	font-weight: 600;
}

.wgp-group--footer {
	padding: 4px 0 24px;
}

/* The amount carries the block; the delivery status and the nudge sit behind it. */
.wgp-group__delivery,
.wgp-group__progress {
	opacity: .7;
}

.wgp-group__progress {
	font-size: .88em;
}

/**
 * Colour, on the two screens where the customer can still act on it. The
 * checkout and the finished order state a fact and get no accent.
 *
 * Both values are the theme's own: #ff001e is the mini-cart subtotal, #10b64e
 * the green it uses for delivery being free.
 */
.wgp-group--cart .wgp-group__total .woocommerce-Price-amount,
.wgp-group--mini-cart .wgp-group__total .woocommerce-Price-amount {
	color: #ff001e;
}

.wgp-group--cart .wgp-group__progress .wgp-amount,
.wgp-group--mini-cart .wgp-group__progress .wgp-amount {
	color: #10b64e;
	opacity: 1;
}

/* Underlined rather than recoloured, so it reads as a link without bringing a
   palette into an otherwise plain block. */
.wgp-group__vendor-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wgp-group__vendor-link:hover,
.wgp-group__vendor-link:focus {
	color: inherit;
	text-decoration: none;
}

/**
 * The first vendor drops its own separator — the table head already draws a
 * line there — but keeps the same breathing room under it as every vendor
 * below, so the blocks read as a series rather than one cramped and the rest
 * spaced out.
 */
.wgp-cart-table .wgp-group-row--header:first-child .wgp-group--header,
.wgp-review-table .wgp-group-row--header:first-child .wgp-group--header,
.wgp-order-table .wgp-group-row--header:first-child .wgp-group--header {
	border-top: 0;
}

/* The mini-cart has no line above the first heading, so it stays tight against
   the panel title where vertical space is scarce. */
.wgp-mini-list .wgp-mini-heading:first-child .wgp-group--header {
	border-top: 0;
	padding-top: 0;
}

/**
 * The heading and total cells carry no table chrome of their own.
 *
 * Only the vertical padding goes: the horizontal padding is left to the theme,
 * so the heading, the products and the total all share one left edge whatever
 * the table sets — and it differs between cart, checkout and order details.
 */
.wgp-group-row > td {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border: 0 !important;
	background: none !important;
}

/**
 * On narrow screens WooCommerce turns the cart into stacked rows: every cell is
 * right-aligned and prefixed with `content: attr(data-title) ": "`. These cells
 * are a heading and a total, not a labelled field — without a data-title they
 * printed a stray colon and drifted to the right edge.
 */
.wgp-group-row > td {
	text-align: left !important;
}

.wgp-group-row > td::before {
	content: "" !important;
	display: none !important;
}

/**
 * Every amount on these screens sits against the right edge — the item totals
 * and the panel's own SUBTOTAL alike — so the vendor total and its delivery
 * status line up there too. The heading stays left, the way a table keeps
 * labels left and values right.
 */
.wgp-group--footer {
	text-align: right;
}

/**
 * One rule per vendor, not four.
 *
 * The theme gives every table row its own border, which on top of the group
 * separator turned each block into a stack of lines. A vendor's heading, its
 * products and its total are one thing, so the rules inside the block go and
 * only the separator between vendors stays.
 */
.wgp-group-row--header + tr > td,
.wgp-group-row--header + tr > th {
	border-top: 0 !important;
}

.wgp-item--last > td,
.wgp-item--last > th {
	border-bottom: 0 !important;
}

/* Same job on the order details table, where the items come from WooCommerce's
   own template and cannot be marked. Browsers without :has() just keep one
   extra rule there. */
tr:has( + .wgp-group-row--footer ) > td,
tr:has( + .wgp-group-row--footer ) > th {
	border-bottom: 0 !important;
}

/**
 * The checkout hangs its rules on the tr instead of the td:
 *
 *   .woocommerce-checkout-review-order-table th,
 *   .woocommerce-checkout-review-order-table td { border: none }
 *   .woocommerce-checkout-review-order-table tr { border-bottom: 1px solid }
 *
 * so the cell-level rules above cannot reach them.
 */
.woocommerce-checkout-review-order-table tr.wgp-group-row--header,
.woocommerce-checkout-review-order-table tr.wgp-group-row--footer,
.woocommerce-checkout-review-order-table tr.wgp-item--last {
	border-bottom: 0 !important;
}

/* The cart makes every row a bordered block with a 30px margin, which turns the
   heading and total into cards of their own. They are labels, not products. */
.woocommerce-cart-form .shop_table tbody tr.wgp-group-row {
	border: 0 !important;
	margin: 0 !important;
}

/* Mini-cart list items are plain blocks, not products. */
.wgp-mini-list .wgp-mini-heading,
.wgp-mini-list .wgp-mini-footer {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

/**
 * Reclaim the dead strip above the SUBTOTAL bar.
 *
 * The theme sizes the scrollable list as calc(100% - 350px), which allowed for
 * its own 38px delivery-notice band sitting above it. This template drops that
 * band, so without this the list stops 38px short of the summary and clips the
 * last product. Measured on the live panel: summary 200px, list offset 115px
 * once the band is gone.
 *
 * The theme declares that height at (1 ID, 3 classes), so this selector has to
 * carry one more class to win. This value is only the first-paint fallback:
 * assets/wgp.js measures the summary and corrects the height, so changes to the
 * summary's padding do not have to be mirrored here.
 */
.aishe-mini-cart-content .widget_shopping_cart_content #aishe-cart-panel.wgp-mini-panel .aishe-cart-panel-list-wrap {
	height: calc(100% - 315px);
}

/**
 * Trim the summary bar.
 *
 * The theme gives it 22.5px of vertical padding in three places, which on a
 * phone eats most of the panel. These are scoped to this plugin's panel, so the
 * theme's own mini-cart is untouched. assets/wgp.js re-measures afterwards, so
 * the product list simply grows into whatever is freed here.
 */
.aishe-mini-cart-content .widget_shopping_cart_content #aishe-cart-panel.wgp-mini-panel .aishe-cart-panel-summary .total-cart {
	padding: 14px 30px;
}

/**
 * The summary bar floats over the scrolling list, so it needs to be opaque.
 * The theme leaves it transparent; the site's Customizer CSS used to patch that
 * and no longer does, so the plugin owns it.
 */
.aishe-mini-cart-content .widget_shopping_cart_content #aishe-cart-panel.wgp-mini-panel .aishe-cart-panel-summary {
	background-color: #fff;
}

/* The theme's delivery-notice slot is kept only as an AJAX fragment target. */
.jws_shipping_wap:empty {
	display: none;
}

/**
 * Mobile cart: group by proximity, separate by the rule.
 *
 * Below 767px the theme turns every product row into a card with 30px of margin
 * above and below, so a heading sat as far from its own product as from the
 * next vendor's — nothing said which block owned what. Pull each vendor's parts
 * together and let the space, and the line, fall between vendors instead.
 */
@media (max-width: 767px) {
	.woocommerce-cart-form .shop_table tbody tr.wgp-item {
		margin-top: 12px !important;
		margin-bottom: 12px !important;
	}

	.wgp-group--header {
		padding-top: 34px;
	}
}