/*
 * GiddyHost order form - matches the Next.js site (giddyhost.com).
 *
 * WHMCS's cart is Bootstrap markup we do not control, so rather than rewrite
 * 27 Smarty templates this file re-skins the classes WHMCS actually emits.
 * Every value below is the SAME token the site uses (src/app/globals.css),
 * copied rather than approximated - if the site's palette changes, change it
 * in both places or the checkout will quietly drift away from the site.
 *
 * Loaded last, after WHMCS's own all.min.css, so plain specificity wins and
 * !important is reserved for Bootstrap utilities that are themselves inline.
 */

:root {
  --gh-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --gh-brand-50: #eefaff;
  --gh-brand-100: #d7effc;
  --gh-brand-500: #17b9f7;
  --gh-brand-600: #0495d4;

  --gh-ink-950: #020a16;
  --gh-ink-900: #041124;
  --gh-ink-800: #0b1d36;
  --gh-ink-700: #16294a;

  --gh-sky-25: #eef6ff;
  --gh-sky-50: #e4f0ff;
  --gh-sky-100: #d3e8fd;
  --gh-sky-150: #bcdcfb;

  --gh-deep-900: #062449;
  --gh-deep-800: #0a3569;
  --gh-deep-700: #0d4c93;

  --gh-action: #0b89dc;
  --gh-action-dark: #0670bd;
  --gh-line: #d8e6f5;
  --gh-muted: #5b6b82;
  --gh-danger: #fd3014;
  --gh-success: #22b07d;

  --gh-shadow-card: 0 1px 2px rgb(15 50 90 / 0.04), 0 8px 24px -6px rgb(15 60 110 / 0.08);
  --gh-shadow-card-hover: 0 2px 4px rgb(15 50 90 / 0.05), 0 22px 44px -12px rgb(11 110 200 / 0.22);
  --gh-shadow-float: 0 18px 40px -12px rgb(11 110 200 / 0.28);

  --gh-radius: 16px;
  --gh-radius-lg: 24px;
  --gh-radius-pill: 999px;
}

/* ---------------------------------------------------------------- typography
   The site compresses the whole type scale to ~90% of Tailwind's default
   because the client found the original oversized; the cart has to use the
   same scale or the two halves of the funnel look like different products. */

body,
#order-standard_cart,
#main-body {
  font-family: var(--gh-font);
  color: var(--gh-ink-800);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4,
#order-standard_cart h5,
#main-body h1,
#main-body h2,
#main-body h3 {
  font-family: var(--gh-font);
  color: var(--gh-ink-900);
  font-weight: 800;
  letter-spacing: -0.02em;
}

#order-standard_cart h1 { font-size: 2rem; line-height: 2.3rem; }
#order-standard_cart h2 { font-size: 1.6875rem; line-height: 2rem; }
#order-standard_cart h3 { font-size: 1.375rem; line-height: 1.75rem; }
#order-standard_cart h4 { font-size: 1.1875rem; line-height: 1.6rem; }

/* WHMCS centres the cart's page heading; the site left-aligns section titles
   and pairs them with a small eyebrow, so the heading alone would float. */
#order-standard_cart .cart-heading,
#order-standard_cart > h1:first-child { margin-bottom: 0.5rem; }

#order-standard_cart a { color: var(--gh-action); }
#order-standard_cart a:hover { color: var(--gh-action-dark); }

/* -------------------------------------------------------------------- page
   The site's product pages sit on a soft sky wash rather than flat white. */

#order-standard_cart {
  background:
    radial-gradient(42rem 26rem at 92% -4%, rgb(23 185 247 / 0.14), transparent 62%),
    linear-gradient(180deg, #f6faff 0%, #ffffff 42%);
  padding-bottom: 3rem;
}

/* ----------------------------------------------------------------- buttons
   Same gradient, radius and shine as the site's primary call to action. */

#order-standard_cart .btn,
#main-body .btn {
  font-family: var(--gh-font);
  font-weight: 700;
  border-radius: var(--gh-radius-pill);
  padding: 0.62rem 1.35rem;
  font-size: 0.9375rem;
  line-height: 1.2;
  border: 0;
  transition: background-image 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}

#order-standard_cart .btn-sm { padding: 0.42rem 0.95rem; font-size: 0.8125rem; }
#order-standard_cart .btn-lg { padding: 0.8rem 1.8rem; font-size: 1.0625rem; }

#order-standard_cart .btn-primary,
#order-standard_cart .btn-success,
#order-standard_cart #btnCompleteOrder,
#main-body .btn-primary {
  color: #fff;
  background-color: var(--gh-action);
  background-image: linear-gradient(180deg, #1ab0f7 0%, #0b89dc 55%, #0776c4 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 8px 20px -6px rgb(11 137 220 / 0.55);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-success:hover,
#order-standard_cart #btnCompleteOrder:hover,
#main-body .btn-primary:hover {
  color: #fff;
  background-image: linear-gradient(180deg, #13a5ee 0%, #0a7fcf 55%, #066bb3 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 12px 26px -6px rgb(11 137 220 / 0.6);
}

/* The sweep that runs across the site's primary buttons on hover. */
#order-standard_cart .btn-primary::after,
#order-standard_cart .btn-success::after,
#order-standard_cart #btnCompleteOrder::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
#order-standard_cart .btn-primary:hover::after,
#order-standard_cart .btn-success:hover::after,
#order-standard_cart #btnCompleteOrder:hover::after { transform: translateX(120%); }

/* Secondary: the site's outlined pill. */
#order-standard_cart .btn-default,
#order-standard_cart .btn-secondary,
#order-standard_cart .btn-outline-primary {
  background: #fff;
  background-image: none;
  color: var(--gh-ink-800);
  box-shadow: none;
  border: 1px solid var(--gh-line);
}
#order-standard_cart .btn-default:hover,
#order-standard_cart .btn-secondary:hover,
#order-standard_cart .btn-outline-primary:hover {
  border-color: var(--gh-action);
  color: var(--gh-action);
  background: var(--gh-sky-25);
}

/* ------------------------------------------------------------------- cards
   WHMCS uses .panel (Bootstrap 3) and .card (4) in different templates; the
   site has one card treatment, so both are flattened onto it. */

#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .product,
#main-body .panel,
#main-body .card {
  background: #fff;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-lg);
  box-shadow: var(--gh-shadow-card);
  overflow: hidden;
}

#order-standard_cart .panel-heading,
#order-standard_cart .card-header {
  background: #fff;
  border-bottom: 1px solid var(--gh-line);
  padding: 1.1rem 1.4rem;
}

#order-standard_cart .panel-title,
#order-standard_cart .card-header h3,
#order-standard_cart .card-header h4 {
  font-weight: 800;
  color: var(--gh-ink-900);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  margin: 0;
}

#order-standard_cart .panel-body,
#order-standard_cart .card-body { padding: 1.4rem; }

/* --------------------------------------------------------- product cards
   The plan cards on cart.php?gid= are the cart's first impression and sit
   directly beside the site's own plan cards in the customer's memory. */

#order-standard_cart .product {
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}
#order-standard_cart .product:hover {
  box-shadow: var(--gh-shadow-card-hover);
  border-color: var(--gh-sky-150);
  transform: translateY(-2px);
}

#order-standard_cart .product h3,
#order-standard_cart .product .product-name {
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--gh-ink-900);
}

#order-standard_cart .product-desc {
  color: var(--gh-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* The bare <ul> of features reads as a wall of centred text in stock WHMCS;
   the site uses a left-aligned checked list. */
#order-standard_cart .product-desc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
#order-standard_cart .product-desc ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.5rem;
  color: var(--gh-ink-700);
}
#order-standard_cart .product-desc ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--gh-sky-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b89dc' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.66rem no-repeat;
}

#order-standard_cart .product-pricing,
#order-standard_cart .price {
  font-weight: 800;
  color: var(--gh-ink-900);
}
#order-standard_cart .product-pricing .price { font-size: 2rem; letter-spacing: -0.03em; }
#order-standard_cart .product-pricing .cycle,
#order-standard_cart .product-pricing small {
  color: var(--gh-muted);
  font-weight: 600;
  font-size: 0.8125rem;
}

/* ---------------------------------------------------------------- sidebar
   Category list on the left of the store. */

#order-standard_cart .cart-sidebar .panel,
#order-standard_cart #cartSidebar .panel { border-radius: var(--gh-radius-lg); }

#order-standard_cart .list-group-item {
  border: 0;
  border-bottom: 1px solid var(--gh-line);
  padding: 0.72rem 1.15rem;
  font-weight: 600;
  color: var(--gh-ink-700);
  background: #fff;
  transition: background 0.15s ease, color 0.15s ease;
}
#order-standard_cart .list-group-item:last-child { border-bottom: 0; }
#order-standard_cart .list-group-item:hover {
  background: var(--gh-sky-25);
  color: var(--gh-action);
}
#order-standard_cart .list-group-item.active,
#order-standard_cart .list-group-item-action.active {
  background: var(--gh-sky-50);
  color: var(--gh-action-dark);
  border-left: 3px solid var(--gh-action);
  font-weight: 700;
}

/* ------------------------------------------------------------------ forms */

#order-standard_cart .form-control,
#order-standard_cart .custom-select,
#order-standard_cart select,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="email"],
#order-standard_cart input[type="password"],
#order-standard_cart input[type="tel"],
#main-body .form-control {
  font-family: var(--gh-font);
  font-size: 0.9375rem;
  color: var(--gh-ink-800);
  background: #fff;
  border: 1px solid var(--gh-line);
  border-radius: 12px;
  padding: 0.62rem 0.9rem;
  height: auto;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#order-standard_cart .form-control:focus,
#order-standard_cart .custom-select:focus,
#main-body .form-control:focus {
  border-color: var(--gh-action);
  box-shadow: 0 0 0 3px rgb(11 137 220 / 0.14);
  outline: 0;
}

#order-standard_cart label,
#order-standard_cart .control-label {
  font-weight: 700;
  color: var(--gh-ink-800);
  font-size: 0.8125rem;
  margin-bottom: 0.35rem;
}

/* ------------------------------------------------------- order summary
   The running total is the element customers re-read most; the site would
   render it as a white card with a tinted total row. */

#order-standard_cart .summary-container,
#order-standard_cart #orderSummary,
#order-standard_cart .order-summary {
  background: #fff;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-lg);
  box-shadow: var(--gh-shadow-card);
}

#order-standard_cart .order-summary .total,
#order-standard_cart .summary-container .total,
#order-standard_cart tr.total td {
  background: var(--gh-sky-25);
  font-weight: 800;
  color: var(--gh-ink-900);
  font-size: 1.0625rem;
}

#order-standard_cart .promo,
#order-standard_cart .promotion,
#order-standard_cart .discount {
  color: var(--gh-success);
  font-weight: 700;
}

/* ------------------------------------------------------------------ tables */

#order-standard_cart .table { color: var(--gh-ink-800); }
#order-standard_cart .table th {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gh-muted);
  border-bottom: 1px solid var(--gh-line);
}
#order-standard_cart .table td { border-top: 1px solid var(--gh-line); padding: 0.85rem 0.75rem; }

/* ------------------------------------------------------------------ alerts */

#order-standard_cart .alert {
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius);
  padding: 0.9rem 1.15rem;
  font-size: 0.9375rem;
}
#order-standard_cart .alert-info { background: var(--gh-sky-25); border-color: var(--gh-sky-150); color: var(--gh-deep-800); }
#order-standard_cart .alert-danger { background: #fff1ef; border-color: #ffd5cf; color: #a01a08; }
#order-standard_cart .alert-success { background: #eefaf5; border-color: #c4ecdd; color: #12694a; }

/* -------------------------------------------------------------- checkout
   Payment method tiles and the review step. */

#order-standard_cart .payment-methods label,
#order-standard_cart #paymentMethods label {
  border: 1px solid var(--gh-line);
  border-radius: 14px;
  padding: 0.8rem 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#order-standard_cart .payment-methods input:checked + label,
#order-standard_cart #paymentMethods input:checked + label {
  border-color: var(--gh-action);
  background: var(--gh-sky-25);
}

/* Trust line under the order button - the site makes this a quiet grey. */
#order-standard_cart .checkout-note,
#order-standard_cart .text-muted { color: var(--gh-muted) !important; }

/* --------------------------------------------------------------- mobile
   The client asked repeatedly for tighter mobile spacing; the cart inherits
   that rule, so every surface loses a step of padding under 768px. */

@media (max-width: 767.98px) {
  #order-standard_cart { padding-bottom: 2rem; }
  #order-standard_cart h1 { font-size: 1.6875rem; line-height: 2rem; }
  #order-standard_cart h2 { font-size: 1.375rem; line-height: 1.75rem; }
  #order-standard_cart .panel-body,
  #order-standard_cart .card-body { padding: 1rem; }
  #order-standard_cart .panel-heading,
  #order-standard_cart .card-header { padding: 0.85rem 1rem; }
  #order-standard_cart .btn { padding: 0.58rem 1.15rem; }
  #order-standard_cart .product-pricing .price { font-size: 1.6875rem; }
}

/* =====================================================================
   Plan cards (products.tpl)

   Mirrors src/components/PlanCard.tsx: name, price + cycle, call to action,
   then a checked feature list.

   Stock standard_cart lays a plan card out as two floated columns -
   `div.product-desc` at 60% left, `footer` at 40% right - under selectors of
   the form `#order-standard_cart .products .product div.product-desc`. Those
   out-specify a plain `.gh-plan-body`, so every rule here carries the same
   `.products .product` ancestry rather than relying on !important.
   ===================================================================== */

#order-standard_cart .gh-store-head { border: 0; margin-bottom: 1.6rem; }
#order-standard_cart .gh-store-head h1 { margin: 0 0 0.4rem; }
#order-standard_cart .gh-store-head p { color: var(--gh-muted); font-size: 0.9375rem; margin: 0; }

#order-standard_cart .products.gh-plans { margin: 0; }
#order-standard_cart .products.gh-plans .row { margin-left: -0.6rem; margin-right: -0.6rem; }
#order-standard_cart .products.gh-plans .gh-plan-col { padding: 0.6rem; display: flex; }

#order-standard_cart .products .product.gh-plan {
  display: flex;
  flex-direction: column;
  width: 100%;
  float: none;
  text-align: left;
  padding: 1.5rem 1.35rem;
  margin: 0;
  border-radius: var(--gh-radius-lg);
  background: #fff;
  border: 1px solid var(--gh-line);
  box-shadow: var(--gh-shadow-card);
  overflow: visible;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
#order-standard_cart .products .product.gh-plan:hover {
  box-shadow: var(--gh-shadow-card-hover);
  border-color: var(--gh-sky-150);
  transform: translateY(-2px);
}

/* Stock draws a grey bar here; the site's card has no header chrome at all. */
#order-standard_cart .products .product.gh-plan header.gh-plan-head {
  position: static;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  float: none;
  width: auto;
}
#order-standard_cart .products .product.gh-plan header.gh-plan-head .gh-plan-name {
  margin: 0;
  color: var(--gh-ink-900);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
#order-standard_cart .products .product.gh-plan header.gh-plan-head .qty {
  float: none;
  display: block;
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 700;
  color: var(--gh-muted);
}

#order-standard_cart .products .product.gh-plan div.gh-plan-price {
  margin: 0.9rem 0 0;
  float: none;
  width: auto;
}
#order-standard_cart .products .product.gh-plan .gh-plan-from,
#order-standard_cart .products .product.gh-plan .gh-plan-setup,
#order-standard_cart .products .product.gh-plan .gh-plan-term {
  display: block;
  font-size: 0.6875rem;
  color: var(--gh-muted);
  font-weight: 600;
}
#order-standard_cart .products .product.gh-plan .gh-plan-amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem;
}
#order-standard_cart .products .product.gh-plan div.gh-plan-price span.price {
  float: none;
  display: inline;
  padding: 0;
  font-size: 2.1875rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--gh-ink-900);
}
#order-standard_cart .products .product.gh-plan .gh-plan-cycle {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gh-muted);
  text-transform: lowercase;
}

#order-standard_cart .products .product.gh-plan .gh-plan-cta {
  display: block;
  width: 100%;
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: 0.9375rem;
}

/* Kills the 60% float so the list runs the full width of the card. */
#order-standard_cart .products .product.gh-plan div.product-desc.gh-plan-body {
  float: none;
  width: auto;
  margin: 1.2rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--gh-line);
  font-size: 1rem;
  text-align: left;
}

#order-standard_cart .products .product.gh-plan ul.gh-features { list-style: none; margin: 0; padding: 0; text-align: left; }
#order-standard_cart .products .product.gh-plan ul.gh-features li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--gh-ink-800);
}
/* Splitting the description on <br> leaves a trailing empty item. */
#order-standard_cart .products .product.gh-plan ul.gh-features li:empty { display: none; }
#order-standard_cart .products .product.gh-plan ul.gh-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--gh-sky-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b89dc' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.6rem no-repeat;
}
#order-standard_cart .products .product.gh-plan ul.gh-features span.feature-value { font-weight: 700; color: var(--gh-ink-900); }

@media (max-width: 991.98px) {
  #order-standard_cart .products .product.gh-plan { padding: 1.2rem 1.1rem; }
  #order-standard_cart .products .product.gh-plan div.gh-plan-price span.price { font-size: 1.75rem; }
}

/* =====================================================================
   Cart, checkout and order summary

   Stock standard_cart paints the summary panel #666 with a white centred
   heading, the cart table head in the theme's dark navy, and the upsell tiles
   in per-vendor greens and oranges. None of that appears anywhere on the site,
   so each is brought back to the one card treatment.
   ===================================================================== */

/* --- section dividers ("Personal Information", "Billing Address" ...) ----
   The stock treatment centres a tinted label over a rule. The site uses a
   plain left-aligned heading, so the rule and the tint both go. */
#order-standard_cart .header-lined,
#order-standard_cart legend {
  border: 0;
  border-bottom: 1px solid var(--gh-line);
  text-align: left;
  padding: 0 0 0.7rem;
  margin: 2rem 0 1.3rem;
  overflow: visible;
}
#order-standard_cart .header-lined h1,
#order-standard_cart .header-lined h2,
#order-standard_cart .header-lined h3 { margin: 0; text-align: left; }
#order-standard_cart .header-lined span,
#order-standard_cart legend span {
  position: static;
  top: auto;
  padding: 0;
  background: none;
  color: var(--gh-ink-900);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* --- cart table --------------------------------------------------------- */

#order-standard_cart .table > thead > tr > th,
#order-standard_cart .table thead th,
#order-standard_cart #products-table thead th {
  background: var(--gh-sky-25);
  color: var(--gh-muted);
  border: 0;
  border-bottom: 1px solid var(--gh-line);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.8rem 1rem;
}
#order-standard_cart .table > tbody > tr > td { border-color: var(--gh-line); vertical-align: middle; }
/* Zebra striping fights the card surface; the site separates rows with a rule. */
#order-standard_cart .table-striped > tbody > tr:nth-of-type(odd),
#order-standard_cart .table > tbody > tr.even,
#order-standard_cart .table > tbody > tr:nth-of-type(even) { background: transparent; }
#order-standard_cart .table-container,
#order-standard_cart .cart-items {
  background: #fff;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-lg);
  box-shadow: var(--gh-shadow-card);
  overflow: hidden;
}

/* --- order summary ------------------------------------------------------ */

#order-standard_cart .order-summary {
  margin: 0 0 1.25rem;
  padding: 0;
  background-color: #fff;
  border: 1px solid var(--gh-line);
  border-bottom: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-lg);
  box-shadow: var(--gh-shadow-card);
  overflow: hidden;
}
#order-standard_cart .order-summary h2 {
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--gh-sky-25);
  border-bottom: 1px solid var(--gh-line);
  color: var(--gh-ink-900);
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
#order-standard_cart .order-summary .summary-container { padding: 1.25rem; box-shadow: none; border: 0; }
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .bordered-totals,
#order-standard_cart .order-summary .summary-totals { border-color: var(--gh-line); }
#order-standard_cart .order-summary .total-due-today .amt {
  font-size: 2.1875rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--gh-ink-900);
}
#order-standard_cart .order-summary .recurring-charges { color: var(--gh-muted); font-style: normal; }
#order-standard_cart .order-summary .btn-continue-shopping { color: var(--gh-muted); font-weight: 600; }
#order-standard_cart .order-summary .btn-continue-shopping:hover { color: var(--gh-action); }

/* Destructive-ish secondary action - quiet, not a solid navy block. */
#order-standard_cart #btnEmptyCart,
#order-standard_cart .btn-empty-cart {
  background: #fff;
  background-image: none;
  color: var(--gh-muted);
  border: 1px solid var(--gh-line);
  box-shadow: none;
  font-weight: 600;
}
#order-standard_cart #btnEmptyCart:hover,
#order-standard_cart .btn-empty-cart:hover { color: var(--gh-danger); border-color: #ffd5cf; background: #fff6f4; }

/* --- upsell tiles -------------------------------------------------------
   MarketConnect tiles ship one accent colour per vendor (green, orange, red,
   blue). Four brand colours on the checkout page is exactly the thing the
   client kept objecting to, so they share the site's neutral card instead. */

#order-standard_cart .mc-promo {
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius);
  background: #fff;
  box-shadow: none;
  margin-bottom: 0.7rem;
  overflow: hidden;
}
#order-standard_cart .mc-promo,
#order-standard_cart .mc-promo.weebly,
#order-standard_cart .mc-promo.sitelock,
#order-standard_cart .mc-promo.spamexperts,
#order-standard_cart .mc-promo.codeguard,
#order-standard_cart .mc-promo.symantec { border-bottom-color: var(--gh-line); }
#order-standard_cart .mc-promo .price,
#order-standard_cart .mc-promo.weebly .price,
#order-standard_cart .mc-promo.sitelock .price,
#order-standard_cart .mc-promo.spamexperts .price,
#order-standard_cart .mc-promo.codeguard .price {
  color: var(--gh-ink-900);
  font-weight: 800;
  font-size: 1rem;
}
#order-standard_cart .mc-promo .expander { color: var(--gh-muted); }
#order-standard_cart .mc-promo .btn { font-size: 0.8125rem; padding: 0.45rem 1rem; }

/* --- misc checkout ------------------------------------------------------ */

#order-standard_cart .password-strength-meter,
#order-standard_cart .progress { border-radius: 999px; background: var(--gh-sky-50); height: 0.5rem; }
#order-standard_cart .progress-bar { background: var(--gh-action); }

/* The intl-tel-input flag sits on top of the placeholder without this. */
#order-standard_cart .iti--separate-dial-code input,
#order-standard_cart .iti input[type="tel"] { padding-left: 4.2rem; }

#order-standard_cart .field-icon-container .field-icon,
#order-standard_cart .input-group-text { color: var(--gh-muted); }

/* --- the cart's own item list ------------------------------------------
   viewcart does not use a <table>: it is .view-cart-items-header over
   .view-cart-items, and the header bar carries the theme's dark navy. */

#order-standard_cart .view-cart-items-header {
  background: var(--gh-sky-25);
  color: var(--gh-muted);
  border: 1px solid var(--gh-line);
  border-bottom: 0;
  border-radius: var(--gh-radius-lg) var(--gh-radius-lg) 0 0;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.8rem 1.15rem;
}
#order-standard_cart .view-cart-items-header * { color: var(--gh-muted); }

#order-standard_cart .view-cart-items {
  background: #fff;
  border: 1px solid var(--gh-line);
  border-radius: 0 0 var(--gh-radius-lg) var(--gh-radius-lg);
  box-shadow: var(--gh-shadow-card);
  overflow: hidden;
}
/* Stock shades every other row grey; the site separates rows with a hairline. */
#order-standard_cart .view-cart-items .item,
#order-standard_cart .view-cart-items > div {
  background: #fff;
  border-bottom: 1px solid var(--gh-line);
}
#order-standard_cart .view-cart-items > div:last-child { border-bottom: 0; }
#order-standard_cart .view-cart-items .item-title,
#order-standard_cart .view-cart-items .product-name { font-weight: 700; color: var(--gh-ink-900); }
#order-standard_cart .view-cart-items .item-price,
#order-standard_cart .view-cart-items .price { font-weight: 800; color: var(--gh-ink-900); }

/* The heading colour is set by the order form's own sheet at the same
   specificity as ours; adding the class WHMCS puts on the element wins it
   without reaching for !important. */
#order-standard_cart .order-summary h2.font-size-30,
#order-standard_cart .order-summary h2 {
  color: var(--gh-ink-900);
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 800;
}

/* --- upsell tiles, per-vendor accents removed --------------------------- */

#order-standard_cart .mc-promos { margin: 0.6rem 0 1.5rem; }
#order-standard_cart .mc-promos .mc-promo,
#order-standard_cart .mc-promo.sitebuilder,
#order-standard_cart .mc-promo.sitelock,
#order-standard_cart .mc-promo.codeguard,
#order-standard_cart .mc-promo.spamexperts,
#order-standard_cart .mc-promo.symantec,
#order-standard_cart .mc-promo.weebly {
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius);
  background: #fff;
  margin-bottom: 0.65rem;
  box-shadow: none;
}
#order-standard_cart .mc-promo .header { background: #fff; border: 0; padding: 0.9rem 1.1rem; }
#order-standard_cart .mc-promo .cta { display: flex; align-items: center; gap: 0.8rem; }
#order-standard_cart .mc-promo .cta .price { color: var(--gh-ink-900); font-weight: 800; font-size: 0.9375rem; }
/* Stock lets the button overflow its tile at narrow widths. */
#order-standard_cart .mc-promo .cta .btn { position: static; white-space: nowrap; font-size: 0.8125rem; padding: 0.45rem 1rem; }
#order-standard_cart .mc-promo .details,
#order-standard_cart .mc-promo .expander-content { background: var(--gh-sky-25); border-top: 1px solid var(--gh-line); }

/* Stock shades every second cart row #eee. */
#order-standard_cart .view-cart-items .item:nth-child(even) { background-color: #fff; }

/* Per-vendor accent colours on the upsell tiles: border, button, chevron and
   price each get their own brand colour. Neutralised in one place here so the
   checkout page does not carry five palettes that appear nowhere on the site. */
#order-standard_cart .mc-promo.weebly,
#order-standard_cart .mc-promo.spamexperts,
#order-standard_cart .mc-promo.sitelock,
#order-standard_cart .mc-promo.codeguard,
#order-standard_cart .mc-promo.sitebuilder,
#order-standard_cart .mc-promo.symantec { border-color: var(--gh-line); }

#order-standard_cart .mc-promo.weebly .btn-add,
#order-standard_cart .mc-promo.spamexperts .btn-add,
#order-standard_cart .mc-promo.sitelock .btn-add,
#order-standard_cart .mc-promo.codeguard .btn-add,
#order-standard_cart .mc-promo.sitebuilder .btn-add,
#order-standard_cart .mc-promo.symantec .btn-add,
#order-standard_cart .mc-promo .btn-add {
  background-color: var(--gh-action);
  background-image: linear-gradient(180deg, #1ab0f7 0%, #0b89dc 55%, #0776c4 100%);
  border-color: transparent;
  color: #fff;
}

#order-standard_cart .mc-promo.weebly .arrow,
#order-standard_cart .mc-promo.spamexperts .arrow,
#order-standard_cart .mc-promo.sitelock .arrow,
#order-standard_cart .mc-promo.codeguard .arrow,
#order-standard_cart .mc-promo.sitebuilder .arrow,
#order-standard_cart .mc-promo.symantec .arrow { background-color: var(--gh-sky-100); }

#order-standard_cart .mc-promo.weebly .price,
#order-standard_cart .mc-promo.weebly .expander,
#order-standard_cart .mc-promo.spamexperts .price,
#order-standard_cart .mc-promo.spamexperts .expander,
#order-standard_cart .mc-promo.sitelock .price,
#order-standard_cart .mc-promo.sitelock .expander,
#order-standard_cart .mc-promo.codeguard .price,
#order-standard_cart .mc-promo.codeguard .expander,
#order-standard_cart .mc-promo.sitebuilder .price,
#order-standard_cart .mc-promo.sitebuilder .expander,
#order-standard_cart .mc-promo.symantec .price,
#order-standard_cart .mc-promo.symantec .expander { color: var(--gh-ink-900); }
#order-standard_cart .mc-promo .expander { color: var(--gh-muted); }

/* --- checkout section headings ------------------------------------------
   WHMCS renders these as <div class="sub-heading"><span class="primary-bg-
   color">Personal Information</span></div>: a tinted chip centred over a
   rule. `.primary-bg-color` is the theme's accent fill, which on this palette
   came out as white-on-pale and was barely readable. The site states section
   headings plainly, left aligned above a hairline. */

#order-standard_cart .sub-heading {
  position: relative;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--gh-line);
  padding: 0 0 0.65rem;
  margin: 2rem 0 1.25rem;
  line-height: 1.3;
}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading span.primary-bg-color {
  position: static;
  display: inline;
  padding: 0;
  background: none;
  background-color: transparent;
  color: var(--gh-ink-900);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Secondary actions inside the form (Generate Password, Already Registered). */
#order-standard_cart .btn-generate-password,
#order-standard_cart [id*="eneratePassword"],
#order-standard_cart a.btn-default {
  border-radius: var(--gh-radius-pill);
  border: 1px solid var(--gh-line);
  background: #fff;
  color: var(--gh-ink-800);
  font-weight: 700;
}

/* intl-tel-input overlays its flag on the placeholder without the offset. */
#order-standard_cart .iti { width: 100%; display: block; }
#order-standard_cart .iti__flag-container + input,
#order-standard_cart .iti input[type="tel"],
#order-standard_cart input#inputPhone { padding-left: 5rem; }

/* --- category sidebar: store page only ----------------------------------
   The plan categories belong on the store page and nowhere else - a customer
   on the checkout form does not want a list of other things to buy beside it.
   products.tpl marks that page `.gh-store`; every other cart page hides the
   sidebar here and lets the body take the full width. Doing it in CSS keeps
   products.tpl the only template this order form overrides, so the rest keep
   inheriting WHMCS's updates. */

#order-standard_cart:not(.gh-store) .cart-sidebar { display: none; }
#order-standard_cart:not(.gh-store) .cart-body {
  width: 100%;
  float: none;
  padding-left: 0;
  padding-right: 0;
}
/* ============================================================================
   Domain search, TLD table and the Bootstrap chrome the first pass missed.

   Each block names the rule it displaces. !important appears only where the
   rule being displaced already uses it.
   ========================================================================= */

/* --------------------------------------------------------------- the hero
   Displaces: .domain-checker-container{background:-webkit-linear-gradient(top,
   #ffd960,#ffb201)} in standard_cart/all.min.css.

   WHMCS ships this panel as a gold billboard - the one colour on the page that
   cannot read as GiddyHost, which has no warm accent at all. Both the colour
   and the image are restated because the original sets background-color first
   and a background shorthand after, so which survives depends on which vendor
   prefix the browser understood. */
#order-standard_cart .domain-checker-container {
  margin: 1.5rem 0 2rem;
  background-color: var(--gh-sky-25);
  background-image: linear-gradient(180deg, var(--gh-sky-50) 0%, var(--gh-sky-25) 100%);
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-lg);
  box-shadow: var(--gh-shadow-card);
}

/* Displaces: .domain-checker-bg{padding:80px 0;background-image:url(../img/globe.png)}
   globe.png is WHMCS's stock illustration, drawn for the gold panel; on a sky
   wash it reads as a stray grey sticker. A soft radial gives the same "this
   band is the search" cue with no asset. 80px is also deeper than any hero on
   the site. */
#order-standard_cart .domain-checker-bg {
  padding: 2.75rem 0;
  background-image: radial-gradient(28rem 18rem at 92% 0%, rgb(23 185 247 / 0.16), transparent 68%);
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 992px) {
  #order-standard_cart .domain-checker-bg { padding: 1.75rem 0; }
}

/* Displaces: .domain-checker-container .input-group-box{padding:10px;
   border-radius:10px}. This is the search card, so it should be the same
   object as every other card; 10px reads as a different design system beside
   24px. `position` is restated because the absolutely-positioned Search button
   depends on it, and inheriting it by accident from Bootstrap is fragile. */
#order-standard_cart .domain-checker-container .input-group-box {
  position: relative;
  padding: 0.85rem;
  background-color: #fff;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-lg);
  box-shadow: var(--gh-shadow-card);
}

/* Displaces: .domain-checker-advanced textarea{width:592px;height:120px}.
   The page's primary input inherited nothing - no border, radius or padding -
   and its text ran under the floating Search button, so the bottom padding is
   functional rather than decorative. */
#order-standard_cart .domain-checker-container.domain-checker-advanced textarea {
  width: 100%;
  height: 128px;
  padding: 0.85rem 1rem 3.25rem;
  font-family: var(--gh-font);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--gh-ink-800);
  background: #fff;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#order-standard_cart .domain-checker-container.domain-checker-advanced textarea::placeholder {
  color: var(--gh-muted);
}
#order-standard_cart .domain-checker-container.domain-checker-advanced textarea:focus {
  border-color: var(--gh-action);
  box-shadow: 0 0 0 3px rgb(11 137 220 / 0.14);
  outline: 0;
}

/* Displaces: #btnCheckAvailability{position:absolute;right:20px;top:74px} and
   .domain-check-availability{width:100px;height:46px}. Kept absolute - sitting
   inside the textarea is the intended shape - but anchored to the bottom edge
   rather than a magic 74px, so it cannot drift when the textarea height or the
   card padding changes. The fixed 100x46 box clipped the label at our scale. */
#order-standard_cart .domain-checker-container.domain-checker-advanced #btnCheckAvailability {
  position: absolute;
  top: auto;
  right: 1.6rem;
  bottom: 5.4rem;
  width: auto;
  height: auto;
  padding: 0.55rem 1.35rem;
  font-size: 0.9375rem;
  line-height: 1.2;
}
@media (max-width: 767px) {
  #order-standard_cart .domain-checker-container.domain-checker-advanced #btnCheckAvailability {
    right: 1.2rem;
    padding: 0.5rem 1.1rem;
  }
}

/* ------------------------------------------- Include TLDs / Maximum Length
   Displaces: .domain-checker-advanced .multiselect{font-size:12px;border:0} and
   .btn-default{background-color:#fff;border-color:#ccc}.

   bootstrap-multiselect replaces each <select> with a .btn.btn-default, so
   these two were the only grey square buttons left. They are filters, not
   calls to action, so they take a tinted chip rather than the primary
   gradient. 12px is below the smallest step the site ships. */
#order-standard_cart .domain-checker-advanced button.multiselect.btn {
  margin: 0.3rem 0.4rem 0.3rem 0;
  padding: 0.42rem 0.95rem;
  font-family: var(--gh-font);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gh-ink-800);
  background-color: var(--gh-sky-25);
  background-image: none;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-pill);
  box-shadow: none;
}
#order-standard_cart .domain-checker-advanced button.multiselect.btn:hover,
#order-standard_cart .domain-checker-advanced button.multiselect.btn:focus {
  color: var(--gh-action-dark);
  background-color: var(--gh-sky-100);
  border-color: var(--gh-sky-150);
}

/* Displaces: .dropdown-menu{border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.
   The open panel is a floating surface, so it takes the card's treatment
   rather than Bootstrap's hairline-on-black. */
#order-standard_cart .domain-checker-advanced .multiselect-container.dropdown-menu {
  padding: 0.4rem;
  font-family: var(--gh-font);
  font-size: 0.875rem;
  color: var(--gh-ink-800);
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius);
  box-shadow: var(--gh-shadow-float);
}

/* Displaces: .multiselect-container>li>a>label{padding:3px 20px 3px 40px}.
   The 40px left pad is reserved for a Bootstrap 3 absolutely-positioned
   checkbox this build never renders, so every TLD sat adrift. */
#order-standard_cart .domain-checker-advanced .multiselect-container > li > a > label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gh-ink-800);
  border-radius: 10px;
}

/* Displaces: .multiselect-container li.active a{background-color:unset}.
   `unset` left a selected TLD looking identical to an unselected one, which is
   the whole signal this control exists to give. */
#order-standard_cart .domain-checker-container.domain-checker-advanced .multiselect-container li.active > a {
  background-color: var(--gh-sky-25);
  color: var(--gh-action-dark);
}
#order-standard_cart .domain-checker-container.domain-checker-advanced .multiselect-container li > a:hover {
  background-color: var(--gh-sky-25);
}

/* The filter row's .input-group-addon holds a glyphicon, and no glyphicon font
   is loaded on this site, so it rendered as an empty gap. Hiding it is cheaper
   than shipping the font. */
#order-standard_cart .domain-checker-advanced .multiselect-item.filter {
  width: 100%;
  padding: 0.2rem 0.3rem 0.45rem;
}
#order-standard_cart .domain-checker-advanced .multiselect-item.filter .input-group { margin: 0; }
#order-standard_cart .domain-checker-advanced .multiselect-item.filter .input-group-addon { display: none; }

/* Displaces: .domain-checker-advanced label{font-size:12px;color:#333}, which
   outranks this sheet's own label rule - the Safe Search label was the last
   12px #333 text in the cart. */
#order-standard_cart .domain-checker-container.domain-checker-advanced label {
  margin: 0.3rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gh-ink-800);
}
#order-standard_cart .domain-checker-container.domain-checker-advanced input[type="checkbox"] {
  margin-right: 0.45rem;
  accent-color: var(--gh-action);
}

/* --------------------------------------------------------- search results
   Displaces: #DomainSearchResults .primary-domain-header{border-bottom:2px
   solid #62cb31} - WHMCS's lime. The site has no green and uses action blue
   for emphasis rules. */
#order-standard_cart #DomainSearchResults .primary-domain-header {
  padding: 0.85rem 1.25rem;
  font-weight: 800;
  color: var(--gh-ink-900);
  border-bottom: 2px solid var(--gh-action);
}

/* Displaces: .domain-checker-available{color:#367c36} and .domain-checker-
   unavailable{color:#cd322d}. Availability is the most-read line on this page
   and should use the palette's own success/danger, not Bootstrap 3 leftovers. */
#order-standard_cart p.domain-checker-available,
#order-standard_cart span.domain-checker-available { color: var(--gh-success); }
#order-standard_cart p.domain-checker-invalid,
#order-standard_cart p.domain-checker-unavailable,
#order-standard_cart span.domain-checker-unavailable { color: var(--gh-danger); }

#order-standard_cart .domain-checker-result-headline {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gh-ink-900);
}

/* .suggested-domains is a bare <div>, so it missed the .panel/.card rule that
   boxes everything else - it was a flat list floating on the page. */
#order-standard_cart .suggested-domains {
  margin-bottom: 1.5rem;
  background: #fff;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-lg);
  box-shadow: var(--gh-shadow-card);
  overflow: hidden;
}
#order-standard_cart .suggested-domains .panel-heading,
#order-standard_cart .suggested-domains .card-header { border-bottom: 1px solid var(--gh-line); }
#order-standard_cart .suggested-domains .domain-lookup-suggestions-loader,
#order-standard_cart .suggested-domains .domain-lookup-suggestions-message {
  background-color: var(--gh-sky-25);
  color: var(--gh-muted);
  opacity: 1;
}

/* Displaces: .suggested-domains .btn:not(.domain-contact-support){padding:2px
   10px;font-size:11px;background-color:#555}. Every Add to Cart in the
   suggestion list was a dark grey 11px rectangle - the same action as the
   primary button two rows above, styled as a different product. */
#order-standard_cart .suggested-domains .btn:not(.domain-contact-support) {
  padding: 0.42rem 1.05rem;
  font-size: 0.8125rem;
  line-height: 1.2;
  color: #fff;
  background-color: var(--gh-action);
  background-image: linear-gradient(180deg, #1ab0f7 0%, #0b89dc 55%, #0776c4 100%);
  border: 0;
  border-radius: var(--gh-radius-pill);
}
#order-standard_cart .suggested-domains .price { font-weight: 800; color: var(--gh-ink-900); }

/* Displaces: #domainSuggestions .domain-suggestion .extension{color:#22bcf4
   !important}. !important only because the displaced rule uses it. That cyan
   predates the token set and sits close enough to --gh-action to look like a
   mistake rather than a second accent. */
#order-standard_cart #domainSuggestions .domain-suggestion .extension { color: var(--gh-action) !important; }

/* 0.7em of a 15px base is 10.5px - below the smallest step on the ramp. */
#order-standard_cart .domain-suggestions-warning { font-size: 0.8125rem; color: var(--gh-muted); }

/* The Hot/New/Sale flags render as <span class="sales-group-hot">, but the only
   rules WHMCS ships need two classes on one element, so these shipped as raw
   text. */
#order-standard_cart .suggested-domains .promo > span {
  padding: 0.15rem 0.5rem;
  margin-left: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gh-deep-900);
  background-color: var(--gh-sky-100);
  border-radius: var(--gh-radius-pill);
}

/* ------------------------------------------------------- category chips
   Displaces: .badge-secondary{background-color:#6c757d}. Popular / Business /
   Sports were Bootstrap's grey rectangles; they are filters, so they share the
   multiselect chip's shape and tint. */
#order-standard_cart .tld-filters { margin-bottom: 1.25rem; }
#order-standard_cart .tld-filters a.badge {
  padding: 0.4rem 0.9rem;
  margin: 0 0.4rem 0.5rem 0;
  font-family: var(--gh-font);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gh-ink-800);
  background-color: var(--gh-sky-25);
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-pill);
}
#order-standard_cart .tld-filters a.badge:hover,
#order-standard_cart .tld-filters a.badge:focus {
  color: var(--gh-action-dark);
  background-color: var(--gh-sky-100);
  border-color: var(--gh-sky-150);
  text-decoration: none;
}

/* Displaces: .badge-success{background-color:#28a745}. scripts.min.js marks the
   selected category by adding .badge-success, so the chosen chip - and
   "Popular" on load - turned Bootstrap green. This is a selected state, not a
   success message. */
#order-standard_cart .tld-filters a.badge.badge-success,
#order-standard_cart .tld-filters a.badge.badge-success:hover,
#order-standard_cart .tld-filters a.badge.badge-success:focus {
  color: #fff;
  background-color: var(--gh-action);
  background-image: linear-gradient(180deg, #1ab0f7 0%, #0b89dc 55%, #0776c4 100%);
  border-color: transparent;
}

/* ---------------------------------------------------------- TLD price table
   Displaces two rules that disagree about which header cells are grey and
   which are greyer, so the header came out striped by accident. One flat band
   in the sky tint with a single hairline reads as a table header instead. */
#order-standard_cart .domain-pricing .tld-pricing-header div {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gh-muted);
  background-color: var(--gh-sky-25);
  border-bottom: 1px solid var(--gh-line);
  border-radius: 0;
}
#order-standard_cart .domain-pricing .tld-pricing-header .row > div {
  background-color: transparent;
  border-bottom: 0;
}

/* Displaces: .tld-row{border-bottom:1px solid #f5f5f5} - invisible on white,
   so the rows ran together. */
#order-standard_cart .domain-pricing .tld-row {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--gh-line);
}
#order-standard_cart .domain-pricing .tld-row.highlighted { background: var(--gh-sky-25); }

/* Media queries add no specificity, so this one rule wins in both directions. */
#order-standard_cart .domain-pricing .two-row-center {
  border-right: 1px solid var(--gh-line);
  color: var(--gh-ink-900);
}

/* ------------------------------------------------------ promo boxes / CTA */
#order-standard_cart .domain-promo-box {
  padding: 1.4rem;
  color: var(--gh-ink-800);
  background-color: #fff;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-lg);
  box-shadow: var(--gh-shadow-card);
}
#order-standard_cart .domain-promo-box i { color: var(--gh-sky-150); }

/* Displaces: .btn-warning{background-color:#ffc107}. "Explore packages now"
   was the last amber button in the funnel. It is a secondary path beside
   "Transfer a domain", so it takes the outline variant rather than a second
   primary gradient competing on the same row. */
#order-standard_cart .btn.btn-warning {
  color: var(--gh-action-dark);
  background-color: #fff;
  background-image: none;
  border: 1px solid var(--gh-sky-150);
  box-shadow: none;
}
#order-standard_cart .btn.btn-warning:hover,
#order-standard_cart .btn.btn-warning:focus {
  color: var(--gh-action-dark);
  background-color: var(--gh-sky-25);
  border-color: var(--gh-action);
}

/* !important only because both Bootstrap utilities declare it. #ffc107 on white
   also fails contrast outright. */
#order-standard_cart .domain-promo-box .text-warning { color: var(--gh-muted) !important; }
#order-standard_cart .domain-promo-box .text-primary { color: var(--gh-action) !important; }

/* ------------------------------------------------- remaining grey buttons
   The sheet already handles a.btn-default; every <button class="btn-default">
   - Apply, Validate Code, the modal dismiss buttons - kept the square grey
   Bootstrap 3 look. */
#order-standard_cart .btn.btn-default,
#modalAjax .btn.btn-default,
#modalChooseLanguage .btn.btn-default,
#modalGeneratePassword .btn.btn-default {
  color: var(--gh-ink-800);
  background-color: #fff;
  background-image: none;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-pill);
  font-family: var(--gh-font);
  font-weight: 700;
  padding: 0.55rem 1.25rem;
}
#order-standard_cart .btn.btn-default:hover,
#modalAjax .btn.btn-default:hover,
#modalChooseLanguage .btn.btn-default:hover,
#modalGeneratePassword .btn.btn-default:hover {
  color: var(--gh-action-dark);
  background-color: var(--gh-sky-25);
  border-color: var(--gh-sky-150);
}

/* Displaces: #order-standard_cart .empty-cart .btn{background-color:#058},
   which at (1,2,0) was beating this sheet's .btn-empty-cart rule at (1,1,0). */
#order-standard_cart .empty-cart .btn {
  background-color: #fff;
  background-image: none;
  color: var(--gh-muted);
  border: 1px solid var(--gh-line);
}

/* --------------------------------------------------------------- cart tabs
   Promo Code / Estimate Taxes is the only tab set in the cart; #f8f8f8 is a
   neutral grey where the rest of the page tints with sky, and .8em puts the
   labels a step below the body text they sit above. */
#order-standard_cart .view-cart-tabs .nav-tabs {
  padding-left: 0;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--gh-line);
}
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
  padding: 0.6rem 1.1rem;
  font-weight: 700;
  color: var(--gh-muted);
  border: 1px solid transparent;
  border-radius: 12px 12px 0 0;
}
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link:hover {
  color: var(--gh-action);
  border-color: transparent;
}
#order-standard_cart .view-cart-tabs .nav-tabs a.nav-link.active,
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"] {
  color: var(--gh-ink-900);
  background-color: var(--gh-sky-25);
  border-color: var(--gh-line) var(--gh-line) var(--gh-sky-25);
}
#order-standard_cart .view-cart-tabs .tab-content {
  padding: 1.25rem;
  background-color: var(--gh-sky-25);
  border: 1px solid var(--gh-line);
  border-top: 0;
  border-radius: 0 0 var(--gh-radius) var(--gh-radius);
}

/* An empty cart is the one screen with nothing else on it, so plain black body
   text on white looked like a rendering failure. */
#order-standard_cart .view-cart-empty {
  padding: 2.5rem 1rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--gh-muted);
}

/* --------------------------------------------------------------- modals
   The shared WHMCS modals render outside #order-standard_cart, so they are
   scoped by their own ids. !important on the header only because .bg-primary
   declares it. */
#order-standard_cart .modal-content,
#modalAjax .modal-content,
#modalChooseLanguage .modal-content,
#modalGeneratePassword .modal-content {
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-lg);
  box-shadow: var(--gh-shadow-float);
}
#order-standard_cart .modal-header,
#modalAjax .modal-header,
#modalChooseLanguage .modal-header,
#modalGeneratePassword .modal-header { border-bottom: 1px solid var(--gh-line); }
#modalGeneratePassword .modal-header.bg-primary { background-color: var(--gh-deep-900) !important; }
#order-standard_cart .modal .close,
#modalAjax .close,
#modalChooseLanguage .close,
#modalGeneratePassword .close {
  color: var(--gh-muted);
  text-shadow: none;
  opacity: 1;
}

/* Bootstrap's 4px radius was the only such corner left inside a 24px card. */
#order-standard_cart .alert,
#modalGeneratePassword .alert {
  border-radius: var(--gh-radius);
  font-size: 0.875rem;
}
#modalGeneratePassword .alert-danger {
  color: #a01a08;
  background: #fff1ef;
  border-color: #ffd5cf;
}

/* ============================================================================
   Fixes from the first live run
   ========================================================================= */

/* --- a disabled button must LOOK disabled -------------------------------
   WHMCS disables "Continue" until a domain is actually chosen, and Bootstrap
   normally dims it. The .btn-primary rules above repaint every state with the
   same gradient, so the button looked live, did nothing when clicked, and read
   as broken. This is the single most important rule in this file: a control
   that cannot be used must not invite the click. */
#order-standard_cart .btn:disabled,
#order-standard_cart .btn.disabled,
#order-standard_cart .btn[disabled],
#order-standard_cart .btn-primary:disabled,
#order-standard_cart .btn-primary[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(0.4);
}
/* The hover sweep on a dead button is doubly misleading. */
#order-standard_cart .btn:disabled::after,
#order-standard_cart .btn[disabled]::after,
#order-standard_cart .btn.disabled::after { display: none; }
#order-standard_cart .btn:disabled:hover,
#order-standard_cart .btn[disabled]:hover {
  background-image: linear-gradient(180deg, #1ab0f7 0%, #0b89dc 55%, #0776c4 100%);
  box-shadow: none;
}

/* --- plan grid: three plans per row ---------------------------------------
   The width now comes entirely from products.tpl's col-lg-4, so there is one
   place that decides how many cards sit in a row. An earlier rule forced 20%
   above 1400px to fit all five shared-hosting plans on one line; that made
   wide screens disagree with narrow ones about the layout, and the server
   categories (Game, Rise - up to 39 products) gained nothing from it. Cards
   are wider at three-up, which matters most for those products: their names
   run to "GAME-2 | AMD EPYC 4584PX CA" and their specs are a full sheet.

   The row stays centred so a trailing remainder - five plans leave two on the
   second row - sits balanced rather than pushed to the left. */
#order-standard_cart .products.gh-plans .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
/* Cards fill their column so every card in a row ends level. */
#order-standard_cart .products .product.gh-plan { height: 100%; }

/* --- the stray empty bullet ---------------------------------------------
   Splitting the description on <br> leaves a trailing blank item, and it
   contains a newline so `li:empty` never matched it - the card showed a tick
   with nothing beside it. products.tpl now strips the trailing break, and this
   catches any product whose description ends differently. */
#order-standard_cart .products .product.gh-plan ul.gh-features li:last-child:not(:has(*)) {
  /* A last item holding only whitespace has no usable height. */
  font-size: 0;
  padding: 0;
  margin: 0;
  min-height: 0;
}
#order-standard_cart .products .product.gh-plan ul.gh-features li:last-child:not(:has(*))::before { display: none; }

/* ============================================================================
   Domain page hero - ported from /domain-registration/ on the site

   Same eyebrow, two-tone heading, lead, search card and trust row, so the two
   domain pages read as one product. Sizes use the site's compressed ramp.
   ========================================================================= */

#order-standard_cart.gh-domain .gh-domain-hero { margin: 0 0 1.6rem; }

/* The pill above the heading; its dot pulses on the site, and the same
   animation is reproduced here rather than approximated. */
#order-standard_cart .gh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.85rem;
  margin-bottom: 0.9rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gh-action-dark);
  background: #fff;
  border: 1px solid var(--gh-sky-150);
  border-radius: var(--gh-radius-pill);
}
#order-standard_cart .gh-eyebrow .gh-dot {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: var(--gh-action);
  animation: gh-blink 1.6s steps(1, end) infinite;
}
@keyframes gh-blink { 0%, 55% { opacity: 1; } 60%, 100% { opacity: 0.18; } }
@media (prefers-reduced-motion: reduce) {
  #order-standard_cart .gh-eyebrow .gh-dot { animation: none; opacity: 1; }
}

#order-standard_cart .gh-domain-title {
  margin: 0 0 0.7rem;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.8rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--gh-ink-900);
  text-wrap: balance;
}
/* The site colours the second half of the heading with the sky gradient. */
#order-standard_cart .gh-domain-title .gh-accent {
  display: block;
  background: linear-gradient(90deg, #0b89dc 0%, #17b9f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#order-standard_cart .gh-domain-lead {
  max-width: 34rem;
  margin: 0 0 1.4rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gh-muted);
}

/* --- trust row ----------------------------------------------------------
   Four reassurances under the search box, as on the site. Two columns on a
   phone rather than four cramped ones, one per row only when truly narrow. */
#order-standard_cart .gh-domain-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
}
#order-standard_cart .gh-domain-trust li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.65rem;
  align-items: center;
}
#order-standard_cart .gh-domain-trust .gh-trust-icon {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--gh-sky-100);
  color: var(--gh-action);
  font-size: 0.85rem;
}
#order-standard_cart .gh-domain-trust strong {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--gh-ink-900);
  line-height: 1.25;
}
#order-standard_cart .gh-domain-trust span:not(.gh-trust-icon) {
  font-size: 0.75rem;
  color: var(--gh-muted);
  line-height: 1.25;
}

@media (max-width: 991px) {
  #order-standard_cart .gh-domain-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  #order-standard_cart .gh-domain-trust { grid-template-columns: 1fr; gap: 0.8rem; }
}

/* The stock template centres the search box in an 8-of-12 offset column,
   which leaves the hero text left and the box adrift. */
#order-standard_cart.gh-domain .domain-checker-container .col-md-8,
#order-standard_cart.gh-domain .domain-checker-container .col-10 {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0;
}
@media (max-width: 575px) {
  #order-standard_cart.gh-domain .domain-checker-bg { padding: 1.25rem 0; }
  #order-standard_cart .gh-domain-lead { font-size: 0.875rem; }
}

/* --- the collapsed sidebar (phones/tablets) ------------------------------
   Displaces: .sidebar-collapsed panels inheriting Bootstrap's panel look, and
   the currency form's `pull-right float-right`, which escaped its container
   and left a select floating loose above the heading.

   This block is the ONLY sidebar a phone gets, so it reads as navigation
   under the content rather than as a wall above it. */
#order-standard_cart .sidebar-collapsed {
  display: flow-root;            /* contains the floated currency form */
  margin: 1.75rem 0 0;
}
#order-standard_cart .sidebar-collapsed .panel,
#order-standard_cart .sidebar-collapsed .card {
  margin-bottom: 0.7rem;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius);
  box-shadow: none;
}
#order-standard_cart .sidebar-collapsed .panel-heading,
#order-standard_cart .sidebar-collapsed .card-header {
  padding: 0.8rem 1rem;
  font-size: 0.875rem;
}
#order-standard_cart .sidebar-collapsed .panel-body,
#order-standard_cart .sidebar-collapsed .card-body { padding: 0.8rem 1rem; }
/* Let the currency picker sit inline instead of floating out of the stack. */
#order-standard_cart .sidebar-collapsed .pull-right,
#order-standard_cart .sidebar-collapsed .float-right {
  float: none !important;        /* the displaced Bootstrap utility uses !important */
  display: block;
  max-width: 14rem;
  margin: 0.4rem 0 0;
}
/* ==========================================================================
   GiddyHost cart, pass 3: the pages the first two passes never reached.

   Pass 2 scoped its domain-search work to `.domain-checker-container`, the
   wrapper domainchecker.tpl uses. configureproductdomain.tpl wraps the very
   same control in `.domain-input-group.domain-checker-advanced` instead, so
   none of that work applied there and the page fell back to WHMCS defaults.
   Much of section 2 below is that work re-aimed, not new design.

   Every block names the rule it displaces. No !important is used anywhere:
   this sheet is the last stylesheet in the head, after standard_cart's
   all.min.css, so equal specificity already wins - the selectors below still
   match or beat what they displace so the file survives being reordered.
   ========================================================================== */


/* ==========================================================================
   1. PAGE SHELL - the "broken, half-empty page" is mostly layout, not colour
   ========================================================================== */

/* Displaces: .row{margin-right:-15px;margin-left:-15px} (Bootstrap 4).

   Pass 2 hid .cart-sidebar off the store page and gave .cart-body width:100%
   with zero padding. That left the body 15px wider than the row on each side,
   so the cart sat 15px outside the container the header and footer align to -
   the page read as subtly off-register on every non-store page. Zeroing the
   gutters is safer than restoring the padding, because the body is now the
   row's only visible child. */
#order-standard_cart:not(.gh-store) > .row {
  margin-left: 0;
  margin-right: 0;
}

/* Displaces: @media(min-width:1200px){#order-standard_cart .sidebar-collapsed
   {display:none}} - i.e. it is VISIBLE below 1200px, with no styling at all.

   .sidebar-collapsed is the mobile fallback for the category sidebar: three
   stacked panels of navigation dropdowns. Pass 2 decided that sidebar belongs
   on the store page only, but hid just .cart-sidebar - so from 1199px down,
   every cart page still opened with three panels of "choose another category"
   above the thing the customer came to do. That is the large dead block at the
   top of "Choose a Domain..." on a laptop. The store page keeps it, because
   there the categories are the point. */
#order-standard_cart:not(.gh-store) .sidebar-collapsed { display: none; }

/* Displaces: @media(max-width:991px){#order-standard_cart
   .secondary-cart-sidebar{margin:0 auto;width:300px;float:none}}.

   Between 576px and 991px the order summary was pinned to 300px and centred,
   leaving two wide empty columns beside it on a tablet. It should be a
   full-width band under the cart, capped so the total is not stretched to an
   unreadable line length. */
@media only screen and (max-width: 991px) {
  #order-standard_cart .secondary-cart-sidebar {
    width: 100%;
    max-width: 34rem;
    margin: 1.25rem auto 0;
    float: none;
  }
}


/* ==========================================================================
   2. CHOOSE A DOMAIN (configureproductdomain.tpl)
   ========================================================================== */

/* --- the iCheck sprite ----------------------------------------------------
   Displaces: .icheckbox_square-blue,.iradio_square-blue{width:22px;height:22px;
   background:url(blue.png) no-repeat;border:none} plus its .checked, .hover
   and .disabled background-position variants and the retina sprite swap, all
   in twenty-one/css/all.min.css.

   scripts.min.js runs iCheck over every input in the cart that is not marked
   .no-icheck, so the native control is hidden and what the customer sees is a
   22px slice of a stock blue sprite - a different blue from ours, at a size
   that cannot follow the text. Redrawing it in CSS costs one element, tracks
   the palette and stays sharp at any pixel ratio. The id selector outranks the
   sprite rules including the ones inside the retina media query, so this needs
   no !important. */
#order-standard_cart .icheckbox_square-blue,
#order-standard_cart .iradio_square-blue {
  position: relative;
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  background: #fff;
  background-image: none;
  border: 2px solid var(--gh-line);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
#order-standard_cart .iradio_square-blue { border-radius: var(--gh-radius-pill); }

#order-standard_cart .icheckbox_square-blue.hover,
#order-standard_cart .iradio_square-blue.hover { border-color: var(--gh-sky-150); }

#order-standard_cart .iradio_square-blue.checked {
  background-color: var(--gh-sky-25);
  border-color: var(--gh-action);
}
#order-standard_cart .iradio_square-blue.checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: var(--gh-radius-pill);
  background: var(--gh-action);
}
#order-standard_cart .icheckbox_square-blue.checked {
  background-color: var(--gh-action);
  border-color: var(--gh-action);
}
/* The tick is drawn rather than imaged so it inherits the palette and needs no
   second sprite request. */
#order-standard_cart .icheckbox_square-blue.checked::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.05rem;
  width: 0.3rem;
  height: 0.55rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#order-standard_cart .icheckbox_square-blue.disabled,
#order-standard_cart .iradio_square-blue.disabled { opacity: 0.45; cursor: default; }


/* --- the three choice rows ------------------------------------------------
   Displaces: #order-standard_cart .domain-selection-options .option
   {margin-bottom:2px;padding:6px 20px;border-radius:6px;background-color:#f8f8f8}
   and .domain-selection-options .option-selected{background-color:#efefef}.

   These three rows are the page's only real decision and they rendered as flat
   grey bars 2px apart - closer to table rows than to a choice. #f8f8f8 against
   #efefef is also barely a selection cue: the two states are about four per
   cent apart in luminance. As selectable cards they take the same object as
   every other card on the site, and the chosen one tints sky so the state
   reads at a glance rather than on inspection. */
#order-standard_cart .domain-selection-options { margin: 1.25rem 0 1.75rem; }

#order-standard_cart .domain-selection-options .option {
  margin: 0 0 0.75rem;
  padding: 1rem 1.15rem;
  background-color: #fff;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius);
  box-shadow: var(--gh-shadow-card);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
#order-standard_cart .domain-selection-options .option:hover { border-color: var(--gh-sky-150); }

#order-standard_cart .domain-selection-options .option.option-selected {
  background-color: var(--gh-sky-25);
  border-color: var(--gh-sky-150);
  box-shadow: var(--gh-shadow-card), inset 0 0 0 1px var(--gh-sky-150);
}

/* scripts.min.js only adds .option-selected when it finds NO input already
   checked, and the template ships "Register a new domain" pre-checked - so on
   first paint the selected row carried no selected styling and the page looked
   like nothing had been chosen. iCheck does set .checked from the start, so
   matching the input recovers the state. Kept as its own rule on purpose: a
   browser without :has() drops this one and still gets the click behaviour
   from the rule above, rather than losing both. */
#order-standard_cart .domain-selection-options .option:has(input:checked) {
  background-color: var(--gh-sky-25);
  border-color: var(--gh-sky-150);
  box-shadow: var(--gh-shadow-card), inset 0 0 0 1px var(--gh-sky-150);
}

/* Displaces: #order-standard_cart label{margin-right:10px;font-weight:300;
   font-size:13px;color:#666} in standard_cart's all.min.css, and this sheet's
   own 13px form-label rule - both of which sized the page's primary choice
   like a field caption. Filling the card also makes the whole row the click
   target, which is what the inherited .option:hover cursor already promised. */
#order-standard_cart .domain-selection-options .option > label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gh-ink-900);
  cursor: pointer;
}
/* Displaces: .domain-selection-options .option-selected label{font-weight:700} */
#order-standard_cart .domain-selection-options .option.option-selected > label {
  font-weight: 700;
  color: var(--gh-deep-900);
}
/* Displaces: .domain-selection-options .option .iradio_square-blue
   {margin-right:10px} and #order-standard_cart label .iradio_square-blue
   {margin-right:2px}. The flex gap owns this spacing now; two competing
   margins would make the three rows disagree with each other. */
#order-standard_cart .domain-selection-options .option label .iradio_square-blue,
#order-standard_cart .domain-selection-options .option label .icheckbox_square-blue {
  margin-right: 0;
}

/* Displaces: #order-standard_cart .domain-input-group{display:none;margin:10px 0}.
   `display` is deliberately not restated: scripts.min.js reveals the matching
   group with .show(), and redeclaring display here would fight that. */
#order-standard_cart .domain-selection-options .domain-input-group {
  margin: 0.9rem 0 0.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--gh-line);
}


/* --- the grid inside each open row, and the floating Check button ---------
   Displaces: .offset-sm-1{margin-left:8.3333%}, .col-sm-8{flex:0 0 66.6667%;
   max-width:66.6667%}, .col-sm-2{flex:0 0 16.6667%}, .row{margin:0 -15px} and
   .btn-block{display:block;width:100%} (Bootstrap 4).

   The template lays the search out as offset-1 / col-8 / col-2, which wastes a
   dead 8% column on each side and drops the button into a two-wide column that
   is top-aligned against a 120px textarea - so the button appears to float
   beside nothing. Pass 2 solved the same control on the domain page by
   absolutely positioning the button inside the textarea; here the row is
   already a flex container, so bottom-aligning it is less fragile and needs no
   magic offsets.

   Mobile first: below 576px Bootstrap gives col-sm-* no width at all, so the
   children are forced to full width and stack. The side-by-side arrangement is
   added back from 576px up, which covers both the 820px and 1440px cases. */
#order-standard_cart .domain-selection-options .domain-input-group > .row {
  margin-left: 0;
  margin-right: 0;
}
#order-standard_cart .domain-selection-options .domain-input-group > .row > div {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}
#order-standard_cart .domain-selection-options .domain-input-group > .row > .col-sm-2 > .btn {
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.72rem 1.4rem;
}

@media (min-width: 576px) {
  #order-standard_cart .domain-selection-options .domain-input-group > .row {
    align-items: flex-end;
  }
  #order-standard_cart .domain-selection-options .domain-input-group > .row > div {
    flex: 1 1 auto;
    max-width: none;
  }
  #order-standard_cart .domain-selection-options .domain-input-group > .row > .col-sm-2 {
    flex: 0 0 auto;
    margin-left: 0.6rem;
  }
  #order-standard_cart .domain-selection-options .domain-input-group > .row > .col-sm-2 > .btn {
    width: auto;
    min-width: 8.5rem;
    margin-top: 0;
  }
}

/* Displaces: #order-standard_cart .domains-row{margin-right:-2px;margin-left:-2px}
   and #order-standard_cart .domains-row .col-xs-3 (and siblings)
   {padding-right:2px;padding-left:2px}.

   That -2px pair was written for a grid whose columns carry 2px of padding;
   the Bootstrap 4 classes this build actually emits (.col-9, .col-3) carry
   15px, so the "www." field and the TLD select sat 30px apart while the whole
   row overhung its card by 2px on each side. */
#order-standard_cart .domain-selection-options .domains-row {
  margin-left: 0;
  margin-right: 0;
}
#order-standard_cart .domain-selection-options .domains-row > div { padding-left: 0; padding-right: 0.5rem; }
#order-standard_cart .domain-selection-options .domains-row > div:last-child { padding-right: 0; }


/* --- the search textarea --------------------------------------------------
   Displaces: #order-standard_cart .domain-checker-advanced textarea
   {width:100%;height:120px;resize:none}.

   Everything else about this control was left to the browser: no border, no
   radius, no padding, no font. It is the same control as the one on the domain
   page so it takes the same treatment - minus that page's 3.25rem of bottom
   padding, because here the button sits beside the field rather than inside
   it. */
#order-standard_cart .domain-input-group.domain-checker-advanced textarea {
  width: 100%;
  height: 7rem;
  padding: 0.85rem 1rem;
  font-family: var(--gh-font);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--gh-ink-800);
  background: #fff;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius);
  box-shadow: none;
  resize: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#order-standard_cart .domain-input-group.domain-checker-advanced textarea::placeholder {
  color: var(--gh-muted);
}
#order-standard_cart .domain-input-group.domain-checker-advanced textarea:focus {
  border-color: var(--gh-action);
  box-shadow: 0 0 0 3px rgb(11 137 220 / 0.14);
  outline: 0;
}

/* Displaces: #order-standard_cart .domain-checker-advanced label{font-size:12px;
   font-weight:400;margin:5px 5px;color:#333} and .domain-checker-advanced
   input[type=checkbox]{margin-right:5px;background:#fff}.

   Pass 2 rewrote both, but only under .domain-checker-container, so on this
   page "Safe Search" was the last 12px #333 text left in the cart. That
   checkbox carries .no-icheck, so it stays native and accent-color is enough. */
#order-standard_cart .domain-input-group.domain-checker-advanced label {
  display: inline-flex;
  align-items: center;
  margin: 0.3rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gh-ink-800);
}
#order-standard_cart .domain-input-group.domain-checker-advanced input[type="checkbox"] {
  margin-right: 0.45rem;
  accent-color: var(--gh-action);
}

/* Displaces: #order-standard_cart .domain-checker-advanced
   .multiselect-container li.active a{background-color:unset}.

   Same story as above: pass 2's fix required .domain-checker-container, so on
   this page a selected TLD looked identical to an unselected one - the one
   signal the Include TLDs control exists to give. */
#order-standard_cart .domain-input-group.domain-checker-advanced .multiselect-container li.active > a {
  background-color: var(--gh-sky-25);
  color: var(--gh-action-dark);
}
#order-standard_cart .domain-input-group.domain-checker-advanced .multiselect-container li > a:hover {
  background-color: var(--gh-sky-25);
}


/* --- transfer / own-domain result panels ---------------------------------
   Displaces: #order-standard_cart .transfer-eligible{color:#3c763d;
   background-color:#dff0d8;border-color:#d6e9c6} and .transfer-not-eligible
   {color:#666;background-color:#f6f6f6}, both carrying {margin:30px 0 15px;
   padding:20px}.

   #dff0d8 is Bootstrap 3's alert green, a colour that appears nowhere else on
   GiddyHost. Eligibility is good news, so the success token carries that on a
   sky card rather than repainting the whole block green. */
#order-standard_cart .transfer-eligible,
#order-standard_cart .transfer-not-eligible {
  margin: 1.25rem 0 1rem;
  padding: 1.1rem 1.35rem;
  border-radius: var(--gh-radius);
  color: var(--gh-ink-800);
}
#order-standard_cart .transfer-eligible {
  background-color: var(--gh-sky-25);
  border: 1px solid var(--gh-sky-150);
}
#order-standard_cart .transfer-eligible .domain-checker-available { color: var(--gh-success); }
#order-standard_cart .transfer-not-eligible {
  background-color: #fff;
  border: 1px solid var(--gh-line);
}

/* No displaced rule: .domain-price ships with no styling at all, so the line
   stating the price the customer is about to commit to rendered at body weight
   in the middle of the results block. */
#order-standard_cart .domain-price {
  margin: 0.75rem 0 1.25rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--gh-muted);
}
#order-standard_cart .domain-price .price {
  margin-left: 0.4rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gh-ink-900);
}

@media (max-width: 575.98px) {
  #order-standard_cart .domain-selection-options .option { padding: 0.85rem 0.9rem; }
  #order-standard_cart .domain-selection-options .option > label { font-size: 0.9375rem; }
}


/* ==========================================================================
   3. INPUT GROUPS AND SELECTS - shared by pages 1, 2, 3 and 5
   ========================================================================== */

/* Displaces: .input-group-text{background-color:#e9ecef;border:1px solid #ced4da;
   border-radius:.25rem} (Bootstrap 4). Pass 2 set only this element's colour,
   so the "www." prefix kept Bootstrap's grey chip and 4px corners against our
   12px field. */
#order-standard_cart .input-group > .input-group-prepend > .input-group-text,
#order-standard_cart .input-group > .input-group-append > .input-group-text {
  padding: 0.62rem 0.9rem;
  font-family: var(--gh-font);
  font-size: 0.9375rem;
  color: var(--gh-muted);
  background-color: var(--gh-sky-25);
  border: 1px solid var(--gh-line);
  border-radius: 12px 0 0 12px;
}
#order-standard_cart .input-group > .input-group-append > .input-group-text {
  border-radius: 0 12px 12px 0;
}

/* Displaces: this sheet's own #main-body .form-control{border-radius:12px},
   which outranks Bootstrap's .input-group>.form-control:not(:last-child)
   corner resets because an id beats two classes. The result was a fully
   rounded input overlapping a fully rounded prefix, so the joint looked like a
   rendering fault. Restated at id strength so the seam closes again. */
#order-standard_cart .input-group > .input-group-prepend + .form-control,
#order-standard_cart .input-group > .input-group-prepend + .field {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
#order-standard_cart .input-group > .form-control:not(:last-child),
#order-standard_cart .input-group > .field:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Displaces: .custom-select{background:#fff url(inline svg) no-repeat right
   .75rem center/8px 10px;border-radius:.25rem} (Bootstrap 4).

   Two faults in one place. Pass 2's #main-body .form-control{background:#fff}
   outranks that shorthand, so every .custom-select lost its caret and became a
   box with no affordance at all; meanwhile every plain select still drew the
   OS caret, so two selects in the same form disagreed with each other. One
   drawn chevron settles both. Its stroke is the literal value of --gh-muted
   because a data URI cannot read a custom property - it is the only raw colour
   in this file, and it must be kept in step by hand if that token moves. */
#order-standard_cart select.form-control,
#order-standard_cart select.custom-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.4rem;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b6b82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 0.7rem 0.5rem;
}
/* Restated because the rule above sets background-color at the same
   specificity as #order-standard_cart .form-control[disabled]{background-color:
   #f8f8f8} but later in the file, which would have repainted every disabled
   select white - the one state that has to stay obviously inert. */
#order-standard_cart select.form-control[disabled],
#order-standard_cart select.custom-select[disabled] {
  background-color: var(--gh-sky-25);
  color: var(--gh-muted);
  cursor: not-allowed;
}

/* Displaces: #order-standard_cart .prepend-icon .field-icon{width:42px;
   height:36px;line-height:36px}, .prepend-icon .field{padding-left:36px} and
   .field-icon i{color:#bbb}.

   The 36px box was measured against WHMCS's 34px input; ours is about 44px
   tall, so the promo-code ticket icon sat high and overlapped the text it was
   meant to sit beside. Centring it on the field itself survives any future
   change to field height. */
#order-standard_cart .prepend-icon .field-icon {
  top: 0;
  bottom: 0;
  height: auto;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}
#order-standard_cart .prepend-icon .field-icon i { color: var(--gh-muted); }
#order-standard_cart .prepend-icon .field,
#order-standard_cart .prepend-icon .form-control { padding-left: 2.6rem; }

/* Displaces: #order-standard_cart .field-help-text{color:#888;font-size:12px}
   and .form-group .field-error-msg{color:#c00}. #888 fails contrast on white
   at 12px, and #c00 is not our danger red - so a validation failure and the
   brand disagreed about what "wrong" looks like. */
#order-standard_cart .field-help-text {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--gh-muted);
}
#order-standard_cart .field-error-msg {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gh-danger);
}


/* ==========================================================================
   4. CONFIGURE PRODUCT (cart.php?a=confproduct)
   ========================================================================== */

/* Displaces: #order-standard_cart .field-container{margin:0 0 30px 0}. Thirty
   pixels between every block on a form that is mostly blocks is what makes
   this page scroll roughly twice as far as its content needs. */
#order-standard_cart #frmConfigureProduct .field-container { margin: 0 0 1.5rem; }
#order-standard_cart #frmConfigureProduct .form-group,
#order-standard_cart #productConfigurableOptions .form-group { margin-bottom: 1rem; }

/* Displaces: #order-standard_cart .form-control-qty{width:70px;text-align:center}.
   70px was sized for a 34px-tall input with 12px padding; at our padding a
   two-digit value plus the number spinner no longer fits and the value clips. */
#order-standard_cart .form-control-qty {
  width: 5.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
}

/* --- addon cards ----------------------------------------------------------
   Displaces: #order-standard_cart .panel-addon{font-size:.8em;text-align:center},
   .panel-addon .panel-body{border-radius:4px},
   .panel-addon .panel-body label{font-size:1em;font-weight:700;color:#333},
   .panel-addon .panel-price{padding:4px;background-color:#e8e8e8},
   .panel-addon .panel-add{display:block;padding:4px;background-color:#5cb85c;
   color:#fff;border-radius:0 0 4px 4px},
   .panel-addon-selected{border-color:#bbb} and
   .panel-addon-selected .panel-add{background-color:#5cb85c;color:#fff}.

   #5cb85c is Bootstrap 3's green and the loudest colour left anywhere in the
   funnel - and it was painted on BOTH states, so "Add to Cart" and "Added to
   Cart" were the same green bar and a customer could not tell which addons
   they had actually taken. The add strip is quiet until chosen; the chosen
   card tints sky and fills the strip with the primary gradient, which is the
   same selected language as the domain options in section 2. The parent .panel
   already carries the card border, radius and overflow:hidden from pass 2,
   which is why these strips need no radius of their own. */
#order-standard_cart .panel-addon {
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
#order-standard_cart .panel-addon .panel-body,
#order-standard_cart .panel-addon .card-body {
  padding: 1rem 1.15rem;
  border-radius: 0;
}
#order-standard_cart .panel-addon .panel-body label,
#order-standard_cart .panel-addon .card-body label {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--gh-ink-900);
  cursor: pointer;
}
#order-standard_cart .panel-addon .panel-price {
  padding: 0.55rem 1.15rem;
  font-weight: 700;
  color: var(--gh-ink-800);
  background-color: var(--gh-sky-25);
  border-top: 1px solid var(--gh-line);
}
#order-standard_cart .panel-addon .panel-add {
  padding: 0.65rem 1.15rem;
  font-weight: 700;
  text-align: center;
  color: var(--gh-action);
  background-color: #fff;
  border-top: 1px solid var(--gh-line);
  border-radius: 0;
  transition: color 0.15s ease, background-color 0.15s ease;
}
#order-standard_cart .panel-addon:hover { border-color: var(--gh-sky-150); }
#order-standard_cart .panel-addon:hover .panel-add { background-color: var(--gh-sky-25); }

#order-standard_cart .panel-addon.panel-addon-selected {
  background-color: var(--gh-sky-25);
  border-color: var(--gh-sky-150);
}
#order-standard_cart .panel-addon.panel-addon-selected .panel-price {
  background-color: var(--gh-sky-50);
}
#order-standard_cart .panel-addon.panel-addon-selected .panel-add {
  color: #fff;
  background-color: var(--gh-action);
  background-image: linear-gradient(180deg, #1ab0f7 0%, #0b89dc 55%, #0776c4 100%);
  border-top-color: transparent;
}

/* Displaces: #order-standard_cart .addon-promo-container{margin:20px 0;
   padding:20px;border:1px solid #eee;font-size:.9em} and
   .addon-promo-container label{margin-top:3px;width:98%}.
   A hairline of #eee on white is effectively invisible, so the promo read as
   loose text floating between two real cards; and a 98% label put its checkbox
   and its text on separate lines at narrow widths. */
#order-standard_cart .addon-promo-container {
  margin: 1.25rem 0;
  padding: 1.25rem 1.4rem;
  font-size: 0.9375rem;
  background-color: var(--gh-sky-25);
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-lg);
  box-shadow: var(--gh-shadow-card);
}
#order-standard_cart .addon-promo-container label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: auto;
  margin-top: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* WHMCS drops the commit button straight after the last field with nothing
   separating it from the addon grid above. */
#order-standard_cart #btnCompleteProductConfig { margin-top: 0.5rem; }


/* ==========================================================================
   5. CHECKOUT (cart.php?a=checkout)
   ========================================================================== */

/* Displaces: #order-standard_cart .cc-input-container{padding:15px 15px 10px
   15px;background-color:#f3f3f3;border:1px solid #d9d9d9;border-radius:4px}
   and #order-standard_cart .apply-credit-container{margin:15px 0;padding:15px;
   background-color:#eee}.

   The card-details block is where a customer is most likely to hesitate, and
   it was the greyest, squarest thing on the page - three different greys
   (#f3f3f3, #d9d9d9, #eee), none of which exist in the palette. Same card as
   everything else, tinted so it still reads as a distinct enclosure. */
#order-standard_cart .cc-input-container,
#order-standard_cart .apply-credit-container {
  margin: 1.25rem 0;
  padding: 1.25rem 1.4rem;
  background-color: var(--gh-sky-25);
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-lg);
  box-shadow: none;
}
/* Displaces: .cc-input-container .existing-cc-grid{color:#666} and
   .cc-input-container i{padding:0 6px;width:28px}. */
#order-standard_cart .cc-input-container .existing-cc-grid { color: var(--gh-muted); }
#order-standard_cart .cc-input-container i { color: var(--gh-muted); }
/* Displaces: .apply-credit-container .radio{padding-left:20px;padding-right:20px}
   - a symmetric 20px indent pushed the credit radios off the block's own
   left edge. */
#order-standard_cart .apply-credit-container .radio { padding-left: 0; padding-right: 1.25rem; }

/* Displaces: #order-standard_cart .checkout-security-msg{margin:20px 0;
   padding-left:75px;font-size:.8em} and .checkout-security-msg i{float:left;
   margin-left:-48px;font-size:2.8em}.

   A 75px indent cancelled by a -48px float is a two-column layout built from
   magic numbers; at 390px the padding alone eats a fifth of the viewport and
   the reassurance text wraps to five lines. Flex says the same thing in one
   declaration and collapses cleanly. */
#order-standard_cart .checkout-security-msg {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  font-size: 0.8125rem;
  color: var(--gh-muted);
  background-color: var(--gh-sky-25);
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius);
}
#order-standard_cart .checkout-security-msg i {
  float: none;
  flex: 0 0 auto;
  margin-left: 0;
  font-size: 1.75rem;
  color: var(--gh-success);
}

/* Displaces: #order-standard_cart .checkout-error-feedback{margin:15px 0} -
   validation failures were unstyled body text in a long form, easy to scroll
   straight past on the one screen where being stuck is most costly. */
#order-standard_cart .checkout-error-feedback {
  margin: 1rem 0;
  padding: 0.85rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gh-danger);
  background-color: #fff;
  border: 1px solid var(--gh-danger);
  border-radius: var(--gh-radius);
}

/* Displaces: #order-standard_cart .express-checkout-buttons .separator
   {margin-left:70px;padding:5px} - a hard 70px indent inside a summary column
   that is only 300px wide on a phone, so the word "or" sat almost at its right
   edge. It is a divider; it should centre itself. */
#order-standard_cart .express-checkout-buttons .separator {
  margin: 0.75rem 0;
  padding: 0.25rem;
  font-size: 0.8125rem;
  color: var(--gh-muted);
}

/* Displaces: #order-standard_cart .view-cart-gateway-checkout{margin:0 0 20px 0;
   padding:15px;background-color:#e8e8e8;border-radius:4px}. */
#order-standard_cart .view-cart-gateway-checkout {
  margin: 0 0 1.25rem;
  padding: 1.1rem;
  background-color: var(--gh-sky-25);
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius);
}

/* Displaces: #order-standard_cart .view-cart-promotion-code{margin:0 0 5px 0;
   padding:10px 20px;background-color:#fff;border:1px dashed #ccc} - the only
   dashed border in the cart, in a grey outside the palette. The dash is worth
   keeping: it is the one thing that says "coupon" without a word. */
#order-standard_cart .view-cart-promotion-code {
  margin: 0 0 0.5rem;
  padding: 0.7rem 1.1rem;
  font-size: 0.875rem;
  color: var(--gh-ink-800);
  background-color: var(--gh-sky-25);
  border: 1px dashed var(--gh-sky-150);
  border-radius: var(--gh-radius);
}


/* ==========================================================================
   6. DOMAIN TRANSFER (cart.php?a=add&domain=transfer)
   ========================================================================== */

/* Displaces: .card-footer{padding:.75rem 1.25rem;background-color:rgba(0,0,0,.03);
   border-top:1px solid rgba(0,0,0,.125)} (Bootstrap 4).

   Pass 2 restyled .card-header and .card-body but not the footer, so the one
   card on this page ended in a translucent-black strip with a black hairline -
   the only place left in the cart where a border is not var(--gh-line). */
#order-standard_cart .panel-footer,
#order-standard_cart .card-footer {
  padding: 1.1rem 1.4rem;
  background-color: var(--gh-sky-25);
  border-top: 1px solid var(--gh-line);
}

/* Displaces: .alert-warning{color:#856404;background-color:#fff3cd;
   border-color:#ffeeba} (Bootstrap 4) and .slim-alert{margin:0 0 5px 0;
   padding:5px;text-align:center}.

   #transferUnavailable is where the page tells a customer their domain cannot
   be transferred. The amber alert was both off-palette and the wrong register
   for a hard stop, so that one instance takes danger while a general warning
   stays informational. */
#order-standard_cart .alert-warning {
  color: var(--gh-ink-800);
  background-color: var(--gh-sky-25);
  border-color: var(--gh-sky-150);
}
#order-standard_cart #transferUnavailable.alert-warning {
  color: var(--gh-danger);
  background-color: #fff;
  border-color: var(--gh-danger);
  font-weight: 600;
}
#order-standard_cart .slim-alert {
  margin: 0 0 0.5rem;
  padding: 0.65rem 0.9rem;
  font-size: 0.875rem;
  border-radius: var(--gh-radius);
}

/* At 390px the transfer card runs edge to edge, so pass 2's 1.4rem card
   padding leaves the inputs about 20px of clear space on each side. Trimming
   the shell and the heading is what keeps the auth-code field above the fold
   on a phone. */
@media (max-width: 575.98px) {
  #order-standard_cart .header-lined h1,
  #order-standard_cart .header-lined h2 { font-size: 1.5rem; line-height: 1.9rem; }
  #order-standard_cart .card-header,
  #order-standard_cart .panel-heading,
  #order-standard_cart .card-body,
  #order-standard_cart .panel-body,
  #order-standard_cart .card-footer,
  #order-standard_cart .panel-footer { padding-left: 1.05rem; padding-right: 1.05rem; }
}


/* --- the store page shows its categories once, not twice -------------------
   The rule above keeps .sidebar-collapsed on .gh-store because there the
   categories are the point. That is right below 1200px, where .cart-sidebar
   is hidden and the collapsed panels are the only way to change category.

   At 1200px and up .cart-sidebar appears (300px, on the left) and the
   collapsed panels become a second copy of the same navigation - three dead
   "Choose Another Category" accordions between the page heading and the
   plans, pushing the first row of cards toward the fold. Stock standard_cart
   hides them at exactly this breakpoint for exactly this reason; pass 2
   dropped that media query along with the rest of the block. */
@media (min-width: 1200px) {
  #order-standard_cart.gh-store .sidebar-collapsed { display: none; }
}





/* --- plan card price ------------------------------------------------------
   Four steps, each quieter than the one before: the old rate with the saving
   beside it, then the new rate large, then the terms. The terms are two short
   sentences rather than one long line - "pay X today" and "then Y on renewal"
   are two different facts and run together badly.

   The long selector prefix is deliberate. The card's own rules are written to
   this depth and a shorter selector is silently overridden - that is what left
   the saving badge rendering as 18px grey body text. */
#order-standard_cart .products .product.gh-plan header.gh-plan-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#order-standard_cart .products .product.gh-plan header.gh-plan-head .gh-plan-name {
  font-size: 1.1875rem;
}

#order-standard_cart .products .product.gh-plan div.gh-plan-price .gh-plan-oldrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}
#order-standard_cart .products .product.gh-plan div.gh-plan-price .gh-plan-was {
  color: var(--gh-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
#order-standard_cart .products .product.gh-plan div.gh-plan-price .gh-plan-save {
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: #eafaf3;
  color: #0f6b4a;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
#order-standard_cart .products .product.gh-plan div.gh-plan-price .gh-plan-amount {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
#order-standard_cart .products .product.gh-plan div.gh-plan-price .gh-plan-cycle {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gh-muted);
}
#order-standard_cart .products .product.gh-plan div.gh-plan-price .gh-plan-billed {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gh-muted);
}