/*!
 * DST CUSTOM CLAUDE 2026-10-22 - styles for every checkout step: cart.asp (cart, shipping/billing, payment) and
 * thanks.asp. Shared by every store; loaded by vsadmin/inc/incdstwallet.asp (top of the cart code) and by a link in
 * thanks.asp. Restyles ECT's own markup into tight, native-looking Bootstrap - no ECT file is changed.
 * Off on cart.asp with dstcartlayout=FALSE in vsadmin/includes.asp. Cart page 1 has more in css/dstcart.css.
 * Rule: never put display:...!important on an ECT row - ECT's scripts show / hide rows with inline styles.
 */

/* =============================== progress bar (every step) =============================== */
/* the xxCoStp1-4 markup in includes.asp: the theme puts each dot 45px below the top of its step, which assumes a 24px
   label. The labels were 19px, so every dot sat 5px under the line. Fix the label to 24px. */
.bs-wizard .bs-wizard-stepnum { height: 24px; line-height: 24px; margin-bottom: 0 !important; padding: 0 !important; white-space: nowrap; overflow: hidden; }
@media (min-width: 768px) { .checkoutsteps { zoom: .8; } }
@media (max-width: 767.98px) { .checkoutsteps { zoom: .62; } }

/* =============================== coupon / gift certificate =============================== */
/* a Bootstrap input group - full-width box with the Apply button attached (cart page: .cartcoupon, page 2: div.cdformcoupon) */
.cartcoupon, div.cdformcoupon > div:first-child { display: flex !important; align-items: stretch; width: 100%; }
.cartcoupon input#cpncode, div.cdformcoupon input#cpncode {
	flex: 1 1 auto; min-width: 0; width: auto !important; height: 38px !important; margin: 0 !important; padding: 6px 10px !important;
	font-size: 1rem !important; color: #212529; border: 1px solid #ced4da !important; border-right: 0 !important;
	border-radius: .375rem 0 0 .375rem !important; background: #fff !important; background-image: none !important; box-shadow: none !important; }
.cartcoupon .applycoupon, div.cdformcoupon .applycoupon {
	flex: 0 0 auto; height: 38px !important; margin: 0 !important; padding: 0 16px !important; font-size: .9rem !important; line-height: 1 !important;
	border: 0 !important; border-radius: 0 .375rem .375rem 0 !important; background: #343a40 !important; color: #fff !important;
	box-shadow: none !important; text-transform: none; min-width: 0; width: auto !important; }

/* =============================== pages 2 + 3: one centered column of flat cards =============================== */
.cart2details, .cart3details { max-width: 650px; margin: 0 auto !important; float: none !important; }
.cart2details .card, .cart3details > .card {
	margin: 0 0 12px !important; border: 1px solid rgba(0,0,0,.125) !important; border-radius: .5rem !important; box-shadow: none !important; }
.cart2details .card-body, .cart3details > .card > .card-body { padding: 16px 20px !important; }
.cart2details .cart2header { width: auto !important; float: none !important; padding: 0 0 10px !important; margin: 0 !important;
	text-align: left !important; font-size: 1.1rem; font-weight: 600; color: #212529; border: 0 !important; background: none !important; }
.cart2details .cart2subheader:empty { display: none; }

/* form fields: label above a full-width 38px box (16px text so phones don't zoom) */
.cart2details .billformrow, .cart2details .shipformrow, .cart2details .nohidebillrow {
	flex-direction: column; align-items: stretch; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.cart2details .cobhl2 { width: auto !important; float: none !important; padding: 0 0 3px !important; margin: 0 !important; text-align: left !important;
	font-size: .85rem; font-weight: 600; color: #495057; white-space: nowrap; }
.cart2details .cobhl2 .ectlabel { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.cart2details span.redstar, .cart2details div.redstar::before { color: #dc3545; margin-right: 2px; }
.cart2details .cobll2 { width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; text-align: left !important; white-space: normal !important; }
.cart2details input.ecttextinput, .cart2details select.ectselectinput, .cart2details textarea.addinfo {
	display: block; width: 100% !important; max-width: none !important; height: 38px !important; margin: 0 !important; padding: 6px 10px !important;
	font-size: 1rem !important; line-height: 1.5; color: #212529; border: 1px solid #ced4da !important; border-radius: .375rem !important;
	background-color: #fff !important; background-image: none !important; box-shadow: none !important; transition: border-color .15s, box-shadow .15s; }
.cart2details select.ectselectinput { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 32px !important;
	background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 10px center / 12px 12px !important; }
.cart2details input.ecttextinput[style*="display:none"], .cart2details input.ecttextinput[style*="display: none"] { display: none !important; }
.cart2details textarea.addinfo { height: auto !important; min-height: 76px; resize: vertical; }
.cart2details input.ecttextinput:focus, .cart2details select.ectselectinput:focus, .cart2details textarea.addinfo:focus {
	border-color: #80bdff !important; outline: 0; box-shadow: 0 0 0 .2rem rgba(0,123,255,.25) !important; }
.cart2details .ectwarning { border-color: #dc3545 !important; }

/* billing / shipping cards: a 2-column grid; every block spans both unless paired below */
.cart2details .card-body:has(> .billformrow), .cart2details .card-body:has(> .shipformrow) {
	display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; row-gap: 10px; }
.cart2details .card-body:has(> .billformrow) > *, .cart2details .card-body:has(> .shipformrow) > * { grid-column: 1 / -1; }
.cart2details .card-body > .billformrow:has(.cdformcity), .cart2details .card-body > .billformrow:has(.cdformstate),
.cart2details .card-body > .nohidebillrow:has(.cdformcountry), .cart2details .card-body > .billformrow:has(.cdformzip),
.cart2details .card-body > .shipformrow:has(.cdformcity), .cart2details .card-body > .shipformrow:has(.cdformstate),
.cart2details .card-body > .shipformrow:has(.cdformcountry), .cart2details .card-body > .shipformrow:has(.cdformzip) { grid-column: auto; }
/* Safari lets a menu's text ("Please select US State") run past a narrow <select> and counts it as page width: at 320px
   the page scrolled sideways. Clip it inside the box */
.cart2details .card-body > .billformrow, .cart2details .card-body > .shipformrow, .cart2details .card-body > .nohidebillrow { min-width: 0; }
.cart2details select.ectselectinput { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Full Name and Email keep a row each at every width: side by side they read as First | Last name, and shoppers typed
   their last name into Email (js/dstcheckout.js also hints "First and last name") */
.cart2details .card-body > .cart2header, .cart2details .card-body > div:has(> .cdformshipdiff) { margin-bottom: -2px !important; }

/* checkboxes: box left of its label */
.cart2details .billformrowflags, .cart3details .billformrowflags {
	display: flex !important; align-items: center; gap: 8px; float: none !important; width: auto !important; margin: 4px 0 0 !important; padding: 0 !important; }
.cart2details .billformrowflags > div, .cart3details .billformrowflags > div { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; text-align: left !important; }
.cart2details .billformrowflags .ectlabel, .cart3details .billformrowflags .ectlabel { margin: 0; font-size: .9rem; color: #495057; cursor: pointer; }
.cart2details .billformrowflags br:has(+ .ectsmallnote:empty), .cart2details .ectsmallnote:empty { display: none; }
.cart2details input.ectcheckbox, .cart3details input.ectcheckbox { width: 18px; height: 18px; margin: 0 !important; accent-color: #28a745; cursor: pointer; vertical-align: middle; }
.cart2details .coshipflagscontainer, .cart3details .coshipflagscontainer { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }

/* "Shipping Address is Different?" and "Remember Me?": quiet secondary buttons */
.cart2details button.shipdiff, .cart2details button.createaccount {
	width: auto !important; margin: 0 !important; padding: 8px 14px !important; font-size: .9rem !important; line-height: 1.2 !important;
	text-transform: none !important; background: #fff !important; color: #343a40 !important; border: 1px solid #ced4da !important;
	border-radius: .375rem !important; box-shadow: none !important; }
.cart2details button.shipdiff:hover, .cart2details button.createaccount:hover { background: #f8f9fa !important; border-color: #adb5bd !important; }
.cart2details .cdformshipdiff { padding: 0 !important; margin: 0 !important; text-align: left !important; float: none !important; width: auto !important; }

/* extras card: special instructions, Remember Me, email coupons, promo code */
.cart2details .checkoutadditionals.checkoutadds2col {
	display: flex; flex-direction: column; align-items: stretch; float: none !important; width: auto !important; margin: 0 0 12px !important; padding: 0 !important; }
.cart2details .checkoutadditionals.checkoutadds2col:has(#co2newacctbutton) { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.cart2details #co2newacctbutton { padding: 0 !important; width: auto !important; }
.cart2details #co2newaccttxt { width: auto !important; flex: 1 1 200px; font-size: .85rem; color: #6c757d; }
.cart2details .card-body > .checkoutadditionals.checkoutadds2col:last-child { margin-bottom: 0 !important; }
.cart2details .card-body > .billformrowflags + .checkoutadditionals { margin-top: 12px !important; }
.cart2details div.cdformcoupon #cpncodespan:not(:empty) { margin-top: 6px; font-size: .9rem; }

/* payment method: a list group, the chosen one highlighted; the whole row picks it */
.cart2details .checkoutadditionals.copayradio1 {
	display: flex; align-items: center; gap: 10px; float: none !important; width: auto !important; margin: 0 !important; padding: 0 0 0 14px !important;
	border: 1px solid #dee2e6; border-top-width: 0; background: #fff; }
.cart2details .cart2header + .copayradio1 { border-top-width: 1px; border-radius: .375rem .375rem 0 0; }
.cart2details .copayradio1:last-child { border-radius: 0 0 .375rem .375rem; }
.cart2details .cart2header + .copayradio1:last-child { border-radius: .375rem; }
.cart2details .copayradio1:has(input:checked) { background: #f1f9f3; box-shadow: inset 3px 0 0 #28a745; }
.cart2details .copayradio1 > div { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; text-align: left !important; }
.cart2details .copayradio1 > .cobll2 { flex: 1 1 auto; }
.cart2details .copayradio1 label.ectlabel { display: block; margin: 0; padding: 12px 14px 12px 0; font-size: 1rem; color: #212529; cursor: pointer; }
.cart2details .copayradio1:has(input:checked) label.ectlabel { font-weight: 600; }
.cart2details input.ectradio, .cart3details input.ectradio { width: 18px; height: 18px; margin: 0 !important; accent-color: #28a745; cursor: pointer; vertical-align: middle; }

/* Proceed to Payment: full width */
.cart2details .checkoutbutton2 { width: 100% !important; float: none !important; padding: 0 !important; margin: 4px 0 12px !important; text-align: center !important; }
.cart2details .checkoutbutton2 .ectbutton { width: 100% !important; margin: 0 !important; padding: 14px 16px !important; font-size: 1.1rem !important; border-radius: .5rem !important; }

/* =============================== page 3: order summary, shipping choice, payment =============================== */
.cart3details .cart3row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; float: none !important; width: auto !important;
	margin: 0 !important; padding: 5px 0 !important; border: 0 !important; background: none !important; }
.cart3details .cart3row > div { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }
.cart3details .cart3row > .cobhl3 { text-align: left !important; color: #495057; flex: 0 1 auto; font-weight: 400 !important; }
.cart3details .cart3row > .cobhl3::after { content: none !important; }
.cart3details .cart3row > .cobll3 { text-align: right !important; font-weight: 600; color: #212529; }
.cart3details .cart3discountsrow > .cobll3 { font-weight: 400; color: #1e7e34; font-size: .9rem; }
.cart3details .cart3discountsrow > .cobll3 br:last-child { display: none; }
.cart3details .cart3row.cart3gndtotcntnr { border-top: 1px solid #dee2e6 !important; margin-top: 6px !important; padding-top: 10px !important; }
.cart3details .cart3gndtotcntnr > div { font-size: 1.15rem; font-weight: 700 !important; color: #212529 !important; }

/* shipping choice: a list group of rates; the chosen one highlighted. ECT draws the first carrier as .shiptableline2 and,
   after a rate change, the alternate carriers as .shiptableline (no "2") - both are covered */
.cart3details .cart3shipselrow { margin: 8px 0 !important; padding: 0 !important; float: none !important; width: auto !important; }
.cart3details .shipoptionstable2 { display: block !important; width: 100% !important; margin: 0 !important;
	border: 1px solid #dee2e6 !important; border-radius: .375rem; overflow: hidden; }
.cart3details .shipoptionstable2 > div { display: block !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
	border: 0 !important; background: #fff; }
.cart3details .shipoptionstable2 > div + div { border-top: 1px solid #dee2e6 !important; }
.cart3details .shipoptionstable2 > div > div { display: block; float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important; text-align: left !important; }
/* carrier logos hidden - the rate name says enough (Graham 2026-10-22) */
.cart3details .shiplogo2, .cart3details .shiplogo { display: none !important; }
.cart3details .shiprateline { margin: 0 !important; padding: 0 !important; }
.cart3details .shiprateline + .shiprateline { border-top: 1px solid #f1f3f5; }
.cart3details label.shipradio { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 10px; width: 100%; margin: 0 !important;
	padding: 10px 14px !important; cursor: pointer; font-weight: 400; }
.cart3details label.shipradio .shipratemethod { flex: 1 1 0; min-width: 0; display: flex; justify-content: space-between; gap: 12px; color: #212529; font-weight: 400 !important; }
.cart3details label.shipradio .shipratecost { font-weight: 600; white-space: nowrap; }
.cart3details label.shipradio .cart3servicecommitment { display: block !important; flex: 0 0 100%; padding: 0 0 0 28px !important; margin: 0 !important;
	font-size: .8rem; color: #6c757d; text-align: left !important; width: auto !important; }
.cart3details .shiprateline:has(input:checked) { background: #f1f9f3; box-shadow: inset 3px 0 0 #28a745; }
.cart3details .shiprateline:has(input:checked) .shipratemethod { font-weight: 600 !important; }
.cart3details .cart3shipselrow + .coshipflagscontainer { margin: 0 0 8px !important; }

/* Square payment: its own card in the same column; Google Pay / Apple Pay and the Pay button full width */
.cart3details .sq-payment-form { width: auto !important; max-width: none !important; margin: 0 0 12px !important; padding: 16px 20px !important;
	background: #fff; border: 1px solid rgba(0,0,0,.125); border-radius: .5rem; box-shadow: none !important; }
.cart3details .sq-payment-form #sq-walletbox, .cart3details .sq-payment-form #sq-ccbox { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.cart3details .sq-payment-form #sq-google-pay, .cart3details .sq-payment-form #sq-apple-pay { width: 100% !important; max-width: none !important; }
/* Google's button is a fixed 240px "long" button inside Square's box: a full-width black pill with Google's own
   card strip (an iframe) centered in it */
.cart3details #sq-google-pay > div, .cart3details #sq-google-pay button.gpay-card-info-container,
.cart3details #sq-google-pay .gpay-button-container-size-match-height, .cart3details #sq-google-pay .gpay-button { width: 100% !important; }
.cart3details #sq-google-pay button.gpay-card-info-container { height: 48px !important; border-radius: 24px !important; overflow: hidden; }
.cart3details #sq-google-pay .gpay-card-info-iframe { margin: 0 auto; }
.cart3details .sq-payment-form #sq-creditcard { width: 100% !important; margin: 0 !important; padding: 14px 16px !important; font-size: 1.1rem !important; border-radius: .5rem !important; }

/* =============================== loading spinner (every checkout step + thanks) =============================== */
/* ECT's images/preloader.gif (class ectpreloader: payment covers, Square / PayPal loaders, the wallet cover) drawn as a
   Bootstrap-style spinner instead. The padding leaves the gif no room to draw; the border is the spinner. */
img.ectpreloader { box-sizing: border-box !important; width: 44px !important; height: 44px !important; padding: 22px !important; max-width: none !important;
	border: 4px solid rgba(40,167,69,.2) !important; border-top-color: #28a745 !important; border-radius: 50% !important; background: none !important;
	animation: dstspin .75s linear infinite; }
@keyframes dstspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { img.ectpreloader { animation-duration: 2s; } }
/* ECT's full-page covers while a payment runs (#squarecover, #ppcoverdiv, #nmicover, #dstwallet-cover): ECT tints the page 50%
   grey, which barely reads as covered. Near-solid white, spinner in the middle of the screen, "Please wait..." under it.
   Only covers holding the spinner - ECT's add-to-cart popup is an .ectopaque too. ECT still shows / hides them inline. */
div.ectopaque:has(> img.ectpreloader) { background-color: rgba(255,255,255,.95) !important; }
/* the theme's div.main is its own stacking layer (position:relative; z-index:3), so a cover inside it could never rise
   above the sticky header (z-index 1020): the header stayed clickable while a payment ran. Pages with a spinner cover
   drop that layer, so the cover's own z-index (10000) puts it over everything */
div.main:has(div.ectopaque > img.ectpreloader) { z-index: auto !important; }
div.ectopaque:has(> img.ectpreloader) > img.ectpreloader { position: fixed; top: 50%; left: 50%; margin: -22px 0 0 -22px !important; }
div.ectopaque:has(> img.ectpreloader)::after { content: "Please wait\2026"; position: fixed; top: 50%; left: 0; right: 0; margin-top: 34px;
	text-align: center; font-size: 1rem; font-weight: 600; color: #212529; }

/* =============================== thanks page =============================== */
/* thanks.asp puts ECT's receipt in a fixed .col-8 between two empty .col - one centered 760px column instead */
.row:has(> .col-8 .orderreceipt) > .col, .row:has(> .col-8 #orderfail) > .col { display: none; }
.row:has(> .col-8 .orderreceipt), .row:has(> .col-8 #orderfail) { justify-content: center; }
.row:has(> .col-8 .orderreceipt) > .col-8, .row:has(> .col-8 #orderfail) > .col-8 { flex: 0 0 100%; max-width: 760px; }
/* progress bar (all done): printed by thanks.asp from xxCoStp4; only shown above a receipt, never on a failed payment */
.dstthankssteps { margin: 12px 0 4px; }
.dstthankssteps:not(:has(~ .orderreceipt)) { display: none; }

/* "Order Complete!" (ECT draws it as a big button back to the home page): a heading with a check mark */
.orderreceipt > input.continueshopping { display: block; width: 100% !important; margin: 8px 0 4px !important; padding: 64px 0 0 !important; border: 0 !important;
	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='8' fill='%2328a745'/%3e%3cpath fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4.6 8.3l2.2 2.2 4.6-4.8'/%3e%3c/svg%3e") no-repeat center top / 52px 52px !important;
	color: #212529 !important; font-size: 1.6rem !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0;
	box-shadow: none !important; cursor: default; pointer-events: none; }
.orderreceipt #printcontent { font-size: .95rem; color: #495057; text-align: center; overflow-wrap: anywhere; }
.orderreceipt #printcontent > br:first-child { display: none; }
.orderreceipt #printcontent > * { text-align: left; }

/* addresses + order details: flat cards, label / value rows */
.orderreceipt .receiptaddresses { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 12px 0 !important; float: none !important; width: auto !important; }
.orderreceipt .receiptaddress, .orderreceipt .receiptextra {
	float: none !important; width: auto !important; margin: 0 !important; padding: 14px 16px !important;
	border: 1px solid rgba(0,0,0,.125) !important; border-radius: .5rem !important; background: #fff; box-shadow: none !important; }
.orderreceipt .receiptextra { margin: 0 0 12px !important; }
.orderreceipt .receiptsectionhead { padding: 0 0 8px !important; margin: 0 !important; font-size: 1.05rem; font-weight: 600; color: #212529; border: 0 !important; background: none !important; text-align: left !important; }
.orderreceipt .receiptcontainer { display: grid !important; grid-template-columns: 110px minmax(0, 1fr); column-gap: 10px; padding: 3px 0 !important; margin: 0 !important; float: none !important; width: auto !important; }
.orderreceipt .receiptcontainer > div { display: block !important; width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; text-align: left !important; }
.orderreceipt .receiptleft { color: #6c757d; font-size: .85rem; line-height: 1.6; }
.orderreceipt .receiptleft::after { content: none !important; }
.orderreceipt .receiptright { color: #212529; }

/* items: one row per part (name, part number under it, price, qty, total); options and package contents indented */
.orderreceipt .receiptlist { display: block !important; width: auto !important; margin: 0 !important; padding: 4px 16px !important;
	border: 1px solid rgba(0,0,0,.125) !important; border-radius: .5rem !important; background: #fff; }
.orderreceipt .receiptheadrow, .orderreceipt .receiptlistrow { height: auto !important;
	display: grid !important; grid-template-columns: minmax(0, 1fr) 84px 72px 90px; grid-template-areas: "name unit qty total" "id unit qty total";
	column-gap: 10px; align-items: start; padding: 10px 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }
.orderreceipt .receiptheadrow > div, .orderreceipt .receiptlistrow > div { display: block !important; width: auto !important; height: auto !important; float: none !important;
	padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; text-align: left !important; }
.orderreceipt .receiptheadrow { align-items: end; grid-template-areas: "name unit qty total" "name unit qty total"; padding: 6px 0 !important; font-size: .8rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: .03em; }
.orderreceipt .receiptheadrow .receiptprodid { display: none !important; }
.orderreceipt .receiptheadrow > div { font-size: inherit !important; line-height: 1.4 !important; }
.orderreceipt .receiptitemrow { border-top: 1px solid #e9ecef !important; }
.orderreceipt .receiptprodname { grid-area: name; font-weight: 600; color: #212529; line-height: 1.35; }
.orderreceipt .receiptprodid { grid-area: id; font-size: .8rem; color: #6c757d; overflow-wrap: anywhere; }
.orderreceipt .receiptunitprice { grid-area: unit; text-align: right !important; color: #495057; }
.orderreceipt .receiptquantity { grid-area: qty; text-align: center !important; color: #212529 !important; }
.orderreceipt .receipttotal { grid-area: total; text-align: right !important; font-weight: 600; white-space: nowrap; }
.orderreceipt .receiptpackage { display: block !important; margin: 6px 0 0 !important; font-weight: 400; font-size: .8rem; color: #6c757d; }
.orderreceipt .receiptpackagerow { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; padding: 1px 0 !important; }
.orderreceipt .receiptpackagerow > div { float: none !important; width: auto !important; padding: 0 !important; text-align: left !important; }
.orderreceipt .receiptpackagerow > div:last-child { text-align: right !important; }
.orderreceipt .receiptoptionrow { padding: 0 0 8px 14px !important; font-size: .85rem; line-height: 1.35; }
.orderreceipt .receiptoptionrow > div { font-size: inherit !important; line-height: inherit !important; }
.orderreceipt .receiptoptionrow .receiptoptgroup { grid-area: name; font-weight: 600; color: #495057; }
.orderreceipt .receiptoptionrow .receiptoptname { grid-area: id; color: #6c757d; }
.orderreceipt .receiptoptionrow .receiptoptunitprice, .orderreceipt .receiptoptionrow .receiptoptquantity { display: none !important; }
.orderreceipt .receiptoptionrow .receiptopttotal { grid-area: total; text-align: right !important; color: #495057; white-space: nowrap; }

/* totals: right-hand list */
.orderreceipt .receipttotalscolumn { float: none !important; width: auto !important; margin: 0 !important; border: 0 !important; padding: 8px 16px 0 !important; }
.orderreceipt .receipttotalstable { display: block !important; width: 100% !important; max-width: 320px; margin: 0 0 0 auto !important; border: 0 !important; }
.orderreceipt .receipttotalsrow { display: flex !important; justify-content: space-between; gap: 12px; padding: 3px 0 !important; margin: 0 !important; border: 0 !important; }
.orderreceipt .receipttotalsrow > div { float: none !important; width: auto !important; padding: 0 !important; text-align: left !important; border: 0 !important; }
.orderreceipt .receipttotalsrow > .ectleft { color: #495057; font-weight: 400 !important; }
.orderreceipt .receipttotalsrow > .ectright { font-weight: 600; text-align: right !important; }
.orderreceipt .receipttotalsrow.rectotgrandtotal { border-top: 1px solid #dee2e6 !important; margin-top: 4px !important; padding-top: 8px !important; }
.orderreceipt .receipttotalsrow.rectotgrandtotal > div { font-size: 1.15rem; font-weight: 700 !important; color: #212529; }

/* bottom: email note, then Continue Shopping (main) + Printable Version (secondary) side by side */
.orderreceipt .receiptbuttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 24px !important; padding: 0 !important; float: none !important; width: auto !important; }
.orderreceipt .receiptrecemail { flex: 0 0 100%; text-align: center; font-size: .9rem; color: #6c757d; margin: 0 0 4px !important; }
.orderreceipt .receiptcontinueshopping, .orderreceipt .receiptprintversion { display: block !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.orderreceipt .receiptbuttons .ectbutton { width: auto !important; min-width: 0; margin: 0 !important; padding: 10px 20px !important; font-size: .95rem !important; line-height: 1.2 !important;
	text-transform: none !important; border-radius: .375rem !important; box-shadow: none !important; white-space: nowrap; }
.orderreceipt .receiptbuttons .continueshopping { background: #28a745 !important; color: #fff !important; border: 1px solid #28a745 !important; }
.orderreceipt .receiptbuttons .printversion { background: #fff !important; color: #343a40 !important; border: 1px solid #ced4da !important; }

/* =============================== USPS address check dialog (js/dstcheckout.js part 4) =============================== */
/* same look as ECT's account pop-up: dark backdrop, white rounded box, the main button green */
.dstaddr-backdrop { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.5); }
.dstaddr-box { width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow: auto; padding: 20px 24px 22px; background: #fff; border-radius: .5rem;
	box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.2); color: #212529; text-align: left; }
.dstaddr-box h3 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 600; line-height: 1.3; font-family: inherit; color: #212529; }
.dstaddr-lead { margin: 0 0 14px; font-size: .92rem; line-height: 1.45; color: #6c757d; }
.dstaddr-body { display: grid; gap: 10px; margin-bottom: 16px; }
.dstaddr-addr { padding: 10px 12px; border: 1px solid #dee2e6; border-radius: .375rem; background: #fff; }
.dstaddr-addr.dstaddr-pick { border-color: #28a745; background: #f1f9f3; box-shadow: inset 3px 0 0 #28a745; }
.dstaddr-label { margin-bottom: 2px; font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #6c757d; }
.dstaddr-text { white-space: pre-line; font-size: 1rem; line-height: 1.4; color: #212529; }
.dstaddr-inlabel { margin: 4px 0 0; font-size: .85rem; font-weight: 600; color: #495057; }
.dstaddr-in { width: 100%; height: 40px; padding: 6px 10px; font-size: 16px; border: 1px solid #ced4da; border-radius: .375rem; }
.dstaddr-in:focus { outline: 0; border-color: #80bdff; box-shadow: 0 0 0 .2rem rgba(0,123,255,.25); }
.dstaddr-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.dstaddr-btn { flex: 1 1 auto; min-height: 42px; padding: 9px 14px; font-size: .95rem; line-height: 1.2; border-radius: .375rem; cursor: pointer;
	background: #fff; color: #343a40; border: 1px solid #ced4da; }
.dstaddr-btn.dstaddr-main { flex-basis: 100%; font-weight: 600; background: #28a745; color: #fff; border-color: #28a745; }
.dstaddr-btn:focus-visible { outline: 3px solid #80bdff; outline-offset: 2px; }

/* =============================== phones =============================== */
@media (max-width: 767.98px) {
	.cart2details .card-body, .cart3details > .card > .card-body, .cart3details .sq-payment-form { padding: 12px !important; }
	.cart3details label.shipradio { padding: 10px !important; }
	/* thanks page */
	.orderreceipt .receiptaddresses { grid-template-columns: minmax(0, 1fr); }
	.orderreceipt .receiptaddress, .orderreceipt .receiptextra { padding: 12px !important; }
	.orderreceipt .receiptcontainer { grid-template-columns: 90px minmax(0, 1fr); }
	.orderreceipt .receiptlist { padding: 0 12px !important; }
	.orderreceipt .receiptheadrow { display: none !important; }
	.orderreceipt .receiptlistrow { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name name name" "id qty total"; row-gap: 2px; }
	.orderreceipt .receiptitemrow .receiptunitprice { display: none !important; }
	.orderreceipt .receiptitemrow .receiptquantity { color: #6c757d; font-size: .85rem; white-space: nowrap; }
	.orderreceipt .receiptitemrow .receiptquantity::before { content: "Qty "; }
	.orderreceipt .receiptoptionrow { grid-template-areas: "name name name" "id id total"; }
	.orderreceipt .receipttotalscolumn { padding: 8px 0 0 !important; }
	.orderreceipt .receipttotalstable { max-width: none; }
}