/* MACSTAR - product page, cart drawer, compare and checkout.
   Tokens come from macstar.css / macstar-dark.css; nothing is redefined here. */

/* ============================================================ shared bits */

.ms-b--wa{background:#1E6F50;border-color:#1E6F50;color:#F2FBF6}
.ms-b--wa:hover{background:#24865f;border-color:#24865f;color:#F2FBF6}
.ms-b--buy{background:var(--ms-text);color:var(--ms-bg);border-color:var(--ms-text)}
.ms-b--buy:hover{background:var(--ms-gold);border-color:var(--ms-gold);color:#17120A}

.ms-sp-empty{font-family:var(--ms-mono);font-size:13px;color:var(--ms-text-mute);margin:0;padding:18px 0}

/* ======================================================== product page */

.macstar-single div.product:not(.elementor){
	display:grid;
	grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
	gap:clamp(24px,3.4vw,56px);
	align-items:start;
	max-width:var(--ms-maxw);
	margin:0 auto;
	padding:clamp(24px,4vw,52px) clamp(16px,3vw,40px) clamp(40px,6vw,90px);
}
.macstar-single div.product:not(.elementor) > .ms-sp-media{grid-column:1;width:100%;float:none;margin:0}
.macstar-single div.product:not(.elementor) > .summary{grid-column:2;width:100%;float:none;margin:0}
.macstar-single div.product:not(.elementor) > .ms-sp-tabs{grid-column:1 / -1}

/* --- art stage --- */
.ms-sp-stage{
	position:relative;display:grid;place-items:center;cursor:zoom-in;
	border:1px solid var(--ms-line);border-radius:var(--ms-radius-lg);
	background:radial-gradient(90% 85% at 50% 26%,#1E1A16,#0B0A09);
	padding:clamp(20px,3.4vw,54px);aspect-ratio:5/4;overflow:hidden;
}
.ms-sp-stage:focus-visible{outline:2px solid var(--ms-gold);outline-offset:3px}
.ms-sp-view{display:none;width:100%;height:100%;place-items:center}
.ms-sp-view.is-on{display:grid}
.ms-sp-view svg,.ms-sp-view img{width:auto;height:auto;max-width:100%;max-height:100%;display:block;margin:0 auto;
	transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.ms-sp-stage:hover .ms-sp-view.is-on svg,.ms-sp-stage:hover .ms-sp-view.is-on img{transform:scale(1.04)}
.ms-sp-zoom{
	position:absolute;left:14px;bottom:13px;font-family:var(--ms-mono);font-size:10.5px;
	letter-spacing:.16em;text-transform:uppercase;color:var(--ms-text-mute);
	border:1px solid var(--ms-line);border-radius:999px;padding:5px 11px;
	background:rgba(11,10,9,.72);backdrop-filter:blur(4px);pointer-events:none;
}
.ms-sp-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.ms-sp-thumb{
	all:unset;display:grid;place-items:center;cursor:pointer;aspect-ratio:1/1;padding:8px;
	border:1px solid var(--ms-line);border-radius:var(--ms-radius);
	background:radial-gradient(90% 85% at 50% 26%,#1A1714,#0B0A09);transition:border-color .2s
}
.ms-sp-thumb svg,.ms-sp-thumb img{width:auto;height:auto;max-width:100%;max-height:100%}
.ms-sp-thumb:hover{border-color:var(--ms-line-strong)}
.ms-sp-thumb.is-on{border-color:var(--ms-rust)}

.ms-zoom{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
	background:rgba(6,6,5,.92);backdrop-filter:blur(6px);cursor:zoom-out;padding:5vmin}
.ms-zoom-inner{display:grid;place-items:center;max-width:min(1200px,92vw);max-height:88vh}
.ms-zoom-inner svg,.ms-zoom-inner img{width:auto;height:auto;max-width:100%;max-height:88vh}
.ms-zoom-x{all:unset;position:absolute;top:18px;right:22px;cursor:pointer;font-size:30px;
	line-height:1;color:var(--ms-text-dim)}
.ms-zoom-x:hover{color:var(--ms-text)}

/* --- summary --- */
.ms-sp-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ms-sp-eyebrow{font-family:var(--ms-mono);font-size:11.5px;letter-spacing:.2em;
	text-transform:uppercase;color:var(--ms-text-mute)}
.macstar-single .summary h1.ms-sp-title{
	font-family:var(--ms-display);font-size:clamp(27px,3.1vw,42px);font-weight:800;
	letter-spacing:-.025em;line-height:1.08;color:var(--ms-text);margin:0 0 14px
}
.ms-sp-lede{font-size:15.5px;line-height:1.62;color:var(--ms-text-dim);margin:0 0 22px;max-width:52ch}
.ms-sp-pricerow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
	padding:18px 0;border-top:1px solid var(--ms-line);border-bottom:1px solid var(--ms-line)}
.ms-sp-price{font-family:var(--ms-mono);font-size:clamp(22px,2.4vw,30px);font-weight:600;
	letter-spacing:-.02em;color:var(--ms-text)}
.ms-sp-price del{color:var(--ms-text-mute);font-size:.6em;margin-right:8px;opacity:1}
.ms-sp-price ins{text-decoration:none;color:var(--ms-rust-glow)}
.ms-sp-price .woocommerce-Price-amount{color:inherit}

.macstar-single form.cart{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin:22px 0 0}
.macstar-single form.cart .ms-qty{display:inline-flex;align-items:center;
	border:1px solid var(--ms-line-strong);border-radius:var(--ms-radius);overflow:hidden;background:var(--ms-bg-raised)}
.ms-qty-b{all:unset;cursor:pointer;width:38px;height:46px;display:grid;place-items:center;
	font-size:17px;color:var(--ms-text-dim);transition:color .18s,background-color .18s}
.ms-qty-b:hover{color:var(--ms-text);background:rgba(255,255,255,.05)}
.macstar-single form.cart .quantity{margin:0}
.macstar-single form.cart input.qty{
	width:46px;height:46px;border:0;background:transparent;text-align:center;
	font-family:var(--ms-mono);font-size:15px;color:var(--ms-text);appearance:textfield;padding:0;box-shadow:none
}
.macstar-single form.cart input.qty::-webkit-outer-spin-button,
.macstar-single form.cart input.qty::-webkit-inner-spin-button{appearance:none;margin:0}
.macstar-single form.cart button.single_add_to_cart_button{
	flex:1 1 200px;min-height:46px;border-radius:var(--ms-radius);
	background:var(--ms-rust);color:#FFF6F1;border:1px solid var(--ms-rust);
	font-family:var(--ms-body);font-size:13.5px;font-weight:700;letter-spacing:.02em;
	text-transform:none;padding:0 22px;transition:background-color .2s,box-shadow .2s
}
.macstar-single form.cart button.single_add_to_cart_button:hover{
	background:var(--ms-rust-glow);border-color:var(--ms-rust-glow);box-shadow:0 8px 24px -10px var(--ms-rust)}
.macstar-single form.cart .ms-b--buy{flex:1 1 160px;min-height:46px;display:inline-flex;
	align-items:center;justify-content:center;cursor:pointer}

.ms-sp-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.ms-sp-actions .ms-b{display:inline-flex;align-items:center;justify-content:center;
	min-height:46px;cursor:pointer;text-align:center}
.ms-sp-actions .ms-b--ghost.is-on{border-color:var(--ms-gold);color:var(--ms-gold)}

/* --- tabs --- */
.ms-sp-tabs{margin-top:clamp(30px,4vw,58px);border-top:1px solid var(--ms-line);padding-top:clamp(22px,3vw,34px)}
.ms-sp-tablist{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.ms-sp-tab{
	all:unset;cursor:pointer;padding:10px 18px;border-radius:999px;
	border:1px solid var(--ms-line);color:var(--ms-text-dim);
	font-family:var(--ms-mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
	transition:color .2s,border-color .2s,background-color .2s
}
.ms-sp-tab:hover{color:var(--ms-text);border-color:var(--ms-line-strong)}
.ms-sp-tab.is-on{color:#FFF6F1;background:var(--ms-rust);border-color:var(--ms-rust)}
.ms-sp-panel{max-width:960px}
.ms-sp-panel table,.ms-sp-table{width:100%;border-collapse:collapse;margin:0}
.ms-sp-panel table th,.ms-sp-table th{
	width:230px;text-align:left;vertical-align:top;padding:13px 18px 13px 0;
	font-family:var(--ms-mono)!important;font-size:12px!important;letter-spacing:.12em!important;
	text-transform:uppercase!important;font-weight:400!important;
	color:var(--ms-text-mute)!important;border-bottom:1px solid var(--ms-line)
}
.ms-sp-panel table td,.ms-sp-table td{
	padding:13px 0;font-size:14.5px;line-height:1.6;
	color:var(--ms-text)!important;border-bottom:1px solid var(--ms-line)
}
.ms-sp-panel table td p{margin:0;color:inherit}
.ms-sp-features{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ms-sp-features li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.6;color:var(--ms-text-dim)}
.ms-sp-features li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
	border-radius:50%;background:var(--ms-rust)}
.ms-sp-prose{font-size:15px;line-height:1.72;color:var(--ms-text-dim);max-width:70ch}
.ms-sp-prose p{margin:0 0 14px}

@media(max-width:900px){
	.macstar-single div.product:not(.elementor){grid-template-columns:minmax(0,1fr)}
	.macstar-single div.product:not(.elementor) > .ms-sp-media,
	.macstar-single div.product:not(.elementor) > .summary{grid-column:1}
	.ms-sp-actions{grid-template-columns:1fr}
}

/* ========================================================== cart drawer */

.ms-cart-drawer{position:fixed;inset:0;z-index:9998}
.ms-cart-drawer[hidden]{display:none!important}
.ms-cart-scrim{position:absolute;inset:0;background:rgba(6,6,5,.68);backdrop-filter:blur(3px);
	opacity:0;transition:opacity .28s}
.ms-cart-drawer.is-open .ms-cart-scrim{opacity:1}
.ms-cart-panel{
	position:absolute;top:0;right:0;height:100%;width:min(440px,100%);
	display:flex;flex-direction:column;background:var(--ms-bg-raised);
	border-left:1px solid var(--ms-line);box-shadow:var(--ms-shadow-lg);
	transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.3,1)
}
.ms-cart-drawer.is-open .ms-cart-panel{transform:none}

.ms-cart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
	padding:20px 22px;border-bottom:1px solid var(--ms-line);flex:none}
.ms-cart-title{font-family:var(--ms-display);font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ms-text)}
.ms-cart-n{font-family:var(--ms-mono);font-size:14px;font-weight:400;color:var(--ms-text-mute)}

.ms-cart-body{flex:1;overflow-y:auto;padding:6px 22px}
.ms-cart-item{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:14px;
	padding:18px 0;border-bottom:1px solid var(--ms-line);transition:opacity .2s}
.ms-cart-item.is-busy{opacity:.45;pointer-events:none}
.ms-cart-art{display:block;line-height:0;border:1px solid var(--ms-line);border-radius:var(--ms-radius);overflow:hidden}
.ms-cart-art .ms-tile{aspect-ratio:1/1;padding:7px}
.ms-cart-art .ms-tile svg,.ms-cart-art .ms-tile img{width:auto;height:auto;max-width:100%;max-height:100%}
.ms-cart-meta{display:flex;flex-direction:column;gap:7px;min-width:0}
.ms-cart-name{font-size:14px;font-weight:700;line-height:1.35;color:var(--ms-text);text-decoration:none}
.ms-cart-name:hover{color:var(--ms-rust-glow)}
.ms-cart-sub{font-family:var(--ms-mono);font-size:11.5px;letter-spacing:.05em;color:var(--ms-text-mute)}
.ms-cart-qty{display:inline-flex;align-items:center;align-self:flex-start;
	border:1px solid var(--ms-line-strong);border-radius:var(--ms-radius);overflow:hidden}
.ms-cart-qty .ms-qty-b{width:30px;height:32px;font-size:15px}
.ms-cart-qn{min-width:28px;text-align:center;font-family:var(--ms-mono);font-size:13px;color:var(--ms-text)}
.ms-cart-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right}
.ms-cart-line{font-family:var(--ms-mono);font-size:14.5px;font-weight:600;color:var(--ms-text);white-space:nowrap}
.ms-cart-each{font-family:var(--ms-mono);font-size:11px;color:var(--ms-text-mute);white-space:nowrap}
.ms-cart-remove{all:unset;cursor:pointer;margin-top:auto;font-family:var(--ms-mono);font-size:11px;
	letter-spacing:.1em;text-transform:uppercase;color:var(--ms-text-mute);transition:color .18s}
.ms-cart-remove:hover{color:var(--ms-bad)}

.ms-cart-empty{flex:1;display:grid;place-content:center;justify-items:center;gap:16px;padding:40px 22px;text-align:center}
.ms-cart-empty p{margin:0;color:var(--ms-text-dim)}

.ms-cart-foot{flex:none;padding:18px 22px 22px;border-top:1px solid var(--ms-line);
	background:var(--ms-bg-sunken);display:flex;flex-direction:column;gap:10px}
.ms-cart-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
	font-family:var(--ms-mono);font-size:13px;color:var(--ms-text-dim)}
.ms-cart-row span:last-child{color:var(--ms-text)}
.ms-cart-free{color:var(--ms-ok)!important}
.ms-cart-tbd{color:var(--ms-text-mute)!important;font-size:12px}
.ms-cart-note{margin:0;font-family:var(--ms-mono);font-size:11px;color:var(--ms-text-mute)}
.ms-cart-row--total{padding-top:12px;border-top:1px solid var(--ms-line);font-size:16px}
.ms-cart-row--total span:last-child{font-weight:600}
.ms-cart-foot .ms-b{display:inline-flex;align-items:center;justify-content:center;
	min-height:44px;cursor:pointer;text-align:center}
.ms-cart-foot .ms-b:first-of-type{margin-top:6px}

@media(max-width:520px){
	.ms-cart-item{grid-template-columns:60px minmax(0,1fr)}
	.ms-cart-side{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
	.ms-cart-remove{margin-top:0}
}

/* ============================================================== compare */

.ms-cmp-tray{position:fixed;left:20px;bottom:20px;z-index:9990;display:flex;gap:8px;align-items:center;
	background:var(--ms-bg-raised);border:1px solid var(--ms-line-strong);border-radius:999px;
	padding:6px 8px 6px 6px;box-shadow:var(--ms-shadow-md)}
.ms-cmp-tray[hidden]{display:none!important}
.ms-cmp-tray .ms-b{cursor:pointer;border-radius:999px;padding:9px 18px;font-size:12.5px}
.ms-cmp-clear{all:unset;cursor:pointer;width:26px;height:26px;display:grid;place-items:center;
	border-radius:50%;color:var(--ms-text-mute);font-size:17px}
.ms-cmp-clear:hover{color:var(--ms-text);background:rgba(255,255,255,.06)}

.ms-cmp-box{position:fixed;inset:0;z-index:9997}
.ms-cmp-box[hidden]{display:none!important}
.ms-cmp-scrim{position:absolute;inset:0;background:rgba(6,6,5,.72);backdrop-filter:blur(3px)}
.ms-cmp-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	width:min(1040px,94vw);max-height:88vh;display:flex;flex-direction:column;
	background:var(--ms-bg-raised);border:1px solid var(--ms-line);border-radius:var(--ms-radius-lg);
	box-shadow:var(--ms-shadow-lg);overflow:hidden}
.ms-cmp-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;
	border-bottom:1px solid var(--ms-line);font-family:var(--ms-display);font-size:18px;font-weight:800;color:var(--ms-text)}
.ms-cmp-body{overflow:auto;padding:8px 22px 22px}
.ms-cmp-row{display:grid;grid-template-columns:150px repeat(var(--ms-cmp-n,3),minmax(0,1fr));
	gap:14px;padding:11px 0;border-bottom:1px solid var(--ms-line);align-items:start}
.ms-cmp-row--head{border-bottom:1px solid var(--ms-line-strong);padding-bottom:16px}
.ms-cmp-key{font-family:var(--ms-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ms-text-mute)}
.ms-cmp-col{font-size:14px;color:var(--ms-text);display:flex;flex-direction:column;gap:7px;min-width:0}
.ms-cmp-art{display:block;line-height:0;border:1px solid var(--ms-line);border-radius:var(--ms-radius);overflow:hidden}
.ms-cmp-art .ms-tile{aspect-ratio:4/3;padding:10px}
.ms-cmp-art .ms-tile svg,.ms-cmp-art .ms-tile img{width:auto;height:auto;max-width:100%;max-height:100%}
.ms-cmp-name{font-weight:700;font-size:13.5px;line-height:1.35;color:var(--ms-text);text-decoration:none}
.ms-cmp-name:hover{color:var(--ms-rust-glow)}
.ms-cmp-price{font-family:var(--ms-mono);font-size:13px;color:var(--ms-text-dim)}
.ms-cmp-drop{all:unset;cursor:pointer;font-family:var(--ms-mono);font-size:10.5px;letter-spacing:.1em;
	text-transform:uppercase;color:var(--ms-text-mute)}
.ms-cmp-drop:hover{color:var(--ms-bad)}
.ms-cmp-none{color:var(--ms-text-mute)}

@media(max-width:700px){
	.ms-cmp-row{grid-template-columns:repeat(var(--ms-cmp-n,3),minmax(0,1fr))}
	.ms-cmp-key{grid-column:1 / -1;padding-bottom:2px}
}

/* ============================================================= checkout */

.macstar-checkout .woocommerce{max-width:1320px;margin:0 auto;
	padding:0 clamp(16px,4vw,40px) clamp(48px,7vw,96px)}
.macstar-checkout .woocommerce-breadcrumb{font-family:var(--ms-mono);font-size:13.5px;
	color:var(--ms-text-mute);padding-block:var(--ms-s4)}
.macstar-checkout .woocommerce-breadcrumb a{color:var(--ms-text-mute);text-decoration:none}
.macstar-checkout .woocommerce-breadcrumb a:hover{color:var(--ms-rust)}

.ms-co-head{display:flex;flex-direction:column;gap:var(--ms-s3);margin:0 0 var(--ms-s7)}
.ms-co-eyebrow{font-family:var(--ms-mono);font-size:16px;font-weight:600;letter-spacing:.13em;
	text-transform:uppercase;color:var(--ms-rust);display:flex;align-items:center;gap:12px;line-height:1.4}
.ms-co-eyebrow::before{content:"";width:32px;height:1px;background:var(--ms-gold);flex:none}
.macstar-checkout .ms-co-head h1{font-family:var(--ms-display);font-size:clamp(38px,6.2vw,76px);
	font-weight:800;font-variation-settings:"wdth" 112;letter-spacing:-.022em;line-height:1.06;
	margin:0;color:var(--ms-text);text-wrap:balance}

.macstar-checkout form.checkout{display:grid;
	grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
	column-gap:clamp(24px,4vw,56px);row-gap:0;align-items:start}
.macstar-checkout #customer_details{grid-column:1;grid-row:1;display:block;width:auto;float:none}
.macstar-checkout #customer_details .col-1,
.macstar-checkout #customer_details .col-2{width:auto;float:none;margin:0;padding:0}
.macstar-checkout #customer_details .col-2{display:none}
.macstar-checkout .ms-co-pay{grid-column:1;grid-row:2}
.macstar-checkout .ms-co-btnrow{grid-column:1;grid-row:3}
.macstar-checkout #order_review_heading{display:none}
.macstar-checkout #order_review{grid-column:2;grid-row:1 / span 4;
	position:sticky;top:calc(68px + 20px)}

.ms-co-panel{margin:0 0 var(--ms-s6)}
.macstar-checkout .ms-panel h3{margin:0 0 var(--ms-s4);font-family:var(--ms-display);
	font-size:clamp(19px,1.7vw,25px);font-weight:700;letter-spacing:-.014em;
	line-height:1.06;color:var(--ms-text)}

/* --- fields --- */
.ms-co-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ms-s4)}
.macstar-checkout .ms-co-grid .form-row{display:flex;flex-direction:column;gap:6px;
	min-width:0;margin:0;padding:0;width:auto;float:none}
.macstar-checkout .ms-f-full,.macstar-checkout #order_comments_field{grid-column:1 / -1}
.macstar-checkout .ms-f-hidden{display:none!important}
.macstar-checkout .ms-co-grid label{font-family:var(--ms-mono);font-size:13px;letter-spacing:.11em;
	text-transform:uppercase;color:var(--ms-text-dim);margin:0;font-weight:400}
.macstar-checkout .ms-co-grid label .required{color:var(--ms-rust);text-decoration:none;border:0}
.macstar-checkout .ms-co-grid label .optional{display:none}
.macstar-checkout .ms-co-grid input[type=text],
.macstar-checkout .ms-co-grid input[type=tel],
.macstar-checkout .ms-co-grid input[type=email],
.macstar-checkout .ms-co-grid input[type=number],
.macstar-checkout .ms-co-grid textarea,
.macstar-checkout .ms-co-grid select{
	width:100%;padding:11px 13px;border:1px solid var(--ms-line);border-radius:var(--ms-radius);
	background:var(--ms-bg-raised);color:var(--ms-text);font-family:var(--ms-body);font-size:14px;
	line-height:1.45;box-shadow:none;transition:border-color .2s,box-shadow .2s}
.macstar-checkout .ms-co-grid textarea{resize:vertical;min-height:104px}
.macstar-checkout .ms-co-grid input:focus,
.macstar-checkout .ms-co-grid textarea:focus,
.macstar-checkout .ms-co-grid select:focus{outline:none;border-color:var(--ms-rust);
	box-shadow:0 0 0 3px var(--ms-rust-wash)}
.macstar-checkout .ms-co-grid input::placeholder,
.macstar-checkout .ms-co-grid textarea::placeholder{color:var(--ms-text-mute);opacity:1}
.macstar-checkout .ms-co-grid .description{font-family:var(--ms-body);font-size:11.5px;
	color:var(--ms-text-mute);text-transform:none;letter-spacing:0;margin:0}
.macstar-checkout .woocommerce-invalid input{border-color:var(--ms-bad)}

/* --- payment, as radio cards --- */
.macstar-checkout #payment{background:transparent;border-radius:0;padding:0}
.macstar-checkout #payment ul.payment_methods{list-style:none;margin:0;padding:0;border:0;
	display:flex;flex-direction:column;gap:var(--ms-s3)}
.macstar-checkout #payment ul.payment_methods li{margin:0;padding:0;background:none;border:0}
.macstar-checkout #payment ul.payment_methods li > label{
	display:flex;align-items:flex-start;gap:11px;padding:14px;cursor:pointer;
	border:1px solid var(--ms-line);border-radius:var(--ms-radius);background:var(--ms-bg-raised);
	font-family:var(--ms-body);font-size:14px;font-weight:700;color:var(--ms-text);
	letter-spacing:0;text-transform:none;transition:border-color .2s,background-color .2s}
.macstar-checkout #payment ul.payment_methods li > label:hover{border-color:var(--ms-line-strong)}
.macstar-checkout #payment ul.payment_methods li.ms-rc-on > label{
	border-color:var(--ms-rust);background:var(--ms-rust-wash);box-shadow:inset 0 0 0 1px var(--ms-rust)}
.macstar-checkout #payment ul.payment_methods li input.input-radio{
	appearance:none;width:16px;height:16px;flex:none;margin:3px 0 0;position:relative;cursor:pointer;
	border:1.5px solid var(--ms-line-strong);border-radius:50%;display:block!important}
.macstar-checkout #payment ul.payment_methods li input.input-radio:checked{border-color:var(--ms-rust)}
.macstar-checkout #payment ul.payment_methods li input.input-radio:checked::after{
	content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ms-rust)}
.ms-rc-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.ms-rc-d{font-size:12.5px;font-weight:400;color:var(--ms-text-dim);line-height:1.5}
.macstar-checkout #payment .payment_box{display:none!important}
.macstar-checkout #payment img{display:none}
.ms-co-none{font-size:13.5px;color:var(--ms-text-dim);margin:0 0 var(--ms-s3)}

/* --- notices --- */
.ms-notice,.macstar-checkout .woocommerce-error,
.macstar-checkout .woocommerce-info,.macstar-checkout .woocommerce-message{
	display:flex;gap:12px;padding:14px 16px;border-radius:var(--ms-radius);
	border:1px solid var(--ms-line);background:var(--ms-bg-raised);
	font-family:var(--ms-body);font-size:13.5px;line-height:1.55;color:var(--ms-text);
	list-style:none;margin:0 0 var(--ms-s4)}
.ms-notice .ms-ni{flex:none;margin-top:1px;font-family:var(--ms-mono);color:var(--ms-text-mute)}
.ms-co-info{margin:var(--ms-s4) 0 0}
.macstar-checkout .woocommerce-error{border-color:var(--ms-bad);
	background:color-mix(in srgb,var(--ms-bad) 8%,var(--ms-bg-raised))}
.macstar-checkout .woocommerce-error li{margin:0;list-style:none}
.macstar-checkout .woocommerce-error::before,
.macstar-checkout .woocommerce-info::before,
.macstar-checkout .woocommerce-message::before{display:none}

/* --- the button row --- */
.ms-co-btnrow{display:flex;flex-wrap:wrap;gap:var(--ms-s3);margin:0 0 var(--ms-s6)}
.ms-co-btnrow .ms-b{display:inline-flex;align-items:center;justify-content:center;
	min-height:48px;cursor:pointer;text-align:center}
.macstar-checkout div.form-row.place-order{flex:1 1 220px;margin:0;padding:0;border:0;
	display:flex;flex-direction:column}
.macstar-checkout #place_order{
	width:100%;min-height:48px;border-radius:var(--ms-radius);border:1px solid var(--ms-rust);
	background:var(--ms-rust);color:#FFF6F1;font-family:var(--ms-body);font-size:14px;font-weight:700;
	letter-spacing:.01em;text-transform:none;padding:0 20px;float:none;margin:0;
	transition:background-color .2s,box-shadow .2s}
.macstar-checkout #place_order:hover{background:var(--ms-rust-glow);border-color:var(--ms-rust-glow);
	box-shadow:0 8px 24px -10px var(--ms-rust)}
.macstar-checkout .woocommerce-terms-and-conditions-wrapper{font-size:13px;color:var(--ms-text-dim)}

/* --- order summary --- */
.ms-sum{background:var(--ms-bg-raised);border:1px solid var(--ms-line);
	border-radius:var(--ms-radius);padding:clamp(20px,2.6vw,32px)}
.ms-sum-h{margin:0 0 var(--ms-s4)!important;font-family:var(--ms-display);
	font-size:clamp(19px,1.7vw,25px);font-weight:700;letter-spacing:-.014em;
	line-height:1.06;color:var(--ms-text)}
.ms-sum-lines{display:flex;flex-direction:column;gap:var(--ms-s4)}
.ms-citem{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--ms-s3);align-items:start}
.ms-citem-thumb{display:block;line-height:0;border:1px solid var(--ms-line);border-radius:3px;
	overflow:hidden;background:var(--ms-bg-raised)}
.ms-citem-thumb .ms-tile{aspect-ratio:1/1;padding:7px}
.ms-citem-thumb .ms-tile svg,.ms-citem-thumb .ms-tile img{width:auto;height:auto;max-width:100%;max-height:100%}
.ms-citem-meta{display:flex;flex-direction:column;gap:7px;min-width:0}
.ms-citem-name{font-family:var(--ms-body);font-size:13.5px;font-weight:700;line-height:1.35;color:var(--ms-text)}
.ms-citem-sub{font-family:var(--ms-mono);font-size:13px;color:var(--ms-text-mute)}
.ms-citem-sub .woocommerce-Price-amount{color:inherit}
.ms-price{font-family:var(--ms-mono);font-variant-numeric:tabular-nums;font-weight:600;
	letter-spacing:-.02em;font-size:16.5px;color:var(--ms-text)}
.ms-hr{height:1px;background:var(--ms-line);border:0;margin:var(--ms-s4) 0}
.ms-totals{display:flex;flex-direction:column;gap:9px}
.ms-trow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
	font-family:var(--ms-body);font-size:13.5px;color:var(--ms-text-dim)}
.ms-trow .v{font-family:var(--ms-mono);font-variant-numeric:tabular-nums;
	color:var(--ms-text);font-weight:600}
.ms-trow--grand{padding-top:10px;border-top:1px solid var(--ms-line);font-size:15px;
	color:var(--ms-text);font-weight:700}
.ms-trow--grand .v{font-size:19px}
.ms-sum-wa{margin-top:var(--ms-s4);display:inline-flex;align-items:center;justify-content:center;
	min-height:46px;cursor:pointer}
.ms-sum-note{font-family:var(--ms-body);font-size:11.5px;line-height:1.55;
	color:var(--ms-text-mute);margin:10px 0 0}

@media(max-width:1000px){
	.macstar-checkout form.checkout{grid-template-columns:minmax(0,1fr);row-gap:var(--ms-s6)}
	.macstar-checkout #customer_details,.macstar-checkout .ms-co-pay,
	.macstar-checkout .ms-co-btnrow,.macstar-checkout #order_review{
		grid-column:1;grid-row:auto;position:static}
	.ms-co-grid{grid-template-columns:1fr}
	.ms-co-eyebrow{font-size:14px;letter-spacing:.12em}
	.ms-co-btnrow .ms-b,.macstar-checkout div.form-row.place-order{flex:1 1 100%}
}
/* --- Astra float layout --- */
/* --- Astra float layout ---
   Astra lays the checkout out with floats and percentage widths, and prints
   that CSS after ours, which squeezed both columns inside their grid tracks.
   Unset it so the grid above is the only thing placing these blocks. */
.macstar-checkout form.checkout #customer_details,
.macstar-checkout form.checkout #customer_details.col2-set{
	width:auto!important;float:none!important;margin:0!important;clear:none!important;padding:0!important}
.macstar-checkout form.checkout #customer_details .col-1,
.macstar-checkout form.checkout #customer_details .col-2,
.macstar-checkout form.checkout #customer_details.col2-set .col-1,
.macstar-checkout form.checkout #customer_details.col2-set .col-2{
	width:auto!important;float:none!important;margin:0!important;padding:0!important}
.macstar-checkout form.checkout #order_review{
	width:auto!important;float:none!important;margin:0!important;clear:none!important;
	padding:0!important;border:0!important;background:none!important;align-self:start}
.macstar-checkout form #order_review_heading{display:none!important}
.macstar-checkout #customer_details h3,
.macstar-checkout .ms-panel h3,
.macstar-checkout .ms-sum-h{
	padding:0!important;border:0!important;margin:0 0 var(--ms-s4)!important}

/* Astra prints the page title above the checkout's own head. */
.macstar-checkout .ast-single-entry-banner,
.macstar-checkout header.entry-header,
.macstar-checkout .entry-header{display:none}

/* the drawer is the confirmation; WooCommerce's own chip is noise */
.ms-pcard .added_to_cart,.woocommerce a.added_to_cart{display:none!important}

/* ========================================================= confirmation */

.macstar-thanks .woocommerce{max-width:1320px;margin:0 auto;
	padding:0 clamp(16px,4vw,40px) clamp(48px,7vw,96px)}
.macstar-thanks .ast-single-entry-banner,
.macstar-thanks header.entry-header,
.macstar-thanks .entry-header{display:none}
.macstar-thanks .woocommerce-order-overview,
.macstar-thanks .woocommerce-notice--success,
.macstar-thanks .woocommerce-order > p:empty{display:none!important}
.ms-thanks-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
	gap:clamp(24px,4vw,56px);align-items:start}
.ms-thanks-grid .ms-panel{margin:0}
.ms-thanks-btns{margin:var(--ms-s5) 0 0}
.ms-thanks-btns .ms-b{flex:1 1 200px}
.macstar-thanks .ms-sp-table th{width:190px}
@media(max-width:1000px){.ms-thanks-grid{grid-template-columns:minmax(0,1fr)}}

/* confirmation table reset - the theme draws a box around any table */
.macstar-thanks .ms-panel table,.ms-sp-panel table,.ms-sp-table{border:0!important;background:none!important}
.macstar-thanks .ms-sp-table th,.macstar-thanks .ms-sp-table td,
.ms-sp-panel table th,.ms-sp-panel table td{border-left:0!important;border-right:0!important;border-top:0!important;background:none!important}
.macstar-thanks .ms-sp-table tr:last-child th,.macstar-thanks .ms-sp-table tr:last-child td{border-bottom:0!important}

/* Astra sizes these with floats and percentages; the grid owns them now */
.macstar-single div.product:not(.elementor) > .ms-sp-media{grid-row:1;width:auto!important;float:none!important;margin:0!important;padding:0!important}
.macstar-single div.product:not(.elementor) > .summary{grid-row:1;width:auto!important;float:none!important;margin:0!important;padding:0!important}
.macstar-single div.product:not(.elementor) > .ms-sp-tabs{grid-row:2;width:auto!important;float:none!important;clear:both}
@media(max-width:900px){.macstar-single div.product:not(.elementor) > .ms-sp-media,
.macstar-single div.product:not(.elementor) > .summary,
.macstar-single div.product:not(.elementor) > .ms-sp-tabs{grid-row:auto}}

/* the card badge is absolutely placed; in the summary it sits in the row */
.ms-sp-head .ms-badge{position:static!important;top:auto;left:auto;right:auto}

/* ============================================================ cart page */
.macstar-cartpage .woocommerce{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,40px) clamp(48px,7vw,96px)}
.macstar-cartpage .ast-single-entry-banner,.macstar-cartpage header.entry-header,.macstar-cartpage .entry-header{display:none}
.ms-cartpage-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:start}
.ms-cartpage-lines{display:flex;flex-direction:column;gap:0;margin:0}
.ms-cartpage-lines .ms-cart-item:first-child{padding-top:0}
.ms-cartpage-lines .ms-cart-item:last-child{padding-bottom:0;border-bottom:0}
.ms-cartpage-sum{position:sticky;top:calc(68px + 20px);margin:0}
.ms-cartpage-btns{display:flex;flex-direction:column;gap:var(--ms-s3);margin-top:var(--ms-s5)}
.ms-cartpage-btns .ms-b{display:inline-flex;align-items:center;justify-content:center;min-height:46px;cursor:pointer;text-align:center}
.ms-cartpage-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ms-s3);margin:0}
.ms-cartpage-empty p{margin:0;color:var(--ms-text-dim)}
.ms-cartpage-empty .ms-b{margin-top:var(--ms-s3)}
@media(max-width:1000px){.ms-cartpage-grid{grid-template-columns:minmax(0,1fr)}.ms-cartpage-sum{position:static}}

/* --- quantity stepper, flattened ---
   Astra and WooCommerce both style input.qty with their own border, radius,
   background and height, which turned the product page's stepper into a
   raised box sitting inside the control. Strip all of that and rebuild it
   the way the prototype draws it: one bordered strip, hairline dividers,
   every cell the same height. */
.macstar-single form.cart .ms-qty{
	display:inline-flex;align-items:stretch;flex:none;overflow:hidden;
	border:1px solid var(--ms-line-strong);border-radius:var(--ms-radius);
	background:none}
.macstar-single form.cart .quantity{
	height:44px!important;min-height:44px!important;max-height:44px!important;
	margin:0!important;padding:0!important;width:auto!important;float:none!important;
	display:flex!important;align-items:stretch;border:0!important;border-radius:0!important;
	background:none!important;box-shadow:none!important}
.macstar-single form.cart .quantity input.qty{
	width:46px!important;height:44px!important;min-height:44px!important;max-height:44px!important;
	margin:0!important;padding:0!important;
	border:0!important;border-radius:0!important;
	border-left:1px solid var(--ms-line)!important;border-right:1px solid var(--ms-line)!important;
	background:none!important;background-color:transparent!important;box-shadow:none!important;
	text-align:center!important;line-height:44px!important;
	font-family:var(--ms-mono)!important;font-size:14px!important;font-weight:600!important;
	color:var(--ms-text)!important;appearance:textfield!important;-moz-appearance:textfield!important}
.macstar-single form.cart .quantity input.qty:focus{outline:none!important;box-shadow:none!important;
	border-left-color:var(--ms-line)!important;border-right-color:var(--ms-line)!important}
.macstar-single form.cart .quantity input.qty::-webkit-outer-spin-button,
.macstar-single form.cart .quantity input.qty::-webkit-inner-spin-button{appearance:none;margin:0}
.macstar-single form.cart .quantity label,
.macstar-single form.cart .quantity .screen-reader-text{position:absolute!important;width:1px;height:1px;
	overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.macstar-single form.cart .ms-qty .ms-qty-b{
	width:38px;height:44px;font-size:16px;color:var(--ms-text-dim)}
.macstar-single form.cart .ms-qty .ms-qty-b:hover{background:var(--ms-bg-sunken);color:var(--ms-rust-glow)}

/* the drawer and the cart page use the same strip, one size down */
.ms-cart-qty{align-items:stretch}
.ms-cart-qty .ms-qty-b{width:30px;height:32px;font-size:14px}
.ms-cart-qty .ms-qty-b:hover{background:var(--ms-bg-sunken);color:var(--ms-rust-glow)}
.ms-cart-qn{display:grid;place-items:center;min-width:36px;height:32px;
	border-left:1px solid var(--ms-line);border-right:1px solid var(--ms-line);
	font-family:var(--ms-mono);font-size:12.5px;font-weight:600;color:var(--ms-text)}

.macstar-single form.cart .ms-qty{font-size:0}
.macstar-single form.cart .ms-qty > *{font-size:initial}

/* the stepper box hugs its cells rather than stretching to the button row */
.macstar-single form.cart .ms-qty{height:44px;align-self:center}

@media (max-width:767px){

	/* --- header: burger, then logo, then the tools, on one line --- */
	.xpro-theme-builder-header .elementor-container{
		flex-wrap:nowrap!important;align-items:center!important;
		gap:10px;padding-inline:14px!important}
	.xpro-theme-builder-header .elementor-top-column{width:auto!important;flex:0 0 auto!important}
	.xpro-theme-builder-header .elementor-top-column:nth-child(1){order:2;flex:1 1 auto!important;min-width:0}
	.xpro-theme-builder-header .elementor-top-column:nth-child(2){order:1}
	.xpro-theme-builder-header .elementor-top-column:nth-child(3){order:3}
	.xpro-theme-builder-header .elementor-widget-wrap{padding:0!important}
	.xpro-theme-builder-header .elementor-widget{margin:0!important}
	.xpro-theme-builder-header .xpro-site-logo img{max-height:30px;width:auto}
	.xpro-theme-builder-header .elementor-widget-xpro-site-logo,
	.xpro-theme-builder-header .xpro-site-logo{text-align:center!important}
	.xpro-theme-builder-header .elementor-widget-xpro-horizontal-menu{text-align:left!important}
	.xpro-theme-builder-header .ms-hdr-tools{justify-content:flex-end;gap:4px}
	.xpro-theme-builder-header .ms-icon-btn{width:34px;height:34px}

	/* --- footer: one centred column, nothing pinned to an edge --- */
	#xpro-theme-builder-footer .elementor-container{padding-inline:16px!important}
	#xpro-theme-builder-footer .elementor-top-column{width:100%!important}
	#xpro-theme-builder-footer .elementor-widget-wrap{padding-inline:0!important}
	#xpro-theme-builder-footer .elementor-widget-container,
	#xpro-theme-builder-footer .xpro-heading-wrapper,
	#xpro-theme-builder-footer .xpro-heading-wrapper *,
	#xpro-theme-builder-footer ul,
	#xpro-theme-builder-footer li,
	#xpro-theme-builder-footer p{text-align:center!important}
	#xpro-theme-builder-footer img{margin-inline:auto!important}

	/* --- display sizes: two per row, tops on one line, equal heights --- */
	.ms-sizerow{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
		gap:12px!important;align-items:stretch!important}
	.ms-sizebtn{width:auto!important;height:100%;display:grid!important;
		grid-template-rows:46px auto 1fr;justify-items:center;align-items:end;
		gap:10px;text-align:center}
	.ms-sizebtn .ms-glyph{align-self:end}
	.ms-sizebtn .ms-use{align-self:start}
}

/* ============================== condition and verification ============== */

.ms-condrow{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0}
.ms-cond{display:inline-flex;align-items:center;gap:5px;
	padding:4px 9px;border-radius:3px;border:1px solid var(--ms-line-strong);
	font-family:var(--ms-mono);font-size:10.5px;letter-spacing:.11em;
	text-transform:uppercase;color:var(--ms-text-dim);white-space:nowrap}
.ms-cond.is-new{border-color:#2F6B4F;background:rgba(111,191,149,.10);color:#8FD3AF}
.ms-cond.is-nonactive{border-color:var(--ms-gold-dim);background:rgba(198,165,96,.10);color:var(--ms-gold)}
.ms-cond.is-used{border-color:var(--ms-line-strong);color:var(--ms-text-dim)}
.ms-cond.is-verified{border-color:var(--ms-rust);background:var(--ms-rust-wash);color:#E2A382}
.ms-cond.is-pack{border-color:var(--ms-line-strong);color:var(--ms-text-dim)}
.ms-tick{font-size:11px;line-height:1}

.ms-batt,.ms-charger{display:inline-flex;align-items:center;
	font-family:var(--ms-mono);font-size:11.5px;letter-spacing:.03em;color:var(--ms-text-dim)}
.ms-charger{color:var(--ms-ok)}
.ms-charger.is-none{color:var(--ms-warn)}
.ms-pcard-trust{display:flex;flex-wrap:wrap;gap:4px 12px;
	padding:0 0 10px;border-bottom:1px dashed var(--ms-line)}
.ms-sp-trust{display:flex;flex-wrap:wrap;gap:8px 18px;padding:14px 0 0}
.ms-sp-trust .ms-batt,.ms-sp-trust .ms-charger{font-size:13px}

.ms-sp-subh{font-family:var(--ms-mono);font-size:11px;letter-spacing:.16em;
	text-transform:uppercase;color:var(--ms-rust-glow);margin:0 0 12px;font-weight:400}
.ms-sp-panel .ms-sp-subh + table + .ms-sp-subh{margin-top:34px}
.ms-condtable{margin:0 0 4px}

/* -------------------------------------------------- why buy from MacStar */

.ms-why{padding-block:clamp(48px,6vw,88px);background:var(--ms-bg-sunken);
	border-top:1px solid var(--ms-line);border-bottom:1px solid var(--ms-line)}
.ms-whygrid{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;
	display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
	background:var(--ms-line);border:1px solid var(--ms-line)}
.ms-whyitem{display:flex;gap:14px;align-items:flex-start;
	padding:clamp(18px,2vw,26px);background:var(--ms-bg)}
.ms-whytick{flex:none;width:24px;height:24px;display:grid;place-items:center;
	border-radius:50%;background:var(--ms-rust-wash);border:1px solid var(--ms-rust);
	color:var(--ms-rust-glow);font-size:12px;line-height:1}
.ms-whybody{display:flex;flex-direction:column;gap:6px;min-width:0}
.ms-whyt{font-family:var(--ms-body);font-size:14.5px;font-weight:700;color:var(--ms-text);line-height:1.3}
.ms-whyd{font-size:13px;line-height:1.6;color:var(--ms-text-dim)}

/* ------------------------------------------------------- whatsapp band */

.ms-wacta{padding-block:clamp(40px,5vw,72px)}
.ms-wacta-inner{display:flex;align-items:center;justify-content:space-between;
	gap:clamp(20px,3vw,40px);flex-wrap:wrap;
	background:radial-gradient(120% 160% at 15% 20%,#1E1A16,#0B0A09);
	border:1px solid var(--ms-line);border-radius:var(--ms-radius-lg);
	padding:clamp(24px,3.4vw,48px)}
.ms-wacta-copy{min-width:0;flex:1 1 320px}
.ms-wacta-copy h2{margin:0 0 10px;color:var(--ms-text)}
.ms-wacta-copy .ms-lede{margin:0}
.ms-wacta-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;
	min-height:52px;padding:0 30px;font-size:14.5px}

/* ------------------------------------------- the editor's condition block */

.ms-condgrid{gap:10px}
.ms-condgrid-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 14px}
.ms-subfield{display:flex;flex-direction:column;gap:6px;min-width:0}
.ms-subfield > span{font-family:var(--ms-body);font-size:11.5px;font-weight:700;
	letter-spacing:.07em;text-transform:uppercase;color:var(--ms-label)}
.ms-subfield.ms-wide{grid-column:1 / -1}
.ms-subfield.ms-check{flex-direction:row;align-items:center;gap:9px;align-self:end;
	min-height:42px}
.ms-subfield.ms-check > span{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600}
.ms-subfield.ms-check input[type=checkbox]{width:17px;height:17px;flex:none;
	accent-color:var(--ms-rust);margin:0}

@media(max-width:700px){
	.ms-wacta-inner{flex-direction:column;align-items:flex-start}
	.ms-wacta-btn{width:100%}
}

/* ---- the slide-in menu, scoped ----
   The off-canvas panel only exists below Xpro's tablet breakpoint. Above
   it the very same element is the horizontal bar, so these rules have to
   stay inside the query or the desktop header turns into a card stack. */
@media (max-width:1024px){
/* ======================================================== mobile chrome */

/* The slide-in menu panel is Xpro's, and it ships a #F5F5F5 ground. Against
   the site's light ink that made the links all but invisible. It can open at
   tablet width too, so this sits outside the phone query. */
.xpro-elementor-horizontal-navbar-wrapper{
	background:#0B0A09!important;border-left:1px solid var(--ms-line)!important}
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav a,
.xpro-elementor-horizontal-navbar-wrapper .nav-item > a{
	color:#FFFFFF!important;opacity:1!important;font-size:16px}
.xpro-elementor-horizontal-navbar-wrapper .nav-item{
	border-bottom:1px solid var(--ms-line)!important}
.xpro-elementor-horizontal-navbar-wrapper .current-menu-item > a,
.xpro-elementor-horizontal-navbar-wrapper .active > a{color:var(--ms-gold)!important}
.xpro-elementor-horizontal-menu-close,
.xpro-elementor-horizontal-menu-close i,
.xpro-elementor-horizontal-menu-close svg,
.xpro-elementor-horizontal-menu-close span{
	color:#FFFFFF!important;fill:#FFFFFF!important;
	background:transparent!important;opacity:1!important}
/* The desktop bar rules carry an id (#macstar-nav), so the slide-in panel's
   own colours have to match that weight or the links stay bar-grey. */
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav a,
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li > a,
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .nav-item > a{
	color:#FFFFFF!important;opacity:1!important;
	font-size:16px!important;justify-content:flex-start!important;padding:18px 22px!important}
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .current-menu-item > a{
	color:var(--ms-gold)!important;box-shadow:none!important}
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .nav-item{
	border-bottom:1px solid var(--ms-line)!important}
/* ---- slide-in menu: white panel, black cards ----
   Appended after the dark-panel rules above, so these win on order. The
   close mark has to flip to dark ink now that it sits on white. */
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper,
.xpro-elementor-horizontal-navbar-wrapper{
	background:#FFFFFF!important;
	border-left:1px solid var(--ms-line-strong)!important}
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav,
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav{
	display:flex!important;flex-direction:column!important;
	gap:10px;padding:16px!important;margin:0!important;background:none!important}
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .nav-item,
.xpro-elementor-horizontal-navbar-wrapper .nav-item{
	background:#0B0A09!important;
	border:1px solid #241E19!important;
	border-bottom:1px solid #241E19!important;
	border-radius:var(--ms-radius)!important;
	margin:0!important;overflow:hidden}
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav a,
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li > a,
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .nav-item > a{
	display:flex!important;justify-content:flex-start!important;align-items:center!important;
	padding:17px 18px!important;margin:0!important;
	background:transparent!important;
	color:#FFFFFF!important;opacity:1!important;
	font-family:var(--ms-body)!important;font-size:16px!important;font-weight:600!important;
	box-shadow:none!important}
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .nav-item:hover,
.xpro-elementor-horizontal-navbar-wrapper .nav-item:hover{border-color:var(--ms-rust)!important}
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li.current-menu-item,
.xpro-elementor-horizontal-navbar-wrapper .current-menu-item{
	border-color:var(--ms-rust)!important;
	box-shadow:inset 3px 0 0 var(--ms-rust)}
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
.xpro-elementor-horizontal-navbar-wrapper .current-menu-item > a{color:var(--ms-gold)!important}
.xpro-elementor-horizontal-menu-close,
.xpro-elementor-horizontal-menu-close i,
.xpro-elementor-horizontal-menu-close svg,
.xpro-elementor-horizontal-menu-close span{
	color:#16130F!important;fill:#16130F!important;
	background:transparent!important;opacity:1!important}
/* ---- slide-in menu: the panel goes brown ----
   A warm brown between the site's onyx and its rust, so the black cards still
   separate from it. The close mark flips back to light ink for the same reason. */
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper,
.xpro-elementor-horizontal-navbar-wrapper{
	background:#3C2B20!important;
	border-left:1px solid #5A4433!important}
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .nav-item,
.xpro-elementor-horizontal-navbar-wrapper .nav-item{
	background:#0B0A09!important;
	border:1px solid #10100E!important;
	border-bottom:1px solid #10100E!important}
.xpro-elementor-horizontal-menu-close,
.xpro-elementor-horizontal-menu-close i,
.xpro-elementor-horizontal-menu-close svg,
.xpro-elementor-horizontal-menu-close span{
	color:#F4EFE7!important;fill:#F4EFE7!important;
	background:transparent!important;opacity:1!important}
/* ---- slide-in menu: deeper brown, and kill the underline ----
   The panel sat too far from the cards, so it drops to a coffee brown. The
   pale line under each card is Xpro's "underlineFromCenter" hover mark, drawn
   as a pseudo-element on the link; it has to be removed rather than recoloured. */
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper,
.xpro-elementor-horizontal-navbar-wrapper{
	background:#241A13!important;
	border-left:1px solid #3A2A20!important}
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .nav-item,
.xpro-elementor-horizontal-navbar-wrapper .nav-item{
	background:#0B0A09!important;
	border:1px solid #16120F!important;
	box-shadow:none!important}
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav a,
.xpro-elementor-horizontal-navbar-wrapper .nav-item,
.xpro-elementor-horizontal-navbar-wrapper .nav-item > a{
	text-decoration:none!important}
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav a::before,
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav a::after,
.xpro-elementor-horizontal-navbar-wrapper .nav-item::before,
.xpro-elementor-horizontal-navbar-wrapper .nav-item::after,
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li > a::before,
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li > a::after{
	content:none!important;display:none!important;
	background:none!important;border:0!important;height:0!important;width:0!important}
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li.current-menu-item,
.xpro-elementor-horizontal-navbar-wrapper .current-menu-item{
	border-color:var(--ms-rust)!important;box-shadow:inset 3px 0 0 var(--ms-rust)!important}
/* The hairline is a border on the link itself - Xpro draws a #E6E6E6
   bottom rule on every item, which is invisible on its own light panel and
   obvious on a black card. */
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav a,
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li > a,
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper .nav-item > a,
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav a{
	border:0!important;border-bottom:0!important;box-shadow:none!important;outline:0!important}
/* Panel again: the brown pulled toward grey and darkened, so it reads as a
   warm charcoal rather than a colour. Still a clear step above the cards. */
#macstar-nav .xpro-elementor-horizontal-navbar-wrapper,
.xpro-elementor-horizontal-navbar-wrapper{
	background:#1E1916!important;
	border-left:1px solid #302A24!important}
}

/* ---- seven items in the bar ----
   The menu went from four entries to seven when the four categories joined
   it, and Contact wrapped onto a second line. Tighten the spacing rather than
   widen the column, so the logo and the tools keep their positions. */
@media (min-width:1025px){
	#macstar-nav .xpro-elementor-horizontal-navbar-nav{flex-wrap:nowrap!important}
	#macstar-nav .xpro-elementor-horizontal-navbar-nav > li{flex:none}
	#macstar-nav .xpro-elementor-horizontal-navbar-nav > li > a,
	#macstar-nav .xpro-elementor-horizontal-navbar-nav li a{
		margin:0 6px!important;padding:20px 6px!important;
		font-size:13px!important;white-space:nowrap}
}
@media (min-width:1025px) and (max-width:1200px){
	#macstar-nav .xpro-elementor-horizontal-navbar-nav > li > a,
	#macstar-nav .xpro-elementor-horizontal-navbar-nav li a{
		margin:0 3px!important;padding:20px 4px!important;font-size:12.5px!important}
}

/* ---- category cards: two to a row ----
   Four categories in a three-across grid left one orphan on its own line. */
@media (min-width:901px){
	.ms-catgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;
		gap:clamp(16px,2vw,28px)!important;align-items:stretch!important}
	.ms-catcard{height:100%}
	.ms-catcard .ms-tile{aspect-ratio:16/9}
}
@media (min-width:601px) and (max-width:900px){
	.ms-catgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch!important}
	.ms-catcard{height:100%}
}

/* ---- why-buy: separate cards, two rows ----
   The list was a hairline-joined table, so the empty seventh cell showed as a
   grey slab. Real cards with real gaps hide it, and four across splits the
   seven checks into two rows. */
.ms-whygrid{background:none!important;border:0!important;
	gap:clamp(12px,1.4vw,18px)!important;
	grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important}
.ms-whyitem{background:var(--ms-bg-raised)!important;
	border:1px solid var(--ms-line)!important;border-radius:var(--ms-radius)!important;
	transition:border-color .25s}
.ms-whyitem:hover{border-color:var(--ms-line-strong)!important}
@media (min-width:1100px){
	.ms-whygrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* ---- why-buy heading ----
   .ms-sechead is a two-up row: title left, lede right. That reads well beside
   a short title, but here it pushed the supporting line into a narrow column
   of its own, indented away from the heading it belongs to. In this section
   the lede belongs under the heading, on the same left edge. */
.ms-why .ms-sechead{flex-direction:column;align-items:flex-start;
	justify-content:flex-start;gap:var(--ms-s3)}
.ms-why .ms-sechead .ms-col{min-width:0;width:100%;gap:var(--ms-s3)}
.ms-why .ms-sechead .ms-lede{max-width:66ch!important;margin:0}

/* ---- the header shares the page gutter ----
   Elementor capped the header row at 1280 with no padding, so the logo began
   112px inside the content edge below it. Matching .ms-wrap puts the logo on
   the same left edge as every heading on the page, and the extra width pays
   for a larger nav and larger icons. */
@media (min-width:1025px){
	.xpro-theme-builder-header .elementor-container{
		max-width:var(--ms-maxw)!important;width:100%!important;
		padding-inline:clamp(20px,3.5vw,48px)!important}
	.xpro-theme-builder-header .xpro-site-logo,
	.xpro-theme-builder-header .elementor-widget-xpro-site-logo{text-align:left!important}

	#macstar-nav .xpro-elementor-horizontal-navbar-nav > li > a,
	#macstar-nav .xpro-elementor-horizontal-navbar-nav li a{
		margin:0 10px!important;padding:20px 8px!important;
		font-size:15px!important;white-space:nowrap}

	.ms-hdr-tools{gap:6px}
	.ms-hdr-tools .ms-icon-btn{width:44px!important;height:44px!important}
	.ms-hdr-tools .ms-icon-btn svg{width:22px!important;height:22px!important}
}
@media (min-width:1025px) and (max-width:1300px){
	#macstar-nav .xpro-elementor-horizontal-navbar-nav > li > a,
	#macstar-nav .xpro-elementor-horizontal-navbar-nav li a{
		margin:0 6px!important;padding:20px 5px!important;font-size:14px!important}
}

/* The section adds its own side padding on top of the container's, which put
   the logo 24px further in than the content below it. */
@media (min-width:1025px){
	.xpro-theme-builder-header .elementor-top-section{
		padding-left:0!important;padding-right:0!important}
}

/* ---- product page: the art holds while the detail scrolls ----
   The tabs move up into the right column beside the stage, and the stage is
   pinned, so the machine stays in view until the specification runs out. */
@media (min-width:901px){
	.macstar-single div.product:not(.elementor){align-items:start!important}
	.macstar-single div.product:not(.elementor) > .ms-sp-media{
		grid-column:1!important;grid-row:1 / span 2!important;
		position:sticky!important;top:88px;align-self:start!important}
	.macstar-single div.product:not(.elementor) > .summary{
		grid-column:2!important;grid-row:1!important}
	.macstar-single div.product:not(.elementor) > .ms-sp-tabs{
		grid-column:2!important;grid-row:2!important;
		margin-top:26px!important;padding-top:22px!important}
	.macstar-single .ms-sp-panel{max-width:none}
}
.ms-sp-thumbs{display:none!important}

/* ---- related band ----
   It sits outside div.product, so the related band runs the full page width
   under the pinned art rather than inside the two-column grid. */
.macstar-single .ms-related{border-top:1px solid var(--ms-line);
	max-width:var(--ms-maxw);margin-inline:auto;
	padding-block:clamp(40px,5vw,72px);
	padding-inline:clamp(16px,3vw,40px)!important}
.macstar-single .ms-related .ms-pgrid{gap:clamp(14px,1.6vw,22px)}
@media(max-width:900px){
	.macstar-single .ms-related{padding-block:clamp(32px,6vw,48px)}
}

/* ---- product tabs: underline, not pills ----
   The filled rust pills read as buttons. These are tabs, so they sit on a rule
   with the active one marked by an underline under its own label. */
.ms-sp-tablist{display:flex;flex-wrap:wrap;gap:0 30px;
	border-bottom:1px solid var(--ms-line);margin-bottom:22px;position:relative}
.ms-sp-tab{
	all:unset;cursor:pointer;position:relative;
	padding:0 0 13px;border:0;border-radius:0;background:none;
	font-family:var(--ms-body);font-size:15px;font-weight:600;
	letter-spacing:0;text-transform:none;color:var(--ms-text-dim);
	transition:color .2s}
.ms-sp-tab:hover{color:var(--ms-text);background:none;border:0}
.ms-sp-tab.is-on{color:var(--ms-text);font-weight:700;background:none;border:0}
.ms-sp-tab.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
	height:2px;background:var(--ms-rust)}
.ms-sp-tab:focus-visible{outline:2px solid var(--ms-gold);outline-offset:3px}

/* the tabs read as tabs, so the table under them stays quiet */
.ms-sp-panel table th,.ms-sp-table th{
	width:206px;padding-block:14px;
	font-size:11.5px!important;letter-spacing:.14em!important}
.ms-sp-panel table td,.ms-sp-table td{padding-block:14px;font-size:14.5px}

/* ---- specification & condition tables: the prototype .spec-table, verbatim --
   Mono uppercase label column, body-face value column, one hairline per row.
   Applies to both tables inside the Specifications tab and anywhere else
   .ms-sp-table is used, so every spec row on the site reads the same. */
.ms-sp-panel table,.ms-sp-table{width:100%;max-width:640px;margin:0;
	border-collapse:collapse;font-family:var(--ms-body);font-size:13.5px}
.ms-sp-panel table th,.ms-sp-table th,
.ms-sp-panel table td,.ms-sp-table td{text-align:left;vertical-align:top;
	padding:9px 0;border-bottom:1px solid var(--ms-line)}
.ms-sp-panel table th,.ms-sp-table th{width:40%;padding-right:12px;
	font-family:var(--ms-mono)!important;font-size:13px!important;
	letter-spacing:.1em!important;text-transform:uppercase!important;
	font-weight:500!important;color:var(--ms-text-mute)!important}
.ms-sp-panel table td,.ms-sp-table td{font-size:13.5px;line-height:1.6;
	font-weight:500;color:var(--ms-text)!important}
.ms-sp-panel table td p{margin:0;color:inherit;font-weight:inherit;font-size:inherit}
.ms-sp-note{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--ms-text-mute)}
.ms-sp-panel .ms-sp-subh + table{margin-bottom:0}
.macstar-thanks .ms-sp-table{max-width:none}
@media(max-width:560px){
	.ms-sp-panel table th,.ms-sp-table th{width:42%;padding-right:10px;font-size:11.5px!important}
	.ms-sp-panel table td,.ms-sp-table td{font-size:13px}
}

/* ------------------------------------------- charger add-ons (checkout) ----
   Adapter and cable are offered per brand in two grades. An option with no
   price set is shown but not selectable, so nothing can be sold at a figure
   nobody chose. The pencil is only printed for shop managers. */
.ms-addons{margin:clamp(24px,3vw,36px) 0 0;padding:clamp(18px,2.4vw,26px);
	border:1px solid var(--ms-line);background:var(--ms-bg-sunken);border-radius:var(--ms-radius)}
.ms-addons.is-busy{opacity:.55;pointer-events:none}
.ms-addons-h{margin:0 0 6px;font-family:var(--ms-display);font-size:clamp(17px,1.5vw,21px);
	font-weight:700;letter-spacing:-.014em;line-height:1.1;color:var(--ms-text)}
.ms-addons-lede{margin:0 0 20px;font-size:13px;line-height:1.65;
	color:var(--ms-text-dim);max-width:62ch}
.ms-addon-brand + .ms-addon-brand{margin-top:24px;padding-top:22px;border-top:1px solid var(--ms-line)}
.ms-addon-bhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 14px}
.ms-addon-bname{font-family:var(--ms-mono);font-size:11.5px;letter-spacing:.14em;
	text-transform:uppercase;color:var(--ms-rust-glow)}
.ms-addon-fit{font-size:12px;line-height:1.5;color:var(--ms-text-mute)}
.ms-addon-group{border:0;margin:0 0 16px;padding:0;min-width:0}
.ms-addon-group:last-child{margin-bottom:0}
.ms-addon-glabel{padding:0;margin:0 0 6px;font-size:12px;font-weight:700;color:var(--ms-text-dim)}
.ms-addon-opt{display:flex;align-items:center;gap:12px;padding:9px 0;
	border-bottom:1px solid var(--ms-line)}
.ms-addon-opt:last-child{border-bottom:0}
.ms-addon-lab{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;cursor:pointer}
.ms-addon-opt.is-ask .ms-addon-lab{cursor:default;opacity:.55}
.ms-addon-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ms-addon-tick{flex:none;position:relative;display:inline-block;width:16px;height:16px;
	border:1px solid var(--ms-line-strong);border-radius:50%;background:transparent;
	transition:border-color .15s}
.ms-addon-radio:checked + .ms-addon-tick{border-color:var(--ms-rust)}
.ms-addon-radio:checked + .ms-addon-tick::after{content:"";position:absolute;inset:3px;
	border-radius:50%;background:var(--ms-rust)}
.ms-addon-radio:focus-visible + .ms-addon-tick{outline:2px solid var(--ms-gold);outline-offset:2px}
.ms-addon-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.ms-addon-name{font-size:14px;font-weight:600;line-height:1.35;color:var(--ms-text)}
.ms-addon-note{font-size:12px;line-height:1.5;color:var(--ms-text-mute)}
.ms-addon-price{flex:none;display:flex;align-items:center;gap:8px;white-space:nowrap;
	font-family:var(--ms-mono);font-size:13px;color:var(--ms-text)}
.ms-addon-price.is-ask .ms-addon-amt{font-family:var(--ms-body);font-size:12px;color:var(--ms-text-mute)}
.ms-addon-price.is-saving{opacity:.5}
.ms-addon-price.is-editing .ms-addon-amt{display:none}
.ms-addon-edit{all:unset;box-sizing:border-box;cursor:pointer;display:inline-grid;place-items:center;
	width:26px;height:26px;border:1px solid var(--ms-line);border-radius:var(--ms-radius);
	color:var(--ms-text-mute);transition:color .15s,border-color .15s}
.ms-addon-edit:hover{color:var(--ms-rust-glow);border-color:var(--ms-rust)}
.ms-addon-edit:focus-visible{outline:2px solid var(--ms-gold);outline-offset:2px}
.ms-addon-editor{display:flex;align-items:center;gap:6px}
.ms-addon-input{width:110px;padding:6px 8px;background:var(--ms-bg);color:var(--ms-text);
	border:1px solid var(--ms-line-strong);border-radius:var(--ms-radius);
	font-family:var(--ms-mono);font-size:13px}
.ms-addon-save,.ms-addon-cancel{all:unset;box-sizing:border-box;cursor:pointer;
	padding:6px 10px;border-radius:var(--ms-radius);font-family:var(--ms-body);
	font-size:12px;font-weight:600}
.ms-addon-save{background:var(--ms-rust);color:#FFF6F1}
.ms-addon-cancel{border:1px solid var(--ms-line);color:var(--ms-text-dim)}
@media(max-width:600px){
	.ms-addon-opt{flex-wrap:wrap;gap:6px 12px}
	.ms-addon-price{width:100%;padding-left:26px}
	.ms-addon-editor{flex-wrap:wrap}
}


/* the theme paints every number input white; the editor stays on the dark panel */
.ms-addons .ms-addon-input{width:112px!important;min-width:0!important;height:auto!important;
	min-height:0!important;margin:0!important;padding:6px 8px!important;
	background:var(--ms-bg)!important;color:var(--ms-text)!important;
	border:1px solid var(--ms-line-strong)!important;box-shadow:none!important;
	font-family:var(--ms-mono)!important;font-size:13px!important;line-height:1.3!important}
.ms-addons .ms-addon-input:focus{background:var(--ms-bg)!important;color:var(--ms-text)!important;
	border-color:var(--ms-rust)!important;outline:2px solid var(--ms-gold);outline-offset:1px}
.ms-addon-price.is-editing .ms-addon-edit{display:none}
.ms-addons .ms-addon-editor{flex-wrap:wrap;justify-content:flex-end}


/* the charger card now sits in the summary column, which is narrow, so the
   price drops under its own option rather than squeezing the label */
#order_review .ms-addons{margin-top:var(--ms-s4,18px)}
#order_review .ms-addons .ms-addon-opt{flex-wrap:wrap;gap:4px 10px}
#order_review .ms-addons .ms-addon-lab{flex:1 1 100%}
#order_review .ms-addons .ms-addon-price{width:100%;padding-left:26px;justify-content:flex-start}
#order_review .ms-addons .ms-addon-editor{justify-content:flex-start}
#order_review .ms-addons .ms-addon-opt--none .ms-addon-lab{flex:1 1 auto}


/* WooCommerce hard-codes a "Return to shop" button into cart-empty.php, below
   our empty-cart card and in the theme default style. "Explore products" in
   the card goes to the same place, so the duplicate is hidden rather than
   restyled - one call to action, not two. */
.macstar-cartpage .return-to-shop,
.macstar-cartpage p.cart-empty{display:none!important}
.macstar-cartpage .ms-cartpage-empty{margin-bottom:clamp(32px,4vw,56px)}


/* --- the charger card borrows the specification table's typography ------
   Same mono uppercase label column, same body-face values, same row rhythm,
   so the checkout and the product page read as one system. */

/* label left, price right - the two-column shape of the spec table */
#order_review .ms-addons .ms-addon-opt{flex-wrap:wrap;gap:2px 14px;padding:10px 0}
#order_review .ms-addons .ms-addon-lab{flex:1 1 230px}
#order_review .ms-addons .ms-addon-price{width:auto;padding-left:0;
	margin-left:auto;justify-content:flex-end}
#order_review .ms-addons .ms-addon-editor{justify-content:flex-end}

.ms-addons-h{font-size:clamp(19px,1.7vw,25px);letter-spacing:-.014em;line-height:1.06}
.ms-addons-lede{font-size:13px;line-height:1.7;color:var(--ms-text-dim)}

/* brand line = the rust sub-heading above each spec table */
.ms-addon-bname{font-size:11px;letter-spacing:.16em}
.ms-addon-fit{font-size:12px;line-height:1.55}

/* group label = the spec table's mono label column */
.ms-addon-glabel{font-family:var(--ms-mono);font-size:13px;font-weight:400;
	letter-spacing:.1em;text-transform:uppercase;color:var(--ms-text-mute);
	margin:0 0 2px}

/* option name = the spec table's value cell */
.ms-addon-name{font-family:var(--ms-body);font-size:13.5px;font-weight:500;
	line-height:1.5;color:var(--ms-text)}
.ms-addon-opt--none .ms-addon-name{font-weight:600}
.ms-addon-note{font-size:12px;line-height:1.55;color:var(--ms-text-mute)}
.ms-addon-price{font-size:13px}
.ms-addon-price.is-ask .ms-addon-amt{font-size:12.5px}

.ms-addon-note{font-weight:400}
.ms-addon-group + .ms-addon-group{margin-top:16px}
.ms-addon-bhead{margin-bottom:10px}


/* --- the charger card is the order summary card's twin ------------------
   Same raised ground, same border, same padding, and a larger type scale so
   the options read comfortably at arm's length. */
.ms-addons{background:var(--ms-bg-raised);border:1px solid var(--ms-line);
	border-radius:var(--ms-radius);padding:clamp(20px,2.6vw,32px)}
.ms-addons-lede{font-size:14px;line-height:1.7;margin-bottom:22px}

.ms-addon-bname{font-size:12px;letter-spacing:.16em}
.ms-addon-fit{font-size:13px;line-height:1.55}
.ms-addon-glabel{font-size:13.5px;margin:0 0 4px}

.ms-addon-name{font-size:15px;line-height:1.45}
.ms-addon-note{font-size:13px;line-height:1.5}
.ms-addon-price{font-size:14.5px;gap:10px}
.ms-addon-price.is-ask .ms-addon-amt{font-size:13.5px}

.ms-addon-tick{width:18px;height:18px}
.ms-addon-radio:checked + .ms-addon-tick::after{inset:4px}
.ms-addon-edit{width:28px;height:28px}
.ms-addon-edit svg{width:15px;height:15px}
.ms-addons .ms-addon-input{width:124px!important;font-size:14px!important;
	padding:7px 9px!important}
.ms-addon-save,.ms-addon-cancel{font-size:13px;padding:7px 11px}

#order_review .ms-addons .ms-addon-opt{padding:12px 0;gap:2px 16px}
#order_review .ms-addons .ms-addon-lab{flex:1 1 250px}

/* an unpriced option is still dimmed, but not so far that the larger type
   stops being readable */
.ms-addon-opt.is-ask .ms-addon-lab{opacity:.78}


/* --- phone layout ------------------------------------------------------
   Stacked, the summary column fell to the bottom, which put the charger
   card after the address fields. The order column leads instead, so the
   read is: what you are buying, the charger, then where it is going. */
@media(max-width:1000px){
	.macstar-checkout #order_review{grid-row:1}
	.macstar-checkout #customer_details{grid-row:2}
	.macstar-checkout .ms-co-pay{grid-row:3}
	.macstar-checkout .ms-co-btnrow{grid-row:4}
	#order_review .ms-addons{margin-top:var(--ms-s5,24px)}
}

/* The cart and confirmation pages carry no breadcrumb, so their wrapper had
   no top padding and the page title sat hard against the site header. The
   checkout gets its gap from the breadcrumb, so it is left alone. */
.macstar-cartpage .woocommerce,
.macstar-thanks .woocommerce{padding-top:clamp(28px,5vw,56px)}