/* ==========================================================================
   T's Direct Order & Quote System — quote conversion review

   Built to quote-conversion-review-mockup.html. Mockup values are quoted
   above each block.

   This page tells a customer what has moved since they were quoted, before
   anything is added to their cart. Colour carries the meaning: green for what
   is ready, amber for what has changed price, red for what cannot be had.
   ========================================================================== */

.tsd-review { max-width: 1000px; margin: 0 auto; }

/* ==========================================================================
   1. HEADING

   mockup:
     .rv-head h2 { font-size:29px; font-weight:700 }
     .rv-lead    { color:var(--muted); margin-bottom:20px }
     .rv-lead b  { color:var(--ink); font-weight:600 }
   ========================================================================== */

.tsd .tsd-review__head { margin-bottom: 18px !important; }
.tsd .tsd-review__head h2 {
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.15 !important;
	letter-spacing: .3px;
	color: var(--tsd-ink);
}
.tsd .tsd-review__lead {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14.5px;
	color: var(--tsd-muted);
	line-height: 1.5;
}
.tsd .tsd-review__lead b { color: var(--tsd-ink); font-weight: 600; }

/* ==========================================================================
   2. THE THREE COUNTS

   mockup:
     .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
              gap:12px; margin-bottom:20px }
     .stat  { padding:14px 16px; display:flex; gap:12px; align-items:center }
     .stat .si { width:36px; height:36px; border-radius:50% }
     .stat .sn { font-d 700 22px }
     .stat .sl { font-size:11.5px; uppercase; letter-spacing:.05em }
   ========================================================================== */

.tsd .tsd-review__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

.tsd .tsd-stat {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius);
	box-shadow: var(--tsd-shadow);
}
.tsd .tsd-stat.is-none { opacity: .5; }

.tsd .tsd-stat__i {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.tsd .tsd-stat__n {
	display: block;
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
	color: var(--tsd-ink);
}
.tsd .tsd-stat__l {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	color: var(--tsd-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.tsd .tsd-stat--ok .tsd-stat__i { background: var(--tsd-green-tint); color: var(--tsd-green-600); }
.tsd .tsd-stat--warn .tsd-stat__i { background: var(--tsd-amber-bg); color: var(--tsd-amber); }
.tsd .tsd-stat--bad .tsd-stat__i { background: var(--tsd-danger-bg); color: var(--tsd-danger); }

/* ==========================================================================
   3. THE GROUPS

   mockup:
     .gh { padding:13px 18px; display:flex; align-items:center; gap:11px;
           border-bottom:1px solid var(--line) }
     .gh .gi { width:28px; height:28px; border-radius:50% }
     .gh .gt { font-d 600 16px uppercase; letter-spacing:.03em }
     .gh .gc { margin-left:auto; font-size:12.5px; padding:3px 11px;
               border-radius:20px; background: var(--tsd-paper); border:1px solid var(--line) }
   ========================================================================== */

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

.tsd .tsd-group__head {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--tsd-line);
}
.tsd .tsd-group__i {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--tsd-paper);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.tsd .tsd-group__t {
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.tsd .tsd-group__c {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 600;
	padding: 3px 11px;
	border-radius: 20px;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	color: var(--tsd-muted);
	white-space: nowrap;
}

.tsd .tsd-group--ok .tsd-group__head { background: var(--tsd-green-tint); border-color: var(--tsd-green-line); }
.tsd .tsd-group--ok .tsd-group__i,
.tsd .tsd-group--ok .tsd-group__t { color: var(--tsd-green-600); }

.tsd .tsd-group--warn .tsd-group__head { background: var(--tsd-amber-bg); border-color: var(--tsd-amber-line); }
.tsd .tsd-group--warn .tsd-group__i,
.tsd .tsd-group--warn .tsd-group__t { color: var(--tsd-amber); }

.tsd .tsd-group--bad .tsd-group__head { background: var(--tsd-danger-bg); border-color: var(--tsd-danger-line); }
.tsd .tsd-group--bad .tsd-group__i,
.tsd .tsd-group--bad .tsd-group__t { color: var(--tsd-danger); }

/* ==========================================================================
   4. A LINE

   mockup:
     .ri { display:grid; grid-template-columns:64px minmax(0,1fr) auto;
           gap:14px; padding:15px 18px; align-items:center }
     .ri-img { width:64px; height:64px; border-radius:var(--radius-sm) }
     .ri-n { font-d 600 15.5px }
     .ri-right { text-align:right; min-width:150px }
   ========================================================================== */

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

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

.tsd .tsd-ri__main { min-width: 0; }
.tsd .tsd-ri__n {
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.2;
	color: var(--tsd-ink);
}

.tsd .tsd-ri__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tsd .tsd-ri__tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--tsd-bg);
	border: 1px solid var(--tsd-line);
	border-radius: 20px;
	padding: 2px 9px;
	font-size: 11.5px;
	color: var(--tsd-ink);
}
.tsd .tsd-ri__sw {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--swatch, #ccc);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
	flex-shrink: 0;
}
.tsd .tsd-ri__brand {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	padding: 2px 9px;
	background: var(--tsd-green-tint);
	border: 1px solid var(--tsd-green-line);
	border-radius: 20px;
	font-size: 11.5px;
	color: var(--tsd-green-600);
}

.tsd .tsd-ri__right { text-align: right; min-width: 150px; }
.tsd .tsd-ri__price { font-family: var(--tsd-font-d); font-weight: 700; font-size: 17px; color: var(--tsd-ink); }
.tsd .tsd-ri__sub { margin-top: 2px; font-size: 12px; color: var(--tsd-muted); }

/* ---------- a price that has moved ----------
   mockup: .shift { display:inline-flex; gap:9px; background: var(--tsd-paper);
                    border:1px solid var(--amber-line); padding:6px 11px } */
.tsd .tsd-shift {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-amber-line);
	border-radius: var(--tsd-radius-sm);
	padding: 6px 11px;
}
.tsd .tsd-shift__was { color: var(--tsd-muted); text-decoration: line-through; font-size: 13px; }
.tsd .tsd-shift__arw { color: var(--tsd-muted-2); display: flex; }
.tsd .tsd-shift__now {
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 16px;
	color: var(--tsd-amber);
}
.tsd .tsd-delta { margin-top: 5px; font-size: 11.5px; font-weight: 600; }
.tsd .tsd-delta--up { color: var(--tsd-amber); }
.tsd .tsd-delta--down { color: var(--tsd-green-600); }

/* ---------- why something cannot be had ---------- */
.tsd .tsd-reason {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--tsd-danger-bg);
	border: 1px solid var(--tsd-danger-line);
	color: var(--tsd-danger);
	border-radius: 20px;
	padding: 4px 11px;
	font-size: 12px;
	font-weight: 500;
	text-align: left;
}
.tsd .tsd-reason svg { flex-shrink: 0; }

/* ==========================================================================
   5. WHAT IT COMES TO

   mockup:
     .impact h3 { font-d 600 17px uppercase }
     .imrow { display:flex; justify-content:space-between; padding:7px 0 }
     .imrow.drop .v { color:var(--muted); text-decoration:line-through }
     .imrow.tot { border-top:2px solid var(--green); font-d 700 19px uppercase }
     .imrow.tot .v { font-size:24px; color:var(--green-600) }
     .im-actions { display:grid; grid-template-columns:1fr auto; gap:11px }
   ========================================================================== */

.tsd .tsd-impact { padding: 24px 24px 22px; margin-top: 4px; }
.tsd .tsd-impact h3 {
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 18px;
	text-transform: none;
	letter-spacing: .01em;
	color: var(--tsd-ink);
}

.tsd .tsd-imrow {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	font-size: 14px;
	color: var(--tsd-ink);
}
.tsd .tsd-imrow__v {
	font-weight: 600;
	color: var(--tsd-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.tsd .tsd-imrow__v.is-free { color: var(--tsd-status-green); }

.tsd .tsd-imrow--drop { color: var(--tsd-muted); }
.tsd .tsd-imrow--drop .tsd-imrow__v { color: var(--tsd-muted); text-decoration: line-through; }

.tsd .tsd-imrow--diff .tsd-imrow__v { color: var(--tsd-amber); }
.tsd .tsd-imrow--diff.is-down .tsd-imrow__v { color: var(--tsd-green-600); }

.tsd .tsd-imrow--tot {
	margin-top: 10px;
	padding-top: 14px;
	border-top: 2px solid var(--tsd-green);
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 19px;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--tsd-ink);
}
.tsd .tsd-imrow--tot .tsd-imrow__v { font-size: 24px; color: var(--tsd-green-600); }

/* The "(includes X VAT)" sub-line sits tight under the total, muted. */
.tsd .tsd-imrow--vat {
	padding: 2px 0 0;
	font-size: 12px;
}
.tsd .tsd-imrow--vat .tsd-imrow__v { color: var(--tsd-muted-2); font-weight: 500; }

.tsd .tsd-im-note {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--tsd-line-2);
	font-size: 12px;
	color: var(--tsd-muted);
	line-height: 1.5;
}
.tsd .tsd-im-note svg { color: var(--tsd-muted-2); flex-shrink: 0; margin-top: 2px; }

.tsd .tsd-im-actions {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 11px;
	margin-top: 18px;
}

/* ==========================================================================
   6. THE TWO CLEAN OUTCOMES
   ========================================================================== */

.tsd .tsd-dead,
.tsd .tsd-clear { padding: 46px 24px; text-align: center; }

.tsd .tsd-dead__ic,
.tsd .tsd-clear__ic {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin: 0 auto 18px;
}
.tsd .tsd-dead__ic { width: 72px; height: 72px; background: var(--tsd-danger-bg); color: var(--tsd-danger); }
.tsd .tsd-clear__ic { width: 78px; height: 78px; background: var(--tsd-green-tint); color: var(--tsd-green); }

.tsd .tsd-dead h3,
.tsd .tsd-clear h3 {
	margin: 0 0 8px;
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 21px;
	color: var(--tsd-ink);
}
.tsd .tsd-clear h3 { font-size: 22px; }

.tsd .tsd-dead p,
.tsd .tsd-clear p {
	max-width: 440px;
	margin: 0 auto 20px;
	color: var(--tsd-muted);
	line-height: 1.55;
}

.tsd .tsd-dead__actions,
.tsd .tsd-clear__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

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

   mockup:
     .ri-img { width:56px; height:56px }
     .ri-right { grid-column:1/-1; text-align:left; min-width:0;
                 border-top:1px dashed var(--line); padding-top:11px }
     .rv-head h2 { font-size:23px }
   ========================================================================== */

@media screen and (max-width: 900px) {
	.tsd .tsd-review__head h2 { font-size: 23px; }

	.tsd .tsd-ri { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
	.tsd .tsd-ri__img { width: 56px; height: 56px; }
	.tsd .tsd-ri__right {
		grid-column: 1 / -1;
		text-align: left;
		min-width: 0;
		border-top: 1px dashed var(--tsd-line);
		padding-top: 11px;
	}

	.tsd .tsd-im-actions { grid-template-columns: 1fr; }
	.tsd .tsd-im-actions .tsd-btn { width: 100%; }
}

/* ==========================================================================
   Reduced-stock quantity picker (adjust group)
   ========================================================================== */
.tsd .tsd-stockrow {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
.tsd .tsd-stockrow__note {
	font-size: 12px;
	font-weight: 600;
	color: var(--tsd-amber);
}
.tsd .tsd-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--tsd-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--tsd-paper-2);
}
.tsd .tsd-qty__b {
	width: 30px;
	height: 32px;
	border: none;
	background: transparent;
	color: var(--tsd-ink);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
}
.tsd .tsd-qty__b:hover { background: var(--tsd-green, #0173FD); color: #fff; }
.tsd .tsd-qty__i {
	width: 44px;
	height: 32px;
	border: none;
	border-left: 1px solid var(--tsd-line);
	border-right: 1px solid var(--tsd-line);
	background: transparent;
	color: var(--tsd-ink);
	text-align: center;
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 14px;
	-moz-appearance: textfield;
	appearance: textfield;
}
.tsd .tsd-qty__i::-webkit-outer-spin-button,
.tsd .tsd-qty__i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tsd .tsd-qty__i:focus { outline: none; }

@media screen and (max-width: 900px) {
	.tsd .tsd-stockrow { align-items: flex-start; }
}