/* ==========================================================================
   T's Direct Order & Quote System — cart

   Built to the approved mockup (cart-page-mockup.html). Where a value comes
   from the mockup it is quoted above the rule. Those values are the design,
   not a preference, and should not change without agreeing a new mockup.

   A note on !important: the active theme forces some properties, and nothing
   but !important beats !important. It is used in three places only, each
   commented with the theme rule it exists to defeat.
   ========================================================================== */

/* ==========================================================================
   1. VOLUME DISCOUNT PANEL
   ========================================================================== */

.tsd-vd {
	margin: 0 0 18px;
	padding: 18px 20px;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius);
	box-shadow: var(--tsd-shadow);
}
.tsd-vd.is-earning {
	border-color: var(--tsd-green-line);
	background: linear-gradient(180deg, var(--tsd-paper-2), var(--tsd-paper) 65%);
}

.tsd-vd__top {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.tsd-vd__title {
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 19px;
	color: var(--tsd-ink);
}
.tsd-vd__percent { color: var(--tsd-green-600); }
.tsd-vd__save {
	margin-left: auto;
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 19px;
	color: var(--tsd-green-600);
	white-space: nowrap;
}
.tsd-vd__sub { font-size: 13px; color: var(--tsd-muted); }

.tsd-vd__bar {
	position: relative;
	height: 8px;
	margin-bottom: 9px;
	background: var(--tsd-line-2);
	border-radius: 8px;
	overflow: hidden;
}
.tsd-vd__fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: linear-gradient(90deg, var(--tsd-green), var(--tsd-green-600));
	border-radius: 8px;
	transition: width .35s ease;
}

.tsd-vd__ticks { display: flex; justify-content: space-between; gap: 4px; }
.tsd-vd__tick { flex: 1; text-align: center; font-size: 11px; color: var(--tsd-muted-2); }
.tsd-vd__tick b {
	display: block;
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 13px;
	color: var(--tsd-muted-2);
}
.tsd-vd__tick.is-done b { color: var(--tsd-green-600); }
.tsd-vd__tick.is-now,
.tsd-vd__tick.is-now b { color: var(--tsd-ink); }

.tsd-vd__next {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--tsd-line-2);
	font-size: 13.5px;
	color: var(--tsd-ink);
}
.tsd-vd__next-ic { display: flex; flex-shrink: 0; color: var(--tsd-green-600); }
.tsd-vd__next b { font-weight: 600; }

/* above the top band — everything on the dark panel is white, including the
   email link, which a theme's link colour would otherwise make unreadable */
.tsd-vd--top { background: var(--tsd-dark); border-color: var(--tsd-dark); color: #fff; }
.tsd-vd--top .tsd-vd__title,
.tsd-vd--top .tsd-vd__sub,
.tsd-vd--top .tsd-vd__sub * { color: #fff; }
.tsd-vd--top .tsd-vd__sub { margin: 0; font-size: 14px; line-height: 1.55; }
.tsd-vd--top.tsd-vd--top a,
.tsd-vd--top.tsd-vd--top a:link,
.tsd-vd--top.tsd-vd--top a:visited,
.tsd-vd--top.tsd-vd--top a:hover,
.tsd-vd--top.tsd-vd--top a:focus {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   2. CHECKOUT NOTICE
   ========================================================================== */

.tsd-checkout-discount {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px;
	padding: 11px 14px;
	background: var(--tsd-green-tint);
	border: 1px solid var(--tsd-green-line);
	border-radius: var(--tsd-radius-sm);
	font-size: 13.5px;
	color: var(--tsd-green-600);
}
.tsd-checkout-discount__ic { display: flex; flex-shrink: 0; }
.tsd-checkout-discount b { font-weight: 700; }

/* ==========================================================================
   3. CLEAR CART
   ========================================================================== */

.tsd-clear { display: inline-block; margin: 18px 0 0; vertical-align: middle; }

.tsd .tsd-clear__btn,
.tsd .tsd-clear__btn:link,
.tsd .tsd-clear__btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 44px;
	padding: 0 22px;
	background: var(--tsd-paper);
	border: 1.5px solid var(--tsd-danger);
	border-radius: var(--tsd-radius-sm);
	color: var(--tsd-danger);
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
	cursor: pointer;
	transition: background .14s, color .14s;
}
.tsd .tsd-clear__btn:hover,
.tsd .tsd-clear__btn:focus {
	background: var(--tsd-danger);
	color: #fff;
	text-decoration: none;
}
.tsd .tsd-clear__btn svg { flex-shrink: 0; }

/* ==========================================================================
   4. CART PAGE

   mockup:
     .cart-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px;
                    gap:26px; align-items:start }
     .card        { background: var(--tsd-paper); border:1px solid var(--line);
                    border-radius:var(--radius); box-shadow:var(--shadow) }
     .citem       { display:grid; grid-template-columns:88px minmax(0,1fr) auto;
                    gap:16px; padding:18px;
                    border-bottom:1px solid var(--line-2); align-items:start }
     .ci-img      { width:88px; height:88px; ... padding:8px }
     .ci-name     { font-family:var(--font-d); font-weight:600; font-size:17px;
                    line-height:1.2 }
     .ci-attr     { display:flex; gap:7px; flex-wrap:wrap; margin-top:7px }
     .ci-right    { text-align:right; display:flex; flex-direction:column;
                    align-items:flex-end; gap:9px; min-width:150px }
     .ci-unit     { font-size:12.5px; color:var(--muted) }
     .ci-line     { font-family:var(--font-d); font-weight:700; font-size:20px }
     .ci-remove   { font-size:12.5px; color:var(--muted); display:inline-flex;
                    gap:6px; align-items:center }
   ========================================================================== */

.tsd-cart { min-width: 0; width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; }

/* The item list and the summary carry WooCommerce's own class names, which
   themes float to one side at a set width using !important. */
.tsd .woocommerce-cart-form.woocommerce-cart-form {
	float: none !important;
	clear: none !important;
	width: auto !important;
	max-width: 100% !important;
}

.tsd-cart__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 26px;
	align-items: start;
}
.tsd .tsd-cart__items { min-width: 0; }
.tsd .tsd-cart__aside { min-width: 0; }

.tsd-card {
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius);
	box-shadow: var(--tsd-shadow);
	overflow: hidden;
}

/* ---------- a cart line ---------- */
.tsd .tsd-line {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	gap: 16px;
	padding: 18px;
	border-bottom: 1px solid var(--tsd-line-2);
	align-items: start;
}
.tsd .tsd-line:last-child { border-bottom: none; }

.tsd-line__image {
	width: 88px;
	height: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	background: var(--tsd-bg);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius-sm);
	overflow: hidden;
}
.tsd-line__image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.tsd-line__detail { min-width: 0; }
.tsd .tsd-line__name { font-family: var(--tsd-font-d); font-weight: var(--tsd-h6-fw); font-size: var(--tsd-h6-size); letter-spacing: var(--tsd-h6-ls); line-height: var(--tsd-h6-lh); color: #fff; }
.tsd .tsd-line__name a { color: #fff; text-decoration: none; }
.tsd .tsd-line__name a:hover { color: var(--tsd-green-600); }
.tsd .tsd-line__sku {
	font-size: 12px;
	color: var(--tsd-muted-2);
	font-family: var(--tsd-font-d);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-top: 4px;
}

/* min-width:150px is the mockup's, and it is what stops this column
   collapsing and squeezing the detail beside it */
.tsd-line__right {
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 9px;
	min-width: 150px;
}
.tsd-line__unit { font-size: 12.5px; color: var(--tsd-muted); }
.tsd-line__unit b { color: var(--tsd-ink); font-weight: 600; }
.tsd-line__total { font-family: var(--tsd-font-d); font-weight: 700; font-size: 20px; color: #fff; }
.tsd .tsd-line__remove,
.tsd .tsd-line__remove:link,
.tsd .tsd-line__remove:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	background: none;
	border: none;
	font-size: 12.5px;
	color: var(--tsd-muted);
	text-decoration: none;
	cursor: pointer;
}
.tsd .tsd-line__remove:hover { color: var(--tsd-danger); }
/* ---------- the quantity control ----------
   Straight from the mockup's .qtybox.qtybox.qtybox. The class is repeated
   three times on purpose: this is the control a theme is most likely to
   restyle, and a single class does not outrank a theme rule marked important.
   Repeating it wins on specificity rather than on load order. Every
   declaration is forced for the same reason. Do not "tidy" this. */

.tsd-qty.tsd-qty.tsd-qty {
	display: inline-flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	width: auto !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--tsd-paper) !important;
	border: 1px solid var(--tsd-line) !important;
	border-radius: var(--tsd-radius-sm) !important;
	overflow: hidden !important;
	float: none !important;
	position: static !important;
}
.tsd-qty.tsd-qty.tsd-qty .quantity {
	display: contents !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	width: auto !important;
	float: none !important;
}
.tsd-qty.tsd-qty.tsd-qty button {
	width: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	height: 34px !important;
	min-height: 0 !important;
	flex: 0 0 32px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var(--tsd-paper-2) !important;
	color: var(--tsd-ink) !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: 17px !important;
	font-family: var(--tsd-font-d) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	float: none !important;
	position: static !important;
}
.tsd-qty.tsd-qty.tsd-qty button:hover:not(:disabled) {
	background: var(--tsd-green) !important;
	color: #fff !important;
}
.tsd-qty.tsd-qty.tsd-qty button:disabled { opacity: .4; cursor: not-allowed; }
.tsd-qty.tsd-qty.tsd-qty input {
	width: 44px !important;
	min-width: 44px !important;
	max-width: 44px !important;
	height: 34px !important;
	min-height: 0 !important;
	flex: 0 0 44px !important;
	border: none !important;
	border-left: 1px solid var(--tsd-line) !important;
	border-right: 1px solid var(--tsd-line) !important;
	border-radius: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	text-align: center !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var(--tsd-paper-2) !important;
	color: #fff !important;
	display: block !important;
	float: none !important;
	position: static !important;
	-moz-appearance: textfield;
}
.tsd-qty.tsd-qty.tsd-qty input::-webkit-outer-spin-button,
.tsd-qty.tsd-qty.tsd-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}
.tsd-qty.tsd-qty.tsd-qty label,
.tsd-qty.tsd-qty.tsd-qty .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
}

/* ---------- attributes, as the mockup's .ci-tag ---------- */
.tsd .tsd-line__tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.tsd .tsd-tag.tsd-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 3px 10px;
	background: var(--tsd-bg);
	border: 1px solid var(--tsd-line);
	border-radius: 20px;
	font-family: var(--tsd-font-b);
	font-size: 12px;
	line-height: 1.6;
	color: var(--tsd-ink);
	white-space: nowrap;
}
.tsd .tsd-tag__swatch.tsd-tag__swatch {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--swatch, #ccc);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
	flex-shrink: 0;
}
.tsd .tsd-tag__label { color: var(--tsd-muted); }
.tsd .tsd-tag b { font-weight: 600; color: var(--tsd-ink); }

/* ---------- branding, as the mockup's .brandbox ---------- */
.tsd .tsd-brandbox.tsd-brandbox {
	margin-top: 10px;
	padding: 10px 12px;
	background: var(--tsd-green-tint);
	border: 1px solid var(--tsd-green-line);
	border-radius: var(--tsd-radius-sm);
	font-family: var(--tsd-font-b);
}
.tsd .tsd-brandbox__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 7px;
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tsd-green-600);
}
.tsd .tsd-brandbox__rows.tsd-brandbox__rows {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}
.tsd .tsd-brandbox__rows li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	color: var(--tsd-ink);
	line-height: 1.4;
}
.tsd .tsd-brandbox__rows li::before,
.tsd .tsd-brandbox__rows li::marker { content: none; }
.tsd .tsd-brandbox .tsd-pos.tsd-pos {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 6px;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-green-line);
	border-radius: 5px;
	color: var(--tsd-green-600);
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
}
.tsd .tsd-brandbox__rows small { display: block; color: var(--tsd-muted); font-size: 11.5px; }
.tsd .tsd-brandbox__cost {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-top: 8px;
	border-top: 1px solid var(--tsd-green-line);
	font-size: 12.5px;
	color: var(--tsd-ink);
}
.tsd .tsd-brandbox__cost b {
	font-weight: 700;
	color: var(--tsd-green-600);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.tsd .tsd-brandbox__note { margin: 5px 0 0; font-size: 11px; color: var(--tsd-muted); line-height: 1.4; }
.tsd .tsd-brandbox__changed {
	margin: 7px 0 0;
	padding-top: 7px;
	border-top: 1px solid var(--tsd-green-line);
	font-size: 11.5px;
	color: var(--tsd-amber);
}

/* ---------- anything another plugin added to a line ---------- */
.tsd .tsd-line__extras.tsd-line__extras {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	color: var(--tsd-muted);
}
.tsd .tsd-line__extras li { margin: 0 0 3px; padding: 0; list-style: none; }
.tsd .tsd-line__extras li::before,
.tsd .tsd-line__extras li::marker { content: none; }
.tsd .tsd-line__extras span { font-weight: 600; color: var(--tsd-ink); }
.tsd .tsd-line__extras p { display: inline; margin: 0; }

/* ---------- the bar under the item list: the mockup's .cart-foot ----------
     .cart-foot { display:flex; justify-content:space-between; align-items:center;
                  gap:12px; padding:14px 18px; border-top:1px solid var(--line);
                  flex-wrap:wrap; background: var(--tsd-paper);
                  border-radius:0 0 var(--radius) var(--radius) } */

.tsd .tsd-cart__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	/* One row. It wrapped, and with space-between that left one button on
	   each line and the row twice as tall as it should be. */
	flex-wrap: nowrap;
	min-height: 0;
	padding: 14px 18px;
	border: 1px solid var(--tsd-line);
	background: var(--tsd-paper);
	border-radius: 0 0 var(--tsd-radius) var(--tsd-radius);
	box-shadow: var(--tsd-shadow);
}
/* The footer's children are the buttons themselves, as in the quote cart.
   Any wrapper left over from the standalone shortcode is neutralised. */
.tsd .tsd-cart__foot > .tsd-btn {
	flex: 0 1 auto;
	min-width: 0;
	white-space: nowrap;
}
.tsd .tsd-cart__foot .tsd-clear {
	margin: 0;
	display: contents;
}

/* On a phone they stack on purpose and fill the width. */
@media screen and (max-width: 520px) {
	.tsd .tsd-cart__foot { flex-wrap: wrap; }
	.tsd .tsd-cart__foot > .tsd-btn { width: 100%; flex: 1 1 100%; }
}

/* The card and the bar are one panel: the card loses its bottom corners, the
   bar loses its top border, and a divider marks where one ends. This is how
   the quote cart reads, and the two should match. */
.tsd .tsd-cart__items .tsd-card {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: none;
}
.tsd .tsd-cart__foot { border-top: 1px solid var(--tsd-line-2); }

/* The actions row holds the cart nonce and the hidden update button. Both are
   needed by the form, neither is visible, so it must not push the footer away
   from the card it belongs to. */
.tsd-cart__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	min-height: 0;
}
/* :empty was no use here — the div holds whitespace and the visually hidden
   update button, so it is never empty. Without scripts the update button
   becomes real and the row needs its spacing back; that is the only case. */


/* The update button only matters without JavaScript. With it, changing a
   quantity submits automatically.

   Hidden outright rather than "hidden unless .tsd-no-js is absent": that
   depended on the script running to reveal the right state, and when the
   script did not load the button appeared full size and stretched the footer.
   Quantity changes submit automatically, so it is never the way a customer
   updates the cart — it is only a submit target for the form.

   Forced, because the theme sets padding on every button with !important. */
.tsd .tsd-update {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}


/* ==========================================================================
   5. ORDER SUMMARY

   mockup:
     .sidecard { padding:18px }
     .sidecard h3 { font-family:var(--font-d); font-weight:600; font-size:17px;
                    text-transform:uppercase; letter-spacing:.02em;
                    margin-bottom:14px }
     .sumrow   { display:flex; justify-content:space-between; gap:12px;
                 padding:7px 0; font-size:14px; color:var(--tsd-ink) }
     .sumrow .v{ font-weight:600; color:var(--ink);
                 font-variant-numeric:tabular-nums }
     .sumrow.disc, .sumrow.disc .v { color:var(--green-600) }
     .sumrow.tot { border-top:2px solid var(--green); margin-top:9px;
                   padding-top:13px; font-family:var(--font-d);
                   font-weight:700; font-size:19px; text-transform:uppercase }
     .sumrow.tot .v { font-size:24px; color:var(--green-600) }
     .vatnote  { font-size:11.5px; color:var(--muted); margin-top:10px;
                 padding-top:10px; border-top:1px solid var(--line-2) }
     .promo    { display:flex; gap:8px; margin:14px 0 4px }
     .promo input { flex:1; min-width:0; height:44px; padding:0 13px }
     .trust    { display:flex; flex-direction:column; gap:8px; margin-top:14px;
                 padding-top:14px; border-top:1px solid var(--line-2) }
     .side     { position:sticky; top:88px }
   ========================================================================== */

/* the summary carries WooCommerce's cart_totals class — same reason as above */
.tsd .tsd-summary.tsd-summary {
	float: none !important;
	clear: none !important;
	width: auto !important;
	max-width: 100% !important;
}

.tsd .tsd-summary {
	position: sticky;
	top: 20px;
	padding: 0;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius);
	box-shadow: var(--tsd-shadow);
	overflow: hidden;
}

.tsd .tsd-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-size: var(--tsd-small-size);
	line-height: var(--tsd-small-lh);
	color: var(--tsd-ink);
	min-width: 0;
}
.tsd .tsd-summary__row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.tsd .tsd-summary__value {
	flex: 0 1 auto;
	min-width: 0;
	font-weight: 600;
	color: var(--tsd-ink);
	text-align: right;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.tsd .tsd-summary__muted { font-weight: 400; color: var(--tsd-muted); font-size: var(--tsd-caption-size); line-height: var(--tsd-caption-lh); }
.tsd .tsd-summary__row.is-discount,
.tsd .tsd-summary__row.is-discount .tsd-summary__value { color: var(--tsd-green-600); font-weight: 600; }

.tsd .tsd-summary__row.is-total {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--tsd-ink);
	align-items: baseline;
}
.tsd .tsd-summary__row.is-total .tsd-summary__value { font-size: 26px; letter-spacing: var(--tsd-price-ls); color: #fff; }

.tsd .tsd-summary__shipping { font-size: var(--tsd-small-size); line-height: var(--tsd-small-lh); color: var(--tsd-muted); padding: 7px 0; }

.tsd .tsd-promo { display: flex; gap: 8px; margin: 0; min-width: 0; max-width: 100%; }
.tsd .tsd-promo input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 44px;
	padding: 0 13px;
	background: var(--tsd-paper-2);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius-sm);
	font-family: var(--tsd-font-b);
	font-size: 14px;
	color: #fff;
}
.tsd .tsd-promo input::placeholder { color: var(--tsd-muted-2); }
.tsd .tsd-promo input:focus { border-color: var(--tsd-green); outline: none; }
.tsd .tsd-promo .tsd-btn { flex: 0 0 auto; height: 44px; padding: 2px 16px 0; font-size: 13px; }

.tsd .tsd-summary__checkout { margin-top: 18px; margin-bottom: 0; }
.tsd .tsd-summary__checkout .wc-proceed-to-checkout { margin-bottom: 0; }
/* WooCommerce's checkout button carries the theme's own .button class, and
   themes style that with !important. Per the guide's specificity note, nothing
   without !important can win, however specific it is. */
.tsd .tsd-summary__checkout .checkout-button,
.tsd .tsd-summary__checkout a.button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100% !important;
	height: 52px !important;
	padding: 0 24px !important;
	background: var(--tsd-green) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--tsd-radius-sm) !important;
	font-family: var(--tsd-font-d) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	text-transform: uppercase !important;
	letter-spacing: .04em;
	text-decoration: none !important;
	box-shadow: none !important;
}
.tsd .tsd-summary__checkout .checkout-button:hover,
.tsd .tsd-summary__checkout a.button:hover { background: var(--tsd-green-600) !important; }

/* ==========================================================================
   6. EMPTY CART
   ========================================================================== */

.tsd-empty {
	padding: 54px 24px;
	text-align: center;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius);
	box-shadow: var(--tsd-shadow);
}
/* mockup: .empty .ic { width:74px; height:74px; background:var(--green-tint);
   color:var(--green-600) } */
.tsd-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	margin: 0 auto 18px;
	background: var(--tsd-green-tint);
	border-radius: 50%;
	color: var(--tsd-green-600);
}
.tsd .tsd-empty__title {
	margin: 0 0 7px;
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 24px;
	color: var(--tsd-ink);
}
.tsd-empty__text { margin: 0 0 22px; color: var(--tsd-muted); font-size: 14.5px; }

/* ==========================================================================
   7. NARROW SCREENS

   mockup:
     @media (max-width:900px){
       .cart-layout{grid-template-columns:minmax(0,1fr)}
       .side{position:static}
       .citem{grid-template-columns:68px minmax(0,1fr);gap:12px;padding:14px}
       .ci-img{width:68px;height:68px}
       .ci-right{grid-column:1/-1;flex-direction:row;align-items:center;
                 justify-content:space-between;min-width:0;flex-wrap:wrap;
                 gap:10px;border-top:1px dashed var(--line);padding-top:11px}
     }
   ========================================================================== */

@media screen and (max-width: 900px) {
	.tsd-cart__layout { grid-template-columns: minmax(0, 1fr); }
	.tsd .tsd-summary { position: static; }

	.tsd .tsd-line { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; padding: 14px; }
	.tsd-line__image { width: 68px; height: 68px; }
	/* line name keeps h6 token at all sizes */
	.tsd-line__right {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		min-width: 0;
		flex-wrap: wrap;
		gap: 10px;
		border-top: 1px dashed var(--tsd-line);
		padding-top: 11px;
		text-align: left;
	}
	.tsd-line__unit { order: 1; }
	.tsd-line__qty { order: 2; }
	.tsd-line__total { order: 3; font-size: 17px; }
	.tsd .tsd-line__remove { order: 4; margin-left: auto; }

	.tsd-cart__actions { flex-direction: column; align-items: stretch; }
	.tsd .tsd-continue { display: flex; justify-content: center; margin-right: 0; }
	.tsd-clear { display: block; }
	.tsd .tsd-clear__btn { width: 100%; }

	.tsd-vd { padding: 15px 16px; }
	.tsd-vd__title,
	.tsd-vd__save { font-size: 17px; }
	.tsd-vd__save { margin-left: 0; }
	.tsd-vd__top { gap: 6px; }
	.tsd-vd__tick { font-size: 10px; }
	.tsd-vd__tick b { font-size: 12px; }
	.tsd-vd__next { font-size: 12.5px; }
}

/* ---------- an unbranded line says so ----------
   The mockup has this as quiet grey text. Made a badge instead, at the
   client's request, so a line with no branding is obvious at a glance rather
   than something you have to look for.

   Amber, not red: no branding is a fact about the order, not a fault. It is
   built to mirror the green BRANDED badge above it, so the two read as a
   pair. */
.tsd .tsd-no-brand {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 9px 0 0;
	padding: 5px 12px;
	background: var(--tsd-amber-bg);
	border: 1px solid var(--tsd-amber-line);
	border-radius: 20px;
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .06em;
	/* A shade darker than --tsd-amber. At 11.5px the token itself only
	   reaches 3.8:1 against this background; this reaches 5.5:1, which clears
	   AA. The token is left alone because other things use it at larger
	   sizes where it is fine. */
	color: var(--tsd-amber);
	line-height: 1.4;
}
.tsd .tsd-no-brand svg { flex-shrink: 0; }

/* ---------- the branding cost row: the mockup's .bb-cost / .bb-break ---------- */
.tsd .tsd-brandbox__cost {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 7px;
	border-top: 1px solid var(--tsd-green-line);
	font-size: 12.5px;
	color: var(--tsd-ink);
}
.tsd .tsd-brandbox__note {
	margin: 0;
	font-size: 11.5px;
	color: var(--tsd-green-600);
	opacity: .85;
}

/* ==========================================================================
   SHIPPING OPTIONS

   The plugin's own, so the section is not something WooCommerce's script
   owns and replaces. Same control as the quote cart's delivery options —
   one design for the same job in both places.
   ========================================================================== */

.tsd .tsd-ship { margin: 4px 0 10px; }

.tsd .tsd-ship__head {
	margin-bottom: 9px;
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tsd-muted);
}

/* These are <button> elements in a theme that styles every button with
   !important, so the class is repeated and the properties forced. Same
   approach as the checkout button and the quantity stepper. */
.tsd .tsd-ship__opt.tsd-ship__opt {
	display: flex !important;
	align-items: center;
	gap: 11px;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 0 8px !important;
	padding: 11px 13px !important;
	background: var(--tsd-paper) !important;
	border: 1.5px solid var(--tsd-line) !important;
	border-radius: var(--tsd-radius-sm) !important;
	box-shadow: none !important;
	cursor: pointer;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	transition: border-color .12s, background .12s;
	font-family: var(--tsd-font-b) !important;
	float: none !important;
}
.tsd .tsd-ship__opt.tsd-ship__opt:hover { border-color: var(--tsd-muted-2) !important; }
.tsd .tsd-ship__opt.tsd-ship__opt.is-selected {
	border-color: var(--tsd-green) !important;
	background: var(--tsd-green-tint) !important;
}
.tsd .tsd-ship__opt:last-of-type { margin-bottom: 0; }

.tsd .tsd-ship__radio {
	position: relative;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: var(--tsd-paper);
	border: 1.5px solid var(--tsd-line);
	border-radius: 50%;
}
.tsd .tsd-ship__opt.is-selected .tsd-ship__radio { border-color: var(--tsd-green); }
.tsd .tsd-ship__opt.is-selected .tsd-ship__radio::after {
	content: "";
	position: absolute;
	inset: 3.5px;
	background: var(--tsd-green);
	border-radius: 50%;
}

.tsd .tsd-ship__name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--tsd-ink); }
.tsd .tsd-ship__price {
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	color: var(--tsd-ink);
}
.tsd .tsd-ship__price.is-free { color: var(--tsd-green-600); }
.tsd .tsd-summary__value.is-free { color: var(--tsd-status-green, #3ecf6a); }

.tsd .tsd-ship__to {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--tsd-muted);
	line-height: 1.5;
}
.tsd .tsd-ship__to b { color: var(--tsd-ink); font-weight: 600; }

/* ---------- the address form, laid out like the quote cart's ---------- */
/* No divider of its own: .tsd-addr above already draws it, and two rules meant
   two lines with a gap between them. */
.tsd .tsd-shipform { margin: 0; padding: 0; border: none; }
.tsd .tsd-shipform__head {
	margin-bottom: 10px;
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tsd-muted);
}
.tsd .tsd-shipform .tsd-fld { margin-bottom: 10px; }
.tsd .tsd-shipform label {
	display: block;
	margin-bottom: 5px;
	font-size: var(--tsd-label-size);
	letter-spacing: var(--tsd-label-ls);
	line-height: var(--tsd-label-lh);
	font-weight: var(--tsd-label-fw);
	text-transform: uppercase;
	color: var(--tsd-muted);
}
.tsd .tsd-shipform input,
.tsd .tsd-shipform select {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	font-size: var(--tsd-input-size);
	line-height: var(--tsd-input-lh);
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius-sm);
	font-family: var(--tsd-font-b);
	font-size: 13.5px;
	color: var(--tsd-ink);
}
.tsd .tsd-shipform select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 34px;
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7075' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 11px center;
}
.tsd .tsd-shipform input:focus,
.tsd .tsd-shipform select:focus { border-color: var(--tsd-green); outline: none; }
.tsd .tsd-shipform .tsd-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* The Calculate button, in the cart and the quote cart alike.

   Was scoped to .tsd-shipform, which only the cart has, so the quote cart's
   button was left grey by the theme. Targeting the button itself covers
   both — and they should look the same. */
.tsd [data-tsd="calc-shipping"].tsd-btn,
.tsd .tsd-shipform .tsd-btn.tsd-btn {
	margin-top: 4px !important;
	width: 100% !important;
	height: 48px !important;
	min-height: 0 !important;
	padding: 0 20px !important;
	background: var(--tsd-dark) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--tsd-radius-sm) !important;
	box-shadow: none !important;
	font-family: var(--tsd-font-d) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	text-transform: uppercase !important;
	letter-spacing: .03em !important;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	float: none !important;
}
.tsd [data-tsd="calc-shipping"].tsd-btn:hover,
.tsd .tsd-shipform .tsd-btn.tsd-btn:hover { background: var(--tsd-dark-2) !important; }

/* anything that still renders WooCommerce's own calculator is hidden, so the
   page never shows two address forms */
.tsd .tsd-summary .woocommerce-shipping-calculator { display: none; }

/* while the server is working it out */
.tsd .tsd-summary.is-busy { opacity: .6; pointer-events: none; transition: opacity .12s; }

/* ==========================================================================
   DELIVERY — SHARED WITH THE QUOTE CART

   These were in tsd-quote.css. They moved here, which both pages load, so the
   cart and the quote cart use one definition of the same controls rather than
   two copies that drift apart.
   ========================================================================== */
/* ==========================================================================
   2. THE DELIVERY FORM

   mockup:
     .fld { margin-bottom:12px }
     .fld label { display:block; font-size:12.5px; font-weight:500;
                  color:var(--tsd-muted); margin-bottom:6px }
     .fld label .req { color:var(--danger) }
     .fld input, .fld select { width:100%; height:44px; border:1px solid var(--line);
                               border-radius:var(--radius-sm); padding:0 13px }
     .frow { display:grid; grid-template-columns:1fr 1fr; gap:10px }
     .sidecard h3 .hi { width:26px; height:26px; border-radius:50%;
                        background:var(--green-tint); color:var(--green-600) }
   ========================================================================== */

.tsd .tsd-quote-delivery { margin-bottom: 16px; }

.tsd .tsd-summary__hi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-right: 8px;
	background: var(--tsd-green-tint);
	border-radius: 50%;
	color: var(--tsd-green-600);
	flex-shrink: 0;
}
.tsd .tsd-quote-delivery .tsd-summary__title { display: flex; align-items: center; }

.tsd .tsd-fld { margin-bottom: 12px; }
.tsd .tsd-fld:last-of-type { margin-bottom: 14px; }
.tsd .tsd-fld label {
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--tsd-muted);
}
.tsd .tsd-req { color: var(--tsd-danger); }

.tsd .tsd-fld input,
.tsd .tsd-fld select {
	width: 100%;
	height: 44px;
	padding: 0 13px;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius-sm);
	font-family: var(--tsd-font-b);
	font-size: 14px;
	color: var(--tsd-ink);
}
.tsd .tsd-fld select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7075' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	cursor: pointer;
}
.tsd .tsd-fld input:focus,
.tsd .tsd-fld select:focus { border-color: var(--tsd-green); outline: none; }

.tsd .tsd-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ==========================================================================
   3. SHIPPING RATES

   mockup:
     .rates { margin-top:14px }
     .rt-h  { font-family:var(--font-d); font-weight:600; font-size:12px;
              text-transform:uppercase; letter-spacing:.06em; color:var(--muted) }
     .rate  { display:flex; align-items:center; gap:11px;
              border:1.5px solid var(--line); border-radius:var(--radius-sm);
              padding:11px 13px; cursor:pointer; margin-bottom:8px }
     .rate.sel { border-color:var(--green); background:var(--green-tint) }
     .radio { width:18px; height:18px; border-radius:50%;
              border:1.5px solid var(--line) }
     .rt-n  { font-size:13.5px; font-weight:500; flex:1 }
     .rt-p  { font-family:var(--font-d); font-weight:700; font-size:15px }
   ========================================================================== */

.tsd .tsd-rates { margin-top: 14px; }
.tsd .tsd-rates__head {
	margin-bottom: 9px;
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tsd-muted);
}

/* <button> elements in a theme that forces #eee on every button, so the class
   is doubled and the properties forced. */
.tsd .tsd-rate.tsd-rate {
	display: flex !important;
	align-items: center;
	gap: 11px;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 0 8px !important;
	padding: 11px 13px !important;
	background: var(--tsd-paper) !important;
	border: 1.5px solid var(--tsd-line) !important;
	border-radius: var(--tsd-radius-sm) !important;
	box-shadow: none !important;
	cursor: pointer;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-family: var(--tsd-font-b) !important;
	transition: .12s;
	float: none !important;
}
.tsd .tsd-rate.tsd-rate:hover { border-color: var(--tsd-muted-2) !important; }
.tsd .tsd-rate.tsd-rate.is-selected { border-color: var(--tsd-green) !important; background: var(--tsd-green-tint) !important; }

.tsd .tsd-rate__radio {
	position: relative;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: var(--tsd-paper);
	border: 1.5px solid var(--tsd-line);
	border-radius: 50%;
}
.tsd .tsd-rate.is-selected .tsd-rate__radio { border-color: var(--tsd-green); }
.tsd .tsd-rate.is-selected .tsd-rate__radio::after {
	content: "";
	position: absolute;
	inset: 3.5px;
	background: var(--tsd-green);
	border-radius: 50%;
}

.tsd .tsd-rate__name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; }
.tsd .tsd-rate__price {
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
}


/* ==========================================================================
   8. THE DELIVERY METHOD

   The choice comes before the address: Self Collect needs neither an address
   nor a calculation, so it should not sit behind one. These reuse .tsd-rate
   from section 3 — same control, used for a different question.
   ========================================================================== */

.tsd .tsd-method { margin-bottom: 8px; }
.tsd .tsd-method .tsd-rate__name { display: block; }
.tsd .tsd-method .tsd-rate__name small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	color: var(--tsd-muted);
}
.tsd .tsd-method.is-selected .tsd-rate__name small { color: var(--tsd-status-green, #3ecf6a); }

/* a price that is not known yet */
.tsd .tsd-rate__price.is-todo {
	font-family: var(--tsd-font-b);
	font-weight: 500;
	font-size: 12.5px;
	color: var(--tsd-muted);
}
/* and one that costs nothing */
.tsd .tsd-rate__price.is-free { color: var(--tsd-green-600); }

/* the address, once courier is chosen */
.tsd .tsd-addr {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--tsd-line-2);
}
.tsd .tsd-addr__to {
	margin: 12px 0 0;
	font-size: 12.5px;
	color: var(--tsd-muted);
	line-height: 1.55;
}
.tsd .tsd-linkish {
	background: none;
	border: none;
	padding: 0;
	margin-left: 4px;
	color: var(--tsd-green-600);
	font-family: var(--tsd-font-b);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tsd .tsd-linkish:hover { color: var(--tsd-ink); }

/* a free line in the summary reads green, like a discount */
.tsd .tsd-summary__value.is-free { color: var(--tsd-status-green, #3ecf6a); font-weight: 600; }

@media screen and (max-width: 900px) {
	.tsd .tsd-method .tsd-rate__name small { font-size: 11.5px; }
}

/* ==========================================================================
   DELIVERY, FOR A GUEST

   A guest has no address for the courier to quote against, so the options are
   replaced by a plain statement in the same position — the summary keeps its
   shape and the customer is told where the choice happens.

   Grey rather than amber: this is information, not a problem.
   ========================================================================== */

.tsd .tsd-guest-ship {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 4px 0 10px;
	padding: 14px 15px;
	background: var(--tsd-bg);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius-sm);
}
.tsd .tsd-guest-ship__ic {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tsd-muted);
}
.tsd .tsd-guest-ship__t {
	margin-bottom: 3px;
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 14px;
	color: var(--tsd-ink);
}
.tsd .tsd-guest-ship__d {
	font-size: 12.5px;
	color: var(--tsd-muted);
	line-height: 1.55;
}
.tsd .tsd-guest-ship__d a,
.tsd .tsd-guest-ship__d a:link,
.tsd .tsd-guest-ship__d a:visited {
	color: var(--tsd-green-600);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tsd .tsd-guest-ship__d a:hover { color: var(--tsd-ink); }

@media screen and (max-width: 520px) {
	.tsd .tsd-guest-ship { padding: 12px 13px; gap: 10px; }
	.tsd .tsd-guest-ship__ic { width: 28px; height: 28px; }
}