/* ==========================================================================
   MACSTAR - DARK MODE
   The whole store on the onyx stage. This block only redefines the surface
   and ink tokens; every component in macstar.css / macstar-pages.css already
   reads them, so the site flips as one system rather than patch by patch.
   Appended last, so it wins over the light defaults.
   ========================================================================== */

:root{
  color-scheme:dark;

  /* page surfaces - the page sits ABOVE onyx, so the hero, header, footer
     and editorial bands still read as the deeper layer */
  --ms-bg:#121110;
  --ms-bg-raised:#1A1714;
  --ms-bg-sunken:#0B0A09;

  /* ink */
  --ms-text:#F4EFE7;
  --ms-text-dim:#ABA298;
  --ms-text-mute:#867C72;

  /* rules */
  --ms-line:#2B2520;
  --ms-line-strong:#473E35;

  /* accents that were tuned for a light ground */
  --ms-rust-wash:#2C1B12;
  --ms-gold-dim:#A28A52;

  /* status colours need more luminance on a dark ground */
  --ms-ok:#57B384;
  --ms-warn:#D6A648;
  --ms-bad:#D8675F;

  --ms-shadow-md:0 10px 30px -12px rgba(0,0,0,.78);
  --ms-shadow-lg:0 28px 60px -24px rgba(0,0,0,.92);
}

/* the theme and the Elementor kit both paint containers light */
body,
body.elementor-kit-6,
body.elementor-page,
body.woocommerce,
body.woocommerce-page{background:var(--ms-bg);color:var(--ms-text)}
.site,#page,#content,#primary,.ast-container,.site-content,
.ast-article-single,.ast-article-post,.entry-content,
.ast-woocommerce-container,.woocommerce-page #content{background:transparent}

/* ---------- surfaces that were drawn for white cards ---------- */
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img{background:transparent}
.woocommerce div.product div.images img{
  background:radial-gradient(90% 85% at 50% 26%,var(--ms-bg-raised),var(--ms-bg-sunken));
}

/* ---------- panels, cards and tiles ---------- */
.ms-panel,.ms-card{background:var(--ms-bg-raised);border-color:var(--ms-line)}
.ms-ed{background:#1A1714}
.ms-tile{background:radial-gradient(90% 85% at 50% 26%,#1E1A16,#0B0A09)}
.ms-tile--dark{background:radial-gradient(90% 85% at 50% 26%,#1E1A16,var(--ms-onyx))}

/* ---------- header / footer keep their own deeper ground ---------- */
#macstar-header{box-shadow:0 1px 0 rgba(255,255,255,.03)}

/* ---------- forms: dark fields, light ink ---------- */
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=url],
.wpforms-container select,
.wpforms-container textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.ms-price-fields input,
.select2-container .select2-selection--single{
  background:var(--ms-bg-raised)!important;
  color:var(--ms-text)!important;
  border-color:var(--ms-line)!important;
}
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder,
.ms-price-fields input::placeholder,
.woocommerce form .form-row input.input-text::placeholder{color:var(--ms-text-mute)}
.woocommerce .woocommerce-ordering select,
.woocommerce select.orderby{background:var(--ms-bg-raised);color:var(--ms-text);border-color:var(--ms-line)}

/* ---------- WooCommerce chrome ---------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--ms-bg-raised);color:var(--ms-text);
}
.woocommerce table.shop_table,
.woocommerce table.shop_attributes,
.woocommerce-checkout .woocommerce-checkout-review-order{
  background:var(--ms-bg-raised);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_attributes th{color:var(--ms-text-dim)}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{color:var(--ms-text-dim)}
.woocommerce nav.woocommerce-pagination ul li span.current{color:var(--ms-bg)}

/* ---------- the rail and pills ---------- */
.ms-rail{background:var(--ms-bg-raised);border-color:var(--ms-line)}
.ms-rail a.ms-sort:hover{background:rgba(255,255,255,.04)}
.ms-pill{background:var(--ms-bg-raised)}

/* ---------- the dark-stage sections no longer need to fight the page ---------- */
.ms-sunken{background:var(--ms-bg-sunken)}

/* ---------- light-on-dark scrollbars and selection ---------- */
::selection{background:var(--ms-rust);color:#FFF6F1}

/* ==========================================================================
   HEADER TOOLS - search, WhatsApp, cart
   ========================================================================== */
.ms-hdr-tools{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.ms-icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;padding:0;cursor:pointer;
  border:1px solid transparent;border-radius:var(--ms-radius);
  background:none;color:var(--ms-onyx-dim);
  transition:color .2s,background-color .2s,border-color .2s;
}
.ms-icon-btn:hover,.ms-icon-btn:focus-visible{
  color:var(--ms-onyx-text);background:rgba(255,255,255,.06);border-color:var(--ms-onyx-line);
}
.ms-cart-dot{
  position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;background:var(--ms-rust);color:#FFF6F1;
  font-family:var(--ms-mono);font-size:10px;font-weight:600;line-height:1;
}
.ms-cart-dot.is-empty{display:none}
@media (max-width:430px){ .ms-icon-btn{width:34px;height:34px} }

/* search overlay */
.ms-searchlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-start;justify-content:center;padding:clamp(16px,10vh,120px) 16px}
.ms-searchlay[hidden]{display:none!important}
.ms-searchlay-scrim{position:absolute;inset:0;background:rgba(6,5,5,.78);backdrop-filter:blur(3px)}
.ms-searchbox{position:relative;width:100%;max-width:680px}
.ms-searchbar{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:var(--ms-onyx-2);border:1px solid var(--ms-onyx-line);border-radius:var(--ms-radius-lg);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);color:var(--ms-onyx-dim);
}
.ms-searchbar input[type=search]{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-family:var(--ms-body);font-size:16px;color:var(--ms-onyx-text);
}
.ms-searchbar input[type=search]::placeholder{color:var(--ms-text-mute)}
.ms-search-hint{margin:10px 2px 0;font-family:var(--ms-mono);font-size:12px;color:var(--ms-text-mute)}
.ms-kbd{border:1px solid var(--ms-onyx-line);border-radius:3px;padding:1px 5px;font-size:11px}

/* ==========================================================================
   PRODUCT CARD - one format for the homepage row and the shop grid
   ========================================================================== */
.woocommerce ul.products li.product.ms-pcard{
  padding:0;margin:0;overflow:hidden;
  background:var(--ms-bg-raised);border:1px solid var(--ms-line);border-radius:var(--ms-radius);
  display:flex;flex-direction:column;
}
.ms-pcard{position:relative}
.ms-pcard-art{display:block;line-height:0}
.ms-pcard .ms-tile{aspect-ratio:5/4;padding:18px}

/* The drawings carry width="800" height="584" attributes. Let the intrinsic
   ratio stand and cap BOTH axes, so the art scales down into the box instead
   of rendering at 800px and being cropped. width:100% + max-height would
   distort; auto + both maxima cannot. */
.ms-tile svg,.ms-tile img,
.ms-pcard .ms-tile svg,.ms-pcard .ms-tile img{
  width:auto;height:auto;max-width:100%;max-height:100%;display:block;margin:0 auto;
}
.ms-hero-art svg,.ms-feature-art svg{width:100%;height:auto;max-width:100%}
.ms-ed-art svg{width:auto;height:100%;max-width:100%}

.ms-pcard-body{padding:18px;display:flex;flex-direction:column;gap:11px;flex:1}
.ms-pcard-brandline{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ms-pcard-brand{font-family:var(--ms-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ms-text-mute)}
.ms-pcard-cat{font-family:var(--ms-mono);font-size:12px;color:var(--ms-text-mute)}
.woocommerce ul.products li.product.ms-pcard h3,
.ms-pcard h3{
  margin:0;padding:0;font-family:var(--ms-body);font-size:16px;font-weight:700;
  letter-spacing:-.01em;line-height:1.35;color:var(--ms-text);
}
.ms-pcard h3 a{color:var(--ms-text);text-decoration:none}
.ms-pcard h3 a:hover{color:var(--ms-rust-glow)}

.ms-specs{display:flex;flex-wrap:wrap;gap:6px}
.ms-chip{
  font-family:var(--ms-mono);font-size:11.5px;letter-spacing:.02em;color:var(--ms-text-dim);
  border:1px solid var(--ms-line);border-radius:3px;padding:5px 8px;background:rgba(255,255,255,.02);
}

.ms-pcard-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--ms-line);display:flex;flex-direction:column;gap:10px}
.woocommerce ul.products li.product.ms-pcard .ms-priceline{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0}
.woocommerce ul.products li.product.ms-pcard .ms-price,
.ms-pcard .ms-price{font-family:var(--ms-mono);font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ms-text)}
.ms-pcard .ms-price del{color:var(--ms-text-mute);font-size:13px;opacity:1;margin-right:6px}
.ms-pcard .ms-price ins{text-decoration:none;color:var(--ms-rust-glow)}
.ms-stockline{display:inline-flex;align-items:center;gap:6px;font-family:var(--ms-mono);font-size:12.5px;letter-spacing:.04em;color:var(--ms-text-dim)}
.ms-stockline .ms-dotp{width:6px;height:6px;border-radius:50%;background:var(--ms-ok);flex:none}
.ms-stockline.is-low .ms-dotp{background:var(--ms-warn)}
.ms-stockline.is-out .ms-dotp{background:var(--ms-bad)}

.ms-pcard-actions{display:grid;grid-template-columns:1fr auto;gap:8px}
.ms-iconsq{
  display:inline-flex;align-items:center;justify-content:center;width:38px;
  border:1px solid var(--ms-line);border-radius:var(--ms-radius);
  color:var(--ms-text-dim);background:none;transition:border-color .2s,color .2s,background-color .2s;
}
.ms-iconsq:hover{border-color:#1E6F50;color:#5FC79A;background:rgba(30,111,80,.14)}

.ms-badge{
  position:absolute;top:12px;left:12px;z-index:3;
  font-family:var(--ms-mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 10px;border-radius:2px;
}
.ms-badge--featured{background:#1E6F50;color:#EAF7F0}
.ms-badge--sale{background:var(--ms-rust);color:#FFF6F1}
.ms-badge--new{background:linear-gradient(100deg,var(--ms-gold-dim),var(--ms-gold));color:#17120A}

/* WooCommerce's own loop styling must not fight the card */
.woocommerce ul.products li.product.ms-pcard .button{display:none}
.woocommerce ul.products li.product.ms-pcard .ms-b{display:inline-flex}
.woocommerce ul.products li.product.ms-pcard a img{margin:0}
.woocommerce ul.products li.product.ms-pcard .onsale{display:none}

/* ==========================================================================
   CONTACT - the store details table was too faint to read
   ========================================================================== */
.ms-spec th{
  font-family:var(--ms-mono);font-size:12px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ms-gold);width:36%;padding-right:18px;
}
.ms-spec td{color:var(--ms-text);font-size:15px;line-height:1.55}
.ms-spec th,.ms-spec td{border-top:1px solid var(--ms-line);padding:13px 0}
.ms-panel h3{color:var(--ms-text)}
.ms-panel p{color:var(--ms-text-dim)}
.ms-contact .ms-panel{background:var(--ms-bg-raised);border:1px solid var(--ms-line);border-radius:var(--ms-radius);padding:clamp(20px,2.6vw,32px)}

/* every card in a row shares the row height, so the buttons line up */
.woocommerce ul.products li.product.ms-pcard{height:100%}
.ms-specs{align-content:flex-start}
.ms-chip{font-size:11px;padding:5px 7px}

/* the theme draws a full grid on tables; the store details want hairlines only */
.ms-spec,.ms-spec tr,.ms-spec th,.ms-spec td{border:0;background:none}
.ms-spec{border-collapse:collapse;width:100%}
.ms-spec tr + tr th,.ms-spec tr + tr td{border-top:1px solid var(--ms-line)}
.ms-spec th,.ms-spec td{padding:13px 0;vertical-align:top}
.ms-spec th{padding-right:18px}

/* ==========================================================================
   FULL-BLEED BANDS
   Astra boxes the whole page in a 1320px .ast-container, so the hero, the
   sunken brand rail and the stage band were being cut off at that width and
   the page background showed through on both sides. Let the container run
   edge to edge on the pages whose sections already carry their own .ms-wrap,
   and leave it boxed on single product, cart, checkout and account, which
   have no wrap of their own.
   ========================================================================== */
.macstar-bleed #content .ast-container,
.macstar-bleed #content > .ast-container,
.macstar-bleed .site-content > .ast-container{
  max-width:none!important;padding-left:0!important;padding-right:0!important;width:100%;
}
.macstar-bleed #primary,
.macstar-bleed .ast-woocommerce-container{max-width:none;padding-left:0;padding-right:0}

/* a wider measure so big screens read as full rather than empty */
:root{--ms-maxw:1600px}
.ms-wrap{max-width:var(--ms-maxw);padding-inline:clamp(20px,3.5vw,48px)}
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-boxed > .e-con-inner{max-width:var(--ms-maxw)}

/* the shop grid gets a fourth column back at the wider measure */
@media (min-width:1500px){
  .woocommerce ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* single product, cart, checkout and account keep a boxed container, but at
   the same measure as everything else so the site reads as one width */
#content .ast-container{max-width:var(--ms-maxw)}

/* ==========================================================================
   PRODUCTS ROUTE - pagination and single-product reading measure
   ========================================================================== */
.woocommerce nav.woocommerce-pagination{margin-top:clamp(32px,4vw,56px);padding-bottom:clamp(24px,3vw,40px)}
.woocommerce nav.woocommerce-pagination ul{justify-content:flex-start}

/* the tab panels ran the full 1545px; text needs a measure it can be read at */
.woocommerce div.product .woocommerce-tabs{margin-top:clamp(28px,3.5vw,48px)}
.woocommerce div.product .woocommerce-Tabs-panel{padding-top:26px;max-width:78ch}
.woocommerce div.product .woocommerce-Tabs-panel > h2{
  font-family:var(--ms-display);font-size:clamp(20px,2vw,26px);font-weight:700;
  letter-spacing:-.02em;color:var(--ms-text);margin:0 0 14px;
}
.woocommerce div.product .woocommerce-Tabs-panel p{
  font-size:16px;line-height:1.75;color:var(--ms-text-dim);margin:0 0 14px;max-width:72ch;
}
.woocommerce div.product .woocommerce-Tabs-panel p:last-child{margin-bottom:0}
.woocommerce div.product .woocommerce-Tabs-panel ul,
.woocommerce div.product .woocommerce-Tabs-panel ol{color:var(--ms-text-dim);line-height:1.75;padding-left:1.2em;margin:0 0 14px}

/* the attributes table reads as a spec sheet, not a stretched grid */
.woocommerce div.product table.shop_attributes{max-width:720px;border:0;border-collapse:collapse}
.woocommerce div.product table.shop_attributes tr{border:0}
.woocommerce div.product table.shop_attributes th,
.woocommerce div.product table.shop_attributes td{
  border:0;border-top:1px solid var(--ms-line);padding:13px 0;background:none;vertical-align:top;
}
.woocommerce div.product table.shop_attributes tr:first-child th,
.woocommerce div.product table.shop_attributes tr:first-child td{border-top:0;padding-top:0}
.woocommerce div.product table.shop_attributes th{
  width:34%;padding-right:24px;font-family:var(--ms-mono);font-size:12px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ms-gold);font-style:normal;
}
.woocommerce div.product table.shop_attributes td{color:var(--ms-text);font-size:15px;font-style:normal}
.woocommerce div.product table.shop_attributes td p{margin:0;color:var(--ms-text);font-size:15px;line-height:1.55}

/* ==========================================================================
   ADMIN - add tile, card controls, dialog
   ========================================================================== */
.woocommerce ul.products li.product.ms-addtile{
  padding:0;margin:0;background:none;border:2px dashed var(--ms-line-strong);
  border-radius:var(--ms-radius);min-height:240px;display:flex;
}
.ms-addtile-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:none;border:0;cursor:pointer;color:var(--ms-text-dim);padding:32px;width:100%;
  transition:color .2s,background-color .2s;
}
.ms-addtile:hover{border-color:var(--ms-rust)}
.ms-addtile-btn:hover{color:var(--ms-text);background:rgba(255,255,255,.02)}
.ms-addtile-plus{
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:50%;background:var(--ms-text);color:var(--ms-bg);
}
.ms-addtile:hover .ms-addtile-plus{background:var(--ms-rust);color:#FFF6F1}
.ms-addtile-label{font-family:var(--ms-body);font-size:15px;font-weight:600}

.ms-cardadmin{position:absolute;top:10px;right:10px;z-index:4;display:flex;flex-direction:column;gap:6px}
.ms-ca-btn{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;
  cursor:pointer;border-radius:var(--ms-radius);
  border:1px solid var(--ms-line-strong);background:rgba(10,9,8,.78);color:var(--ms-text-dim);
  backdrop-filter:blur(3px);transition:color .18s,border-color .18s,background-color .18s;
}
.ms-ca-btn:hover{color:var(--ms-text);border-color:var(--ms-text-dim);background:rgba(10,9,8,.94)}
.ms-ca-del:hover,.ms-ca-del.is-armed{color:#FFF0EF;border-color:var(--ms-bad);background:var(--ms-bad)}
.ms-ca-del.is-armed{animation:ms-armed 1s ease-in-out infinite}
@keyframes ms-armed{50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){ .ms-ca-del.is-armed{animation:none} }

/* dialog */
.ms-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px}
.ms-modal[hidden]{display:none!important}
.ms-modal-scrim{position:absolute;inset:0;background:rgba(6,5,5,.8);backdrop-filter:blur(3px)}
.ms-modal-box{
  position:relative;width:100%;max-width:520px;max-height:90vh;overflow:auto;
  background:var(--ms-bg-raised);border:1px solid var(--ms-line);border-radius:var(--ms-radius-lg);
  padding:clamp(22px,3vw,32px);box-shadow:0 50px 110px -40px rgba(0,0,0,.95);
  display:flex;flex-direction:column;gap:18px;
}
.ms-modal-title{
  font-family:var(--ms-display);font-size:24px;font-weight:700;letter-spacing:-.02em;
  color:var(--ms-text);margin:0;
}
.ms-field{display:flex;flex-direction:column;gap:7px}
.ms-field-label{
  font-family:var(--ms-mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ms-gold);
}
.ms-field-note{font-size:12px;color:var(--ms-text-mute)}
.ms-field input[type=text],
.ms-field input[type=number],
.ms-field select,
.ms-field input[type=file]{
  width:100%;padding:11px 13px;border:1px solid var(--ms-line);border-radius:var(--ms-radius);
  background:var(--ms-bg);color:var(--ms-text);font-family:var(--ms-body);font-size:15px;
}
.ms-field input:focus,.ms-field select:focus{
  outline:none;border-color:var(--ms-rust);box-shadow:0 0 0 3px var(--ms-rust-wash);
}
.ms-field input[type=file]{padding:9px 11px;font-size:13px;color:var(--ms-text-dim)}
.ms-modal-msg{margin:0;font-size:13px;color:var(--ms-text-mute);min-height:1.2em}
.ms-modal-msg.is-bad{color:var(--ms-bad)}
.ms-modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:2px}
.ms-modal-foot .ms-b{min-width:110px}

/* WooCommerce 11 ships its own slate palette for the attributes table and it
   wins on specificity, so the labels came out near-black on dark. Override the
   colours directly and drop the panel background the rows were banding on. */
.woocommerce div.product table.shop_attributes,
.woocommerce div.product table.shop_attributes tbody,
.woocommerce div.product table.shop_attributes tr{background:none!important}
.woocommerce div.product table.shop_attributes th,
.woocommerce div.product table.shop_attributes .woocommerce-product-attributes-item__label{
  color:var(--ms-gold)!important;background:none!important;font-weight:600!important;
}
.woocommerce div.product table.shop_attributes td,
.woocommerce div.product table.shop_attributes td p,
.woocommerce div.product table.shop_attributes .woocommerce-product-attributes-item__value,
.woocommerce div.product table.shop_attributes .woocommerce-product-attributes-item__value p{
  color:var(--ms-text)!important;background:none!important;
}

/* ---------- admin dialog: the Additional information repeater ---------- */
.ms-specrows{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.ms-specrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 34px;gap:8px;align-items:center}
.ms-specrow input[type=text]{
  width:100%;padding:9px 11px;border:1px solid var(--ms-line);border-radius:var(--ms-radius);
  background:var(--ms-bg);color:var(--ms-text);font-family:var(--ms-body);font-size:14px;
}
.ms-specrow input[type=text]:focus{outline:none;border-color:var(--ms-rust);box-shadow:0 0 0 3px var(--ms-rust-wash)}
.ms-specrow input[name^="spec_label"]{font-family:var(--ms-mono);font-size:12.5px;letter-spacing:.04em}
.ms-specdel{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  cursor:pointer;border:1px solid var(--ms-line);border-radius:var(--ms-radius);
  background:none;color:var(--ms-text-mute);font-size:17px;line-height:1;
  transition:color .18s,border-color .18s,background-color .18s;
}
.ms-specdel:hover{color:#FFF0EF;border-color:var(--ms-bad);background:var(--ms-bad)}
.ms-spec-add{align-self:flex-start}
#ms-f-specs-field{gap:0}
#ms-f-specs-field .ms-field-label{margin-bottom:9px}
#ms-f-specs-field .ms-field-note{margin-top:9px}
@media (max-width:520px){
  .ms-specrow{grid-template-columns:minmax(0,1fr) 34px;grid-template-areas:"l x" "v v"}
  .ms-specrow input[name^="spec_label"]{grid-area:l}
  .ms-specrow input[name^="spec_value"]{grid-area:v}
  .ms-specdel{grid-area:x}
}

/* ---------- product page: drawn artwork in place of the gallery ---------- */
.woocommerce div.product div.images.ms-single-art{
  display:grid;place-items:center;padding:clamp(24px,4vw,56px);
  background:radial-gradient(90% 85% at 50% 26%,#1E1A16,#0B0A09);
}
.woocommerce div.product div.images.ms-single-art svg{
  width:auto;height:auto;max-width:100%;max-height:420px;display:block;
}

.ms-field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--ms-line);border-radius:var(--ms-radius);
  background:var(--ms-bg);color:var(--ms-text);font-family:var(--ms-body);font-size:15px;
  line-height:1.6;resize:vertical;min-height:96px;
}
.ms-field textarea:focus{outline:none;border-color:var(--ms-rust);box-shadow:0 0 0 3px var(--ms-rust-wash)}
.ms-field textarea::placeholder{color:var(--ms-text-mute)}

/* .ms-field sets display:flex, which beats the browser's own [hidden] rule, so
   hiding a field in script did nothing. Make hidden actually hide. */
.ms-field[hidden],
.ms-specrow[hidden],
[hidden]{display:none!important}

/* the armed remove button says what it wants, instead of just turning red */
.ms-ca-btn.is-armed{
  width:auto;min-width:0;padding:0 11px;
  font-family:var(--ms-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  animation:none;
}
.ms-cardadmin{align-items:flex-end}
/* ---- second pass: palette, eyebrow rules, label face ---- */
/* ---- second pass: palette, eyebrow rules, label face ----
   Colours come back to macstar.html's own dark values, with one deliberate
   difference: the page stays a step above onyx so the hero, footer and the
   editorial bands still read as the deeper layer. Accent TEXT moves to
   rust-glow, because plain rust goes muddy on a near-black ground while
   still being the right colour for a solid button. */
:root{
	--ms-line:#2A231D;
	--ms-line-strong:#3E352C;
	--ms-rust-wash:#2A1A12;
	--ms-ok:#6FBF95;
	--ms-warn:#D9A93F;
	--ms-bad:#E07A7A;
	--ms-accent-text:#C96B3E;
	--ms-label:#EFE7DC;
}

/* Every section eyebrow gets the gold rule the checkout has. */
.ms-eyebrow{color:var(--ms-accent-text)!important}
.ms-eyebrow::before{content:"";display:inline-block;width:32px;height:1px;
	background:var(--ms-gold);vertical-align:middle;margin-right:12px}
.ms-eyebrow.on-dark{color:var(--ms-gold)!important}
.ms-eyebrow.on-dark::before{background:var(--ms-rust-glow)}
.ms-co-eyebrow{color:var(--ms-accent-text)}

/* Accent text elsewhere, for the same reason. */
.ms-sp-eyebrow,.ms-pcard-brand,.ms-brandcard .ms-bc{color:var(--ms-text-dim)}
.ms-pcard h3 a:hover,.ms-cart-name:hover,.ms-cmp-name:hover,
.ms-sp-price ins,.ms-pcard .ms-price ins{color:var(--ms-accent-text)}

/* Small uppercase field labels were set in the mono face at 13px, which is
   where it stops being readable. The body face at 700 holds the same shape
   and reads cleanly. */
.macstar-checkout .ms-co-grid label,
.ms-field .ms-field-label,
.ms-modal .ms-field-label,
.wpforms-container .wpforms-field-label,
.ms-modal label > span:first-child{
	font-family:var(--ms-body)!important;
	font-size:12.5px!important;
	font-weight:700!important;
	letter-spacing:.085em!important;
	text-transform:uppercase;
	color:var(--ms-label)!important;
	opacity:1}
.macstar-checkout .ms-co-grid label .required,
.wpforms-container .wpforms-required-label{color:var(--ms-accent-text)!important}

/* The spec table keeps the mono face but at a legible weight. */
.ms-sp-panel table th,.ms-sp-table th{color:var(--ms-text-mute)!important;font-weight:500!important}

/* ---- WPForms, dark ----
   The modern renderer drives its colours from custom properties that default
   to black on white, so the placeholders were black at 50% opacity on a dark
   field. Point the properties at the site's own tokens instead. */
.wpforms-container,
.wpforms-container.wpforms-render-modern{
	--wpforms-field-text-color:var(--ms-text)!important;
	--wpforms-field-background-color:var(--ms-bg-raised)!important;
	--wpforms-field-border-color:var(--ms-line)!important;
	--wpforms-label-color:var(--ms-label)!important;
	--wpforms-label-sublabel-color:var(--ms-text-mute)!important;
	--wpforms-label-error-color:var(--ms-bad)!important;
	--wpforms-button-background-color:var(--ms-rust)!important;
	--wpforms-button-text-color:#FFF6F1!important;
}
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder{color:var(--ms-text-mute)!important;opacity:1!important}

/* The list a native select drops down is painted by the browser. Leave its
   options unstyled and let color-scheme decide: the moment a page styles an
   option, Chrome switches to its light-themed painted list, which is how the
   white dropdown appeared. Unstyled + dark scheme gives the same dark list
   the product editor already shows. */
select,
.wpforms-container select,
.macstar-checkout select,
.ms-modal select{color-scheme:dark}

/* Brand is shown only for laptops. */
.ms-brand-field[hidden]{display:none!important}


/* ---- select dropdowns ----
   Chrome only honours color-scheme for a select's list on some platforms, and
   ignores it the moment anything about an option is styled - which is how the
   list came back white. So the page draws the list itself: black panel, white
   rows, and a solid band on the row that is selected.
   wpforms-full resets every ul and li to no background or border with a
   selector that outranks these, hence the insistence. */
/* Something inside the form resets positioning on its divs, so the wrapper
   and the click target have to insist - without this the overlay collapses
   to zero size and every click reaches the native select underneath. */
.wpforms-container .ms-sel,
.ms-sel{position:relative!important;display:block!important}
.wpforms-container .ms-sel > select,
.ms-sel > select{position:relative!important;z-index:1}
.wpforms-container .ms-sel-open,
.ms-sel-open{position:absolute!important;top:0!important;left:0!important;
	right:0!important;bottom:0!important;width:100%!important;height:100%!important;z-index:2!important;
	margin:0!important;padding:0!important;border:0!important;background:none!important;
	opacity:0!important;cursor:pointer;display:block!important}

.wpforms-container .ms-sel-list,
.ms-sel-list{
	position:absolute!important;z-index:60!important;top:calc(100% + 6px)!important;
	left:0!important;right:0!important;bottom:auto!important;
	max-height:264px;overflow:auto;list-style:none!important;
	background:#0B0A09!important;
	border:1px solid var(--ms-line-strong)!important;
	border-radius:var(--ms-radius)!important;
	box-shadow:var(--ms-shadow-lg)!important;
	padding:5px!important;margin:0!important}
.ms-sel-list[hidden]{display:none!important}

.wpforms-container .ms-sel-list li,
.ms-sel-list li{
	display:block;cursor:pointer;
	background:none!important;border:0!important;margin:0!important;
	padding:10px 12px!important;border-radius:3px;
	font-family:var(--ms-body)!important;font-size:14px!important;font-weight:400!important;
	letter-spacing:0!important;line-height:1.35!important;
	color:#FFFFFF!important;opacity:1!important}
.wpforms-container .ms-sel-list li:hover,
.ms-sel-list li:hover{background:rgba(255,255,255,.10)!important}
.wpforms-container .ms-sel-list li.is-on,
.ms-sel-list li.is-on{background:var(--ms-rust)!important;color:#FFF6F1!important}
.ms-sel.is-open > select{border-color:var(--ms-rust)!important}