@charset "UTF-8";
/* ==========================================================================
   Insight Dezign — WHMCS Brand Stylesheet
   Built on top of WHMCS Twenty-One (Bootstrap 4.5.3).
   Loaded automatically by includes/head.tpl after theme.min.css.
   ========================================================================== */

/* Google Fonts (Montserrat + Open Sans) are loaded via <link> in head.tpl. */

/* --------------------------------------------------------------------------
   1. Brand tokens
   -------------------------------------------------------------------------- */
:root {
    /* Primary */
    --id-charcoal:        #231f20;
    --id-orange:          #f99f1b;

    /* Neutrals */
    --id-dark-gray:       #3d3739;
    --id-medium-gray:     #706769;
    --id-light-gray:      #b5b0b1;
    --id-off-white:       #f4f2f3;
    --id-white:           #ffffff;

    /* Accents */
    --id-orange-light:    #ffbd5c;
    --id-orange-dark:     #d67e00;
    --id-blue:            #1b6af9;
    --id-teal:            #1bb8f9;

    /* Feedback */
    --id-success:         #2ecc71;
    --id-warning:         #f1c40f;
    --id-error:           #e74c3c;
    --id-info:            #3498db;

    /* Surfaces — slightly darker than --id-off-white so card headers separate
       from the page background without becoming heavy gray. */
    --id-card-header:     #e7e3e4;
    --id-card-header-border: #d6d1d2;

    /* Type */
    --id-font-display:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --id-font-body:       "Open Sans", "Helvetica Neue", Arial, sans-serif;

    /* Map onto Bootstrap variables so utility classes pick up the brand */
    --primary:            #f99f1b;
    --secondary:          #3d3739;
    --success:            #2ecc71;
    --info:               #3498db;
    --warning:            #f1c40f;
    --danger:             #e74c3c;
    --light:              #f4f2f3;
    --dark:               #231f20;
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
html {
    /* 112.5% of the 16px browser default = 18px, so 1rem = 18px. */
    font-size: 112.5%;
}
body {
    font-family: var(--id-font-body);
    color: var(--id-dark-gray);
    background-color: var(--id-white);
    font-size: 1rem;           /* now 18px via the html base */
    line-height: 1.625;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--id-font-display);
    color: var(--id-charcoal);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1, .h1 { font-size: 2rem; }       /* 32px */
h2, .h2 { font-size: 1.5rem; font-weight: 700; }
h3, .h3 { font-size: 1.25rem; font-weight: 600; }
h4, .h4 { font-size: 1.125rem; font-weight: 600; color: var(--id-medium-gray); }
h5, .h5 { font-size: 1rem; font-weight: 600; }
h6, .h6 { font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--id-medium-gray); }

p, li, dd, label, .form-text { color: var(--id-dark-gray); line-height: 1.55; }

a {
    color: var(--id-orange-dark);
    text-decoration: none;
    transition: color .15s ease-in-out;
}
a:hover, a:focus {
    color: var(--id-orange);
    text-decoration: underline;
}

blockquote, .blockquote {
    font-family: var(--id-font-body);
    font-style: italic;
    font-size: 1.125rem;
    color: var(--id-medium-gray);
    background-color: var(--id-off-white);
    border-left: 3px solid var(--id-orange);
    padding: 1rem 1.25rem;
    border-radius: 0 .25rem .25rem 0;
}

code, pre, kbd, samp { font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

::selection { background: var(--id-orange); color: var(--id-charcoal); }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
    font-family: var(--id-font-display);
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: .35rem;
    padding: .55rem 1.1rem;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out, box-shadow .15s ease-in-out, transform .05s ease-in-out;
}
.btn:active { transform: translateY(1px); }

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--id-orange);
    border-color: var(--id-orange);
    color: var(--id-charcoal);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--id-orange-dark);
    border-color: var(--id-orange-dark);
    color: var(--id-white);
    box-shadow: 0 0 0 .2rem rgba(249, 159, 27, .35);
}

.btn-outline-primary {
    color: var(--id-orange-dark);
    border-color: var(--id-orange);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--id-orange);
    border-color: var(--id-orange);
    color: var(--id-charcoal);
    box-shadow: 0 0 0 .2rem rgba(249, 159, 27, .25);
}

.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--id-charcoal);
    border-color: var(--id-charcoal);
    color: var(--id-white);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--id-dark-gray);
    border-color: var(--id-dark-gray);
    color: var(--id-white);
}

.btn-outline-secondary {
    color: var(--id-charcoal);
    border-color: var(--id-charcoal);
}
.btn-outline-secondary:hover {
    background-color: var(--id-charcoal);
    border-color: var(--id-charcoal);
    color: var(--id-white);
}

.btn-default {
    background-color: var(--id-white);
    border-color: var(--id-light-gray);
    color: var(--id-dark-gray);
}
.btn-default:hover {
    background-color: var(--id-off-white);
    border-color: var(--id-medium-gray);
    color: var(--id-charcoal);
}

.btn-success { background-color: var(--id-success); border-color: var(--id-success); color: #fff; }
.btn-info    { background-color: var(--id-info);    border-color: var(--id-info);    color: #fff; }
.btn-warning { background-color: var(--id-warning); border-color: var(--id-warning); color: var(--id-charcoal); }
.btn-danger  { background-color: var(--id-error);   border-color: var(--id-error);   color: #fff; }

.btn-link { color: var(--id-orange-dark); }
.btn-link:hover { color: var(--id-orange); }

/* --------------------------------------------------------------------------
   4. Header / Topbar / Navbar
   -------------------------------------------------------------------------- */
.header { background-color: var(--id-white); border-bottom: 1px solid rgba(35, 31, 32, .08); }

.topbar {
    background-color: var(--id-charcoal);
    color: var(--id-off-white);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.topbar .btn,
.topbar .input-group-text {
    color: var(--id-off-white);
    background-color: transparent;
    border-color: transparent;
}
.topbar .btn:hover { color: var(--id-orange); }
.topbar .input-group-text { color: var(--id-light-gray); font-size: .875rem; }
.topbar .btn-active-client {
    background-color: rgba(249, 159, 27, .15);
    color: var(--id-orange);
    font-weight: 600;
    border-radius: .3rem;
}
.topbar .btn-active-client:hover { background-color: rgba(249, 159, 27, .25); color: var(--id-orange-light); }

/* --- Top info bar ------------------------------------------------------- */
.info-bar {
    background-color: #f9f9f9;
    color: #000000;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.info-bar__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.info-bar__text {
    text-align: center;
    color: #000000;
    font-family: var(--id-font-body);
}
.info-bar__contact {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.info-bar__link {
    color: #000000;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--id-font-body);
    transition: color .2s ease;
}
.info-bar__link i { color: inherit; font-size: .85rem; }
.info-bar__link:hover { color: var(--id-orange-dark); text-decoration: none; }
.info-bar__link:hover i { color: inherit; }

@media (min-width: 768px) {
    .info-bar__inner {
        flex-direction: row;
        justify-content: space-between;
        gap: 1.25rem;
    }
    .info-bar__text { text-align: left; }
    .info-bar__contact { justify-content: flex-end; }
}

/* --- Site header (sticky, white, light shadow — match site-header) ------ */
header#header.header {
    background-color: var(--id-white);
    box-shadow: 0 0 20px rgba(0, 0, 0, .05);
    border-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* --- Site-wide container width — match the main site at 1280px ---------- */
.info-bar .container,
header#header .container,
.master-breadcrumb .container,
#main-body .container,
.footer-widgets .container,
.footer .container,
#domainSearch .container,
.id-domain-search .container,
.id-hero .container {
    max-width: 1280px !important;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: auto;
    margin-right: auto;
}
#main-body { padding-top: 30px; }

@media (max-width: 575.98px) {
    .info-bar .container,
    header#header .container,
    .master-breadcrumb .container,
    #main-body .container,
    .footer-widgets .container,
    .footer .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.navbar.navbar-light {
    background-color: var(--id-white);
    padding-top: .9rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid rgba(35, 31, 32, .05);
}
.navbar-brand {
    font-family: var(--id-font-display);
    font-weight: 700;
    color: var(--id-charcoal) !important;
    font-size: 1.4rem;
    letter-spacing: .02em;
}
.navbar-brand .logo-img { max-height: 44px; width: auto; }
.navbar-brand.navbar-brand--text .logo-orange { color: var(--id-orange); }
.navbar-brand.navbar-brand--text .logo-charcoal { color: var(--id-charcoal); }

/* Main nav row — white to match insightdezign.com site-header */
.main-navbar-wrapper {
    background-color: var(--id-white);
    padding-top: 0;
    padding-bottom: 0;
}
/* Genesis-style nav menu items: 18px medium-gray on white, orange on hover */
header.header .main-navbar-wrapper a,
.main-navbar-wrapper .nav-link {
    color: var(--id-medium-gray) !important;
    font-family: var(--id-font-body);
    font-weight: 400;
    font-size: 18px;
    padding: 12px 18px;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
    display: inline-block;
}
header.header .main-navbar-wrapper a:hover,
header.header .main-navbar-wrapper a:focus,
header.header .main-navbar-wrapper .active > a,
.main-navbar-wrapper .nav-link:hover,
.main-navbar-wrapper .nav-link:focus,
.main-navbar-wrapper .nav-item.active > .nav-link {
    color: var(--id-orange) !important;
    border-bottom-color: transparent;
    background-color: transparent;
    text-decoration: none;
}

/* CTA-style last menu item (matches .id-nav-btn on the main site).
   Apply the pill treatment to any nav <li> that has `id-nav-btn` class. */
header.header .main-navbar-wrapper .id-nav-btn > a {
    background-color: var(--id-orange);
    color: var(--id-charcoal) !important;
    border-radius: .35rem;
    padding: 10px 22px;
    margin: 0 .25rem;
    font-weight: 700;
    font-family: var(--id-font-display);
    border: 0;
}
header.header .main-navbar-wrapper .id-nav-btn > a:hover {
    background-color: var(--id-orange-dark) !important;
    color: var(--id-white) !important;
    border-bottom-color: transparent;
}

/* Float the navbar dropdowns above any cart/order content stacking contexts.
   Avoid setting z-index on .header itself — that creates a NEW stacking
   context which would trap the dropdown menu inside the header bounds. */
.main-navbar-wrapper .dropdown-menu,
header.header .dropdown-menu {
    z-index: 1080 !important;        /* above Bootstrap modal-backdrop (1040) */
}
/* When open, force the menu visible — some cart-page CSS uses overflow:hidden
   on ancestors which can clip absolutely-positioned dropdowns. Use a fixed
   position fallback only if the floated approach still fails. */
.main-navbar-wrapper .dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Dropdown items live inside .dropdown-menu (white background) — force them
   back to the dark text used in dropdowns, overriding the white nav rule. */
header.header .main-navbar-wrapper .dropdown-menu a,
header.header .main-navbar-wrapper .dropdown-item {
    color: var(--id-dark-gray) !important;
    display: block;
    padding: .5rem 1.25rem;
    border-bottom: 0;
}
header.header .main-navbar-wrapper .dropdown-menu a:hover,
header.header .main-navbar-wrapper .dropdown-menu a:focus,
header.header .main-navbar-wrapper .dropdown-item:hover,
header.header .main-navbar-wrapper .dropdown-item:focus {
    color: var(--id-orange-dark) !important;
    background-color: var(--id-off-white);
}

/* Brand-row navbar (white background, contains the logo + cart) — keep its
   inline links readable on white. */
header.header .navbar.navbar-light a {
    color: var(--id-charcoal);
}
header.header .navbar.navbar-light a:hover {
    color: var(--id-orange-dark);
}
.main-navbar-wrapper .dropdown-menu {
    border: 0;
    border-radius: 0 0 .35rem .35rem;
    box-shadow: 0 10px 25px rgba(35, 31, 32, .15);
    padding: .5rem 0;
}
.main-navbar-wrapper .dropdown-item {
    font-family: var(--id-font-body);
    color: var(--id-dark-gray);
    padding: .5rem 1.25rem;
}
.main-navbar-wrapper .dropdown-item:hover,
.main-navbar-wrapper .dropdown-item:focus {
    background-color: var(--id-off-white);
    color: var(--id-orange-dark);
}

.navbar .search .form-control {
    border-color: rgba(35, 31, 32, .15);
    border-radius: 0 .35rem .35rem 0;
}
.navbar .search .btn { border-radius: .35rem 0 0 .35rem; }

.cart-btn { color: var(--id-charcoal); }
.cart-btn .badge { background-color: var(--id-orange); color: var(--id-charcoal); }

/* --------------------------------------------------------------------------
   5. Breadcrumb
   -------------------------------------------------------------------------- */
.master-breadcrumb {
    background-color: transparent;
    padding: 1rem 0 .25rem;
}
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
    font-family: var(--id-font-display);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.breadcrumb-item a { color: var(--id-medium-gray); }
.breadcrumb-item.active { color: var(--id-charcoal); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--id-light-gray); content: "›"; }

/* --------------------------------------------------------------------------
   6. Cards, panels, surfaces
   -------------------------------------------------------------------------- */
.card {
    border: 0;
    border-radius: .6rem;
    background-color: var(--id-white);
    box-shadow: 0 2px 6px rgba(35, 31, 32, .05), 0 1px 2px rgba(35, 31, 32, .04);
    transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { box-shadow: 0 8px 24px rgba(35, 31, 32, .08), 0 2px 6px rgba(35, 31, 32, .06); }

.card-header {
    background-color: var(--id-card-header);
    border-bottom: 1px solid var(--id-card-header-border);
    font-family: var(--id-font-display);
    font-weight: 600;
    color: var(--id-charcoal);
    border-radius: .6rem .6rem 0 0 !important;
}
.card-title { font-family: var(--id-font-display); color: var(--id-charcoal); }

/* Twenty-One's compiled CSS hard-codes .bg-primary to #336699 (navy) and
   .bg-dark to #343a40 with !important. Template files use
   `modal-header card-header bg-primary text-light` for elevated headers on
   account/order/modal screens — re-skin them to brand charcoal so they read
   as intentional brand chrome, not legacy WHMCS blue. */
.bg-primary { background-color: var(--id-charcoal) !important; }
.bg-dark    { background-color: var(--id-charcoal) !important; }

.card-header.bg-primary,
.modal-header.bg-primary,
.card-header.bg-dark,
.modal-header.bg-dark {
    color: var(--id-white) !important;
    border-bottom: 0;
    border-top: 3px solid var(--id-orange);
}
.card-header.bg-primary .close,
.modal-header.bg-primary .close,
.card-header.bg-dark .close,
.modal-header.bg-dark .close {
    color: var(--id-white);
    opacity: .8;
    text-shadow: none;
}
.card-header.bg-primary .close:hover,
.modal-header.bg-primary .close:hover {
    color: var(--id-orange);
    opacity: 1;
}

.panel-sidebar, .sidebar .panel {
    border: 0;
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(35, 31, 32, .06);
}
/* Sidebar-only panel heading — charcoal block (e.g. service menu in
   clientareaproductdetails). Scoped to .sidebar/.panel-sidebar so it does
   NOT bleed into primary-content panels. */
.sidebar > .panel > .panel-heading,
.panel-sidebar > .panel-heading {
    background-color: var(--id-charcoal);
    color: var(--id-white);
    font-family: var(--id-font-display);
    font-weight: 600;
    border-radius: .5rem .5rem 0 0;
}
.panel-sidebar .list-group-item.active,
.sidebar .list-group-item.active {
    background-color: var(--id-orange);
    border-color: var(--id-orange);
    color: var(--id-charcoal);
    font-weight: 600;
}

/* Override theme.css line 10425 which sets .sidebar .list-group to 0.9em. */
.sidebar .list-group { font-size: 1.1em; }

/* Bootstrap 3 legacy markup: server modules (cpanel, etc.) and other WHMCS
   pages render headers as `<div class="panel-heading card-header">`. WHMCS
   ships a separate /assets/css bundle outside this theme that paints
   .panel-heading dark — force the brand card-header treatment with
   !important so those headers match the rest of the site. */
.panel-heading.card-header,
.card-header.panel-heading,
.primary-content .panel-heading,
.main-content .panel-heading {
    background-color: var(--id-card-header) !important;
    color: var(--id-charcoal) !important;
    border-bottom: 1px solid var(--id-card-header-border) !important;
    border-top: 0 !important;
    font-family: var(--id-font-display);
    font-weight: 600;
}
.panel-heading.card-header .panel-title,
.card-header.panel-heading .panel-title,
.panel-heading.card-header h1,
.panel-heading.card-header h2,
.panel-heading.card-header h3,
.panel-heading.card-header h4,
.panel-heading.card-header h5 {
    color: var(--id-charcoal) !important;
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.form-control,
.custom-select {
    border-radius: .35rem;
    border-color: rgba(35, 31, 32, .15);
    color: var(--id-dark-gray);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
.custom-select:focus {
    border-color: var(--id-orange);
    box-shadow: 0 0 0 .2rem rgba(249, 159, 27, .2);
}
label, .col-form-label { color: var(--id-charcoal); font-weight: 600; }

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--id-orange);
    border-color: var(--id-orange);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(249, 159, 27, .25);
}

.input-group-text {
    background-color: var(--id-off-white);
    border-color: rgba(35, 31, 32, .15);
    color: var(--id-medium-gray);
}

/* --------------------------------------------------------------------------
   8. Alerts (mapped to brand feedback colors)
   -------------------------------------------------------------------------- */
.alert {
    border: 0;
    border-left: 4px solid transparent;
    border-radius: .35rem;
    font-family: var(--id-font-body);
}
.alert-success { background-color: rgba(46, 204, 113, .12); border-left-color: var(--id-success); color: #1e7e44; }
.alert-info    { background-color: rgba(52, 152, 219, .12); border-left-color: var(--id-info);    color: #1f6c9c; }
.alert-warning { background-color: rgba(241, 196, 15, .15); border-left-color: var(--id-warning); color: #7d6608; }
.alert-danger  { background-color: rgba(231, 76, 60, .12);  border-left-color: var(--id-error);   color: #a02619; }

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.table {
    background-color: var(--id-white);
    border-radius: .5rem;
    overflow: hidden;
}
.table thead th {
    background-color: var(--id-charcoal);
    color: var(--id-white);
    font-family: var(--id-font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .8rem;
    border-bottom: 0;
}
.table tbody tr { border-bottom: 1px solid var(--id-off-white); }
.table-hover tbody tr:hover { background-color: rgba(249, 159, 27, .04); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(35, 31, 32, .02); }

/* --------------------------------------------------------------------------
   10. Badges, pagination, misc
   -------------------------------------------------------------------------- */
.badge {
    font-family: var(--id-font-display);
    font-weight: 600;
    letter-spacing: .03em;
    padding: .35em .6em;
    border-radius: .3rem;
}
.badge-primary, .badge-info { background-color: var(--id-orange); color: var(--id-charcoal); }
.badge-success { background-color: var(--id-success); }
.badge-warning { background-color: var(--id-warning); color: var(--id-charcoal); }
.badge-danger  { background-color: var(--id-error); }
.badge-secondary { background-color: var(--id-charcoal); color: var(--id-white); }

.page-link {
    color: var(--id-charcoal);
    border-color: rgba(35, 31, 32, .1);
}
.page-link:hover {
    color: var(--id-orange-dark);
    background-color: var(--id-off-white);
    border-color: rgba(35, 31, 32, .1);
}
.page-item.active .page-link {
    background-color: var(--id-orange);
    border-color: var(--id-orange);
    color: var(--id-charcoal);
}

/* nav-tabs / pills */
.nav-tabs .nav-link.active {
    color: var(--id-charcoal);
    border-color: rgba(35,31,32,.1) rgba(35,31,32,.1) var(--id-white);
}
.nav-tabs .nav-link {
    color: var(--id-medium-gray);
    font-family: var(--id-font-display);
    font-weight: 500;
}
.nav-tabs .nav-link:hover { color: var(--id-orange-dark); border-color: transparent; }
.nav-pills .nav-link.active {
    background-color: var(--id-orange);
    color: var(--id-charcoal);
    font-weight: 600;
}

/* Modal */
.modal-content { border: 0; border-radius: .6rem; box-shadow: 0 20px 60px rgba(35,31,32,.2); }
.modal-header  { border-bottom: 1px solid rgba(35,31,32,.06); }
.modal-footer  { border-top: 1px solid rgba(35,31,32,.06); background-color: var(--id-off-white); border-radius: 0 0 .6rem .6rem; }
.modal-title   { font-family: var(--id-font-display); color: var(--id-charcoal); font-weight: 700; }

/* Progress */
.progress { background-color: var(--id-off-white); border-radius: 1rem; height: .65rem; }
.progress-bar { background-color: var(--id-orange); }

/* List group */
.list-group-item.active {
    background-color: var(--id-orange);
    border-color: var(--id-orange);
    color: var(--id-charcoal);
}

/* Tooltips / popovers small touch */
.tooltip-inner { background-color: var(--id-charcoal); }
.bs-tooltip-top .arrow::before  { border-top-color: var(--id-charcoal); }
.bs-tooltip-right .arrow::before { border-right-color: var(--id-charcoal); }
.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--id-charcoal); }
.bs-tooltip-left .arrow::before   { border-left-color: var(--id-charcoal); }

/* --------------------------------------------------------------------------
   11. Homepage — hero + branded action cards
   -------------------------------------------------------------------------- */
.id-hero {
    position: relative;
    background: linear-gradient(135deg, var(--id-charcoal) 0%, var(--id-dark-gray) 100%);
    color: var(--id-off-white);
    padding: 4rem 1.5rem 4.5rem;
    border-radius: .75rem;
    margin: 1.5rem 0 2.5rem;
    overflow: hidden;
}
.id-hero::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    height: 180%;
    background: radial-gradient(circle, rgba(249, 159, 27, .22) 0%, rgba(249, 159, 27, 0) 65%);
    pointer-events: none;
}
.id-hero__eyebrow {
    font-family: var(--id-font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .8rem;
    color: var(--id-orange);
    margin-bottom: .75rem;
}
.id-hero__title {
    font-family: var(--id-font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    color: var(--id-white);
    line-height: 1.15;
    margin-bottom: 1rem;
    letter-spacing: -.01em;
}
.id-hero__title em { color: var(--id-orange); font-style: normal; }
.id-hero__lede {
    font-family: var(--id-font-body);
    color: var(--id-light-gray);
    font-size: 1.1rem;
    max-width: 38rem;
    margin-bottom: 1.5rem;
}
.id-hero__cta { display: inline-flex; gap: .75rem; flex-wrap: wrap; position: relative; z-index: 1; }

/* Domain search slot styled to sit on top of the hero gradient */
/* --- Modern domain search band (homepage) ----------------------------
   Full-bleed white band sitting flush against the navbar. No card chrome
   (no shadow, no radius, no top accent) — content sits inside .container
   at the standard page width. */
.id-domain-search {
    background: var(--id-white);
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(35, 31, 32, .06);
}
.id-domain-search__card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    padding: 2.25rem 0 1.75rem;
    position: relative;
}
.id-domain-search__eyebrow {
    font-family: var(--id-font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .75rem;
    color: var(--id-orange);
    margin-bottom: .35rem;
}
.id-domain-search__title {
    font-family: var(--id-font-display);
    font-weight: 700;
    color: var(--id-charcoal);
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    line-height: 1.2;
    margin: 0 0 .5rem;
    letter-spacing: -.01em;
}
.id-domain-search__title em {
    color: var(--id-orange);
    font-style: normal;
}
.id-domain-search__lede {
    font-family: var(--id-font-body);
    color: var(--id-medium-gray);
    margin: 0 0 1.5rem;
    max-width: 38rem;
}

.id-domain-search__field-wrap { margin-bottom: 1rem; }

.id-domain-search__input {
    box-shadow: 0 1px 2px rgba(35, 31, 32, .05);
    border-radius: .5rem;
    overflow: hidden;
}
.id-domain-search__input .input-group-prepend .input-group-text {
    background: var(--id-off-white);
    border: 1px solid rgba(35, 31, 32, .12);
    border-right: 0;
    color: var(--id-medium-gray);
    font-size: 1rem;
    padding: 0 1rem;
    border-radius: .5rem 0 0 .5rem;
}
.id-domain-search__field {
    border: 1px solid rgba(35, 31, 32, .12) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    height: auto !important;
    padding: .85rem 1rem !important;
    font-family: var(--id-font-body);
    font-size: 1.05rem;
    color: var(--id-charcoal);
    background: var(--id-white);
}
.id-domain-search__field:focus {
    box-shadow: none !important;
    border-color: var(--id-orange) !important;
    z-index: 2;
}
.id-domain-search__input:focus-within .input-group-text {
    border-color: var(--id-orange);
    color: var(--id-orange);
}

.id-domain-search__actions {
    display: flex;
    gap: 0;
}
.id-domain-search__cta,
.id-domain-search__transfer {
    border-radius: 0 !important;
    padding: 0 1.25rem !important;
    font-size: .9rem !important;
    white-space: nowrap;
}
.id-domain-search__cta {
    background-color: var(--id-orange) !important;
    border-color: var(--id-orange) !important;
    color: var(--id-charcoal) !important;
    font-weight: 700;
}
.id-domain-search__cta:hover,
.id-domain-search__cta:focus {
    background-color: var(--id-orange-dark) !important;
    border-color: var(--id-orange-dark) !important;
    color: var(--id-white) !important;
}
.id-domain-search__transfer {
    background-color: transparent !important;
    border: 1px solid rgba(35, 31, 32, .12) !important;
    border-left: 0 !important;
    color: var(--id-charcoal) !important;
    border-radius: 0 .5rem .5rem 0 !important;
    font-weight: 600;
}
.id-domain-search__transfer:hover,
.id-domain-search__transfer:focus {
    background-color: var(--id-charcoal) !important;
    color: var(--id-white) !important;
    border-color: var(--id-charcoal) !important;
}
/* If only one of the buttons is enabled, give it the right side radius */
.id-domain-search__actions > .id-domain-search__cta:last-child {
    border-radius: 0 .5rem .5rem 0 !important;
}

.id-domain-search__mobile-actions {
    margin-top: .75rem;
}

/* Featured TLDs row */
.id-domain-search__tlds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(35, 31, 32, .06);
}
.id-tld {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    background: var(--id-off-white);
    border-radius: .35rem;
    padding: .35rem .75rem;
    font-family: var(--id-font-body);
    font-size: .85rem;
    color: var(--id-medium-gray);
}
.id-tld__ext {
    font-family: var(--id-font-display);
    font-weight: 700;
    color: var(--id-charcoal);
    font-size: .95rem;
}
.id-tld__price {
    color: var(--id-orange-dark);
    font-weight: 600;
}
.id-domain-search__view-all {
    margin-left: auto;
    font-family: var(--id-font-display);
    font-weight: 600;
    font-size: .85rem;
    color: var(--id-orange-dark);
    text-decoration: none;
}
.id-domain-search__view-all:hover {
    color: var(--id-orange);
    text-decoration: none;
}

/* Captcha block — sit between input and TLDs, not float-right */
.id-domain-search__card .captcha-image,
.id-domain-search__card .g-recaptcha,
.id-domain-search__card .h-captcha {
    margin: .75rem 0 0;
}

@media (max-width: 575.98px) {
    .id-domain-search__card { padding: 1.75rem 0 1.25rem; }
    .id-domain-search__title { font-size: 1.35rem; }
    .id-domain-search__lede  { font-size: .95rem; margin-bottom: 1rem; }
    .id-domain-search__view-all { margin-left: 0; margin-top: .5rem; }
}

/* Legacy domain-search wrapper from default WHMCS — neutralise so the new
   card design doesn't get the old charcoal panel treatment. */
#domainSearch, .domain-search, .home-domain-search {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
}

/* Product card grid — equal-height cards, button pinned to the bottom.
   Bootstrap's .card-columns is a masonry/CSS-columns layout which produces
   uneven heights; replace it with a responsive CSS grid so each row of
   siblings is the same height and the CTA aligns across all cards. */
.card-columns.home {
    column-count: unset;
    column-gap: 0;
    display: grid;
    grid-template-columns: 1fr;     /* 1-up below md */
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .card-columns.home { grid-template-columns: repeat(2, 1fr); }   /* 2-up md */
}
@media (min-width: 992px) {
    .card-columns.home { grid-template-columns: repeat(3, 1fr); }   /* 3-up lg+ */
}
.card-columns.home .card {
    border: 0;
    border-top: 4px solid var(--id-orange);
    background-color: var(--id-white);
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;          /* grid gap handles spacing now */
}
.card-columns.home .card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;            /* card-body fills card vertically */
}
.card-columns.home .card .card-body > p {
    flex: 1 1 auto;            /* the tagline paragraph absorbs leftover space */
}
.card-columns.home .card .btn {
    margin-top: auto;          /* push CTA to the bottom of card-body */
}
.card-columns.home .card:hover { transform: translateY(-3px); }
.card-columns.home .pricing-card-title {
    font-family: var(--id-font-display);
    font-weight: 700;
    color: var(--id-charcoal);
}

/* action-icon-btns — re-skin the colored "card-accent-*" buttons to brand palette */
.action-icon-btns a[class*="card-accent-"] {
    background-color: var(--id-white) !important;
    color: var(--id-charcoal) !important;
    border: 1px solid rgba(35, 31, 32, .06);
    border-radius: .6rem;
    box-shadow: 0 1px 3px rgba(35, 31, 32, .04);
    font-family: var(--id-font-display);
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}
.action-icon-btns a[class*="card-accent-"]:hover {
    color: var(--id-orange-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(35, 31, 32, .08);
    text-decoration: none;
}
.action-icon-btns .ico-container i { color: var(--id-orange); }
.action-icon-btns a:hover .ico-container i { color: var(--id-orange-dark); }
.action-icon-btns a[class*="card-accent-midnight-blue"] .ico-container i { color: var(--id-charcoal); }
.action-icon-btns a[class*="card-accent-midnight-blue"]:hover .ico-container i { color: var(--id-orange); }

/* --------------------------------------------------------------------------
   12. Footer — multi-widget area + bottom site-footer (mirrors main site)
   -------------------------------------------------------------------------- */

/* --- Footer widgets (4-col grid) --- Mirrors insightdezign.com */
.footer-widgets {
    background-color: #111827;
    color: rgba(255, 255, 255, .7);
    font-weight: 300;
    padding: 70px 0 20px;
    margin-top: 4rem;
    border-top: 0;
    font-size: 18px;
    line-height: 1.625;
    clear: both;
}
/* Explicit color (not `inherit`) — list items in some browsers / WHMCS
   stylesheets cascade a darker default down to nested <a> tags. */
.footer-widgets a {
    color: rgba(255, 255, 255, .7);
    opacity: 1;
    text-decoration: none;
    transition: color .2s ease-in-out, text-decoration-color .2s ease-in-out;
}
.footer-widgets a:hover,
.footer-widgets a:focus {
    color: #faa018;
    opacity: 1;
    text-decoration: underline;
}

.footer-widgets ul { padding-left: 0; }

/* Each widget column */
.footer-widget-area {
    padding-left: 10px;
    margin-bottom: 40px;
}
.footer-widget-area:last-child { margin-bottom: 0; }

/* Section heading: Services / Company / Get in Touch */
.footer-widgets .widget-title {
    color: #ffffff;
    font-family: var(--id-font-display);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px;
    text-transform: none;
    letter-spacing: 0;
}

/* Menu lists */
.footer-menu { list-style: none; padding: 0; margin: 0; }
.footer-menu li { margin: 0 0 10px; padding: 0; }
.footer-menu li:last-child { margin-bottom: 0; padding-bottom: 0; }
.footer-menu a { display: inline-block; }

/* Brand block (id-footer-*) — exact specs from main site */
.id-footer-brand { display: flex; flex-direction: column; }
.id-footer-brand .id-footer-logo {
    font-family: var(--id-font-display);
    font-size: 1.5rem;        /* 24px */
    font-weight: 600;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 1rem;
}
.id-footer-brand .id-footer-logo span { color: var(--id-orange); font-weight: 600; }

.id-footer-tagline {
    color: inherit;
    line-height: 1.7;
    margin: 0 0 1.5rem;
    max-width: 22rem;
}

.id-footer-social { display: flex; gap: 1rem; }
.id-footer-social a {
    color: rgba(255, 255, 255, .7);
    opacity: 1;
    font-size: 18px;
    background: transparent;
    border: 0;
    padding: 0;
    display: inline-block;
    transition: color .2s ease;
}
.id-footer-social a:hover { color: var(--id-orange); opacity: 1; }
.id-footer-social a i { font-size: inherit; }

/* Contact block */
.id-footer-contact {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.id-footer-contact-item {
    display: flex;
    align-items: center;
}
.id-footer-contact-item i {
    color: var(--id-orange);
    font-size: 18px;
    margin-right: .75rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}
.id-footer-contact-item span,
.id-footer-contact-item a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    transition: color .2s ease;
}
.id-footer-contact-item a:hover {
    color: var(--id-orange);
    text-decoration: underline;
}

/* --- Bottom site-footer (copyright + legal nav) --- */
.footer.site-footer {
    background-color: #111827;
    color: rgba(255, 255, 255, .7);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    padding: 30px 0;
    margin-top: 0;
    border-top: 0;
}
.footer.site-footer .container {
    border-top: 1px solid #1f2937;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.footer.site-footer a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    transition: color .2s ease-in-out;
}
.footer.site-footer a:hover {
    color: var(--id-orange);
    text-decoration: underline;
}
.footer.site-footer p { margin-bottom: 0; }

.id-copyright {
    color: inherit;
    padding-top: 0;
    margin: 0;
}

.footer-secondary-menu {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 1.5;
}
.footer-secondary-menu li {
    display: inline-block;
    padding: 0;
}
.footer-secondary-menu a {
    padding: 0 10px;
    color: rgba(255, 255, 255, .7);
    opacity: 1;
    text-decoration: none;
    transition: color .2s ease;
}
.footer-secondary-menu a:hover {
    color: var(--id-orange);
    text-decoration: underline;
}

@media (min-width: 768px) {
    .footer.site-footer .container {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    .id-copyright { padding-top: 10px; }
    .footer-secondary-menu { justify-content: flex-end; }
}

@media (max-width: 575.98px) {
    .footer-widgets { padding: 40px 0 10px; }
    .footer-widget-area { margin-bottom: 35px; padding-left: 0; }
}

/* --------------------------------------------------------------------------
   13. Utility classes for use in templates
   -------------------------------------------------------------------------- */
.text-orange    { color: var(--id-orange) !important; }
.text-charcoal  { color: var(--id-charcoal) !important; }
.bg-charcoal    { background-color: var(--id-charcoal) !important; }
.bg-off-white   { background-color: var(--id-off-white) !important; }
.bg-orange-soft { background-color: rgba(249, 159, 27, .12) !important; }
.id-rule {
    width: 48px; height: 3px; background: var(--id-orange);
    border-radius: 3px; display: inline-block; margin: .25rem 0 1rem;
}
.primary-bg-color { background-color: var(--id-white) !important; }

/* --------------------------------------------------------------------------
   14. Responsive tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .id-hero { padding: 2.5rem 1.25rem 3rem; }
    .main-navbar-wrapper .nav-link { padding: .65rem 1rem; }
    .footer { padding: 2rem 0 1rem; margin-top: 2.5rem; }
}

/* --------------------------------------------------------------------------
   15. Orderform product cards (#order-standard_cart)
   These rules are duplicated in the orderform's css/custom.css. They live
   here too because the client theme's custom.css is guaranteed to load on
   every page (including /cart.php), while community reports say WHMCS
   sometimes doesn't pick up the orderform's own custom.css. !important is
   used to override the orderform's pre-compiled all.min.css which loads
   between this file and the orderform's own custom.css.
   -------------------------------------------------------------------------- */
#order-standard_cart .id-cart-header {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 1.75rem;
}
#order-standard_cart .id-cart-header h1 {
    font-family: var(--id-font-display) !important;
    font-weight: 700 !important;
    color: var(--id-charcoal) !important;
    margin-bottom: .5rem !important;
    font-size: 2rem !important;
}
#order-standard_cart .id-cart-header .id-rule {
    display: block;
    width: 56px;
    height: 3px;
    background: var(--id-orange);
    border-radius: 3px;
    margin: 0 0 1rem;
}
#order-standard_cart .id-cart-header__tagline {
    font-family: var(--id-font-body);
    color: var(--id-medium-gray);
    font-size: 1.05rem;
    margin: 0;
    max-width: 40rem;
}

#order-standard_cart .id-products { margin: 1rem 0 2.5rem; }
/* Inherit Bootstrap's default .row margins (-15px) so the product grid
   flush-aligns with cart-body's 15px padding instead of insetting 3px each
   side. */
#order-standard_cart .id-products { width: 100%; }

/* WHMCS standard_cart was designed for Bootstrap 3 (block .row) and uses
   `float: left/right; width: 25%/75%` for the sidebar/body layout. Inside
   twenty-one (Bootstrap 4, flex .row) those floats are ignored and the
   cart-body wraps to a new line. products.tpl now applies real BS4 col
   classes; null out the legacy float widths so they don't fight the cols. */
#order-standard_cart > .row > .cart-sidebar,
#order-standard_cart > .row > .cart-body {
    float: none !important;
    width: auto !important;
}

/* Horizontal card (1 per row):  [ left: name+desc+features ] [ right: price+CTA ]
   Stacks vertically at < sm. */
#order-standard_cart .id-product,
#order-standard_cart .products .product {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;       /* mobile-first: stacked */
    padding: 0 !important;
    margin: 0 !important;
    background: var(--id-white) !important;
    border: 0 !important;
    border-radius: .75rem !important;
    box-shadow: 0 2px 6px rgba(35, 31, 32, .06), 0 1px 2px rgba(35, 31, 32, .04) !important;
    overflow: hidden !important;
    transition: transform .15s ease, box-shadow .2s ease !important;
    float: none !important;
    height: auto !important;
}
/* Left orange accent bar — runs full card height */
#order-standard_cart .id-product::before,
#order-standard_cart .products .product::before {
    content: "" !important;
    position: absolute !important;
    top: 0; bottom: 0; left: 0;
    width: 4px !important;
    background: var(--id-orange) !important;
    z-index: 1;
}
#order-standard_cart .id-product:hover,
#order-standard_cart .products .product:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(35, 31, 32, .09), 0 3px 8px rgba(35, 31, 32, .05) !important;
}
#order-standard_cart .id-product--featured {
    box-shadow: 0 4px 14px rgba(249, 159, 27, .25), 0 2px 6px rgba(35, 31, 32, .06) !important;
}
#order-standard_cart .id-product--featured::before { width: 6px !important; }

#order-standard_cart .id-product__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--id-orange);
    color: var(--id-charcoal);
    font-family: var(--id-font-display);
    font-weight: 700;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .2rem .55rem;
    border-radius: .25rem;
    z-index: 2;
    line-height: 1.4;
}
#order-standard_cart .id-product__badge--bundle {
    background: var(--id-charcoal);
    color: var(--id-white);
}

/* Main content (header + description + features) */
#order-standard_cart .id-product__main {
    flex: 1 1 auto;
    min-width: 0;                              /* allow text to wrap inside flex */
    padding: 1.5rem 1.75rem 1.5rem 2rem;        /* extra left padding clears the orange bar */
    display: flex;
    flex-direction: column;
}

#order-standard_cart .id-product__header,
#order-standard_cart .products .product header {
    position: static !important;
    padding: 0 !important;
    margin: 0 0 .75rem !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    float: none !important;
}
#order-standard_cart .id-product__name,
#order-standard_cart .products .product header span {
    font-family: var(--id-font-display) !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    color: var(--id-charcoal) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    display: block !important;
    float: none !important;
}
#order-standard_cart .id-product__qty,
#order-standard_cart .products .product header .qty {
    display: inline-block !important;
    float: none !important;
    margin-top: .4rem !important;
    padding: .15rem .55rem !important;
    background: var(--id-off-white) !important;
    color: var(--id-medium-gray) !important;
    font-family: var(--id-font-body) !important;
    font-size: .8rem !important;
    font-style: normal !important;
    border-radius: .25rem !important;
}

#order-standard_cart .id-product__desc,
#order-standard_cart .products .product div.product-desc {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    font-size: .95rem !important;
    color: var(--id-dark-gray) !important;
    flex: 1 0 auto !important;
}
#order-standard_cart .id-product__lede {
    color: var(--id-medium-gray);
    margin: 0 0 .85rem;
    font-size: .92rem;
    line-height: 1.5;
}
#order-standard_cart .id-product__features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: .35rem 1.5rem;
}
#order-standard_cart .id-product__features li {
    display: flex !important;
    align-items: baseline;
    gap: .5rem;
    padding: .25rem 0 !important;
    margin: 0;
    border-bottom: 0;
    font-family: var(--id-font-body);
    color: var(--id-dark-gray);
    font-size: .9rem;
    list-style: none;
    flex: 0 1 auto;
}
#order-standard_cart .id-product__check {
    color: var(--id-orange) !important;
    font-size: .75rem;
    flex-shrink: 0;
}
#order-standard_cart .id-product__features .feature-value,
#order-standard_cart .id-product .feature-value,
#order-standard_cart .products .product span.feature-value {
    font-weight: 700 !important;
    color: var(--id-charcoal) !important;
}

/* Right action panel: price + CTA */
#order-standard_cart .id-product__footer,
#order-standard_cart .products .product footer {
    float: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 1.5rem 1.75rem !important;
    background: var(--id-off-white) !important;
    text-align: left !important;
    font-size: 1rem !important;
    border-top: 1px solid rgba(35, 31, 32, .05) !important;     /* mobile separator */
    border-left: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
}
#order-standard_cart .id-product__pricing,
#order-standard_cart .products .product div.product-pricing {
    margin: 0 !important;
}
#order-standard_cart .id-product__from {
    display: block;
    font-family: var(--id-font-body);
    font-size: .72rem;
    color: var(--id-medium-gray);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .2rem;
    font-weight: 600;
}
#order-standard_cart .id-product__price-row {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    flex-wrap: wrap;
}
#order-standard_cart .id-product__price,
#order-standard_cart .products .product div.product-pricing span.price {
    font-family: var(--id-font-display) !important;
    font-weight: 700 !important;
    font-size: 1.8rem !important;
    line-height: 1 !important;
    color: var(--id-charcoal) !important;
}
#order-standard_cart .id-product__cycle {
    font-family: var(--id-font-body);
    font-size: .9rem;
    color: var(--id-medium-gray);
}
#order-standard_cart .id-product__setup {
    display: block;
    margin-top: .4rem;
    color: var(--id-medium-gray);
    font-size: .8rem;
}

#order-standard_cart .id-product__cta,
#order-standard_cart .btn-order-now {
    background-color: var(--id-orange) !important;
    border-color: var(--id-orange) !important;
    color: var(--id-charcoal) !important;
    font-family: var(--id-font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    border-radius: .4rem !important;
    padding: .75rem 1.25rem !important;
    font-size: .9rem !important;
    width: 100% !important;
    display: inline-block !important;
    text-align: center !important;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, transform .05s ease, box-shadow .15s ease !important;
}
#order-standard_cart .id-product__cta:hover,
#order-standard_cart .id-product__cta:focus,
#order-standard_cart .btn-order-now:hover,
#order-standard_cart .btn-order-now:focus {
    background-color: var(--id-orange-dark) !important;
    border-color: var(--id-orange-dark) !important;
    color: var(--id-white) !important;
    box-shadow: 0 6px 16px rgba(249, 159, 27, .35) !important;
    text-decoration: none !important;
}
#order-standard_cart .id-product__cta:active { transform: translateY(1px); }

/* Horizontal layout from sm up: side-by-side, action panel pinned right */
@media (min-width: 576px) {
    #order-standard_cart .id-product,
    #order-standard_cart .products .product {
        flex-direction: row !important;
    }
    #order-standard_cart .id-product__footer,
    #order-standard_cart .products .product footer {
        flex: 0 0 280px !important;
        border-top: 0 !important;
        border-left: 1px solid rgba(35, 31, 32, .07) !important;
    }
}

/* Comfortable card padding at xs */
@media (max-width: 575.98px) {
    #order-standard_cart .id-product__main   { padding: 1.25rem 1.25rem 1.25rem 1.5rem !important; }
    #order-standard_cart .id-product__footer { padding: 1rem 1.25rem 1.25rem !important; }
    #order-standard_cart .id-product__price  { font-size: 1.85rem !important; }
}