/*
 * 050 Shop Look - shop and product pages in the homepage's style.
 * Colours, fonts, radii and shadows are taken from the Elementor homepage.
 * Everything is scoped to body.dng-shop (added by ../050-shop-look.php).
 */

body.dng-shop {
	--sl-navy: #003c78;
	--sl-ink: #001931;
	--sl-orange: #f08f1f;
	--sl-orange-dark: #d97a0b;
	--sl-mist: #d6dfe9;
	--sl-paper: #eef3f8;
	--sl-text: #535353;
	--sl-muted: #6b7785;
	--sl-line: #dbe3ec;
	--sl-radius: 12px;
	--sl-shadow: 0 0 26px 4px rgba(0, 0, 0, 0.07);
	--sl-shadow-hover: 0 12px 34px 4px rgba(0, 25, 49, 0.14);
	--sl-head: "Inter", "Roboto", Arial, sans-serif;
	--sl-body: "Roboto", Arial, sans-serif;
	--sl-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23001931' stroke-width='2'/%3E%3C/svg%3E");
}

/* ---------- Page frame ---------- */

body.dng-shop #primary {
	padding-top: 0;
}
body.dng-shop #primary main#main { /* beats the theme's body.right-sidebar #primary #main (66%) */
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 20px 72px;
	float: none;
	font-family: var(--sl-body);
	color: var(--sl-text);
}
/* The theme sets its own font on text elements; the homepage uses Roboto. */
body.dng-shop main#main :is(p, li, td, th, dd, dt, label, blockquote, input, select, textarea) {
	font-family: var(--sl-body);
}
body.dng-shop main#main h1,
body.dng-shop main#main h2,
body.dng-shop main#main h3,
body.dng-shop main#main h4 {
	font-family: var(--sl-head);
	color: var(--sl-ink);
}
body.dng-shop main#main a {
	color: var(--sl-navy);
}

body.dng-shop .woocommerce-breadcrumb {
	margin: 0 0 22px;
	font: 400 13px/1.5 var(--sl-body);
	color: var(--sl-muted);
}
body.dng-shop .woocommerce-breadcrumb a {
	color: var(--sl-muted) !important;
	text-decoration: none;
}
body.dng-shop .woocommerce-breadcrumb a:hover {
	color: var(--sl-navy) !important;
}

/* ---------- Buttons (shared) ---------- */

body.dng-shop main#main .button,
body.dng-shop main#main button.button,
body.dng-shop main#main a.button {
	display: inline-block;
	padding: 12px 26px;
	border: 0;
	border-radius: 100px;
	background: var(--sl-orange);
	color: #fff !important;
	font: 600 15px/1.2 var(--sl-head);
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.12);
	transition: background-color 0.15s, transform 0.15s;
}
body.dng-shop main#main .button:hover,
body.dng-shop main#main .button:focus-visible {
	background: var(--sl-orange-dark);
	color: #fff !important;
}
body.dng-shop main#main .button:focus-visible {
	outline: 3px solid var(--sl-mist);
	outline-offset: 2px;
}
body.dng-shop main#main .button.disabled,
body.dng-shop main#main .button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---------- Shop header ---------- */

body.dng-shop .woocommerce-products-header {
	margin: 0 0 8px;
	padding: 48px 56px;
	border-radius: 16px;
	background: var(--sl-paper);
}
body.dng-shop .woocommerce-products-header__title.page-title {
	display: inline-block;
	margin: 0;
	padding: 6px 14px;
	border-radius: 100px;
	background: var(--sl-mist);
	font: 500 14px/1.2 var(--sl-head) !important;
	color: var(--sl-ink);
}
/* The heading is typed in capitals with inline styles in the Shop page. */
body.dng-shop .woocommerce-products-header .page-description h3 {
	margin: 16px 0 14px !important;
	font-family: var(--sl-head) !important;
	font-size: 40px !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	color: var(--sl-ink) !important;
	text-align: left !important;
	text-transform: lowercase;
}
body.dng-shop .woocommerce-products-header .page-description h3::first-letter {
	text-transform: uppercase;
}
body.dng-shop .woocommerce-products-header .page-description p {
	max-width: 820px;
	margin: 0;
	font: 400 17px/1.65 var(--sl-body);
	color: var(--sl-text);
}
body.dng-shop .woocommerce-products-header .page-description em {
	font-style: normal;
}
body.dng-shop .woocommerce-products-header .page-description a {
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* ---------- Toolbar ---------- */

body.dng-shop .woocommerce-result-count {
	margin: 34px 0 22px;
	font: 400 14px/42px var(--sl-body);
	color: var(--sl-muted);
}
body.dng-shop .woocommerce-ordering {
	margin: 34px 0 22px;
}
body.dng-shop .woocommerce-ordering select,
body.dng-shop table.variations select {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	height: 44px;
	padding: 0 42px 0 16px;
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	background: #fff var(--sl-chevron) no-repeat right 16px center;
	font: 400 15px/1.2 var(--sl-body);
	color: var(--sl-ink);
	cursor: pointer;
}
body.dng-shop .woocommerce-ordering select:focus,
body.dng-shop table.variations select:focus {
	border-color: var(--sl-navy);
	outline: 3px solid var(--sl-mist);
	outline-offset: 0;
}

/* ---------- Product grid (shop, related, upsells) ---------- */

body.dng-shop ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 28px;
	clear: both;
	margin: 0 0 40px !important;
	padding: 0 !important;
}
body.dng-shop ul.products::before,
body.dng-shop ul.products::after {
	display: none !important; /* WooCommerce's clearfix would become grid cells */
}
body.dng-shop ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 0 22px !important;
	overflow: hidden;
	border-radius: var(--sl-radius);
	background: #fff;
	box-shadow: var(--sl-shadow);
	text-align: left;
	transition: transform 0.2s, box-shadow 0.2s;
}
body.dng-shop ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--sl-shadow-hover);
}
body.dng-shop ul.products li.product a.woocommerce-loop-product__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}
body.dng-shop ul.products li.product a img {
	display: block;
	width: 100% !important;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 0 0 18px !important;
	border-bottom: 1px solid var(--sl-line);
	border-radius: 0;
	box-shadow: none;
	background: #fff;
	object-fit: contain;
}
body.dng-shop ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 10px;
	padding: 0 22px !important;
	font: 600 18px/1.35 var(--sl-head) !important;
	color: var(--sl-ink);
}
body.dng-shop ul.products li.product .price {
	display: block;
	margin: auto 0 0 !important;
	padding: 0 22px;
	font: 700 19px/1.4 var(--sl-head);
	color: var(--sl-navy) !important;
}
body.dng-shop ul.products li.product .button {
	align-self: flex-start;
	margin: 16px 22px 0 !important;
}
body.dng-shop ul.products li.product .added_to_cart {
	margin: 10px 22px 0;
	font: 600 14px/1.3 var(--sl-head);
}

/* Prices everywhere: sale, ranges, subscription terms. */
body.dng-shop .price del {
	opacity: 0.6;
	font-weight: 400;
}
body.dng-shop .price ins {
	text-decoration: none;
}
body.dng-shop .price .subscription-details {
	font: 400 14px/1.4 var(--sl-body);
	color: var(--sl-muted);
}
body.dng-shop span.onsale {
	top: 14px !important;
	left: 14px !important;
	right: auto !important;
	min-width: 0;
	min-height: 0;
	margin: 0 !important;
	padding: 5px 12px;
	border-radius: 100px;
	background: var(--sl-orange);
	font: 600 13px/1.3 var(--sl-head);
	color: #fff;
}

body.dng-shop nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: 8px;
	border: 0 !important;
}
body.dng-shop nav.woocommerce-pagination ul.page-numbers li {
	border: 0 !important;
}
body.dng-shop nav.woocommerce-pagination ul.page-numbers li .page-numbers {
	min-width: 40px;
	padding: 10px 12px;
	border-radius: 100px;
	background: var(--sl-paper);
	font: 600 15px/20px var(--sl-head);
	color: var(--sl-ink);
}
body.dng-shop nav.woocommerce-pagination ul.page-numbers li .page-numbers.current {
	background: var(--sl-navy);
	color: #fff;
}

/* ---------- Single product ---------- */

body.dng-shop div.product div.images.woocommerce-product-gallery {
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--sl-shadow);
}
body.dng-shop div.product div.images img {
	border-radius: 0;
	box-shadow: none;
}
body.dng-shop div.product div.images .flex-control-thumbs {
	padding: 10px;
}

body.dng-shop div.product .product_title {
	margin: 0 0 12px;
	font: 600 38px/1.15 var(--sl-head) !important;
	color: var(--sl-ink);
}
body.dng-shop div.product .summary > p.price,
body.dng-shop div.product .summary > span.price {
	margin: 0 0 18px;
	font: 700 28px/1.3 var(--sl-head);
	color: var(--sl-navy) !important;
}
body.dng-shop div.product .woocommerce-product-details__short-description {
	font: 400 17px/1.65 var(--sl-body);
	color: var(--sl-text);
}

body.dng-shop div.product form.cart {
	margin: 24px 0 !important;
	padding: 24px;
	border-radius: 14px;
	background: var(--sl-paper);
}
body.dng-shop div.product form.cart::before,
body.dng-shop div.product form.cart::after {
	display: none; /* clearfix; the form is a flex row for simple products */
}
body.dng-shop div.product form.cart:not(.variations_form):not(.grouped_form),
body.dng-shop div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
body.dng-shop div.product form.cart div.quantity {
	float: none;
	margin: 0 !important;
}
body.dng-shop div.product form.cart .qty {
	box-sizing: border-box;
	width: 76px;
	height: 50px;
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	background: #fff;
	font: 400 16px/1 var(--sl-body);
	color: var(--sl-ink);
	text-align: center;
}
body.dng-shop div.product form.cart .single_add_to_cart_button {
	float: none;
	height: 50px;
	padding: 0 38px;
	background: var(--sl-orange) !important;
	font-size: 16px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
body.dng-shop div.product form.cart .single_add_to_cart_button:not(.disabled):not(:disabled):hover {
	background: var(--sl-orange-dark) !important;
}

/* Variation pickers: one labelled field per row. */
body.dng-shop table.variations,
body.dng-shop table.variations tbody,
body.dng-shop table.variations tr,
body.dng-shop table.variations th,
body.dng-shop table.variations td {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}
body.dng-shop table.variations {
	margin: 0 0 6px !important;
}
body.dng-shop table.variations tr + tr {
	margin-top: 16px;
}
body.dng-shop table.variations .label {
	padding: 0 0 6px;
}
body.dng-shop table.variations .label label {
	font: 600 14px/1.3 var(--sl-head);
	color: var(--sl-ink);
}
body.dng-shop table.variations select {
	width: 100% !important;
	min-width: 0;
	height: 48px;
	margin: 0 !important;
}
body.dng-shop table.variations .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font: 500 13px/1.3 var(--sl-body);
}
body.dng-shop div.product .single_variation_wrap .woocommerce-variation {
	margin: 14px 0 0;
}
body.dng-shop div.product .single_variation_wrap .woocommerce-variation-price .price {
	font: 700 22px/1.3 var(--sl-head);
	color: var(--sl-navy);
}
body.dng-shop div.product .single_variation_wrap .woocommerce-variation-add-to-cart {
	margin-top: 16px;
}

/* Grouped products (e.g. "CTP Enrollment full pay"). */
body.dng-shop div.product form.grouped_form table.group_table {
	width: 100%;
	margin: 0 0 18px;
	border: 0;
	border-collapse: collapse;
}
body.dng-shop div.product form.grouped_form table.group_table td {
	padding: 12px 8px;
	border: 0;
	border-bottom: 1px solid var(--sl-line);
	background: none;
	vertical-align: middle;
}
body.dng-shop div.product form.grouped_form table.group_table label a {
	font: 600 15px/1.4 var(--sl-head);
	color: var(--sl-ink);
	text-decoration: none;
}
body.dng-shop div.product form.grouped_form table.group_table .qty {
	width: 64px;
	height: 42px;
}
body.dng-shop div.product form.grouped_form table.group_table .button {
	padding: 10px 18px;
	font-size: 14px;
	white-space: nowrap;
}

body.dng-shop div.product .product_meta {
	padding-top: 16px;
	border-top: 1px solid var(--sl-line);
	font: 400 13px/1.7 var(--sl-body);
	color: var(--sl-muted);
}
body.dng-shop div.product .product_meta a {
	text-decoration: none;
}

/* Tabs: pills over a white card. */
body.dng-shop div.product .woocommerce-tabs {
	clear: both;
	padding-top: 48px;
}
body.dng-shop div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible;
	border: 0;
}
body.dng-shop div.product .woocommerce-tabs ul.tabs::before,
body.dng-shop div.product .woocommerce-tabs ul.tabs::after,
body.dng-shop div.product .woocommerce-tabs ul.tabs li::before,
body.dng-shop div.product .woocommerce-tabs ul.tabs li::after {
	display: none !important;
}
body.dng-shop div.product .woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 100px !important;
	background: transparent !important;
}
body.dng-shop div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 10px 22px !important;
	border-radius: 100px;
	background: var(--sl-paper);
	font: 600 15px/1.3 var(--sl-head) !important;
	color: var(--sl-ink) !important;
	text-decoration: none;
}
body.dng-shop div.product .woocommerce-tabs ul.tabs li.active a {
	background: var(--sl-navy);
	color: #fff !important;
}
body.dng-shop div.product .woocommerce-tabs .panel {
	margin: 18px 0 0 !important;
	padding: 36px 40px !important;
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--sl-shadow);
	font: 400 16px/1.7 var(--sl-body);
	color: var(--sl-text);
}
body.dng-shop div.product .woocommerce-tabs .panel > h2:first-child {
	margin: 0 0 18px;
	font: 600 26px/1.25 var(--sl-head);
}
body.dng-shop div.product .woocommerce-tabs .panel table.shop_attributes {
	border: 0;
}
body.dng-shop div.product .woocommerce-tabs .panel table.shop_attributes th,
body.dng-shop div.product .woocommerce-tabs .panel table.shop_attributes td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--sl-line);
	background: none;
	font-style: normal;
}
body.dng-shop div.product .woocommerce-tabs .panel table.shop_attributes th {
	font: 600 14px/1.5 var(--sl-head);
	color: var(--sl-ink);
}

body.dng-shop section.related,
body.dng-shop section.upsells,
body.dng-shop .cart-collaterals .cross-sells {
	clear: both;
	padding-top: 56px;
}
body.dng-shop section.related > h2,
body.dng-shop section.upsells > h2,
body.dng-shop main#main .cross-sells > h2 {
	margin: 0 0 24px;
	font: 600 30px/1.25 var(--sl-head);
}

/* ---------- Notices ("added to cart", restrictions) ---------- */

body.dng-shop main#main .woocommerce-message,
body.dng-shop main#main .woocommerce-info,
body.dng-shop main#main .woocommerce-error {
	margin: 0 0 24px;
	padding: 18px 22px 18px 54px;
	border: 0;
	border-left: 4px solid var(--sl-navy);
	border-radius: 10px;
	background: #fff;
	box-shadow: var(--sl-shadow);
	font: 400 15px/1.5 var(--sl-body);
	color: var(--sl-ink);
}
body.dng-shop main#main .woocommerce-error {
	border-left-color: #c0392b;
}
body.dng-shop main#main .woocommerce-message::before,
body.dng-shop main#main .woocommerce-info::before {
	top: 18px;
	left: 22px;
	color: var(--sl-navy);
}
body.dng-shop main#main .woocommerce-message .button,
body.dng-shop main#main .woocommerce-info .button {
	float: right;
	margin: -4px 0 0 16px;
	padding: 10px 20px;
}

/* ---------- Cart ---------- */

/* The Cart page sits in a WPBakery row of 2-8-2 empty-sided columns. */
body.dng-shop.woocommerce-cart .entry-content .vc_row > .wpb_column:not(:has(.woocommerce)) {
	display: none;
}
body.dng-shop.woocommerce-cart .entry-content .vc_row > .wpb_column:has(.woocommerce) {
	width: 100%;
	margin: 0;
}
body.dng-shop.woocommerce-cart .entry-content .wpb_column:has(.woocommerce) > .vc_column-inner {
	padding: 0;
}
body.dng-shop.woocommerce-cart .entry-content .vc_row {
	margin: 0;
}
/* The theme zeroes the side padding on pages and the Cart page's own CSS the
   bottom padding (!important), so the gaps go here instead. */
body.dng-shop.woocommerce-cart.page.no-sidebar #primary main#main {
	padding-right: 20px;
	padding-left: 20px;
}

body.dng-shop.woocommerce-cart main#main .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 0 32px;
	align-items: start;
	padding-bottom: 72px;
}
body.dng-shop.woocommerce-cart main#main .woocommerce > * {
	grid-column: 1 / -1;
}
body.dng-shop.woocommerce-cart main#main .woocommerce::before,
body.dng-shop.woocommerce-cart main#main .woocommerce::after {
	display: none;
}
body.dng-shop.woocommerce-cart main#main .woocommerce > form.woocommerce-cart-form {
	grid-column: 1;
	margin: 0;
}
/* Totals beside the items; the "You may be interested in" suggestions, which
   WooCommerce puts in the same box, across the page below them. */
body.dng-shop.woocommerce-cart main#main .woocommerce > .cart-collaterals {
	display: contents;
}
body.dng-shop.woocommerce-cart main#main .cart-collaterals::before,
body.dng-shop.woocommerce-cart main#main .cart-collaterals::after {
	display: none; /* WooCommerce's clearfix; would take the cell beside the items */
}
body.dng-shop.woocommerce-cart main#main .cart-collaterals > .cart_totals {
	grid-column: 2;
	position: sticky;
	top: 24px;
}
body.dng-shop.woocommerce-cart main#main .cart-collaterals > .cross-sells {
	grid-column: 1 / -1;
	order: 1;
	float: none;
	width: auto;
}

body.dng-shop main#main h1.dng-cart-title {
	margin: 8px 0 28px;
	font: 600 40px/1.15 var(--sl-head);
	color: var(--sl-ink);
}

/* Items: a white card of rows - picture, name and price, quantity, line total, remove. */
body.dng-shop table.shop_table.cart {
	display: block;
	margin: 0;
	padding: 6px 28px;
	border: 0;
	border-radius: var(--sl-radius);
	background: #fff;
	box-shadow: var(--sl-shadow);
}
body.dng-shop table.shop_table.cart thead {
	display: none;
}
body.dng-shop table.shop_table.cart tbody {
	display: block;
}
body.dng-shop table.shop_table.cart tr.cart_item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto 100px 32px;
	grid-template-areas:
		"thumb name  qty sub remove"
		"thumb price qty sub remove";
	align-items: center;
	gap: 2px 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--sl-line);
}
body.dng-shop table.shop_table.cart tr.cart_item td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: left !important; /* WooCommerce right-aligns them on phones with !important */
}
body.dng-shop table.shop_table.cart tr.cart_item td::before {
	display: none; /* WooCommerce's phone-width "Price:" labels */
}
body.dng-shop table.shop_table.cart td.product-thumbnail {
	display: block;
	grid-area: thumb;
}
body.dng-shop table.shop_table.cart td.product-thumbnail img {
	display: block;
	width: 64px;
	height: 64px;
	max-width: none;
	border-radius: 8px;
	background: var(--sl-paper);
	object-fit: contain;
}
body.dng-shop table.shop_table.cart td.product-name {
	grid-area: name;
	align-self: end;
	font: 600 17px/1.35 var(--sl-head);
	color: var(--sl-ink);
}
body.dng-shop table.shop_table.cart td.product-name a {
	color: var(--sl-ink);
	text-decoration: none;
}
body.dng-shop table.shop_table.cart td.product-name a:hover {
	color: var(--sl-navy);
	text-decoration: underline;
}
body.dng-shop table.shop_table.cart td.product-name dl.variation {
	margin: 4px 0 0;
	font: 400 14px/1.5 var(--sl-body);
	color: var(--sl-muted);
}
body.dng-shop table.shop_table.cart td.product-name dl.variation :is(dt, dd, p) {
	margin: 0;
	font-size: 14px;
	color: var(--sl-muted);
}
body.dng-shop table.shop_table.cart td.product-price {
	grid-area: price;
	align-self: start;
	font: 400 14px/1.5 var(--sl-body);
	color: var(--sl-muted);
}
body.dng-shop table.shop_table.cart td.product-quantity {
	grid-area: qty;
}
body.dng-shop table.shop_table.cart td.product-quantity .quantity {
	float: none;
	margin: 0;
}
body.dng-shop table.shop_table.cart td.product-quantity .qty {
	box-sizing: border-box;
	width: 68px;
	height: 44px;
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	background: #fff;
	font: 400 16px/1 var(--sl-body);
	color: var(--sl-ink);
	text-align: center;
}
body.dng-shop table.shop_table.cart td.product-quantity .qty:focus {
	border-color: var(--sl-navy);
	outline: 3px solid var(--sl-mist);
	outline-offset: 0;
}
body.dng-shop table.shop_table.cart td.product-subtotal {
	grid-area: sub;
	font: 600 17px/1.2 var(--sl-head);
	color: var(--sl-navy);
	text-align: right !important;
}
body.dng-shop table.shop_table.cart td.product-remove {
	grid-area: remove;
	justify-self: end;
}
body.dng-shop main#main table.shop_table.cart a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: transparent;
	color: var(--sl-muted) !important;
	font: 400 22px/1 var(--sl-body);
	transition: background-color 0.15s, color 0.15s;
}
body.dng-shop main#main table.shop_table.cart a.remove:hover {
	background: var(--sl-paper);
	color: #c0392b !important;
}

/* Coupon and "Update cart" under the items. */
body.dng-shop table.shop_table.cart tr:has(> td.actions) {
	display: block;
}
body.dng-shop table.shop_table.cart td.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 0 18px;
	border: 0;
}
body.dng-shop table.shop_table.cart td.actions .coupon {
	display: flex;
	flex: 1 1 320px;
	gap: 10px;
	min-width: 0;
	max-width: 100%;
	float: none;
	padding: 0;
	border: 0;
}
body.dng-shop table.shop_table.cart td.actions .coupon label {
	position: absolute; /* screen-reader text; keep it out of the row */
}
body.dng-shop table.shop_table.cart td.actions .coupon::before,
body.dng-shop table.shop_table.cart td.actions .coupon::after {
	display: none; /* WooCommerce's float clearfix, an empty flex item here */
}
body.dng-shop table.shop_table.cart td.actions .coupon #coupon_code {
	box-sizing: border-box;
	flex: 1 1 auto;
	width: auto;
	max-width: 260px;
	height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--sl-line);
	border-radius: 100px;
	background: #fff;
	font: 400 15px/1.2 var(--sl-body);
	color: var(--sl-ink);
}
body.dng-shop table.shop_table.cart td.actions .coupon #coupon_code:focus {
	border-color: var(--sl-navy);
	outline: 3px solid var(--sl-mist);
	outline-offset: 0;
}
/* Secondary buttons: outlined navy, so the orange stays for checkout. */
body.dng-shop main#main table.shop_table.cart td.actions .button {
	float: none;
	height: 44px;
	margin: 0;
	padding: 0 22px;
	border: 1px solid var(--sl-navy);
	background: #fff;
	color: var(--sl-navy) !important;
	font-size: 14px;
	box-shadow: none;
}
body.dng-shop main#main table.shop_table.cart td.actions .button:hover:not(:disabled) {
	background: var(--sl-navy);
	color: #fff !important;
}
body.dng-shop main#main table.shop_table.cart td.actions .button:disabled {
	border-color: var(--sl-line);
	color: var(--sl-muted) !important;
	opacity: 1;
}

/* Summary card with the checkout button. */
body.dng-shop.woocommerce-cart .cart-collaterals .cart_totals {
	float: none;
	width: auto;
	padding: 28px;
	border-radius: var(--sl-radius);
	background: var(--sl-paper);
}
body.dng-shop main#main .cart_totals h2 {
	margin: 0 0 16px;
	font: 600 22px/1.2 var(--sl-head);
	color: var(--sl-ink);
}
body.dng-shop .cart_totals table.shop_table {
	display: block;
	margin: 0 0 22px;
	border: 0;
	border-radius: 0;
	background: none;
}
body.dng-shop .cart_totals table.shop_table tbody {
	display: block;
}
body.dng-shop .cart_totals table.shop_table tr {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--sl-mist);
}
body.dng-shop .cart_totals table.shop_table :is(th, td) {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	font: 400 15px/1.4 var(--sl-body);
	color: var(--sl-text);
	text-align: right;
}
body.dng-shop .cart_totals table.shop_table th {
	text-align: left;
}
body.dng-shop .cart_totals table.shop_table td::before {
	display: none;
}
body.dng-shop .cart_totals table.shop_table tr.order-total {
	padding-top: 16px;
	border-bottom: 0;
}
body.dng-shop .cart_totals table.shop_table tr.order-total :is(th, td) {
	font: 600 18px/1.3 var(--sl-head);
	color: var(--sl-ink);
}
body.dng-shop .cart_totals table.shop_table tr.order-total td strong {
	font-weight: 700;
	color: var(--sl-navy);
}
body.dng-shop .cart_totals .wc-proceed-to-checkout {
	padding: 0;
}
body.dng-shop main#main .cart_totals .wc-proceed-to-checkout a.checkout-button {
	display: block;
	margin: 0;
	padding: 17px 24px;
	background: var(--sl-orange);
	font-size: 17px;
	text-align: center;
}
body.dng-shop main#main .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--sl-orange-dark);
}

/* Empty cart. */
body.dng-shop.woocommerce-cart main#main .cart-empty.woocommerce-info {
	margin-bottom: 20px;
}
body.dng-shop.woocommerce-cart main#main .return-to-shop {
	margin: 0;
}

/* Summary under the items once the two no longer fit side by side. */
@media (max-width: 960px) {
	body.dng-shop.woocommerce-cart main#main .woocommerce {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	body.dng-shop.woocommerce-cart main#main .cart-collaterals > .cart_totals {
		position: static;
		margin-top: 28px;
	}
}

/* ---------- Small screens ---------- */

@media (max-width: 768px) {
	body.dng-shop #primary main#main {
		padding: 18px 16px 56px;
	}
	body.dng-shop .woocommerce-products-header {
		padding: 28px 22px;
	}
	body.dng-shop .woocommerce-products-header .page-description h3 {
		font-size: 28px !important;
	}
	body.dng-shop .woocommerce-products-header .page-description p {
		font-size: 16px;
	}
	body.dng-shop .woocommerce-result-count,
	body.dng-shop .woocommerce-ordering {
		float: none;
		margin: 22px 0 0;
		line-height: 1.4;
	}
	body.dng-shop .woocommerce-ordering {
		margin-bottom: 20px;
	}
	body.dng-shop .woocommerce-ordering select {
		width: 100%;
	}
	body.dng-shop ul.products {
		gap: 20px;
	}
	body.dng-shop div.product div.images.woocommerce-product-gallery {
		margin-bottom: 24px;
	}
	body.dng-shop div.product .product_title {
		font-size: 28px !important;
	}
	body.dng-shop div.product .summary > p.price {
		font-size: 24px;
	}
	body.dng-shop div.product form.cart {
		padding: 18px;
	}
	/* Grouped products: name and price on a line, full-width button below -
	   three table columns overflow a phone screen. */
	body.dng-shop div.product form.grouped_form table.group_table,
	body.dng-shop div.product form.grouped_form table.group_table tbody {
		display: block;
		width: 100%;
	}
	body.dng-shop div.product form.grouped_form table.group_table tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 4px 16px;
		align-items: baseline;
		padding: 16px 0;
		border-bottom: 1px solid var(--sl-line);
	}
	body.dng-shop div.product form.grouped_form table.group_table tr:first-child {
		padding-top: 0;
	}
	body.dng-shop div.product form.grouped_form table.group_table tr:last-child {
		border-bottom: 0;
	}
	body.dng-shop div.product form.grouped_form table.group_table td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		text-align: left;
	}
	body.dng-shop div.product form.grouped_form table.group_table td.woocommerce-grouped-product-list-item__quantity {
		grid-row: 2;
		grid-column: 1 / -1;
		width: auto;
		margin-top: 10px;
	}
	body.dng-shop div.product form.grouped_form table.group_table td.woocommerce-grouped-product-list-item__quantity .button {
		display: block;
		float: none;
		width: 100%;
		text-align: center;
	}
	body.dng-shop div.product form.grouped_form table.group_table td.woocommerce-grouped-product-list-item__label {
		padding: 0;
	}
	body.dng-shop div.product form.grouped_form table.group_table td.woocommerce-grouped-product-list-item__price {
		text-align: right;
	}
	body.dng-shop div.product .woocommerce-tabs ul.tabs {
		overflow-x: auto;
	}
	body.dng-shop div.product .woocommerce-tabs ul.tabs li a {
		white-space: nowrap;
	}
	body.dng-shop div.product .woocommerce-tabs .panel {
		padding: 22px 20px !important;
	}
	body.dng-shop section.related > h2,
	body.dng-shop section.upsells > h2,
	body.dng-shop main#main .cross-sells > h2 {
		font-size: 24px;
	}
	body.dng-shop main#main .woocommerce-message .button,
	body.dng-shop main#main .woocommerce-info .button {
		float: none;
		display: table;
		margin: 12px 0 0;
	}

	/* Cart: picture, name and remove on top; quantity and line total below. */
	body.dng-shop.woocommerce-cart.page.no-sidebar #primary main#main {
		padding-right: 0;
		padding-left: 0; /* the theme's container keeps 15px */
	}
	body.dng-shop main#main h1.dng-cart-title {
		margin: 0 0 20px;
		font-size: 30px;
	}
	body.dng-shop table.shop_table.cart {
		padding: 4px 18px;
	}
	body.dng-shop table.shop_table.cart tr.cart_item {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name  remove"
			"thumb price remove"
			"qty   qty   sub";
		gap: 2px 14px;
		padding: 18px 0;
	}
	body.dng-shop table.shop_table.cart td.product-thumbnail img {
		width: 56px;
		height: 56px;
	}
	body.dng-shop table.shop_table.cart td.product-name {
		font-size: 16px;
	}
	body.dng-shop table.shop_table.cart td.product-quantity {
		margin-top: 12px;
	}
	body.dng-shop table.shop_table.cart td.product-subtotal {
		margin-top: 12px;
	}
	body.dng-shop table.shop_table.cart td.actions .coupon {
		flex-basis: 100%;
	}
	body.dng-shop table.shop_table.cart td.actions .coupon #coupon_code {
		flex: 1 1 0;
		max-width: none;
		min-width: 0;
	}
	body.dng-shop main#main table.shop_table.cart td.actions .coupon .button {
		flex: 0 0 auto;
		width: auto;
		padding: 0 16px;
		white-space: nowrap;
	}
	body.dng-shop main#main table.shop_table.cart td.actions > .button {
		width: 100%;
	}
	body.dng-shop.woocommerce-cart .cart-collaterals .cart_totals {
		padding: 22px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.dng-shop ul.products li.product,
	body.dng-shop main#main .button {
		transition: none;
	}
	body.dng-shop ul.products li.product:hover {
		transform: none;
	}
}