/* MASPIK cart, checkout and account.
   Styles WooCommerce's own markup - no payment template is overridden, so a
   WooCommerce update can never leave a stale copy behind.
   Depends on tokens.css + base.css. */

#mspk .mspk-shop__wrap{max-width:1180px;padding-top:clamp(20px,3vw,40px);}
#mspk .mspk-shop__head{margin-bottom:26px;}
#mspk .mspk-shop__head--account{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;}
#mspk .mspk-shop__title{
  font-family:var(--mspk-hd);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(27px,3.3vw,40px);line-height:1.12;color:var(--mspk-ink);
}
#mspk .mspk-shop__sub{margin-top:8px;font-size:15px;color:var(--mspk-muted);}

/* ---------- progress ---------- */
#mspk .mspk-steps{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:16px;list-style:none;padding:0;}
#mspk .mspk-steps__i{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--mspk-muted);}
#mspk .mspk-steps__n{
  display:grid;place-items:center;width:25px;height:25px;border-radius:50%;
  background:#E7DCCF;color:var(--mspk-muted);font-size:12.5px;font-weight:700;
}
#mspk .mspk-steps__i.is-now{color:var(--mspk-green);font-weight:700;}
#mspk .mspk-steps__i.is-now .mspk-steps__n{background:var(--mspk-orange);color:#fff;}
#mspk .mspk-steps__i.is-done .mspk-steps__n{background:var(--mspk-green);color:#fff;}

/* ---------- generic WooCommerce surfaces ---------- */
#mspk .mspk-woo{font-size:15px;}
#mspk .mspk-woo a{color:var(--mspk-orange-dk);}
#mspk .mspk-woo a:hover{text-decoration:underline;text-underline-offset:2px;}

#mspk .mspk-woo .woocommerce-message,
#mspk .mspk-woo .woocommerce-info,
#mspk .mspk-woo .woocommerce-error{
  list-style:none;border:1px solid var(--mspk-line);border-left:4px solid var(--mspk-orange);
  background:#fff;border-radius:12px;padding:14px 18px;margin:0 0 18px;font-size:14.5px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
#mspk .mspk-woo .woocommerce-message{border-left-color:var(--mspk-green);}
#mspk .mspk-woo .woocommerce-error{border-left-color:#C0392B;color:#8E2B21;}
#mspk .mspk-woo .woocommerce-message .button,
#mspk .mspk-woo .woocommerce-info .button{margin-left:auto;}

/* buttons: WooCommerce reuses .button everywhere */
#mspk .mspk-woo .button,
#mspk .mspk-woo button.button,
#mspk .mspk-woo input.button,
#mspk .mspk-woo a.button{
  display:inline-block;background:var(--mspk-green);color:#fff;border:0;cursor:pointer;
  padding:13px 24px;border-radius:11px;font:inherit;font-size:15px;font-weight:700;
  line-height:1.2;text-decoration:none;transition:background .16s ease,transform .12s ease;
}
#mspk .mspk-woo .button:hover{background:var(--mspk-green-lt);transform:translateY(-1px);color:#fff;text-decoration:none;}
#mspk .mspk-woo .checkout-button,
#mspk .mspk-woo #place_order{
  background:var(--mspk-orange);width:100%;text-align:center;padding:16px 24px;font-size:16.5px;
}
#mspk .mspk-woo .checkout-button:hover,#mspk .mspk-woo #place_order:hover{background:var(--mspk-orange-dk);}
#mspk .mspk-woo .button:disabled,#mspk .mspk-woo .button.disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* form fields */
#mspk .mspk-woo input[type="text"],
#mspk .mspk-woo input[type="email"],
#mspk .mspk-woo input[type="tel"],
#mspk .mspk-woo input[type="password"],
#mspk .mspk-woo input[type="number"],
#mspk .mspk-woo textarea,
#mspk .mspk-woo select,
#mspk .mspk-woo .select2-selection{
  width:100%;border:1px solid var(--mspk-line)!important;border-radius:11px!important;
  padding:12px 14px!important;font:inherit;font-size:15px;color:var(--mspk-ink);background:#fff;
  height:auto!important;
}
#mspk .mspk-woo input:focus,#mspk .mspk-woo textarea:focus,#mspk .mspk-woo select:focus{
  outline:0;border-color:var(--mspk-orange)!important;box-shadow:0 0 0 3px rgba(244,135,34,.18);
}
#mspk .mspk-woo .form-row{margin:0 0 16px;padding:0;}
#mspk .mspk-woo label{display:block;font-size:13.5px;font-weight:600;color:var(--mspk-ink);margin-bottom:6px;}
#mspk .mspk-woo .required{color:#C0392B;text-decoration:none;}
#mspk .mspk-woo .select2-container--default .select2-selection--single .select2-selection__arrow{top:9px;}

/* ---------- cart ---------- */
#mspk .mspk-woo table.shop_table{
  width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--mspk-line);border-radius:16px;overflow:hidden;
  box-shadow:var(--mspk-shadow);margin-bottom:22px;
}
#mspk .mspk-woo table.shop_table th{
  background:var(--mspk-cream-lt);font-family:var(--mspk-hd);font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--mspk-muted);
  padding:14px 18px;text-align:left;border-bottom:1px solid var(--mspk-line);
}
#mspk .mspk-woo table.shop_table td{padding:16px 18px;border-bottom:1px solid #F2E7DC;vertical-align:middle;}
#mspk .mspk-woo table.shop_table tr:last-child td{border-bottom:0;}
#mspk .mspk-woo .product-thumbnail img{width:58px;height:58px;object-fit:cover;border-radius:9px;}
#mspk .mspk-woo .product-name a{font-weight:700;color:var(--mspk-ink);text-decoration:none;}
#mspk .mspk-woo .product-remove a.remove{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--mspk-cream);color:var(--mspk-muted)!important;font-size:16px;text-decoration:none;
}
#mspk .mspk-woo .product-remove a.remove:hover{background:#F6D9D4;color:#C0392B!important;}
#mspk .mspk-woo .quantity input.qty{max-width:78px;text-align:center;}
#mspk .mspk-woo .coupon{display:flex;gap:9px;flex-wrap:wrap;align-items:center;}
#mspk .mspk-woo .coupon input{max-width:220px;}
#mspk .mspk-woo .actions{padding:16px 18px;background:var(--mspk-cream-lt);}

/* WooCommerce floats .cart_totals at 48% of its parent, which inside our
   460px column leaves a 221px sliver - the Subscriptions "recurring totals"
   table then wraps a word per line. */
#mspk .mspk-woo .cart-collaterals .cart_totals,
#mspk .mspk-woo .cart-collaterals .cross-sells{width:100%;float:none;}
#mspk .mspk-woo .cart_totals table{width:100%;}
#mspk .mspk-woo .cart_totals .recurring-totals{margin-top:16px;padding-top:14px;border-top:1px solid var(--mspk-line);}
#mspk .mspk-woo .cart_totals .recurring-totals h2{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mspk-muted);}
#mspk .mspk-woo .cart_totals .recurring-totals td,
#mspk .mspk-woo .cart_totals .recurring-totals th{font-size:14px;}
#mspk .mspk-woo .cart_totals .recurring-totals .first-payment-date{display:block;font-size:12.5px;color:var(--mspk-muted);margin-top:4px;}
#mspk .mspk-woo .cart_totals .recurring-totals .first-payment-date small{font-size:inherit;}

#mspk .mspk-woo .cart_totals{
  background:#fff;border:1px solid var(--mspk-line);border-radius:16px;
  padding:22px 24px;box-shadow:var(--mspk-shadow);
}
#mspk .mspk-woo .cart_totals h2{font-family:var(--mspk-hd);font-size:19px;margin-bottom:14px;}
#mspk .mspk-woo .cart_totals table th{background:none;text-transform:none;letter-spacing:0;font-size:14.5px;padding:11px 0;}
#mspk .mspk-woo .cart_totals table td{padding:11px 0;text-align:right;}
#mspk .mspk-woo .cart_totals .order-total th,#mspk .mspk-woo .cart_totals .order-total td{
  font-family:var(--mspk-hd);font-size:18px;color:var(--mspk-ink);border-top:2px solid var(--mspk-line);
}
#mspk .mspk-woo .cart-collaterals{max-width:460px;margin-left:auto;}
#mspk .mspk-empty-cta{margin-top:18px;}

/* ---------- checkout: form left, sticky summary right ---------- */
@media (min-width:1000px){
  #mspk .mspk-woo--checkout form.checkout{
    display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:40px;align-items:start;
  }
  /* Rows are stated explicitly. With auto-placement the review column lands
     on the row after the billing fields instead of beside them, and the two
     hidden inputs WooCommerce appends consume grid cells of their own. */
  #mspk .mspk-woo--checkout form.checkout > #customer_details,
  #mspk .mspk-woo--checkout form.checkout > .col2-set{grid-column:1;grid-row:1 / span 2;}
  #mspk .mspk-woo--checkout form.checkout > h3#order_review_heading{
    grid-column:2;grid-row:1;margin-bottom:12px;align-self:start;
  }
  #mspk .mspk-woo--checkout form.checkout > #order_review{
    grid-column:2;grid-row:2;position:sticky;top:96px;align-self:start;
  }
  #mspk .mspk-woo--checkout form.checkout > input{display:none;}
}
#mspk .mspk-woo--checkout #customer_details .col-1,
#mspk .mspk-woo--checkout #customer_details .col-2{width:100%;float:none;}
#mspk .mspk-woo--checkout h3{font-family:var(--mspk-hd);font-size:19px;margin:0 0 14px;}
#mspk .mspk-woo--checkout #order_review{
  background:#fff;border:1px solid var(--mspk-line);border-radius:16px;
  padding:22px 24px;box-shadow:var(--mspk-shadow);
}
#mspk .mspk-woo--checkout #order_review table.shop_table{border:0;box-shadow:none;border-radius:0;margin-bottom:14px;}
#mspk .mspk-woo--checkout #order_review table.shop_table th{background:none;padding:10px 0;}
#mspk .mspk-woo--checkout #order_review table.shop_table td{padding:10px 0;text-align:right;}
#mspk .mspk-woo--checkout .woocommerce-checkout-payment{background:none!important;border-radius:0;}
#mspk .mspk-woo--checkout ul.payment_methods{
  list-style:none;margin:0 0 16px;padding:0;border:0!important;display:flex;flex-direction:column;gap:8px;
}
#mspk .mspk-woo--checkout ul.payment_methods li{
  border:1px solid var(--mspk-line);border-radius:12px;padding:13px 15px;background:#fff;
}
#mspk .mspk-woo--checkout ul.payment_methods li label{display:inline;font-weight:700;margin:0;}
#mspk .mspk-woo--checkout .payment_box{
  background:var(--mspk-cream-lt)!important;border-radius:10px;margin:11px 0 0!important;
  padding:13px 15px!important;font-size:13.5px;
}
#mspk .mspk-woo--checkout .payment_box::before{display:none!important;}
#mspk .mspk-woo--checkout .woocommerce-terms-and-conditions-wrapper{font-size:13.5px;margin-bottom:14px;}

/* ---------- my account ---------- */
#mspk .mspk-acctdash{margin-bottom:28px;}
#mspk .mspk-acctdash__h{
  font-family:var(--mspk-hd);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mspk-muted);margin-bottom:12px;
}
#mspk .mspk-acctdash__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
#mspk .mspk-acctdash__card{
  display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--mspk-line);
  border-radius:14px;padding:18px 20px;text-decoration:none;box-shadow:var(--mspk-shadow);
  transition:transform .18s ease,border-color .18s ease;
}
#mspk .mspk-acctdash__card:hover{transform:translateY(-3px);border-color:var(--mspk-orange);}
#mspk .mspk-acctdash__card strong{font-family:var(--mspk-hd);font-size:16px;color:var(--mspk-ink);}
#mspk .mspk-acctdash__card code{
  font-size:12.5px;color:var(--mspk-green);background:var(--mspk-cream);
  padding:2px 8px;border-radius:6px;align-self:flex-start;
}
#mspk .mspk-acctdash__card span{font-size:13px;font-weight:700;color:var(--mspk-orange-dk);}

#mspk .mspk-woo--account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
#mspk .mspk-woo--account .woocommerce-MyAccount-navigation a{
  display:block;padding:11px 15px;border-radius:10px;font-size:14.5px;font-weight:600;
  color:var(--mspk-ink)!important;text-decoration:none;border-left:2px solid transparent;
}
#mspk .mspk-woo--account .woocommerce-MyAccount-navigation a:hover{background:#fff;color:var(--mspk-orange-dk)!important;}
#mspk .mspk-woo--account .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--mspk-green);color:#fff!important;border-left-color:var(--mspk-orange);
}
#mspk .mspk-woo--account .woocommerce-MyAccount-content{
  background:#fff;border:1px solid var(--mspk-line);border-radius:16px;
  padding:clamp(20px,3vw,30px);box-shadow:var(--mspk-shadow);
}
/* .woocommerce-account is a body class, not an element - the grid belongs on
   the .woocommerce div the shortcode actually outputs. */
@media (min-width:900px){
  #mspk .mspk-woo--account.is-member > .woocommerce{display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:start;}
  /* WooCommerce clears its floats with ::before/::after. In a grid container
     those pseudo-elements become grid items and take the first cell, pushing
     the navigation into column two. */
  #mspk .mspk-woo--account.is-member > .woocommerce::before,
  #mspk .mspk-woo--account.is-member > .woocommerce::after{display:none;}
  #mspk .mspk-woo--account .woocommerce-MyAccount-navigation{position:sticky;top:96px;width:auto;float:none;}
  #mspk .mspk-woo--account .woocommerce-MyAccount-content{width:auto;float:none;}
}
/* login / register when logged out */
#mspk .mspk-woo--account .u-columns.col2-set{display:grid;gap:22px;}
@media (min-width:820px){#mspk .mspk-woo--account .u-columns.col2-set{grid-template-columns:1fr 1fr;}}
#mspk .mspk-woo--account .u-column1,#mspk .mspk-woo--account .u-column2{width:auto;float:none;}
#mspk .mspk-woo--account form.login,#mspk .mspk-woo--account form.register{
  background:#fff;border:1px solid var(--mspk-line);border-radius:16px;
  padding:24px;box-shadow:var(--mspk-shadow);margin:0;
}

/* ---------- reassurance row ---------- */
#mspk .mspk-reassure{
  display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:26px;padding:18px 20px;
  background:var(--mspk-cream-lt);border:1px solid var(--mspk-line);border-radius:14px;
  list-style:none;
}
#mspk .mspk-reassure li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--mspk-muted);}
#mspk .mspk-reassure svg{color:var(--mspk-green);flex:0 0 auto;}

@media (max-width:760px){
  #mspk .mspk-woo table.shop_table thead{display:none;}
  #mspk .mspk-woo table.shop_table tr{display:block;border-bottom:1px solid var(--mspk-line);}
  #mspk .mspk-woo table.shop_table td{display:flex;justify-content:space-between;align-items:center;gap:14px;border:0;padding:10px 16px;}
  #mspk .mspk-woo table.shop_table td::before{content:attr(data-title);font-size:12.5px;color:var(--mspk-muted);font-weight:700;}
  #mspk .mspk-woo table.shop_table td.product-remove::before,
  #mspk .mspk-woo table.shop_table td.actions::before{content:none;}
  #mspk .mspk-woo .cart-collaterals{max-width:none;}
}

/* ============================================================
   MY ACCOUNT — details
   WooCommerce's sub-pages inherit the theme's h2 scale (32px) inside 390px
   columns, and lean on floats plus an icon font for notices. Both are
   normalised here.
   ============================================================ */

/* headings inside the account panel */
#mspk .mspk-woo--account .woocommerce-MyAccount-content h2,
#mspk .mspk-woo--account .woocommerce-MyAccount-content h3{
  font-family:var(--mspk-hd);font-size:19px;line-height:1.25;color:var(--mspk-ink);margin:0;
}
#mspk .mspk-woo--account .woocommerce-MyAccount-content > h2:first-child{margin-bottom:14px;}
#mspk .mspk-woo--account .woocommerce-MyAccount-content p{margin:0 0 14px;}
#mspk .mspk-woo--account .woocommerce-MyAccount-content > p:last-child{margin-bottom:0;}

/* addresses: two cards, heading and edit link on one line.
   Same clearfix trap as the account wrapper - WooCommerce's ::before/::after
   become grid items and take the first cells, which is what staggers the two
   address cards. Every grid we lay over WooCommerce markup needs this. */
#mspk .mspk-woo .woocommerce-Addresses{display:grid;gap:18px;}
#mspk .mspk-woo .woocommerce-Addresses::before,
#mspk .mspk-woo .woocommerce-Addresses::after,
#mspk .mspk-woo--account .u-columns.col2-set::before,
#mspk .mspk-woo--account .u-columns.col2-set::after{display:none!important;}
@media (min-width:760px){
  #mspk .mspk-woo .woocommerce-Addresses{grid-template-columns:1fr 1fr;}
}
#mspk .mspk-woo .woocommerce-Address{
  width:auto!important;float:none!important;
  background:var(--mspk-cream-lt);border:1px solid var(--mspk-line);
  border-radius:14px;padding:20px;
}
#mspk .mspk-woo .woocommerce-Address-title{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--mspk-line);
}
#mspk .mspk-woo .woocommerce-Address-title h2,
#mspk .mspk-woo .woocommerce-Address-title h3{font-size:16px!important;}
#mspk .mspk-woo .woocommerce-Address-title a.edit{
  float:none!important;flex:0 0 auto;font-size:13.5px;font-weight:700;
  color:var(--mspk-orange-dk);white-space:nowrap;
}
#mspk .mspk-woo .woocommerce-Address address{font-style:normal;font-size:14.5px;line-height:1.6;color:var(--mspk-muted);}

/* notices: WooCommerce prints an icon from its own webfont and relies on a
   float for the button. The glyph renders as an empty box when the font is
   not available, so it is dropped and the layout uses flow-root instead of
   flex — with flex the bare text node becomes an anonymous item and wraps
   below the button. */
#mspk .mspk-woo .woocommerce-message,
#mspk .mspk-woo .woocommerce-info,
#mspk .mspk-woo .woocommerce-error,
#mspk .mspk-woo .woocommerce-notice{
  display:flow-root;padding:15px 18px;line-height:1.55;
}
#mspk .mspk-woo .woocommerce-message::before,
#mspk .mspk-woo .woocommerce-info::before,
#mspk .mspk-woo .woocommerce-error::before,
#mspk .mspk-woo .woocommerce-notice::before{display:none!important;content:none!important;}
#mspk .mspk-woo .woocommerce-message .button,
#mspk .mspk-woo .woocommerce-info .button,
#mspk .mspk-woo .woocommerce-error .button{
  float:right;margin:0 0 6px 18px;padding:9px 18px;font-size:14px;
}
#mspk .mspk-woo .woocommerce-error{list-style:none;padding-left:18px;}
#mspk .mspk-woo .woocommerce-error li{margin-bottom:4px;}

/* orders / subscriptions / licences tables inside the account */
#mspk .mspk-woo--account .woocommerce-MyAccount-content table.shop_table{margin-bottom:0;}
#mspk .mspk-woo--account .woocommerce-orders-table__cell-order-actions .button{padding:8px 14px;font-size:13.5px;}
#mspk .mspk-woo--account .woocommerce-Pagination{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap;}

/* account details / address forms */
#mspk .mspk-woo--account form .form-row-first,
#mspk .mspk-woo--account form .form-row-last{width:100%;float:none;}
@media (min-width:620px){
  #mspk .mspk-woo--account form .woocommerce-address-fields__field-wrapper,
  #mspk .mspk-woo--account form > p.form-row-first,
  #mspk .mspk-woo--account form > p.form-row-last{box-sizing:border-box;}
  #mspk .mspk-woo--account form .form-row-first,
  #mspk .mspk-woo--account form .form-row-last{width:calc(50% - 8px);float:left;}
  #mspk .mspk-woo--account form .form-row-last{margin-left:16px;}
  #mspk .mspk-woo--account form .clear{clear:both;}
}
#mspk .mspk-woo--account fieldset{border:1px solid var(--mspk-line);border-radius:12px;padding:18px;margin:20px 0;}
#mspk .mspk-woo--account fieldset legend{font-family:var(--mspk-hd);font-size:15px;padding:0 8px;}

/* ---------- signed-out account: one centred card ----------
   Without this the account sidebar grid also applies to the login view, which
   drops WooCommerce's "Login" heading into the second column and squeezes the
   form into the 250px navigation column. */
#mspk .mspk-woo--account.is-guest > .woocommerce{max-width:460px;margin-inline:auto;}
#mspk .mspk-woo--account.is-guest > .woocommerce::before,
#mspk .mspk-woo--account.is-guest > .woocommerce::after{display:none;}
/* the page hero already says "Sign in" */
#mspk .mspk-woo--account.is-guest > .woocommerce > h2{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
#mspk .mspk-woo--account.is-guest form.login{margin:0;width:auto;float:none;}
#mspk .mspk-woo--account.is-guest form.login .form-row{margin-bottom:16px;}
#mspk .mspk-woo--account.is-guest form.login .woocommerce-form-login__submit{width:100%;margin:0 0 12px;}
#mspk .mspk-woo--account.is-guest form.login .woocommerce-form-login__rememberme{
  display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:16px;
}
#mspk .mspk-woo--account.is-guest form.login .woocommerce-form-login__rememberme input{width:auto;margin:0;}
#mspk .mspk-woo--account.is-guest form.login .woocommerce-form-login__rememberme span{font-weight:500;}
#mspk .mspk-woo--account.is-guest .lost_password{margin:0;text-align:center;font-size:14px;}
#mspk .mspk-woo--account.is-guest .show-password-input{cursor:pointer;}

/* if registration is switched back on, show login and register side by side */
#mspk .mspk-woo--account.is-guest > .woocommerce:has(.woocommerce-form-register){max-width:900px;}

/* ---------- order received ---------- */
#mspk .mspk-thanks{
  background:#fff;border:1px solid var(--mspk-line);border-radius:18px;
  padding:clamp(22px,3vw,32px);box-shadow:var(--mspk-shadow);margin-bottom:24px;
}
#mspk .mspk-thanks__head{display:flex;gap:16px;align-items:flex-start;}
#mspk .mspk-thanks__tick{
  flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:#E4F0E8;color:var(--mspk-green);
}
#mspk .mspk-thanks__title{font-family:var(--mspk-hd);font-size:clamp(21px,2.4vw,27px);line-height:1.2;color:var(--mspk-ink);}
#mspk .mspk-thanks__sub{margin-top:6px;font-size:15px;color:var(--mspk-muted);}

#mspk .mspk-keys{
  margin-top:22px;background:var(--mspk-green);border-radius:14px;padding:20px 22px;color:#fff;
}
#mspk .mspk-keys--pending{background:var(--mspk-orange-soft);color:#7a4a12;}
#mspk .mspk-keys--pending a{color:var(--mspk-orange-dk);font-weight:700;}
#mspk .mspk-keys__h{
  font-family:var(--mspk-hd);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:12px;
}
#mspk .mspk-key{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px;}
#mspk .mspk-key code{
  flex:1 1 260px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;
  background:rgba(0,0,0,.26);padding:11px 14px;border-radius:9px;word-break:break-all;color:#fff;
}
#mspk .mspk-keys .mspk-copyid{background:var(--mspk-orange);}
#mspk .mspk-keys .mspk-copyid:hover{background:var(--mspk-orange-dk);}
#mspk .mspk-keys__note{margin-top:12px;font-size:13px;color:rgba(255,255,255,.72);}
#mspk .mspk-keys__note a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
#mspk .mspk-thanks .mspk-steps-how{margin-top:22px;}

/* the order table WooCommerce prints under it */
#mspk .mspk-woo--checkout .woocommerce-order{max-width:820px;}
#mspk .mspk-woo--checkout .woocommerce-thankyou-order-received{
  font-family:var(--mspk-hd);font-size:18px;color:var(--mspk-green);margin-bottom:16px;
}
#mspk .mspk-woo--checkout ul.woocommerce-order-overview{
  list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px;padding:0;
}
#mspk .mspk-woo--checkout ul.woocommerce-order-overview li{
  background:#fff;border:1px solid var(--mspk-line);border-radius:12px;padding:12px 16px;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mspk-muted);
}
#mspk .mspk-woo--checkout ul.woocommerce-order-overview li strong{
  display:block;margin-top:4px;font-family:var(--mspk-hd);font-size:15.5px;
  letter-spacing:0;text-transform:none;color:var(--mspk-ink);
}

/* ============================================================
   ORDER RECEIVED — WooCommerce and Digital License Manager output
   Both print their own section titles at the theme's h2 scale (32px) and
   their own table chrome. Brought onto our scale and card treatment so the
   page reads as one thing rather than three plugins stacked.
   ============================================================ */

/* The confirmation column shares one width. Note the modifier sits on <main>,
   which is an ancestor of #mspk - putting #mspk first would never match. */
.mspk-shop--received #mspk .mspk-shop__wrap{max-width:880px;}
#mspk .mspk-woo--checkout .woocommerce-order{max-width:none;}

/* section titles */
#mspk .mspk-woo .woocommerce-order-details__title,
#mspk .mspk-woo .woocommerce-column__title,
#mspk .mspk-woo .dlm-myaccount-page-title,
#mspk .mspk-woo .woocommerce-order-downloads__title{
  font-family:var(--mspk-hd)!important;font-size:12.5px!important;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mspk-muted)!important;
  margin:0 0 12px!important;line-height:1.3;
}

/* each block becomes a card */
#mspk .mspk-woo--checkout .woocommerce-order-details,
#mspk .mspk-woo--checkout .woocommerce-customer-details,
#mspk .mspk-woo--checkout .dlm-myaccount-element{
  background:#fff;border:1px solid var(--mspk-line);border-radius:16px;
  padding:22px 24px;box-shadow:var(--mspk-shadow);margin-bottom:18px;
}
#mspk .mspk-woo--checkout .woocommerce-order-details table.shop_table,
#mspk .mspk-woo--checkout .woocommerce-order-details table.woocommerce-table{
  border:0;box-shadow:none;border-radius:0;margin:0;
}
#mspk .mspk-woo--checkout .woocommerce-order-details table th{
  background:none;padding:11px 0;font-size:12px;
}
#mspk .mspk-woo--checkout .woocommerce-order-details table td{padding:11px 0;text-align:right;}
#mspk .mspk-woo--checkout .woocommerce-order-details table td.woocommerce-table__product-name,
#mspk .mspk-woo--checkout .woocommerce-order-details table th.woocommerce-table__product-name{text-align:left;}
#mspk .mspk-woo--checkout .woocommerce-order-details tfoot th{
  font-family:var(--mspk-hd);text-transform:none;letter-spacing:0;font-size:14.5px;color:var(--mspk-ink);
}
#mspk .mspk-woo--checkout .woocommerce-order-details tfoot tr:last-child th,
#mspk .mspk-woo--checkout .woocommerce-order-details tfoot tr:last-child td{
  border-top:2px solid var(--mspk-line);font-size:17px;color:var(--mspk-ink);
}

/* ---------- Digital License Manager table ---------- */
#mspk .mspk-woo .dlm-myaccount-table{
  width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--mspk-line);
  border-radius:12px;overflow:hidden;background:#fff;font-size:14.5px;
}
#mspk .mspk-woo .dlm-myaccount-table thead th,
#mspk .mspk-woo .dlm-myaccount-table .table-header{
  background:var(--mspk-cream-lt);font-family:var(--mspk-hd);font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--mspk-muted);
  padding:12px 16px;text-align:left;border-bottom:1px solid var(--mspk-line);
}
#mspk .mspk-woo .dlm-myaccount-table td,
#mspk .mspk-woo .dlm-myaccount-table .table-col{
  padding:14px 16px;border-bottom:1px solid #F2E7DC;vertical-align:middle;
}
#mspk .mspk-woo .dlm-myaccount-table tr:last-child td{border-bottom:0;}
#mspk .mspk-woo .dlm-myaccount-license-key,
#mspk .mspk-woo .dlm-myaccount-license-key code,
#mspk .mspk-woo .dlm-myaccount-license-key span{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  word-break:break-all;color:var(--mspk-green);
}
#mspk .mspk-woo .dlm-myaccount-license-key{
  background:var(--mspk-cream);border-radius:8px;padding:8px 12px;display:inline-block;
}
#mspk .mspk-woo .dlm-myaccount-table-row-actions .button,
#mspk .mspk-woo .dlm-myaccount-table-row-actions a{
  padding:9px 18px;font-size:13.5px;white-space:nowrap;
}

/* ---------- customer details ---------- */
#mspk .mspk-woo--checkout .woocommerce-customer-details address{
  font-style:normal;border:0;padding:0;font-size:15px;line-height:1.7;color:var(--mspk-muted);
}
#mspk .mspk-woo--checkout .woocommerce-customer-details .woocommerce-customer-details--email,
#mspk .mspk-woo--checkout .woocommerce-customer-details .woocommerce-customer-details--phone{
  display:flex;align-items:center;gap:8px;margin:6px 0 0;padding:0;
}
#mspk .mspk-woo--checkout .woocommerce-customer-details .woocommerce-columns{display:grid;gap:18px;}
#mspk .mspk-woo--checkout .woocommerce-customer-details .woocommerce-columns::before,
#mspk .mspk-woo--checkout .woocommerce-customer-details .woocommerce-columns::after{display:none;}
@media (min-width:760px){
  #mspk .mspk-woo--checkout .woocommerce-customer-details .woocommerce-columns--2{grid-template-columns:1fr 1fr;}
}
#mspk .mspk-woo--checkout .woocommerce-customer-details .woocommerce-column{width:auto;float:none;}

@media (max-width:760px){
  #mspk .mspk-woo .dlm-myaccount-table,
  #mspk .mspk-woo .dlm-myaccount-table tbody,
  #mspk .mspk-woo .dlm-myaccount-table tr{display:block;}
  #mspk .mspk-woo .dlm-myaccount-table td{display:flex;justify-content:space-between;gap:12px;}
}

/* DLM hooks its licences in after the order table, so its block sits *inside*
   the order-details card. Nested cards read as a mistake - it becomes a
   separated region instead. */
#mspk .mspk-woo--checkout .woocommerce-order-details .dlm-myaccount-element{
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;
  margin:22px 0 0;border-top:1px solid var(--mspk-line);padding-top:20px;
}

/* WooCommerce draws cell borders on order tables, which turns the summary into
   a spreadsheet next to our flat cards. */
#mspk .mspk-woo--checkout .woocommerce-order-details table th,
#mspk .mspk-woo--checkout .woocommerce-order-details table td{
  border-left:0;border-right:0;
}
#mspk .mspk-woo--checkout .woocommerce-order-details table thead th{
  border-bottom:1px solid var(--mspk-line);
}
#mspk .mspk-woo--checkout .woocommerce-order-details table tbody td,
#mspk .mspk-woo--checkout .woocommerce-order-details table tbody th{
  border-bottom:1px solid #F2E7DC;
}

/* Licence keys are long; break on the whole string rather than mid-character
   runs, and give the cell room before the actions column. */
#mspk .mspk-woo .dlm-myaccount-table .table-col-license-key{width:52%;}
#mspk .mspk-woo .dlm-myaccount-license-key{
  display:block;word-break:normal;overflow-wrap:anywhere;line-height:1.5;
}
#mspk .mspk-woo .dlm-myaccount-table-row-actions{text-align:right;}
#mspk .mspk-woo .dlm-myaccount-table td{vertical-align:middle;}

/* ============================================================
   TABLE BORDERS — one authoritative pass
   WooCommerce puts a 1px border on all four sides of every cell, which turns
   carts, totals and order reviews into spreadsheets. All of it is cleared
   here and only the separators that carry meaning are added back: an outer
   card edge, a rule under the header, and a hairline between rows.
   ============================================================ */
#mspk .mspk-woo table,
#mspk .mspk-woo table th,
#mspk .mspk-woo table td,
#mspk .mspk-woo table tr,
#mspk .mspk-woo table thead,
#mspk .mspk-woo table tbody,
#mspk .mspk-woo table tfoot{
  border:0;
}

/* the cart / order table keeps its card edge */
#mspk .mspk-woo table.shop_table{
  border:1px solid var(--mspk-line);
  border-radius:16px;
  overflow:hidden;
}
#mspk .mspk-woo table.shop_table thead th{border-bottom:1px solid var(--mspk-line);}
#mspk .mspk-woo table.shop_table tbody td,
#mspk .mspk-woo table.shop_table tbody th{border-bottom:1px solid #F5EDE4;}
#mspk .mspk-woo table.shop_table tbody tr:last-child td,
#mspk .mspk-woo table.shop_table tbody tr:last-child th{border-bottom:0;}

/* totals and order review sit inside a card already, so no edge of their own */
#mspk .mspk-woo .cart_totals table,
#mspk .mspk-woo--checkout #order_review table.shop_table,
#mspk .mspk-woo--checkout .woocommerce-order-details table{
  border:0;border-radius:0;overflow:visible;
}
#mspk .mspk-woo .cart_totals table th,
#mspk .mspk-woo .cart_totals table td,
#mspk .mspk-woo--checkout #order_review table th,
#mspk .mspk-woo--checkout #order_review table td{
  border-bottom:1px solid #F5EDE4;background:none;
}
#mspk .mspk-woo .cart_totals table tr:last-child th,
#mspk .mspk-woo .cart_totals table tr:last-child td,
#mspk .mspk-woo--checkout #order_review tr:last-child th,
#mspk .mspk-woo--checkout #order_review tr:last-child td{border-bottom:0;}

/* the grand total is the one line worth emphasising */
#mspk .mspk-woo .cart_totals .order-total th,
#mspk .mspk-woo .cart_totals .order-total td,
#mspk .mspk-woo--checkout #order_review .order-total th,
#mspk .mspk-woo--checkout #order_review .order-total td{
  border-top:2px solid var(--mspk-line);border-bottom:0;
}

/* zebra striping WooCommerce adds to cart rows reads as more grid; drop it */
#mspk .mspk-woo table.shop_table tbody tr:nth-child(odd) td,
#mspk .mspk-woo table.shop_table tbody tr:nth-child(even) td{background:none;}
#mspk .mspk-woo table.shop_table tbody tr:hover td{background:#FFFBF7;}

/* recurring-totals block from Subscriptions */
#mspk .mspk-woo .cart_totals .recurring-totals table,
#mspk .mspk-woo--checkout #order_review .recurring-totals table{border:0;}