/* OVERSIGNS - THUMBNAIL ASSET UPDATE - 2026-10-02
   Updated existing image references in-place rather than adding new selector patches.
   Coroplast -> Open House Coroplast Yard Sign-3.png
   PVC/Sintra -> Cobalt form PVC gallery sign-2.png
   Styrene -> Cobalt Cold Brew Styrene Sign-5.png
   Legacy 18oz/Mesh -> Game On Mesh Sports Banner-1.png
*/

/* OVERSIGNS - CONSOLIDATED ADDITIONAL CSS - 2026-09-24
   FULL REPLACEMENT for Site Header > Additional CSS Content.
   Based on the complete supplied Pasted text(5).txt.
   Existing layout rules retain their cascade order.
   Brand colors updated directly; earlier exact duplicate rules removed.
*/
:root {
  --os-cyan: #00a8e8;
  --os-cyan-dark: #007da8;
  --os-magenta: #b90070;
  --os-magenta-hover: #940058;
  --os-yellow: #ffe500;
  --os-charcoal: #171a21;
}
/* ============================================================
   SHOPRINT - CLEAN ADDITIONAL CSS BASELINE V6
   Consolidated 2026-09-22

   This file preserves the currently working native PageDNA
   workflow and removes obsolete/overlapping custom layers.

   PRESERVED:
   - Base PageDNA/SHOPRINT CSS
   - Header V2 / V3 / V5 + larger logo
   - Configurator V3 foundation
   - Configurator Size & Quantity V4
   - Billing through V2.6
   - Requestor V9 + final polish
   - Catalog lightbox/header stacking fix

   REMOVED:
   - Duplicate catalog-search cleanup block
   - Proof Confirmation Modal V1 (native proof confirmation is OFF)
   - Product Bridge V4
   - Broad Product section from Centered Product + Configurator V5
   - Broad Product Page V5.2 selectors
   - Non-working Homepage Cleanup patch

   ADDED:
   - Scoped Product Page V6 (cannot target .sw-v3 landing pages)
   - Scoped Configurator Center V6 override
   ============================================================ */

/****************************** TABLE OF CONTENTS *************************************

**** NOTE: Copy "Choose Your Job Type" category tab with html to be the first tab when copying this site over to a cloned or live site"

  CUSTOM COLOR THEME 
  CUSTOM FONT(S)
  GLOBAL
  BUTTONS
  INDEX
  LOGIN
  PROFILE
  CATALOG
  QUOTES/SIDE BY SIDE
  MAIL MERGE
  BASKET VIEW
  DELIVERY METHODS
  SHIPPING 
  BILLING
  REVIEW
  ACCEPT


  - If you are making changes here, changes may need to be made in 
  the con/responsive.css file as well

****************************************************************************************/

/****************************** CUSTOM COLOR THEME ************************************/

:root {
  /* site background header color */
  --header-bkgd-color: #ffffff;
  --header-link-bkgd-color: #ffffff;

  /* static site text header link color */
  --header-link-txt-color: #b90070;
  --header-link-txt-color-hover: #ffffff;
  --header-link-bkgd-color-hover: #b90070;
}

/********************************* CUSTOM FONT(S) *************************************/
/* NOTE: Add html font url link source to Site-Wide Appearance > Site Header > Site Meta Data > Other Metdata */

:root {
  --custom-font: "Arial", sans-serif;
}


/************************************** GLOBAL ****************************************/

/*** Remove sr_ error text from Basket, Review, Accept pages ***/
.previewcell pre {
  display: none;
}

/*** make Admin Menu Bar opaque to see the logo ***/
.menu-knob-bar {
  opacity: .8;
}

/*** Sometimes on sites, you'll see the catalog move down, then back up, this will load cleaner ***/
.catalog form {
  overflow: visible !important;
}

.main {
  margin-top: 30px;
  max-width: 800px !important;
  margin: 20px auto 0 !important;
}

.imprint {
  max-width: 1024px !important;
}

.select-items {
    max-width: none !important;
}

/*--- CANCEL LINK ---*/
#footer\.footercanceltext {
  padding-right: 15px;
}

.pageinstructions {
    width: 80%;
    margin: 0 auto !important;
    text-align: center;
}

/*---Add border to preview image on Basket, Review, Accept pages ---*/
.previewcell img {
  border: 1px solid #ccc !important;  
}

/*** HEADER ***/
h2.pagetitle, .pagetitle{
  font-size: 16px;
  color: #333;
  font-weight: bold;
  text-shadow: none;
}

#header-wrapper {
  position: relative;
  background-color: var(--header-bkgd-color);
  border-bottom: 1px solid #000;
  margin-bottom: 250px; /*Create space for static-header picture*/
  height: 100px;
}


#header_logo > img.no_mobile {
    padding: 20px;
    max-height: 140px;
    max-width: 270px;
}

#header-links-container {
  background-color: var(--header-link-bkgd-color);
  font-family: var(--custom-font);
  font-weight: 400;
  box-shadow: 0 8px 8px -5px #555;
  display: none;
}

.header-links{
  float: left;
  padding-left: 20px !important;
  font-family: var(--custom-font);
  text-transform: uppercase;
  font-size: 18px;
  padding: 6px 0;
  text-decoration: none;
}

.header-links a{
  color: var(--header-link-txt-color);
  padding: 6px 10px;
  text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.header-links a:hover {
  color: var(--header-link-txt-color-hover);
  background-color: var(--header-link-bkgd-color-hover);
  padding: 6px 10px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#logout_userid {
  color: var(--header-link-txt-color);
  padding: 0 15px;
}


/*** ----------- start: Nav Menu ----------- ***/
:root {
  --size: 35px;       /* button size */
  --bar-h: 4px;       /* bar thickness */
  --gap: 6px;        /* space between bars */
  --speed: 0.35s;     /* animation speed */
  --fg: #000;      /* bar color */
  --accent: #000;  /* color when active */
  --bg: #fff;      /* dropdown menu background */
  --navbdr: #ffe500;   /* dropdown border color */
  --navhvr: #ffe500;   /* dropdown hover color */
}


/* Hamburger wrapper */
.burger {
  position: absolute;
  right: 32px;
  top: 47px;
  width: var(--size);
  height: var(--size);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.nav-menu-text {
  color: var(--fg);
  font-size: 11px;
}

/* hidden checkbox for toggling */
.burger input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

/* the three solid bars */
.bars {
  position: relative;
  width: 36px;
  height: calc(var(--bar-h)*3 + var(--gap)*2);
}
.bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--bar-h);
  background: var(--fg);
  border-radius: 2px;
  transition: transform var(--speed) ease, top var(--speed) ease,
              opacity var(--speed) ease, background var(--speed) ease;
}
.bar:nth-child(1) { top: 0; }
.bar:nth-child(2) { top: calc(var(--gap) + var(--bar-h)); }
.bar:nth-child(3) { top: calc((var(--gap) + var(--bar-h)) * 2); }

/* transform to X */
.burger input:checked ~ .bars .bar:nth-child(1) {
  top: calc(var(--gap) + var(--bar-h));
  transform: rotate(45deg);
  background: var(--accent);
}
.burger input:checked ~ .bars .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.burger input:checked ~ .bars .bar:nth-child(3) {
  top: calc(var(--gap) + var(--bar-h));
  transform: rotate(-45deg);
  background: var(--accent);
}

/* dropdown menu styling */
nav {
  position: absolute;
  top: 42px;
  right: -2px;
  background: var(--bg);
  border: 1px solid var(--navbdr);
  /*border-radius: 8px;*/
  overflow: hidden;
  max-height: 0;
  width: 165px;
  opacity: 0;
  transform: translateY(-10px);
  transition: max-height var(--speed) ease, opacity var(--speed) ease,
              transform var(--speed) ease;
}
.burger input:checked ~ nav {
  max-height: 250px;
  opacity: 1;
  transform: translateY(0);
}
nav a {
  font-weight: 400;
  display: block;
  padding: 14px 20px;
  /*color: var(--fg) !important;*/
  text-decoration: none;
  transition: background 0.2s;
}
nav a:hover {
  color: #FFF;
  font-weight: 600;
  background-color: var(--navhvr);
  /*background: color-mix(in oklab, var(--accent), #000 70%);*/
}
/*** end: Nav Menu ***/


/*---- SHOPPING BASKET: upper-right corner. Turned off Shopping Basket in site header ----*/
.fa-shopping-basket:before {
    content: " " !important;
}

#mobile_cart .item_count {
   float: right;
   padding-left: 5px;
   font-size: 28px;
}

#mobile_cart {
  position: absolute;
  top: 40px !important;
  right: 100px !important;
  display: inline !important;
}

#mobile_cart .fa-shopping-basket {
    font-size: 46px;
}


/*--- Static Header Image ---*/
.static-header-pic {
  position: absolute;
  top: 100px;
  left: 0;
    width: 100%;
    height: 220px;
    /* Old legacy MAIN HEADER BANNER removed to prevent page-transition flash.
       Category-specific hero rules later in this file supply the correct banner. */
    background-image: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    z-index: -1;
}

/************************************ BUTTONS *****************************************/

.main .buttonsbar button {
  margin-bottom: 20px;
}

.button:hover .button .span:hover, .button .span {
  color: #000000;
}

/*arrow*/
button:hover span.button_arrow_right {
  color: #000000;
}

/************************************** INDEX *****************************************/

.index-container {
  margin: 20px 20px;
  padding-bottom: 20px;
  font-size: 14px;
}

/************************************* LOGIN ******************************************/

.login, .login .message-block {
    text-align: center !important;
}

/************************************** PROFILE ****************************************/

.profile-selection input#search {width: 159px;}

.profile > form {
  border: 1px solid #b90070;
  padding-bottom: 10px;
}
.profile .profile-container {
  background-color: #b90070;
}

.profile .profile-container .top_of_profile_title {
  color: #000;
  padding-left: 14px;
}
.profile .profile-container #submit_edit_profile {
  margin: 0px 14px 0px auto;
}
.profile .profile-container .top_of_profile_buttons {
  padding-right: 14px;
}

/************************************ CATALOG ****************************************/

.catalog-tab-blurb {
   padding: 0px !important;
}

/*Image hover*/
 .deep_links img:hover {
    box-shadow: 0 20px 38px rgba(0,0,0,.16)!important;
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    transition-duration: .45s;
} 


/** Max width - Sets max width for keeping rows of 4 icons - This is relative and may need to be adjusted depending on screen size, desired icon amount, etc.. **/
/** Min width - Sets min width to maintain correct row look when switching to responsive layout (i.e. 2 rows of 4 icons) **/
#deep_link_container {
  display: flex;
  flex-wrap: wrap;
  max-width: 95%;
  margin: 0 auto;
  margin-top: 35px;
}

/*** Padding Used to keep space between tabs when they wrap ***/
/***Margin maintains even space around icons as they respond to screen size***/
.deep_links_holder {
  padding-bottom: 15px;
  margin: 0 auto;
  width: 240px;
  text-align: center;
}

.deep_links img {
  max-width: 100%
;}
 
#newscopy-wrapper {
  justify-content: center;
  margin: 0 auto;
}

.ind_txt {
  font-family: var(--custom-font);
  font-size: 24px;
  font-weight: 600;
  color: var(--tab-blurb-text-color);
  padding: 10px 0 0 0;
  text-align: center;
  margin: 0 auto !important;
}

.ind_para {
  font-family: var(--custom-font);
  color: var(--tab-blurb-text-color);
  margin: 0 !important;
}

.select-items .vertical-shell {
  margin-left: 10px!important;
}

.select-items .image-container img {
  margin: 10px 0;
}

.select-items .longname *, .select-items .longname * {
  font-size: 14px;
}

.select-items .pagetitle {
  margin-left: 10px !important;
}

.select-items .buttonsbar button {
  margin-bottom: 20px;
}

#submit_catalog_add {
  margin-top: 5px;
}

#copy4 {
  display: none;
}

.bundle_subitem_preview img {
  border: 1px solid gray;
}

.qtyspec_label {
  margin-left: 5px !important;
}

.responsive_tabs-shell .after {
  margin-top: 20px !important;
}

#basket-list-title {
  text-align: center;
  font-size: 20px;
  color: #333;
  border-bottom: 2px solid #333;
  margin-bottom: 10px;
}

.basket-list-item {
    margin-bottom: 10px !important;
}

.basket-list-item .button {
    padding: 1px 1px 1px 5px !important;
}

/* BUNDLE */
.detail_text_wrapper {
    width: 29%  !important;
}

.detail_tagcheck_wrapper {
    width: 32% !important;
    margin-top: 0px !important;
}

.bundle-qty-selection {
    position: inherit !important;
}

.bundle-qty-selection .add-to-basket-qty-select {
    text-align: center;
    padding-top: 20px;
}

.multi_preview a {
    margin-right:5px;
}

.multi_preview a img {
    margin-bottom: 5px;
}

.bundle_subitem_longname {
    margin-bottom: 6px !important;
    font-weight: bold;
    font-size: 15px;
    margin-left: 25px !important;
}

#d_tag_check input[type="text"] {
    border-radius: 5px !important;
    text-align: center;
    padding: 5px;
    border-style: groove;
    font-weight: bold;
    width: 100px !important;
}

.bundle_subitem_input {
    position: relative;
    top: 0px;
    float: left;
}


.bundle_please_note {
    color: red;
    font-size: 15px;
}

.bundle_subitem {
    width: 90% !important;
    margin-left: 50px !important;
}

/******************************** QUOTES/SIDE BY SIDE *********************************/

.buttonsbar, .form-body {
  border-radius: 0px !important;
}

#estimate-item-container {
  padding: 20px 0;
}

.submit.center button {
  margin-bottom: 20px !important;
}

#all_options, #all_options_container {
  border: none !important;
}

/* REMOVE BOTTOM BORDER IN SIDE BY SIDE */
div.field-container {
    border-bottom: 0px !important;
}

.fileSpec {
  position: relative;
  left: 10px;
}

.form-subheader {
  text-align: left !important;
}

#approval_checkbox_group input * {
  width: 100px;
  height: auto;
}

.uploadIcon {
  margin-top: 5px !important;
}

div#confirm_container button {
  margin-top: 20px !important;
}

.checkbox-table {
  margin-left: 0 !important;
}


/*********************************** MAIL MERGE ****************************************/


.mail-merge header {
  margin-left: 25px;
}

.mail-merge nav.submit {
  padding-bottom: 30px !important;
}

#listimp-s3-section-5 div {
  margin-left: 25px;
}

div.error {
  margin-bottom: 10px;
}

#ml-handle-link {
  margin-left: 25px;
}

.personal-list-actions {
  text-align: center !important;
}

form[name="clientlist"] div:last-child {
  padding: 20px 20px !important;
}

/********************************** BASKET VIEW ***************************************/

.basket-view td.previewcell {
  background-color: transparent !important;
}

.basket-view .buttonsbar button {
  margin-bottom: 20px;
}

.basket-view table:not(.items-table) {
  width: auto;
  margin: 0 auto;
}

/********************************* DELIVERY METHODS ***********************************/

tr.dpt--headerRow, tr.dpt--headerRow span, tr.dpt--headerRow *, tr.item_row * {
  font-size: 14px !important;
}

#i-dropship {
  position: relative;
  font-size: 14px;
  color: #00000A;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-weight: normal;
  padding: 4px 10px 4px 10px;
  border: 1px solid #CCCCCC;
  -moz-border-radius: 0em;
  -webkit-border-radius: 0em;
  border-radius: 0em;
  background: #FFFFFF;
  background: linear-gradient(#FFFFFF, #CCCCCC);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC));
  background: -moz-linear-gradient(top, #FFFFFF, #CCCCCC);
  background: -ms-linear-gradient(#FFFFFF, #CCCCCC);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#FFFFFF", endColorstr="#CCCCCC");
  -pie-background: linear-gradient(#FFFFFF, #CCCCCC);
  behavior: url(/hub/css/PIE.htc);
}

.mail-merge .buttonsbar, .mail-merge .buttonsbar a, .mail-merge .buttonsbar a:link, .mail-merge .buttonsbar * {
  text-decoration: none !important;
  text-align: center !important;
}

.mail-merge .buttonsbar {
  margin-bottom: 10px;
}

tr.dpt--finalizeRow td.dpt--status {
  border-bottom: 0px !important;}

/*********************************** SHIPPING *****************************************/

.mail-merge .pagetitle {
  margin-left: 15px !important;
}

#see_shipping_methods {
  position: relative;
  font-size: 14px;
  color: #00000A;
  font-family: var(--custom-font), "Lucida Sans", "Trebuchet MS", "Arial";
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-weight: normal;
  padding: 4px 10px 4px 10px;
  border: 1px solid #CCCCCC;
  -moz-border-radius: 0em;
  -webkit-border-radius: 0em;
  border-radius: 0em;
  background: #FFFFFF;
  background: linear-gradient(#FFFFFF, #CCCCCC);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC));
  background: -moz-linear-gradient(top, #FFFFFF, #CCCCCC);
  background: -ms-linear-gradient(#FFFFFF, #CCCCCC);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#FFFFFF", endColorstr="#CCCCCC");
  -pie-background: linear-gradient(#FFFFFF, #CCCCCC);
  behavior: url(/hub/css/PIE.htc);
  max-width: 150px;
  text-shadow: none!important;
}

.mail-merge .field-note {
  display: none !important;
}

.mail-merge #throbber {
  margin-bottom: 20px !important;
}

.mail-merge .field-container * {
  color: #333333 !important;
}

label[for="comments"] {
  position: relative;
  bottom: 12px;
}

.shipping .form-body {
  width: 80%;
}

form[action="shiptrack.cgi"] {
  padding-bottom: 25px!important;
}

/************************************ BILLING *****************************************/

.billing .pagetitle {
  margin-left: 15px !important;
}

.billing .buttonsbar button {
  margin-bottom: 20px;
}

.billing * {
  font-size: 14px !important;
}

.billing .form-body {
  width: 740px;
  margin-top: 0;
  margin-bottom: 0;
}

.billing .form-body .input table {
    margin-left: 0px;
}

/************************************* REVIEW *****************************************/

.review .buttonsbar button {
  margin-bottom: 20px;
}

.review .pageinstructions {
  font-size: 14px;
}

.review * {
  font-size: 14px !important;
}

.review td.data {
  background-color: #eeeeee;
}

.review div {
  margin: 0 10px;
}

.pagetitle {
  margin-left: 10px;
}

.main p {
  margin-left: 10px;
}

.accept-proofs table {
  width: 80%;
  margin-bottom: 20px;
}

/************************************* ACCEPT ******************************************/

.done div *{
  font-size: 14px;
}

.done td.data{
  background-color: #eeeeee;
}

.done .accept-proofs .form-body{
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 30px;
  width: 80%;
}

.done div {
  margin: 0 10px;
}

.catalog--container .pagetitle {
  margin-top: 10px !important;
}

.accept-proofs  b{
  margin-left: 20px;
  margin-top: 10px;
  line-height: 30px;
}

.previewcell a span {
  position: relative;
  font-size: 14px;
  color: #00000A;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-weight: normal;
  padding: 4px 10px 4px 10px;
  border: 1px solid #CCCCCC;
  -moz-border-radius: 0em;
  -webkit-border-radius: 0em;
  border-radius: 0em;
  background: #FFFFFF;
  background: linear-gradient(#FFFFFF, #CCCCCC);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC));
  background: -moz-linear-gradient(top, #FFFFFF, #CCCCCC);
  background: -ms-linear-gradient(#FFFFFF, #CCCCCC);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#FFFFFF", endColorstr="#CCCCCC");
  -pie-background: linear-gradient(#FFFFFF, #CCCCCC);
  behavior: url(/hub/css/PIE.htc);
  margin: 5px 20px;
}

.previewcell a {
  text-decoration: none;
  margin: 0px auto;
  line-height: 50px;
  text-align: center;
}

.previewcell *{
  text-align: center !important;
}

/************************************* Update buttons and background on quotes config ******************************************/

.form-body td.label {
    background-color: #ffe500;
    text-transform: uppercase;
}
  
tr#total_block {
    border-top: #000000;
    border-top-style: solid;
    border-top-width: .5px;
}

h3#curr_item_name {
    font-size: xx-large;
    text-transform: uppercase;
}

.responsive-longname {
    font-size: large;
}

label.label {
    background-color: #ffe500;
    font-size: large;
    text-transform: uppercase;
    padding-left: 2px;
}

.pagetitle {
    font-size: x-large;
    text-transform: uppercase;
}

img#curr_item_image {
    width: 400px;
}

td#all_options_container {
    padding-top: 42px;
}


/* ============================================================
   SHOPRINT HEADER - MOCKUP MATCH V2
   DESKTOP ONLY
   ============================================================

   WHERE TO PASTE:
   Visual Settings > Site Header > Additional CSS Content

   IMPORTANT:
   - Paste at the VERY BOTTOM.
   - This block only runs at 1025px and wider.
   - Your existing mobile fixes remain untouched.
   - Remove the failed SHOPRINT DESKTOP HEADER V1 HTML/JS
     from the ADHESIVE Tab Blurb before testing this.
   ============================================================ */

@media only screen and (min-width: 1025px) {

  :root {
    --shop-header-height: 72px;
    --shop-orange: #b90070;
    --shop-orange-dark: #940058;
    --shop-text: #181818;
    --shop-border: #e3e5e8;
  }


  /* =========================================================
     HEADER FOUNDATION
     ========================================================= */

  #header-wrapper {
    position: relative !important;
    z-index: 5000 !important;

    width: 100% !important;

    background: #ffffff !important;
  }

  #header-wrapper > table.header {
    position: relative !important;

    width: 100% !important;
    height: var(--shop-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    border: 0 !important;
    border-bottom: 1px solid var(--shop-border) !important;

    box-shadow: 0 1px 6px rgba(0,0,0,.04) !important;

    z-index: 100 !important;
  }

  #header-wrapper > table.header > tbody > tr {
    height: var(--shop-header-height) !important;
  }


  /* =========================================================
     LOGO
     ========================================================= */

  #header_logo {
    width: 245px !important;
    min-width: 245px !important;
    height: var(--shop-header-height) !important;

    padding: 0 20px 0 48px !important;

    vertical-align: middle !important;

    background: #ffffff !important;
  }

  #header_logo img.no_mobile {
    display: block !important;

    width: 188px !important;
    max-width: 188px !important;
    height: auto !important;

    margin: 0 !important;
  }

  #header_logo img.no_desktop {
    display: none !important;
  }


  /* =========================================================
     HEADER TITLE CELL
     Keep the existing PageDNA hero intact below the header.
     ========================================================= */

  #header_title {
    position: relative !important;

    height: var(--shop-header-height) !important;

    padding: 0 !important;
    margin: 0 !important;

    vertical-align: top !important;

    background: #ffffff !important;
  }


  /* =========================================================
     CATEGORY NAV
     Uses the ADHESIVE / BOARDS / BANNER HTML already present
     in each root Tab Blurb.
     ========================================================= */

  html body .catalog-header-menu {
    position: absolute !important;

    top: 0 !important;
    left: 245px !important;
    right: auto !important;

    transform: none !important;

    display: block !important;

    width: auto !important;
    height: var(--shop-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    z-index: 5200 !important;
  }

  html body .catalog-header-menu .top-menu {
    display: flex !important;
    align-items: stretch !important;

    height: var(--shop-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
  }

  html body .catalog-header-menu .top-menu li {
    display: flex !important;

    height: var(--shop-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  html body .catalog-header-menu .top-menu a {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: var(--shop-header-height) !important;

    margin: 0 !important;
    padding: 0 18px !important;

    background: transparent !important;
    background-image: none !important;

    color: #202020 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    text-decoration: none !important;

    transition: color .18s ease !important;
  }

  html body .catalog-header-menu .top-menu a:hover {
    background: transparent !important;

    color: var(--os-cyan-dark) !important;
  }

  html body .catalog-header-menu .top-menu a.active {
    background: transparent !important;

    color: var(--os-cyan-dark) !important;

    font-weight: 700 !important;
  }

  html body .catalog-header-menu .top-menu a::after {
    content: "";

    position: absolute;

    right: 18px;
    bottom: 10px;
    left: 18px;

    height: 3px;

    border-radius: 3px;

    background: transparent;

    transform: scaleX(.25);

    opacity: 0;

    transition:
      transform .18s ease,
      opacity .18s ease,
      background-color .18s ease;
  }

  html body .catalog-header-menu .top-menu a:hover::after,
  html body .catalog-header-menu .top-menu a.active::after {
    background: var(--os-cyan);

    transform: scaleX(1);

    opacity: 1;
  }

  html body .catalog-header-menu-rline {
    display: none !important;
  }


  /* =========================================================
     NATIVE PAGEDNA SEARCH
     The root Tab Blurbs currently hide .responsive_tabs-shell.
     We re-enable ONLY the search wrapper and hide its tab/basket
     content so PageDNA's real search functionality is preserved.
     ========================================================= */

  html body .main .catalog .responsive_tabs-shell {
    display: block !important;

    position: static !important;

    float: none !important;

    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    border: 0 !important;

    background: transparent !important;
  }

  html body .main .catalog .responsive_tabs-shell > .before {
    display: block !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }

  html body .main .catalog .responsive_tabs-shell .responsive_tabs,
  html body .main .catalog .responsive_tabs-shell > .after,
  html body .main .catalog .responsive_tabs-shell #navTabs {
    display: none !important;
  }

  html body .main .catalog .item-search-block {
    position: absolute !important;

    top: 14px !important;
    left: 50% !important;

    transform: translateX(-23%) !important;

    display: flex !important;
    align-items: center !important;

    width: min(34vw, 500px) !important;
    min-width: 310px !important;
    height: 43px !important;

    margin: 0 !important;
    padding: 0 8px !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid #d9dce1 !important;
    border-radius: 24px !important;

    box-shadow: none !important;

    z-index: 5300 !important;

    transition:
      border-color .18s ease,
      box-shadow .18s ease !important;
  }

  html body .main .catalog .item-search-block:focus-within {
    border-color: var(--shop-orange) !important;

    box-shadow:
      0 0 0 3px rgba(185, 0, 112,.12) !important;
  }

  html body .main .catalog .item-search-block input#searchfield_input {
    order: 2 !important;
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 10px 0 3px !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    outline: 0 !important;

    color: #202020 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 12px !important;
  }

  html body .main .catalog .item-search-block input#searchfield_input::placeholder {
    color: #8b9097 !important;

    opacity: 1 !important;
  }

  html body .main .catalog .item-search-block button#submit_catalog_search {
    order: 1 !important;
    flex: 0 0 34px !important;

    position: relative !important;

    width: 34px !important;
    min-width: 34px !important;
    height: 40px !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    color: #555b62 !important;

    font-size: 0 !important;

    cursor: pointer !important;
  }

  html body .main .catalog .item-search-block button#submit_catalog_search::before {
    content: " ";

    font-family: FontAwesome !important;
    font-size: 15px !important;
    font-weight: normal !important;

    color: #555b62 !important;
  }

  html body .main .catalog .item-search-block button#submit_catalog_search:hover::before {
    color: var(--shop-orange) !important;
  }


  /* =========================================================
     ACCOUNT
     Reuse the real "My Profile" link already generated by PageDNA.
     ========================================================= */

  #header-links-container {
    position: absolute !important;

    top: 0 !important;
    right: 167px !important;

    display: table !important;

    width: 105px !important;
    height: var(--shop-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    z-index: 5350 !important;
  }

  #header-links-container tr,
  #header-links-container td.header-links {
    display: block !important;

    width: 100% !important;
    height: var(--shop-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    text-align: left !important;
  }

  #header-links-container .header-links > a {
    display: none !important;
  }

  #header-links-container .header-links > a:nth-of-type(2) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 105px !important;
    height: var(--shop-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    color: transparent !important;

    font-size: 0 !important;

    text-decoration: none !important;
  }

  #header-links-container .header-links > a:nth-of-type(2)::before {
    content: " ";

    margin-right: 8px;

    font-family: FontAwesome !important;
    font-size: 18px !important;
    font-weight: normal !important;

    color: #151515 !important;
  }

  #header-links-container .header-links > a:nth-of-type(2)::after {
    content: "Account   ";

    font-family:
      "Open Sans",
      FontAwesome,
      Arial,
      sans-serif !important;

    font-size: 11px !important;
    font-weight: 600 !important;

    color: #151515 !important;

    white-space: pre !important;
  }

  #header-links-container .header-links > a:nth-of-type(2):hover::before,
  #header-links-container .header-links > a:nth-of-type(2):hover::after {
    color: var(--shop-orange) !important;
  }


  /* =========================================================
     SHOPPING CART
     Reuse PageDNA's real mobile cart/count on desktop.
     ========================================================= */

  #mobile_cart {
    position: absolute !important;

    top: 13px !important;
    right: 105px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 52px !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #111111 !important;

    text-decoration: none !important;

    z-index: 5400 !important;
  }

  #mobile_cart .fa-shopping-basket {
    position: static !important;

    margin: 0 !important;

    color: #111111 !important;

    font-size: 25px !important;
  }

  #mobile_cart .item_count {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 20px !important;
    height: 20px !important;

    padding: 0 5px !important;

    border-radius: 10px !important;

    background: var(--shop-orange) !important;

    color: #ffffff !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  #mobile_cart:hover .fa-shopping-basket {
    color: var(--shop-orange) !important;
  }


  /* =========================================================
     HAMBURGER / MENU
     Keep PageDNA's existing checkbox/nav functionality.
     ========================================================= */

  #header_title .burger {
    position: absolute !important;

    top: 10px !important;
    right: 18px !important;

    display: grid !important;
    grid-template-columns: 27px auto !important;
    align-items: center !important;
    column-gap: 8px !important;

    width: 76px !important;
    height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    cursor: pointer !important;

    z-index: 5450 !important;
  }

  #header_title .burger > input[type="checkbox"] {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    opacity: 0 !important;

    cursor: pointer !important;

    z-index: 10 !important;
  }

  #header_title .burger .bars {
    grid-column: 1 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 5px !important;

    width: 26px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #header_title .burger .bar {
    display: block !important;

    width: 26px !important;
    height: 2px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 2px !important;

    background: #111111 !important;
  }

  #header_title .burger .nav-menu-text {
    grid-column: 2 !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #151515 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  #header_title .burger nav {
    position: absolute !important;

    top: 58px !important;
    right: 0 !important;
    left: auto !important;

    display: none !important;

    width: 220px !important;

    margin: 0 !important;
    padding: 7px !important;

    background: #ffffff !important;

    border: 1px solid #e4e4e4 !important;
    border-radius: 10px !important;

    box-shadow: 0 14px 34px rgba(0,0,0,.15) !important;

    text-align: left !important;

    z-index: 5500 !important;
  }

  #header_title .burger > input[type="checkbox"]:checked ~ nav {
    display: block !important;
  }

  #header_title .burger nav a {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 11px 12px !important;

    border-radius: 7px !important;

    background: #ffffff !important;

    color: #222222 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;

    text-align: left !important;
    text-decoration: none !important;
  }

  #header_title .burger nav a:hover {
    background: #fff5fb !important;

    color: var(--shop-orange) !important;
  }


  /* =========================================================
     REMOVE UNUSED HEADER DECORATION
     ========================================================= */

  #red_header_bar {
    display: none !important;
  }


  /* =========================================================
     SMALLER DESKTOP / LAPTOP
     ========================================================= */

  @media only screen and (max-width: 1250px) {

    #header_logo {
      width: 215px !important;
      min-width: 215px !important;

      padding-left: 28px !important;
    }

    #header_logo img.no_mobile {
      width: 168px !important;
      max-width: 168px !important;
    }

    html body .catalog-header-menu {
      left: 215px !important;
    }

    html body .catalog-header-menu .top-menu a {
      padding-right: 13px !important;
      padding-left: 13px !important;

      font-size: 11px !important;
    }

    html body .main .catalog .item-search-block {
      left: 49% !important;

      width: min(31vw, 410px) !important;
      min-width: 260px !important;

      transform: translateX(-18%) !important;
    }

    #header-links-container {
      right: 155px !important;

      width: 92px !important;
    }

    #header-links-container .header-links > a:nth-of-type(2) {
      width: 92px !important;
    }

    #mobile_cart {
      right: 95px !important;
    }

    #header_title .burger {
      right: 12px !important;

      width: 70px !important;
    }
  }

}

/* ============================================================
   SHOPRINT HEADER - MOCKUP POLISH V3
   APPEND AFTER HEADER MOCKUP V2
   Additional CSS Content
   ============================================================ */

@media only screen and (min-width: 1025px) {

  /* =========================================================
     1. FIX THE BIG WHITE BLOCK / RESTORE FULL-WIDTH HERO

     PageDNA places .static-header-pic inside #header_title.
     Collapse the logo table cell so #header_title can use the
     entire viewport, then position the logo visually on top.
     ========================================================= */

  #header_logo {
    position: relative !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;

    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    background: transparent !important;
  }

  #header_logo img.no_mobile {
    position: absolute !important;

    top: 21px !important;
    left: 48px !important;

    z-index: 5600 !important;

    display: block !important;

    width: 188px !important;
    max-width: 188px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #header_title {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
  }

  #header_title .static-header-pic {
    width: 100% !important;
    max-width: none !important;

    margin-right: 0 !important;
    margin-left: 0 !important;
  }


  /* =========================================================
     2. CLEANER HEADER BASE
     ========================================================= */

  #header-wrapper > table.header {
    background: #ffffff !important;

    border-bottom: 1px solid #e7e7e7 !important;

    box-shadow: none !important;
  }


  /* =========================================================
     3. NAV - MATCH MOCKUP MORE CLOSELY
     ========================================================= */

  html body .catalog-header-menu {
    left: 245px !important;
  }

  html body .catalog-header-menu .top-menu {
    gap: 6px !important;
  }

  html body .catalog-header-menu .top-menu a {
    padding-right: 15px !important;
    padding-left: 15px !important;

    font-size: 11px !important;
    font-weight: 600 !important;

    letter-spacing: .01em !important;
  }

  html body .catalog-header-menu .top-menu a::after {
    right: 15px !important;
    bottom: 10px !important;
    left: 15px !important;

    height: 3px !important;
  }


  /* =========================================================
     4. SEARCH - MATCH MOCKUP PLACEHOLDER
     Native PageDNA placeholder remains in the HTML, but is
     visually replaced with the mockup wording.
     ========================================================= */

  html body .main .catalog .item-search-block {
    left: 50% !important;

    width: min(35vw, 520px) !important;
    min-width: 330px !important;

    transform: translateX(-28%) !important;

    padding-right: 12px !important;
    padding-left: 7px !important;

    border-color: #d8dce1 !important;

    box-shadow: none !important;
  }

  html body .main .catalog .item-search-block input#searchfield_input {
    position: relative !important;

    z-index: 2 !important;

    background: transparent !important;
  }

  html body .main .catalog .item-search-block input#searchfield_input::placeholder {
    color: transparent !important;
  }

  html body .main .catalog .item-search-block::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 48px;

    z-index: 1;

    transform: translateY(-50%);

    max-width: calc(100% - 70px);

    overflow: hidden;

    color: #8a8f96;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;

    line-height: 1;

    white-space: nowrap;
    text-overflow: ellipsis;

    pointer-events: none;
  }

  html body .main .catalog .item-search-block:has(#searchfield_input:placeholder-shown)::after {
    content: "Search products, materials, or applications...";
  }

  html body .main .catalog .item-search-block:has(#searchfield_input:not(:placeholder-shown))::after {
    content: "";
  }


  /* =========================================================
     5. ACCOUNT - REMOVE THE FLOATING WHITE CARD LOOK
     ========================================================= */

  #header-links-container {
    top: 0 !important;
    right: 174px !important;

    width: 112px !important;

    background: transparent !important;

    border: 0 !important;

    border-collapse: collapse !important;

    box-shadow: none !important;

    filter: none !important;
  }

  #header-links-container tr,
  #header-links-container td.header-links {
    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    filter: none !important;
  }

  #header-links-container .header-links > a:nth-of-type(2) {
    width: 112px !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    text-transform: none !important;
  }

  #header-links-container .header-links > a:nth-of-type(2)::before {
    margin-right: 7px !important;

    font-size: 17px !important;
  }

  #header-links-container .header-links > a:nth-of-type(2)::after {
    content: "Account   " !important;

    font-size: 11px !important;

    text-transform: none !important;
  }


  /* =========================================================
     6. CART - GIVE IT THE SAME BREATHING ROOM AS MOCKUP
     ========================================================= */

  #mobile_cart {
    top: 13px !important;
    right: 111px !important;

    width: 48px !important;
  }

  #mobile_cart .fa-shopping-basket {
    font-size: 23px !important;
  }

  #mobile_cart .item_count {
    top: 1px !important;
    right: -1px !important;

    min-width: 19px !important;
    height: 19px !important;

    font-size: 10px !important;
  }


  /* =========================================================
     7. MENU - CLEANER MOCKUP SPACING
     ========================================================= */

  #header_title .burger {
    top: 10px !important;
    right: 24px !important;

    grid-template-columns: 26px auto !important;

    width: 76px !important;
  }

  #header_title .burger .bars {
    width: 25px !important;
  }

  #header_title .burger .bar {
    width: 25px !important;
  }

  #header_title .burger .nav-menu-text {
    font-size: 11px !important;

    text-transform: none !important;
  }


  /* =========================================================
     8. SMALLER DESKTOPS
     ========================================================= */

  @media only screen and (max-width: 1250px) {

    #header_logo img.no_mobile {
      top: 23px !important;
      left: 28px !important;

      width: 166px !important;
      max-width: 166px !important;
    }

    html body .catalog-header-menu {
      left: 205px !important;
    }

    html body .catalog-header-menu .top-menu a {
      padding-right: 11px !important;
      padding-left: 11px !important;

      font-size: 10px !important;
    }

    html body .main .catalog .item-search-block {
      width: min(31vw, 410px) !important;
      min-width: 260px !important;

      transform: translateX(-20%) !important;
    }

    #header-links-container {
      right: 162px !important;

      width: 98px !important;
    }

    #header-links-container .header-links > a:nth-of-type(2) {
      width: 98px !important;
    }

    #mobile_cart {
      right: 103px !important;
    }

    #header_title .burger {
      right: 16px !important;

      width: 70px !important;
    }
  }

}

/* ============================================================
   SHOPRINT HEADER - V5 FORCE OVERRIDE
   Fixes:
   1. SHOPRINT logo becomes a REAL Home link (CSS-only)
   2. Larger ADHESIVE / BOARDS / BANNER text
   3. Account perfectly aligns with Cart + Menu

   PASTE AT THE VERY BOTTOM OF:
   Site Header > Additional CSS Content
   ============================================================ */

@media only screen and (min-width: 1025px) {

  /* =========================================================
     CATEGORY NAV - STRONGER + MORE READABLE
     ========================================================= */

  html body div.catalog-header-menu > ul.top-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 72px !important;

    margin: 0 !important;
    padding: 0 19px !important;

    background-color: transparent !important;
    background-image: none !important;

    color: #161616 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    letter-spacing: .01em !important;

    text-decoration: none !important;
  }

  html body div.catalog-header-menu > ul.top-menu > li > a:hover,
  html body div.catalog-header-menu > ul.top-menu > li > a.active {
    color: #007da8 !important;
  }

  html body div.catalog-header-menu > ul.top-menu > li > a::after {
    right: 19px !important;
    bottom: 9px !important;
    left: 19px !important;

    height: 3px !important;
  }


  /* =========================================================
     BREAK PAGEDNA'S HEADER-LINK TABLE OUT OF THE LAYOUT

     Actual PageDNA markup contains:
       1st link = Home
       2nd link = My Profile
       3rd link = Search Orders
       4th link = Logout

     We reuse those REAL links instead of creating fake ones.
     ========================================================= */

  #header-links-container,
  #header-links-container > tbody,
  #header-links-container > tbody > tr,
  #header-links-container td.header-links {
    position: static !important;

    display: contents !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
    filter: none !important;
  }


  /* Hide all native text links first. */

  #header-links-container td.header-links > a {
    display: none !important;
  }


  /* =========================================================
     REAL HOME LINK   INVISIBLE CLICK AREA OVER SHOPRINT LOGO
     ========================================================= */

  #header-links-container td.header-links > a:nth-of-type(1) {
    position: absolute !important;

    top: 0 !important;
    left: 48px !important;

    z-index: 5900 !important;

    display: block !important;

    width: 188px !important;
    height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: transparent !important;

    border: 0 !important;

    color: transparent !important;

    font-size: 0 !important;
    line-height: 0 !important;

    text-decoration: none !important;

    cursor: pointer !important;
  }

  #header-links-container td.header-links > a:nth-of-type(1):focus-visible {
    outline: 3px solid #b90070 !important;
    outline-offset: -4px !important;

    border-radius: 5px !important;
  }

  #header_logo img.no_mobile {
    cursor: pointer !important;
  }


  /* =========================================================
     REAL MY PROFILE LINK   ACCOUNT CONTROL
     Now positioned independently from PageDNA's table.
     ========================================================= */

  #header-links-container td.header-links > a:nth-of-type(2) {
    position: absolute !important;

    top: 13px !important;
    right: 174px !important;

    z-index: 5900 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 112px !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 7px !important;

    box-shadow: none !important;
    filter: none !important;

    color: transparent !important;

    font-size: 0 !important;

    text-align: center !important;
    text-decoration: none !important;

    transition:
      background-color .18s ease !important;
  }

  #header-links-container td.header-links > a:nth-of-type(2)::before {
    content: " " !important;

    display: inline-block !important;

    margin-right: 8px !important;

    color: #151515 !important;

    font-family: FontAwesome !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1 !important;
  }

  #header-links-container td.header-links > a:nth-of-type(2)::after {
    content: "Account   " !important;

    display: inline-block !important;

    color: #151515 !important;

    font-family:
      "Open Sans",
      FontAwesome,
      Arial,
      sans-serif !important;

    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    white-space: pre !important;

    text-transform: none !important;
  }

  #header-links-container td.header-links > a:nth-of-type(2):hover {
    background: #fff5fb !important;
  }

  #header-links-container td.header-links > a:nth-of-type(2):hover::before,
  #header-links-container td.header-links > a:nth-of-type(2):hover::after {
    color: #b90070 !important;
  }


  /* =========================================================
     FORCE ACCOUNT / CART / MENU ON EXACT SAME ROW
     ========================================================= */

  #mobile_cart {
    top: 13px !important;
    right: 111px !important;

    width: 48px !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #header_title .burger {
    top: 13px !important;
    right: 24px !important;

    width: 76px !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* =========================================================
     SMALLER DESKTOPS / LAPTOPS
     ========================================================= */

  @media only screen and (max-width: 1250px) {

    html body div.catalog-header-menu > ul.top-menu > li > a {
      padding-right: 14px !important;
      padding-left: 14px !important;

      font-size: 13px !important;
    }

    html body div.catalog-header-menu > ul.top-menu > li > a::after {
      right: 14px !important;
      left: 14px !important;
    }

    #header-links-container td.header-links > a:nth-of-type(1) {
      left: 28px !important;

      width: 166px !important;
    }

    #header-links-container td.header-links > a:nth-of-type(2) {
      right: 162px !important;

      width: 98px !important;
    }

    #mobile_cart {
      right: 103px !important;
    }

    #header_title .burger {
      right: 16px !important;

      width: 70px !important;
    }
  }

}
/* =========================================================
   SHOPRINT LOGO - LARGER DESKTOP SIZE
   ========================================================= */

@media only screen and (min-width: 1025px) {

    /* Larger visible SHOPRINT logo */
    #header_logo img.no_mobile {
        top: 17px !important;
        left: 42px !important;

        width: 215px !important;
        max-width: 215px !important;
    }

    /* Match the clickable HOME area to the larger logo */
    #header-links-container td.header-links > a:nth-of-type(1) {
        top: 0 !important;
        left: 42px !important;

        width: 215px !important;
        height: 72px !important;
    }

    /* Give the larger logo enough breathing room before ADHESIVE */
    html body .catalog-header-menu {
        left: 275px !important;
    }


    /* Smaller laptop screens */
    @media only screen and (max-width: 1250px) {

        #header_logo img.no_mobile {
            top: 20px !important;
            left: 26px !important;

            width: 190px !important;
            max-width: 190px !important;
        }

        #header-links-container td.header-links > a:nth-of-type(1) {
            left: 26px !important;
            width: 190px !important;
        }

        html body .catalog-header-menu {
            left: 230px !important;
        }
    }
}


/* ============================================================
   SHOPRINT CONFIGURATOR V3 - CLEAN REPLACEMENT
   CSS ONLY / PAGEDNA SAFE / HEADER UNTOUCHED

   IMPORTANT:
   Remove ONLY the previous custom blocks named:
   - SHOPRINT CONFIGURATOR V2
   - SHOPRINT CONFIGURATOR V2.1
   Then paste this single V3 block in their place.

   Keep all SHOPRINT HEADER CSS above it.
   ============================================================ */


/* ============================================================
   CONFIGURATOR PAGE FOUNDATION
   ============================================================ */

body:has(form[name="f"][action="item_form.cgi"]) {
    background: #f7f8fa !important;
}

body:has(form[name="f"][action="item_form.cgi"]) .container,
body:has(form[name="f"][action="item_form.cgi"]) .main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

body:has(form[name="f"][action="item_form.cgi"]) .main {
    padding: 0 0 52px !important;
    background: #f7f8fa !important;
}


/* Configurator should begin directly below the navigation,
   like the supplied mockup. Landing-page banners remain unchanged. */

body:has(form[name="f"][action="item_form.cgi"]) .static-header-pic {
    display: none !important;
}


/* Hide PageDNA's old CONFIGURE ITEM heading if present. */

body:has(form[name="f"][action="item_form.cgi"]) .pagetitle {
    display: none !important;
}


/* New visual page title - CSS only, no script required. */

body:has(form[name="f"][action="item_form.cgi"]) .main::before {
    content: "Configure Your Product";

    display: block;

    width: min(1280px, calc(100% - 64px));

    margin: 0 auto;
    padding: 34px 0 14px;

    color: #171a21;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.08;

    letter-spacing: -.035em;
}


form[name="f"][action="item_form.cgi"] {
    --sw-orange: #b90070;
    --sw-orange-dark: #940058;
    --sw-ink: #171a21;
    --sw-text: #333945;
    --sw-muted: #707784;
    --sw-line: #dfe3e8;
    --sw-soft: #f7f8fa;
    --sw-card: #ffffff;
    --sw-shadow: 0 8px 26px rgba(25, 30, 38, .07);

    width: min(1280px, calc(100% - 64px)) !important;
    max-width: 1280px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    color: var(--sw-text) !important;

    font-family: "Open Sans", Arial, sans-serif !important;
}

form[name="f"][action="item_form.cgi"] *,
form[name="f"][action="item_form.cgi"] *::before,
form[name="f"][action="item_form.cgi"] *::after {
    box-sizing: border-box;
}


/* ============================================================
   STEP INDICATOR
   ============================================================ */

form[name="f"][action="item_form.cgi"]:has(#estimate-item-container)::before {
    content:
        "   Size & Quantity                          Upload Artwork                          Checkout";

    display: block;

    margin: 0 0 22px;
    padding: 0 0 20px;

    border-bottom: 1px solid #dde2e7;

    color: #656d79;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    text-align: right;
    white-space: normal;
}

form[name="f"][action="item_form.cgi"]:has(table.imprint-splitview)::before {
    content:
        "   Size & Quantity                          Upload Artwork                          Checkout";

    display: block;

    margin: 0 0 22px;
    padding: 0 0 20px;

    border-bottom: 1px solid #dde2e7;

    color: #656d79;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    text-align: right;
    white-space: normal;
}


/* ============================================================
   SIZE + QUANTITY PAGE
   ============================================================ */

form[name="f"][action="item_form.cgi"] #estimate-item-container {
    display: grid !important;

    grid-template-columns:
        minmax(420px, 1.02fr)
        minmax(430px, .98fr) !important;

    gap: 36px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    table-layout: auto !important;
}

form[name="f"][action="item_form.cgi"] #estimate-item-container > tbody,
form[name="f"][action="item_form.cgi"] #estimate-item-container > tbody > tr {
    display: contents !important;
}

form[name="f"][action="item_form.cgi"] #blurb-and-image,
form[name="f"][action="item_form.cgi"] #all_options_container {
    display: block !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;

    vertical-align: top !important;

    background: #ffffff !important;

    border: 1px solid #e8ecf0 !important;
    border-radius: 11px !important;

    box-shadow: var(--sw-shadow) !important;
}


/* ------------------------------------------------------------
   PRODUCT CARD
   ------------------------------------------------------------ */

form[name="f"][action="item_form.cgi"] #blurb-and-image {
    padding: 22px !important;
}

form[name="f"][action="item_form.cgi"] #blurb-and-image img {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: auto !important;

    aspect-ratio: 16 / 10 !important;

    margin: 0 0 17px !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 8px !important;
}

form[name="f"][action="item_form.cgi"] #blurb-and-image h1,
form[name="f"][action="item_form.cgi"] #blurb-and-image h2,
form[name="f"][action="item_form.cgi"] #blurb-and-image h3 {
    margin: 0 0 9px !important;

    color: var(--sw-ink) !important;

    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

form[name="f"][action="item_form.cgi"] #blurb-and-image b,
form[name="f"][action="item_form.cgi"] #blurb-and-image strong {
    color: var(--sw-ink) !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

form[name="f"][action="item_form.cgi"] #blurb-and-image p {
    max-width: none !important;

    margin: 8px 0 0 !important;

    color: #555d68 !important;

    font-size: 12px !important;
    line-height: 1.52 !important;
}


/* Tame PageDNA's old large italic lead text */

form[name="f"][action="item_form.cgi"] #blurb-and-image i,
form[name="f"][action="item_form.cgi"] #blurb-and-image em {
    color: var(--sw-ink) !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}


/* ------------------------------------------------------------
   SIZE & QUANTITY CARD
   ------------------------------------------------------------ */

form[name="f"][action="item_form.cgi"] #all_options_container {
    padding: 27px 28px 24px !important;
}

form[name="f"][action="item_form.cgi"] #all_options_container::before {
    content: "Size & Quantity";

    display: block;

    margin: 0 0 22px;

    color: var(--sw-ink);

    font-size: 25px;
    font-weight: 800;
    line-height: 1.15;
}

form[name="f"][action="item_form.cgi"] #all_options_container table {
    width: 100% !important;

    margin: 0 !important;

    border-collapse: separate !important;
    border-spacing: 0 11px !important;

    background: transparent !important;
}

form[name="f"][action="item_form.cgi"] #all_options_container tr,
form[name="f"][action="item_form.cgi"] #all_options_container td,
form[name="f"][action="item_form.cgi"] #all_options_container th,
form[name="f"][action="item_form.cgi"] #all_options_container td[bgcolor],
form[name="f"][action="item_form.cgi"] #all_options_container th[bgcolor] {
    background: transparent !important;

    border: 0 !important;
}

form[name="f"][action="item_form.cgi"] #all_options_container td,
form[name="f"][action="item_form.cgi"] #all_options_container th {
    padding: 4px 6px !important;

    color: var(--sw-text) !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    vertical-align: middle !important;
}

form[name="f"][action="item_form.cgi"] #all_options_container input[type="text"],
form[name="f"][action="item_form.cgi"] #all_options_container input[type="number"],
form[name="f"][action="item_form.cgi"] input[name*="_qty"]:not([type="hidden"]),
form[name="f"][action="item_form.cgi"] input[name="width_inches"],
form[name="f"][action="item_form.cgi"] input[name="height_inches"] {
    width: 100% !important;
    max-width: none !important;

    height: 46px !important;

    margin: 0 !important;
    padding: 0 12px !important;

    background: #ffffff !important;

    border: 1px solid #ccd3da !important;
    border-radius: 5px !important;

    color: var(--sw-ink) !important;

    font-family: inherit !important;
    font-size: 15px !important;

    outline: 0 !important;
    box-shadow: none !important;
}

form[name="f"][action="item_form.cgi"] #all_options_container input:focus {
    border-color: var(--sw-orange) !important;

    box-shadow: 0 0 0 3px rgba(185, 0, 112,.12) !important;
}


/* Undo the blank peach strip caused by the old V2.1 last-row rule. */

form[name="f"][action="item_form.cgi"] #all_options_container tr:last-child,
form[name="f"][action="item_form.cgi"] #all_options_container tr:last-child td {
    background: transparent !important;

    border-top: 0 !important;
    border-bottom: 0 !important;
}


/* ------------------------------------------------------------
   SIZE PAGE BOTTOM ACTIONS
   ------------------------------------------------------------ */

form[name="f"][action="item_form.cgi"] > table.form-body {
    width: 100% !important;

    margin: 16px 0 0 !important;

    background: transparent !important;

    border: 0 !important;
}

form[name="f"][action="item_form.cgi"] > table.form-body td.submit {
    padding: 0 !important;

    background: transparent !important;

    text-align: right !important;
}


/* ============================================================
   UPLOAD ARTWORK PAGE
   ============================================================ */

form[name="f"][action="item_form.cgi"] table.imprint-splitview {
    display: grid !important;

    grid-template-columns:
        minmax(560px, 1.35fr)
        minmax(330px, .65fr) !important;

    gap: 24px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    table-layout: auto !important;
}

form[name="f"][action="item_form.cgi"] table.imprint-splitview > tbody,
form[name="f"][action="item_form.cgi"] table.imprint-splitview > tbody > tr {
    display: contents !important;
}

form[name="f"][action="item_form.cgi"] table.imprint-splitview td.left-side,
form[name="f"][action="item_form.cgi"] table.imprint-splitview td.right-side {
    display: block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 !important;

    vertical-align: top !important;
}


/* ------------------------------------------------------------
   UPLOAD FORM CARD
   ------------------------------------------------------------ */

form[name="f"][action="item_form.cgi"] table.imprint-splitview td.left-side {
    padding: 27px 30px 30px !important;

    background: #ffffff !important;

    border: 1px solid #e8ecf0 !important;
    border-radius: 11px !important;

    box-shadow: var(--sw-shadow) !important;
}

form[name="f"][action="item_form.cgi"] table.imprint-splitview td.left-side::before {
    content: "Upload Artwork";

    display: block;

    margin: 0 0 22px;

    color: var(--sw-ink);

    font-size: 25px;
    font-weight: 800;
    line-height: 1.15;
}


/* Expand FormRenderer's internal layout */

form[name="f"][action="item_form.cgi"] td.left-side .form-body,
form[name="f"][action="item_form.cgi"] td.left-side .form-body table,
form[name="f"][action="item_form.cgi"] td.left-side .form-body tbody,
form[name="f"][action="item_form.cgi"] td.left-side .form-body tr {
    width: 100% !important;
    max-width: none !important;
}

form[name="f"][action="item_form.cgi"] td.left-side .form-body {
    margin: 0 0 17px !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
}

form[name="f"][action="item_form.cgi"] td.left-side tr,
form[name="f"][action="item_form.cgi"] td.left-side td {
    background: transparent !important;

    border: 0 !important;
}


/* Remove the dated orange FormRenderer bars */

form[name="f"][action="item_form.cgi"] td.left-side .form-body td[bgcolor],
form[name="f"][action="item_form.cgi"] td.left-side .form-body th[bgcolor],
form[name="f"][action="item_form.cgi"] td.left-side .form-body [style*="background-color"] {
    background-color: transparent !important;
}

form[name="f"][action="item_form.cgi"] td.left-side td.label,
form[name="f"][action="item_form.cgi"] td.left-side label {
    color: var(--sw-text) !important;

    font-size: 12px !important;
    font-weight: 700 !important;
}


/* Form controls */

form[name="f"][action="item_form.cgi"] td.left-side input[type="text"],
form[name="f"][action="item_form.cgi"] td.left-side input[type="email"],
form[name="f"][action="item_form.cgi"] td.left-side input[type="number"],
form[name="f"][action="item_form.cgi"] td.left-side select,
form[name="f"][action="item_form.cgi"] td.left-side textarea {
    width: 100% !important;
    max-width: none !important;

    min-height: 44px !important;

    margin: 0 !important;
    padding: 9px 11px !important;

    background: #ffffff !important;

    border: 1px solid #ccd3da !important;
    border-radius: 5px !important;

    color: var(--sw-ink) !important;

    font-family: inherit !important;
    font-size: 13px !important;

    outline: 0 !important;
    box-shadow: none !important;
}

form[name="f"][action="item_form.cgi"] td.left-side textarea {
    min-height: 105px !important;

    resize: vertical !important;
}

form[name="f"][action="item_form.cgi"] td.left-side input:focus,
form[name="f"][action="item_form.cgi"] td.left-side textarea:focus,
form[name="f"][action="item_form.cgi"] td.left-side select:focus {
    border-color: var(--sw-orange) !important;

    box-shadow: 0 0 0 3px rgba(185, 0, 112,.12) !important;
}


/* Small read-only counters should NOT become giant full-width fields. */

form[name="f"][action="item_form.cgi"] td.left-side input[readonly],
form[name="f"][action="item_form.cgi"] td.left-side input[disabled] {
    display: inline-block !important;

    width: 58px !important;
    min-height: 28px !important;
    height: 28px !important;

    padding: 0 6px !important;

    font-size: 11px !important;
}


/* Upload / artwork-control buttons stay compact */

form[name="f"][action="item_form.cgi"] td.left-side button,
form[name="f"][action="item_form.cgi"] td.left-side input[type="button"],
form[name="f"][action="item_form.cgi"] td.left-side a[class*="button"] {
    min-height: 38px !important;

    padding: 0 13px !important;

    border-radius: 5px !important;

    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}


/* ------------------------------------------------------------
   ARTWORK PREVIEW CARD
   ------------------------------------------------------------ */

form[name="f"][action="item_form.cgi"] table.imprint-splitview td.right-side {
    padding: 22px 18px !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid #e8ecf0 !important;
    border-radius: 11px !important;

    box-shadow: var(--sw-shadow) !important;
}

form[name="f"][action="item_form.cgi"] table.imprint-splitview td.right-side::before {
    content: "Artwork Preview";

    display: block;

    margin: 0 0 16px;

    color: var(--sw-ink);

    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

form[name="f"][action="item_form.cgi"] td.right-side > *,
form[name="f"][action="item_form.cgi"] td.right-side table,
form[name="f"][action="item_form.cgi"] td.right-side div,
form[name="f"][action="item_form.cgi"] td.right-side iframe,
form[name="f"][action="item_form.cgi"] td.right-side [style*="width"] {
    max-width: 100% !important;
}

form[name="f"][action="item_form.cgi"] td.right-side img,
form[name="f"][action="item_form.cgi"] td.right-side canvas {
    max-width: 100% !important;
    height: auto !important;

    border-radius: 5px !important;
}


/* ============================================================
   PRIMARY / SECONDARY ACTIONS
   ============================================================ */

form[name="f"][action="item_form.cgi"] input[type="submit"],
form[name="f"][action="item_form.cgi"] input[type="button"],
form[name="f"][action="item_form.cgi"] button,
form[name="f"][action="item_form.cgi"] a.button,
form[name="f"][action="item_form.cgi"] a[class*="button"] {
    font-family: "Open Sans", Arial, sans-serif !important;
}


/* Right-side/checkout action groups:
   first control = secondary, last control = primary */

form[name="f"][action="item_form.cgi"] td.submit input:first-of-type,
form[name="f"][action="item_form.cgi"] td.submit button:first-of-type,
form[name="f"][action="item_form.cgi"] td.right-side input[type="button"]:first-of-type,
form[name="f"][action="item_form.cgi"] td.right-side input[type="submit"]:first-of-type,
form[name="f"][action="item_form.cgi"] td.right-side button:first-of-type {
    min-height: 44px !important;

    padding: 0 17px !important;

    background: #ffffff !important;
    color: #303640 !important;

    border: 1px solid #ccd3da !important;
    border-radius: 5px !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    box-shadow: none !important;
}

form[name="f"][action="item_form.cgi"] td.submit input:last-of-type,
form[name="f"][action="item_form.cgi"] td.submit button:last-of-type,
form[name="f"][action="item_form.cgi"] td.right-side input[type="button"]:last-of-type,
form[name="f"][action="item_form.cgi"] td.right-side input[type="submit"]:last-of-type,
form[name="f"][action="item_form.cgi"] td.right-side button:last-of-type {
    min-height: 44px !important;

    padding: 0 18px !important;

    background: var(--sw-orange) !important;
    color: #ffffff !important;

    border: 1px solid var(--sw-orange) !important;
    border-radius: 5px !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    box-shadow: none !important;
}

form[name="f"][action="item_form.cgi"] td.submit input:last-of-type:hover,
form[name="f"][action="item_form.cgi"] td.submit button:last-of-type:hover,
form[name="f"][action="item_form.cgi"] td.right-side input[type="button"]:last-of-type:hover,
form[name="f"][action="item_form.cgi"] td.right-side input[type="submit"]:last-of-type:hover,
form[name="f"][action="item_form.cgi"] td.right-side button:last-of-type:hover {
    background: var(--sw-orange-dark) !important;

    border-color: var(--sw-orange-dark) !important;
}


/* Existing known PageDNA primary step button */

form[name="f"][action="item_form.cgi"] #submit_continue,
form[name="f"][action="item_form.cgi"] input[value*="UPLOAD ARTWORK" i],
form[name="f"][action="item_form.cgi"] button[value*="UPLOAD ARTWORK" i] {
    min-height: 44px !important;

    padding: 0 18px !important;

    background: var(--sw-orange) !important;
    color: #ffffff !important;

    border: 1px solid var(--sw-orange) !important;
    border-radius: 5px !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    box-shadow: none !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media only screen and (max-width: 1024px) {

    body:has(form[name="f"][action="item_form.cgi"]) .main::before,
    form[name="f"][action="item_form.cgi"] {
        width: calc(100% - 28px) !important;
    }

    body:has(form[name="f"][action="item_form.cgi"]) .main::before {
        padding-top: 25px;

        font-size: 28px;
    }

    form[name="f"][action="item_form.cgi"]:has(#estimate-item-container)::before,
    form[name="f"][action="item_form.cgi"]:has(table.imprint-splitview)::before {
        text-align: left;

        font-size: 12px;
    }

    form[name="f"][action="item_form.cgi"] #estimate-item-container,
    form[name="f"][action="item_form.cgi"] table.imprint-splitview {
        grid-template-columns: 1fr !important;

        gap: 18px !important;
    }

    form[name="f"][action="item_form.cgi"] #blurb-and-image,
    form[name="f"][action="item_form.cgi"] #all_options_container,
    form[name="f"][action="item_form.cgi"] table.imprint-splitview td.left-side,
    form[name="f"][action="item_form.cgi"] table.imprint-splitview td.right-side {
        padding: 18px !important;
    }
}


@media only screen and (max-width: 620px) {

    body:has(form[name="f"][action="item_form.cgi"]) .main::before,
    form[name="f"][action="item_form.cgi"] {
        width: calc(100% - 20px) !important;
    }

    body:has(form[name="f"][action="item_form.cgi"]) .main::before {
        font-size: 25px;
    }

    form[name="f"][action="item_form.cgi"]:has(#estimate-item-container)::before {
        content:
            "  Size & Quantity         Upload Artwork         Checkout";
    }

    form[name="f"][action="item_form.cgi"]:has(table.imprint-splitview)::before {
        content:
            "  Size & Quantity         Upload Artwork         Checkout";
    }

    form[name="f"][action="item_form.cgi"] #all_options_container::before,
    form[name="f"][action="item_form.cgi"] table.imprint-splitview td.left-side::before {
        font-size: 22px;
    }
}

/* =========================================
   CATALOG SEARCH RESULTS CLEANUP
   ========================================= */

#catalog-search-terms,
#refine_searchfield_input,
#refine_searchfield_button,
#submit_catalog_search_cancel {
    display: none !important;
}


/* ============================================================
   CLEANUP NOTE: obsolete proof-confirmation modal removed here.
   ============================================================ */

   SHOPRINT - CHECKOUT / REQUESTOR / BILLING V2/**/.6
   CSS ONLY / PAGEDNA SAFE

   Scope:
   - Requestor / quantities page
   - Billing / credit-card page

   Does NOT touch:
   - Header
   - Catalog landing pages
   - Configurator
   - Proof modal

   Paste at the VERY BOTTOM of:
   Site Header > Additional CSS Content
   ============================================================ */


/* ============================================================
   SHARED CHECKOUT TOKENS
   ============================================================ */

body:has(input[value*="Billing Info" i]),
body:has(form[action="review_bill.cgi"]) {
    --sw-orange: #b90070;
    --sw-orange-dark: #940058;
    --sw-ink: #171a21;
    --sw-text: #333945;
    --sw-muted: #6d7581;
    --sw-line: #dfe3e8;
    --sw-soft: #f7f8fa;
    --sw-card: #ffffff;
    --sw-shadow: 0 8px 26px rgba(25,30,38,.07);
}


/* Keep checkout content centered and readable */

body:has(input[value*="Billing Info" i]) .main,
body:has(form[action="review_bill.cgi"]) .main.billing.catalog--container {
    width: min(1180px, calc(100% - 56px)) !important;
    max-width: 1180px !important;

    margin: 34px auto 56px !important;
    padding: 0 !important;

    color: var(--sw-text) !important;

    font-family: "Open Sans", Arial, sans-serif !important;
}


/* ============================================================
   REQUESTOR / QUANTITIES PAGE
   Unique page trigger: Billing Info button
   ============================================================ */

body:has(input[value*="Billing Info" i]) .main h1,
body:has(input[value*="Billing Info" i]) .main h2,
body:has(input[value*="Billing Info" i]) .main h3,
body:has(input[value*="Billing Info" i]) .main .pagetitle {
    color: var(--sw-ink) !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-weight: 800 !important;

    letter-spacing: -.02em !important;
}


/* Modernize all PageDNA form-body tables on this page without
   changing their underlying table structure. */

body:has(input[value*="Billing Info" i]) .main table.form-body {
    width: 100% !important;
    max-width: 100% !important;

    margin: 12px 0 24px !important;

    background: var(--sw-card) !important;

    border: 1px solid #e8ecf0 !important;
    border-radius: 10px !important;

    box-shadow: var(--sw-shadow) !important;

    border-collapse: separate !important;
    border-spacing: 0 !important;
}


/* Remove legacy orange cell fills on requestor/order fields */

body:has(input[value*="Billing Info" i]) .main td.label,
body:has(input[value*="Billing Info" i]) .main td[bgcolor],
body:has(input[value*="Billing Info" i]) .main th[bgcolor] {
    background: transparent !important;

    color: var(--sw-text) !important;
}


/* Better spacing */

body:has(input[value*="Billing Info" i]) .main table.form-body td,
body:has(input[value*="Billing Info" i]) .main table.form-body th {
    padding: 8px 10px !important;

    border: 0 !important;

    vertical-align: middle !important;
}


/* Requestor/order/delivery fields */

body:has(input[value*="Billing Info" i]) .main input[type="text"],
body:has(input[value*="Billing Info" i]) .main input[type="email"],
body:has(input[value*="Billing Info" i]) .main input[type="number"],
body:has(input[value*="Billing Info" i]) .main select,
body:has(input[value*="Billing Info" i]) .main textarea {
    min-height: 42px !important;

    padding: 8px 11px !important;

    background: #ffffff !important;

    border: 1px solid #ccd3da !important;
    border-radius: 5px !important;

    color: var(--sw-ink) !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 13px !important;

    outline: 0 !important;

    box-shadow: none !important;
}

body:has(input[value*="Billing Info" i]) .main textarea {
    min-height: 105px !important;

    resize: vertical !important;
}

body:has(input[value*="Billing Info" i]) .main input:focus,
body:has(input[value*="Billing Info" i]) .main select:focus,
body:has(input[value*="Billing Info" i]) .main textarea:focus {
    border-color: var(--sw-orange) !important;

    box-shadow: 0 0 0 3px rgba(185, 0, 112,.12) !important;
}


/* Quantity inputs stay compact */

body:has(input[value*="Billing Info" i]) .main input[name*="qty" i],
body:has(input[value*="Billing Info" i]) .main input[name*="quantity" i] {
    width: 78px !important;
    min-height: 36px !important;
    height: 36px !important;
}


/* Text links */

body:has(input[value*="Billing Info" i]) .main a {
    color: #303640 !important;
}

body:has(input[value*="Billing Info" i]) .main a:hover {
    color: var(--sw-orange) !important;
}


/* Generic checkout buttons */

body:has(input[value*="Billing Info" i]) .main input[type="submit"],
body:has(input[value*="Billing Info" i]) .main input[type="button"],
body:has(input[value*="Billing Info" i]) .main button,
body:has(input[value*="Billing Info" i]) .main a.button {
    min-height: 40px !important;

    padding: 0 15px !important;

    border-radius: 5px !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;

    box-shadow: none !important;
}


/* Add More / Update = secondary */

body:has(input[value*="Billing Info" i]) .main input[value*="Add More Products" i],
body:has(input[value*="Billing Info" i]) .main input[value="Update" i],
body:has(input[value*="Billing Info" i]) .main button[value*="Add More Products" i],
body:has(input[value*="Billing Info" i]) .main button[value="Update" i] {
    background: #ffffff !important;
    color: #303640 !important;

    border: 1px solid #ccd3da !important;
}


/* Billing Info = primary */

body:has(input[value*="Billing Info" i]) .main input[value*="Billing Info" i],
body:has(input[value*="Billing Info" i]) .main button[value*="Billing Info" i] {
    min-height: 44px !important;

    padding: 0 20px !important;

    background: var(--sw-orange) !important;
    color: #ffffff !important;

    border: 1px solid var(--sw-orange) !important;
    border-radius: 6px !important;

    font-weight: 700 !important;
}

body:has(input[value*="Billing Info" i]) .main input[value*="Billing Info" i]:hover,
body:has(input[value*="Billing Info" i]) .main button[value*="Billing Info" i]:hover {
    background: var(--sw-orange-dark) !important;
    border-color: var(--sw-orange-dark) !important;
}


/* ============================================================
   BILLING PAGE
   Exact PageDNA form:
   form[action="review_bill.cgi"]
   Main wrapper:
   .main.billing.catalog--container
   ============================================================ */

body:has(form[action="review_bill.cgi"]) .main.billing.catalog--container {
    padding: 0 !important;
}


/* Page title */

body:has(form[action="review_bill.cgi"]) .main.billing .pagetitle {
    display: block !important;

    margin: 0 0 18px !important;
    padding: 0 !important;

    color: var(--sw-ink) !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 30px !important;
    font-weight: 800 !important;

    letter-spacing: -.03em !important;

    background: transparent !important;
    border: 0 !important;
}


/* Main billing form */

body:has(form[action="review_bill.cgi"]) form[action="review_bill.cgi"] {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ------------------------------------------------------------
   ORDER SUMMARY
   ------------------------------------------------------------ */

body:has(form[action="review_bill.cgi"]) #billing-pricetable {
    width: 100% !important;
    max-width: 900px !important;

    margin: 0 0 28px !important;
    padding: 18px 22px !important;

    background: #ffffff !important;

    border: 1px solid #e8ecf0 !important;
    border-radius: 10px !important;

    box-shadow: var(--sw-shadow) !important;

    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body:has(form[action="review_bill.cgi"]) #billing-pricetable td,
body:has(form[action="review_bill.cgi"]) #billing-pricetable th {
    padding: 8px 10px !important;

    background: transparent !important;

    border: 0 !important;

    color: var(--sw-text) !important;

    font-size: 13px !important;
}


/* Emphasize subtotal/total rows */

body:has(form[action="review_bill.cgi"]) #billing-pricetable tr.form-sublabel td {
    color: var(--sw-muted) !important;
}

body:has(form[action="review_bill.cgi"]) #billing-pricetable td.updatetotalcol,
body:has(form[action="review_bill.cgi"]) #billing-pricetable td.totalinpcol {
    color: var(--sw-ink) !important;

    font-weight: 800 !important;
}


/* ------------------------------------------------------------
   CREDIT CARD / BILLING FIELDS
   Second form-body table
   ------------------------------------------------------------ */

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"] > table.form-body:not(#billing-pricetable) {
    width: min(760px, 100%) !important;

    margin: 0 0 22px !important;

    background: #ffffff !important;

    border: 1px solid #e8ecf0 !important;
    border-radius: 10px !important;

    box-shadow: var(--sw-shadow) !important;

    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"] > table.form-body:not(#billing-pricetable) td,
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"] > table.form-body:not(#billing-pricetable) th {
    padding: 8px 10px !important;

    background: transparent !important;

    border: 0 !important;

    vertical-align: middle !important;
}


/* Remove old orange credit-card label panel */

body:has(form[action="review_bill.cgi"]) td.label,
body:has(form[action="review_bill.cgi"]) td[bgcolor],
body:has(form[action="review_bill.cgi"]) th[bgcolor] {
    background: transparent !important;

    color: var(--sw-text) !important;
}


/* Payment fields */

body:has(form[action="review_bill.cgi"]) input[type="text"],
body:has(form[action="review_bill.cgi"]) input[type="email"],
body:has(form[action="review_bill.cgi"]) input[type="tel"],
body:has(form[action="review_bill.cgi"]) select {
    min-height: 42px !important;

    padding: 8px 11px !important;

    background: #ffffff !important;

    border: 1px solid #ccd3da !important;
    border-radius: 5px !important;

    color: var(--sw-ink) !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 13px !important;

    outline: 0 !important;

    box-shadow: none !important;
}

body:has(form[action="review_bill.cgi"]) input:focus,
body:has(form[action="review_bill.cgi"]) select:focus {
    border-color: var(--sw-orange) !important;

    box-shadow: 0 0 0 3px rgba(185, 0, 112,.12) !important;
}


/* Keep short card fields appropriately narrow */

body:has(form[action="review_bill.cgi"]) input[name*="cvv" i],
body:has(form[action="review_bill.cgi"]) input[name*="exp" i],
body:has(form[action="review_bill.cgi"]) input[name*="state" i],
body:has(form[action="review_bill.cgi"]) input[name*="zip" i] {
    max-width: 130px !important;
}


/* ------------------------------------------------------------
   BILLING ACTIONS
   ------------------------------------------------------------ */

body:has(form[action="review_bill.cgi"]) .buttonsbar {
    display: flex !important;
    align-items: center !important;

    gap: 8px !important;

    margin: 18px 0 0 !important;
}


/* Back = secondary */

body:has(form[action="review_bill.cgi"]) input[value*="Back" i],
body:has(form[action="review_bill.cgi"]) button[value*="Back" i],
body:has(form[action="review_bill.cgi"]) .buttonsbar a:first-child {
    min-height: 42px !important;

    padding: 0 16px !important;

    background: #ffffff !important;
    color: #303640 !important;

    border: 1px solid #ccd3da !important;
    border-radius: 5px !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;

    box-shadow: none !important;
}


/* Review Order = primary */

body:has(form[action="review_bill.cgi"]) input[value*="Review Order" i],
body:has(form[action="review_bill.cgi"]) button[value*="Review Order" i],
body:has(form[action="review_bill.cgi"]) .buttonsbar a:last-child {
    min-height: 44px !important;

    padding: 0 19px !important;

    background: var(--sw-orange) !important;
    color: #ffffff !important;

    border: 1px solid var(--sw-orange) !important;
    border-radius: 6px !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;

    box-shadow: none !important;
}

body:has(form[action="review_bill.cgi"]) input[value*="Review Order" i]:hover,
body:has(form[action="review_bill.cgi"]) button[value*="Review Order" i]:hover,
body:has(form[action="review_bill.cgi"]) .buttonsbar a:last-child:hover {
    background: var(--sw-orange-dark) !important;
    border-color: var(--sw-orange-dark) !important;
}


/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media only screen and (max-width: 1024px) {

    body:has(input[value*="Billing Info" i]) .main,
    body:has(form[action="review_bill.cgi"]) .main.billing.catalog--container {
        width: calc(100% - 28px) !important;

        margin-top: 24px !important;
    }
}


@media only screen and (max-width: 620px) {

    body:has(input[value*="Billing Info" i]) .main,
    body:has(form[action="review_bill.cgi"]) .main.billing.catalog--container {
        width: calc(100% - 20px) !important;
    }

    body:has(input[value*="Billing Info" i]) .main table,
    body:has(form[action="review_bill.cgi"]) table {
        max-width: 100% !important;
    }

    body:has(input[value*="Billing Info" i]) .main input[type="text"],
    body:has(input[value*="Billing Info" i]) .main input[type="email"],
    body:has(input[value*="Billing Info" i]) .main select,
    body:has(input[value*="Billing Info" i]) .main textarea,
    body:has(form[action="review_bill.cgi"]) input[type="text"],
    body:has(form[action="review_bill.cgi"]) input[type="email"],
    body:has(form[action="review_bill.cgi"]) input[type="tel"] {
        max-width: 100% !important;
    }

    body:has(form[action="review_bill.cgi"]) #billing-pricetable {
        padding: 12px !important;
    }
}


/* ============================================================
   BILLING V2 - DESKTOP TWO-COLUMN LAYOUT
   Order summary LEFT / Credit card information RIGHT
   ============================================================ */

@media only screen and (min-width: 1101px) {

    /* Give the billing page enough horizontal room */
    body:has(form[action="review_bill.cgi"])
    .main.billing.catalog--container {
        width: min(1320px, calc(100% - 64px)) !important;
        max-width: 1320px !important;
    }


    /* Intro/title stays above both cards */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"] {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(430px, .92fr) !important;

        column-gap: 26px !important;
        row-gap: 18px !important;

        align-items: start !important;
    }


    /*
      PageDNA's summary table:
      LEFT COLUMN
    */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    #billing-pricetable {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        align-self: start !important;
    }


    /*
      PageDNA's credit-card / billing form:
      RIGHT COLUMN
    */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable) {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        align-self: start !important;
    }


    /* Action buttons sit directly under payment card */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    .buttonsbar {
        grid-column: 2 !important;
        grid-row: 2 !important;

        width: 100% !important;

        margin: 0 !important;

        justify-content: flex-end !important;
    }


    /* Any PageDNA message/help blocks should span full width */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > .message-block,
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > .error-block,
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > .instructions {
        grid-column: 1 / -1 !important;
    }


    /* Compact the payment card vertically */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    td,
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    th {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }


    /* Labels get a predictable width */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    td.label {
        width: 42% !important;

        padding-right: 12px !important;

        text-align: right !important;

        white-space: normal !important;
    }


    /* Normal billing fields can use the available right column */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input[type="text"],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input[type="email"],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input[type="tel"] {
        width: 100% !important;
        max-width: 300px !important;
    }


    /* Preserve sensible sizes for short fields */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="cvv" i] {
        width: 90px !important;
        max-width: 90px !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="zip" i] {
        width: 130px !important;
        max-width: 130px !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="exp" i] {
        width: 84px !important;
        max-width: 84px !important;
    }


    /* Make total easier to scan */
    body:has(form[action="review_bill.cgi"])
    #billing-pricetable tr:last-child td {
        padding-top: 14px !important;

        border-top: 1px solid #e7eaee !important;

        font-size: 15px !important;
        font-weight: 800 !important;
    }

}


/* ============================================================
   BILLING STACKS AGAIN ON SMALLER SCREENS
   ============================================================ */

@media only screen and (max-width: 1100px) {

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"] {
        display: block !important;
    }

    body:has(form[action="review_bill.cgi"])
    #billing-pricetable,
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable) {
        width: 100% !important;
        max-width: 100% !important;

        margin-bottom: 20px !important;
    }

    body:has(form[action="review_bill.cgi"])
    .buttonsbar {
        width: 100% !important;
    }

}


/* ============================================================
   BILLING V2.1 - COMPACT / COHESIVE PAYMENT FIELDS
   Keeps the two-column layout from V2 but prevents the billing
   inputs from becoming long full-width strips.
   ============================================================ */

@media only screen and (min-width: 1101px) {

    /* Slightly tighten the right billing card */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable) {
        padding: 18px 20px !important;
    }


    /* General billing inputs */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input[type="text"],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input[type="email"],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input[type="tel"],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    select {
        width: 260px !important;
        max-width: 260px !important;

        min-height: 40px !important;

        padding: 7px 10px !important;
    }


    /* Card number gets a little more room */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="card" i],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="cc_" i],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="credit" i] {
        width: 270px !important;
        max-width: 270px !important;
    }


    /* First / Last name */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="first" i],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="last" i] {
        width: 220px !important;
        max-width: 220px !important;
    }


    /* Billing address can be a touch wider */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="address" i] {
        width: 300px !important;
        max-width: 300px !important;
    }


    /* City */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="city" i] {
        width: 190px !important;
        max-width: 190px !important;
    }


    /* State */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="state" i],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    select[name*="state" i] {
        width: 82px !important;
        max-width: 82px !important;
    }


    /* ZIP */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="zip" i],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="postal" i] {
        width: 110px !important;
        max-width: 110px !important;
    }


    /* CVV */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="cvv" i],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="cvc" i] {
        width: 88px !important;
        max-width: 88px !important;
    }


    /* Expiration month/year */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="exp" i] {
        width: 82px !important;
        max-width: 82px !important;
    }


    /* Phone / Email */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="phone" i] {
        width: 200px !important;
        max-width: 200px !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[name*="mail" i],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    input[type="email"] {
        width: 250px !important;
        max-width: 250px !important;
    }


    /* Keep input column visually tidy */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    td.input {
        text-align: left !important;
    }


    /* Consistent vertical rhythm */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    tr {
        min-height: 48px !important;
    }

}


/* On tablets / phones, fields can use available width again */
@media only screen and (max-width: 1100px) {

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input[type="text"],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input[type="email"],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input[type="tel"],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    select {
        width: min(100%, 340px) !important;
        max-width: 340px !important;
    }

}


/* ============================================================
   BILLING V2.2 - HORIZONTAL PAYMENT CARD
   Order summary ABOVE / payment information BELOW
   ============================================================ */

@media only screen and (min-width: 1101px) {

    /* --------------------------------------------------------
       STACK SUMMARY + PAYMENT CARD
       -------------------------------------------------------- */

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"] {
        display: block !important;
    }


    body:has(form[action="review_bill.cgi"])
    #billing-pricetable {
        width: 100% !important;
        max-width: none !important;

        margin: 0 0 22px !important;
    }


    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable) {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 0 16px !important;
        padding: 22px 24px !important;

        background: #ffffff !important;

        border: 1px solid #e8ecf0 !important;
        border-radius: 10px !important;

        box-shadow: var(--sw-shadow) !important;
    }


    /* --------------------------------------------------------
       TURN PAGEDNA'S VERTICAL ROWS INTO A HORIZONTAL GRID
       -------------------------------------------------------- */

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody {
        display: grid !important;

        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

        gap: 18px 22px !important;

        width: 100% !important;
    }


    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr {
        display: grid !important;

        grid-template-columns: 1fr !important;

        align-content: start !important;

        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;
    }


    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr > td,
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr > th {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;

        text-align: left !important;
    }


    /* Labels now sit above their field */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    td.label {
        width: 100% !important;

        margin: 0 0 6px !important;
        padding: 0 !important;

        color: #333945 !important;

        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;

        text-align: left !important;
    }


    /* --------------------------------------------------------
       PAYMENT SECTION TITLE
       First row spans all columns
       -------------------------------------------------------- */

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:first-child {
        grid-column: 1 / -1 !important;

        margin-bottom: 1px !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:first-child td,
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:first-child th {
        color: #171a21 !important;

        font-size: 17px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }


    /* --------------------------------------------------------
       FIELD LAYOUT
       Based on PageDNA's current billing row order:
       1 title
       2 card #
       3 type
       4 CVV
       5 expires
       6 first
       7 last
       8 billing address
       9 city/state
       10 zip
       11 phone
       12 email
       -------------------------------------------------------- */

    /* Card number takes 2 columns */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(2) {
        grid-column: span 2 !important;
    }


    /* Billing address takes 2 columns */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(8) {
        grid-column: span 2 !important;
    }


    /* City / State takes 2 columns */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(9) {
        grid-column: span 2 !important;
    }


    /* Email gets extra horizontal room */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(12) {
        grid-column: span 2 !important;
    }


    /* --------------------------------------------------------
       UNIFORM INPUT SIZING
       -------------------------------------------------------- */

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input[type="text"],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input[type="email"],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input[type="tel"],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    select {
        width: 100% !important;
        max-width: none !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 7px 10px !important;
    }


    /* Type/logo row should stay compact */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(3) td.input,
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(3) td:last-child {
        min-height: 40px !important;

        display: flex !important;
        align-items: center !important;
    }


    /* CVV */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(4)
    input {
        width: 110px !important;
        max-width: 110px !important;
    }


    /* Expiration inputs remain short instead of stretching */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(5)
    input {
        display: inline-block !important;

        width: 80px !important;
        max-width: 80px !important;

        margin-right: 4px !important;
    }


    /* ZIP */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(10)
    input {
        width: 130px !important;
        max-width: 130px !important;
    }


    /* --------------------------------------------------------
       ACTIONS
       -------------------------------------------------------- */

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    .buttonsbar {
        display: flex !important;

        width: 100% !important;

        margin: 0 !important;

        align-items: center !important;
        justify-content: flex-end !important;

        gap: 8px !important;
    }

}


/* ============================================================
   TABLET - TWO COLUMNS
   ============================================================ */

@media only screen and (min-width: 701px) and (max-width: 1100px) {

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody {
        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 16px !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr {
        display: grid !important;

        grid-template-columns: 1fr !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:first-child {
        grid-column: 1 / -1 !important;
    }

}


/* ============================================================
   MOBILE - NORMAL SINGLE COLUMN
   ============================================================ */

@media only screen and (max-width: 700px) {

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody {
        display: block !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr {
        display: block !important;

        margin-bottom: 14px !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    td.label {
        display: block !important;

        width: 100% !important;

        margin-bottom: 5px !important;

        text-align: left !important;
    }

}


/* ============================================================
   BILLING V2.3 - CLEAN / CRISP PAYMENT GRID
   Refines V2.2 horizontal card into a uniform 12-column layout.
   ============================================================ */

@media only screen and (min-width: 1101px) {

    /* --------------------------------------------------------
       PAYMENT CARD SHELL
       -------------------------------------------------------- */

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable) {
        width: 100% !important;
        max-width: none !important;

        margin: 0 0 16px !important;
        padding: 22px 24px 24px !important;

        background: #ffffff !important;

        border: 1px solid #e2e7ec !important;
        border-radius: 10px !important;

        box-shadow: 0 7px 22px rgba(25,30,38,.055) !important;
    }


    /* --------------------------------------------------------
       12-COLUMN GRID
       -------------------------------------------------------- */

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody {
        display: grid !important;

        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;

        column-gap: 14px !important;
        row-gap: 16px !important;

        width: 100% !important;
    }


    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr {
        display: grid !important;

        grid-template-columns: 1fr !important;

        align-content: start !important;

        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;
    }


    /* --------------------------------------------------------
       FIELD POSITIONS
       1  section title
       2  card number
       3  type
       4  CVV
       5  expires
       6  first
       7  last
       8  billing address
       9  city/state
       10 ZIP
       11 phone
       12 email
       -------------------------------------------------------- */

    /* Title */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(1) {
        grid-column: 1 / -1 !important;
    }

    /* Row 1 */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(2) {
        grid-column: 1 / span 5 !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(3) {
        grid-column: 6 / span 2 !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(4) {
        grid-column: 8 / span 2 !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(5) {
        grid-column: 10 / span 3 !important;
    }

    /* Row 2 */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(6) {
        grid-column: 1 / span 3 !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(7) {
        grid-column: 4 / span 3 !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(8) {
        grid-column: 7 / span 6 !important;
    }

    /* Row 3 */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(9) {
        grid-column: 1 / span 4 !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(10) {
        grid-column: 5 / span 2 !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(11) {
        grid-column: 7 / span 3 !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(12) {
        grid-column: 10 / span 3 !important;
    }


    /* --------------------------------------------------------
       LABELS
       -------------------------------------------------------- */

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    td.label {
        display: block !important;

        width: 100% !important;

        margin: 0 0 6px !important;
        padding: 0 !important;

        color: #303640 !important;

        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;

        text-align: left !important;
        white-space: normal !important;
    }


    /* --------------------------------------------------------
       INPUT CELLS
       -------------------------------------------------------- */

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    td.input {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }


    /* Every standard field uses the same visual treatment */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input[type="text"],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input[type="email"],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input[type="tel"],
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    select {
        width: 100% !important;
        max-width: none !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 10px !important;

        background: #ffffff !important;

        border: 1px solid #cfd5dc !important;
        border-radius: 6px !important;

        color: #171a21 !important;

        font-size: 12px !important;
        line-height: 40px !important;

        box-shadow: none !important;
    }


    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    input:focus,
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    select:focus {
        border-color: #b90070 !important;

        box-shadow: 0 0 0 3px rgba(185, 0, 112,.11) !important;
    }


    /* --------------------------------------------------------
       SECTION TITLE
       -------------------------------------------------------- */

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:first-child td,
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:first-child th {
        margin: 0 !important;
        padding: 0 0 2px !important;

        color: #171a21 !important;

        font-size: 17px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;

        text-align: left !important;
    }


    /* --------------------------------------------------------
       TYPE / VISA
       -------------------------------------------------------- */

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(3)
    td.input {
        display: flex !important;
        align-items: center !important;

        height: 40px !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(3)
    img {
        display: block !important;

        max-height: 28px !important;
        width: auto !important;
    }


    /* --------------------------------------------------------
       CVV
       -------------------------------------------------------- */

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(4)
    input {
        width: 100% !important;
        max-width: 110px !important;
    }


    /* --------------------------------------------------------
       EXPIRES
       Hide PageDNA's loose "/" text and use clean spacing.
       -------------------------------------------------------- */

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(5)
    td.input {
        display: flex !important;
        align-items: center !important;

        gap: 7px !important;

        font-size: 0 !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(5)
    input {
        width: 82px !important;
        max-width: 82px !important;

        font-size: 12px !important;
    }


    /* --------------------------------------------------------
       CITY / STATE
       Hide loose comma text and keep the two fields aligned.
       -------------------------------------------------------- */

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(9)
    td.input {
        display: flex !important;
        align-items: center !important;

        gap: 8px !important;

        font-size: 0 !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(9)
    input:first-of-type {
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;

        font-size: 12px !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(9)
    input:last-of-type,
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(9)
    select:last-of-type {
        flex: 0 0 78px !important;

        width: 78px !important;
        max-width: 78px !important;

        font-size: 12px !important;
    }


    /* ZIP remains compact inside its grid cell */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(10)
    input {
        width: 100% !important;
        max-width: 125px !important;
    }


    /* --------------------------------------------------------
       BUTTON ROW
       -------------------------------------------------------- */

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    .buttonsbar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        gap: 8px !important;

        width: 100% !important;

        margin: 2px 0 0 !important;
    }

}


/* ============================================================
   TABLET
   ============================================================ */

@media only screen and (min-width: 701px) and (max-width: 1100px) {

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody {
        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 15px 18px !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr {
        grid-column: auto !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:first-child {
        grid-column: 1 / -1 !important;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media only screen and (max-width: 700px) {

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable) {
        padding: 16px !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody {
        display: block !important;
    }

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr {
        display: block !important;

        margin: 0 0 14px !important;
    }

}


/* ============================================================
   BILLING V2.4 - LABEL ALIGNMENT / TEXT FIT
   Keeps V2.3 layout, only cleans field-label positioning.
   ============================================================ */

@media only screen and (min-width: 1101px) {

    /* Every field row uses a consistent label + input rhythm */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:not(:first-child) {
        grid-template-rows: 16px 40px !important;
        row-gap: 5px !important;
    }


    /* Keep all labels on one clean line */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    td.label {
        display: flex !important;
        align-items: flex-end !important;

        width: 100% !important;
        min-height: 16px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #303640 !important;

        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        letter-spacing: .01em !important;

        text-align: left !important;

        white-space: nowrap !important;
        overflow: visible !important;
    }


    /* Input cells all start on the exact same baseline */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    td.input {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* Main payment section title stays larger */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:first-child {
        grid-template-rows: auto !important;
    }


    /* Give Phone + Email labels a little more breathing room */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(11) td.label,
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:nth-child(12) td.label {
        font-size: 9.5px !important;
    }


    /* Required asterisks stay tight to the label text */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    td.label font,
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    td.label span {
        line-height: 1 !important;
    }

}


/* Tablet labels can wrap naturally if space gets tight */
@media only screen and (min-width: 701px) and (max-width: 1100px) {

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    td.label {
        min-height: 15px !important;

        margin-bottom: 5px !important;

        font-size: 10px !important;
        line-height: 1.1 !important;

        white-space: normal !important;
    }

}


/* ============================================================
   BILLING V2.5 - SHOPRINT COLOR / VISUAL POLISH
   Keeps the V2.4 structure and label alignment.
   Adds restrained SHOPRINT brand color and hierarchy.
   ============================================================ */


body:has(form[action="review_bill.cgi"])
.main.billing.catalog--container {
    color: #252a32 !important;
}

body:has(form[action="review_bill.cgi"])
.main.billing .pagetitle {
    color: #171a21 !important;
}

body:has(form[action="review_bill.cgi"])
.main.billing .pagetitle::after {
    content: "";
    display: inline-block;
    width: 34px;
    height: 3px;
    margin-left: 10px;
    vertical-align: middle;
    background: #b90070;
    border-radius: 3px;
}

/* ORDER SUMMARY CARD */
body:has(form[action="review_bill.cgi"])
#billing-pricetable {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 84%,
            #fff5fb 100%
        ) !important;

    border-color: #e3e7eb !important;

    box-shadow:
        0 9px 28px rgba(20, 25, 34, .055) !important;
}

body:has(form[action="review_bill.cgi"])
#billing-pricetable th {
    color: #171a21 !important;
    font-weight: 800 !important;
}

body:has(form[action="review_bill.cgi"])
#billing-pricetable td {
    color: #4d5561 !important;
}

body:has(form[action="review_bill.cgi"])
#billing-pricetable tr.form-sublabel td {
    color: #5f6772 !important;
}

body:has(form[action="review_bill.cgi"])
#billing-pricetable tr:last-child td {
    background: #fff4e8 !important;
    color: #171a21 !important;
    border-top: 1px solid #ffd9bd !important;
    font-weight: 800 !important;
}

body:has(form[action="review_bill.cgi"])
#billing-pricetable tr:last-child td:first-child {
    border-radius: 0 0 0 7px !important;
}

body:has(form[action="review_bill.cgi"])
#billing-pricetable tr:last-child td:last-child {
    color: #940058 !important;
    border-radius: 0 0 7px 0 !important;
}

/* PAYMENT CARD */
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable) {
    position: relative !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border-color: #e3e7eb !important;
    box-shadow:
        0 9px 28px rgba(20, 25, 34, .055) !important;
}

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: #b90070;
}

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
> tbody > tr:first-child td,
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
> tbody > tr:first-child th {
    color: #171a21 !important;
}

/* LABELS / REQUIRED INDICATORS */
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
td.label {
    color: #3d444d !important;
}

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
td.label font,
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
td.label span {
    color: #b90070 !important;
}

/* INPUTS */
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
input[type="text"],
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
input[type="email"],
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
input[type="tel"],
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
select {
    background: #fbfcfd !important;
    border-color: #cfd5dc !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease !important;
}

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
input:hover,
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
select:hover {
    background: #ffffff !important;
    border-color: #b7bec7 !important;
}

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
input:focus,
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
select:focus {
    background: #ffffff !important;
    border-color: #b90070 !important;
    box-shadow:
        0 0 0 3px rgba(185, 0, 112,.12) !important;
}

/* VISA / CARD TYPE */
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
> tbody > tr:nth-child(3)
td.input {
    padding: 0 10px !important;
    background: #fffaf5 !important;
    border: 1px solid #ffd8ba !important;
    border-radius: 6px !important;
}

/* BUTTONS */
body:has(form[action="review_bill.cgi"])
input[value*="Back" i],
body:has(form[action="review_bill.cgi"])
button[value*="Back" i],
body:has(form[action="review_bill.cgi"])
.buttonsbar a:first-child {
    background: #ffffff !important;
    color: #333a43 !important;
    border-color: #cfd5dc !important;
}

body:has(form[action="review_bill.cgi"])
input[value*="Back" i]:hover,
body:has(form[action="review_bill.cgi"])
button[value*="Back" i]:hover,
body:has(form[action="review_bill.cgi"])
.buttonsbar a:first-child:hover {
    background: #f3f5f7 !important;
    border-color: #afb6bf !important;
}

body:has(form[action="review_bill.cgi"])
input[value*="Review Order" i],
body:has(form[action="review_bill.cgi"])
button[value*="Review Order" i],
body:has(form[action="review_bill.cgi"])
.buttonsbar a:last-child {
    background:
        linear-gradient(
            180deg,
            #f78435 0%,
            #b90070 100%
        ) !important;

    color: #ffffff !important;
    border-color: #b90070 !important;

    box-shadow:
        0 4px 12px rgba(185, 0, 112,.22) !important;
}

body:has(form[action="review_bill.cgi"])
input[value*="Review Order" i]:hover,
body:has(form[action="review_bill.cgi"])
button[value*="Review Order" i]:hover,
body:has(form[action="review_bill.cgi"])
.buttonsbar a:last-child:hover {
    background:
        linear-gradient(
            180deg,
            #e96b18 0%,
            #940058 100%
        ) !important;

    border-color: #940058 !important;

    box-shadow:
        0 5px 14px rgba(148, 0, 88,.26) !important;
}

@media only screen and (max-width: 700px) {

    body:has(form[action="review_bill.cgi"])
    #billing-pricetable,
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable) {
        box-shadow:
            0 5px 18px rgba(20,25,34,.05) !important;
    }

}


/* ============================================================
   BILLING V2.6 - NEAT / REFINED FINISH
   Keeps all V2.5 functionality and layout.
   Reduces visual noise, tightens spacing, and makes the page
   feel cleaner and more cohesive.
   ============================================================ */


/* ------------------------------------------------------------
   PAGE WIDTH / RHYTHM
   ------------------------------------------------------------ */

body:has(form[action="review_bill.cgi"])
.main.billing.catalog--container {
    width: min(1220px, calc(100% - 64px)) !important;
    max-width: 1220px !important;

    margin-top: 28px !important;
    margin-bottom: 52px !important;
}


/* Intro copy aligns cleanly with cards */
body:has(form[action="review_bill.cgi"])
.main.billing.catalog--container > p,
body:has(form[action="review_bill.cgi"])
.main.billing.catalog--container > div:not(.buttonsbar) {
    max-width: 100% !important;
}


/* ------------------------------------------------------------
   PAGE TITLE
   ------------------------------------------------------------ */

body:has(form[action="review_bill.cgi"])
.main.billing .pagetitle {
    margin-bottom: 10px !important;

    font-size: 27px !important;
    line-height: 1.1 !important;
}

body:has(form[action="review_bill.cgi"])
.main.billing .pagetitle::after {
    width: 26px !important;
    height: 3px !important;

    margin-left: 8px !important;
}


/* ------------------------------------------------------------
   SHARED CARD LANGUAGE
   ------------------------------------------------------------ */

body:has(form[action="review_bill.cgi"])
#billing-pricetable,
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable) {
    border: 1px solid #e1e5e9 !important;
    border-radius: 9px !important;

    box-shadow:
        0 5px 18px rgba(20,25,34,.045) !important;
}


/* ------------------------------------------------------------
   ORDER SUMMARY - CLEANER / COMPACT
   ------------------------------------------------------------ */

body:has(form[action="review_bill.cgi"])
#billing-pricetable {
    margin-bottom: 18px !important;
    padding: 16px 20px !important;

    background: #ffffff !important;
}


/* Header row */
body:has(form[action="review_bill.cgi"])
#billing-pricetable th {
    padding-top: 7px !important;
    padding-bottom: 9px !important;

    color: #20242b !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    border-bottom: 1px solid #edf0f2 !important;
}


/* Standard rows */
body:has(form[action="review_bill.cgi"])
#billing-pricetable td {
    padding-top: 7px !important;
    padding-bottom: 7px !important;

    color: #515964 !important;

    font-size: 12px !important;
}


/* Keep quantity / price columns crisp */
body:has(form[action="review_bill.cgi"])
#billing-pricetable th:nth-last-child(-n/**/+2),
body:has(form[action="review_bill.cgi"])
#billing-pricetable td:nth-last-child(-n/**/+2) {
    text-align: right !important;
}


/* Shipping / tax area */
body:has(form[action="review_bill.cgi"])
#billing-pricetable tr.form-sublabel td {
    color: #666e79 !important;

    font-size: 11.5px !important;
}


/* Total row: clean neutral strip, orange only on amount */
body:has(form[action="review_bill.cgi"])
#billing-pricetable tr:last-child td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;

    background: #f8f9fa !important;

    border-top: 1px solid #e6eaee !important;

    color: #171a21 !important;

    font-size: 13px !important;
    font-weight: 800 !important;
}

body:has(form[action="review_bill.cgi"])
#billing-pricetable tr:last-child td:last-child {
    color: #b90070 !important;

    font-size: 15px !important;
}


/* ------------------------------------------------------------
   PAYMENT CARD - CLEANER / MORE BALANCED
   ------------------------------------------------------------ */

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable) {
    padding: 24px 24px 22px !important;

    background: #ffffff !important;
}


/* More subtle accent line */
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)::before {
    height: 3px !important;

    background: #b90070 !important;
}


/* Payment heading */
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
> tbody > tr:first-child td,
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
> tbody > tr:first-child th {
    padding-bottom: 4px !important;

    color: #20242b !important;

    font-size: 16px !important;
}


/* ------------------------------------------------------------
   GRID SPACING
   ------------------------------------------------------------ */

@media only screen and (min-width: 1101px) {

    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody {
        column-gap: 18px !important;
        row-gap: 17px !important;
    }


    /* Uniform label rhythm */
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable)
    > tbody > tr:not(:first-child) {
        grid-template-rows: 15px 40px !important;
        row-gap: 6px !important;
    }

}


/* ------------------------------------------------------------
   LABELS
   ------------------------------------------------------------ */

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
td.label {
    color: #444b55 !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    letter-spacing: .015em !important;
}


/* Keep orange only for required markers */
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
td.label font,
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
td.label span {
    color: #e86917 !important;
}


/* ------------------------------------------------------------
   INPUTS - LESS HEAVY
   ------------------------------------------------------------ */

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
input[type="text"],
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
input[type="email"],
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
input[type="tel"],
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
select {
    background: #ffffff !important;

    border: 1px solid #d6dbe0 !important;
    border-radius: 5px !important;

    color: #252a31 !important;

    font-size: 12px !important;

    box-shadow: none !important;
}

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
input:hover,
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
select:hover {
    border-color: #c4cad0 !important;
}

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
input:focus,
body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
select:focus {
    border-color: #b90070 !important;

    box-shadow:
        0 0 0 2px rgba(185, 0, 112,.10) !important;
}


/* ------------------------------------------------------------
   VISA / TYPE - REMOVE THE BIG COLORED BLOCK
   ------------------------------------------------------------ */

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
> tbody > tr:nth-child(3)
td.input {
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
}


/* ------------------------------------------------------------
   BUTTONS - CLEANER
   ------------------------------------------------------------ */

body:has(form[action="review_bill.cgi"])
.buttonsbar {
    margin-top: 14px !important;
}


/* Back */
body:has(form[action="review_bill.cgi"])
input[value*="Back" i],
body:has(form[action="review_bill.cgi"])
button[value*="Back" i],
body:has(form[action="review_bill.cgi"])
.buttonsbar a:first-child {
    min-height: 40px !important;

    padding: 0 15px !important;

    background: #ffffff !important;

    border: 1px solid #d2d7dc !important;
    border-radius: 5px !important;

    color: #3b424b !important;

    box-shadow: none !important;
}


/* Review Order */
body:has(form[action="review_bill.cgi"])
input[value*="Review Order" i],
body:has(form[action="review_bill.cgi"])
button[value*="Review Order" i],
body:has(form[action="review_bill.cgi"])
.buttonsbar a:last-child {
    min-height: 40px !important;

    padding: 0 18px !important;

    background: #b90070 !important;

    border: 1px solid #b90070 !important;
    border-radius: 5px !important;

    color: #ffffff !important;

    box-shadow:
        0 3px 9px rgba(185, 0, 112,.18) !important;
}

body:has(form[action="review_bill.cgi"])
input[value*="Review Order" i]:hover,
body:has(form[action="review_bill.cgi"])
button[value*="Review Order" i]:hover,
body:has(form[action="review_bill.cgi"])
.buttonsbar a:last-child:hover {
    background: #940058 !important;

    border-color: #940058 !important;

    box-shadow:
        0 4px 11px rgba(223,100,22,.20) !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media only screen and (max-width: 700px) {

    body:has(form[action="review_bill.cgi"])
    .main.billing.catalog--container {
        width: calc(100% - 20px) !important;
    }

    body:has(form[action="review_bill.cgi"])
    #billing-pricetable,
    body:has(form[action="review_bill.cgi"])
    form[action="review_bill.cgi"]
    > table.form-body:not(#billing-pricetable) {
        border-radius: 8px !important;

        box-shadow:
            0 4px 14px rgba(20,25,34,.04) !important;
    }

}

/* ============================================================
   SHOPRINT - REQUESTOR PAGE V9
   FINAL VISUAL-ONLY BASELINE

   PageDNA page:
   form[action="bill.cgi"]

   IMPORTANT:
   - Presentation only.
   - Does NOT change field requirements, form actions, shipping,
     order logic, or PageDNA workflow.
   - REMOVE all prior SHOPRINT Requestor V1-V7 CSS.
   - Keep your Billing V2.6 CSS.
   ============================================================ */


/* ============================================================
   PAGE FOUNDATION
   ============================================================ */

body:has(form[action="bill.cgi"]) {
    --sw-orange: #b90070;
    --sw-orange-dark: #940058;
    --sw-ink: #1c2128;
    --sw-text: #48505a;
    --sw-muted: #747c86;
    --sw-line: #e1e6ea;
    --sw-soft: #f7f8fa;
    --sw-card: #ffffff;
    --sw-shadow: 0 5px 18px rgba(20,25,34,.045);

    background: var(--sw-soft) !important;
}

body:has(form[action="bill.cgi"]) .main {
    width: min(1220px, calc(100% - 64px)) !important;
    max-width: 1220px !important;

    margin: 30px auto 58px !important;
    padding: 0 !important;

    color: var(--sw-text) !important;
    font-family: "Open Sans", Arial, sans-serif !important;
}

body:has(form[action="bill.cgi"]) form[action="bill.cgi"] {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   REMOVE ONLY VISUAL SPACERS
   ============================================================ */

body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > br,
body:has(form[action="bill.cgi"]) .message-block:empty,
body:has(form[action="bill.cgi"]) .ic-msg-blank.message-block {
    display: none !important;
}


/* ============================================================
   DESKTOP VISUAL ORDER
   No workflow changes - only CSS visual positioning.
   ============================================================ */

@media only screen and (min-width: 901px) {

    body:has(form[action="bill.cgi"]) form[action="bill.cgi"] {
        display: flex !important;
        flex-wrap: wrap !important;

        column-gap: 24px !important;
        row-gap: 0 !important;

        align-items: stretch !important;
    }

    /* Order Items */
    body:has(form[action="bill.cgi"]) #shipping-pricetable {
        order: 10 !important;
        flex: 0 0 100% !important;
    }

    body:has(form[action="bill.cgi"]) #qtysel-buttonsbar {
        order: 20 !important;
        flex: 0 0 100% !important;
    }

    /* Top pair */
    body:has(form[action="bill.cgi"]) #requestor-info {
        order: 30 !important;
        flex: 0 0 calc((100% - 24px) / 2) !important;
    }

    body:has(form[action="bill.cgi"]) #billing-info {
        order: 30 !important;
        flex: 0 0 calc((100% - 24px) / 2) !important;
    }

    /* Bottom pair */
    body:has(form[action="bill.cgi"]) #comments2-table {
        order: 40 !important;
        flex: 0 0 calc((100% - 24px) / 2) !important;
    }

    body:has(form[action="bill.cgi"]) #shipment-info {
        order: 40 !important;
        flex: 0 0 calc((100% - 24px) / 2) !important;
    }

    /* Final PageDNA action */
    body:has(form[action="bill.cgi"]) #final-buttonsbar {
        order: 50 !important;
        flex: 0 0 100% !important;
    }

    /* Preserve any real PageDNA messages, just place them cleanly */
    body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > .message-block {
        order: 45 !important;
        flex: 0 0 100% !important;
    }
}


/* ============================================================
   ORDER ITEMS
   ============================================================ */

body:has(form[action="bill.cgi"]) #shipping-pricetable {
    width: 100% !important;

    margin: 0 0 10px !important;
    padding: 16px 20px !important;

    background: #fff !important;

    border: 1px solid var(--sw-line) !important;
    border-radius: 9px !important;

    box-shadow: var(--sw-shadow) !important;

    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body:has(form[action="bill.cgi"]) #shipping-pricetable th {
    padding: 7px 10px 10px !important;

    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f2 !important;

    color: #2a3038 !important;

    font-size: 11px !important;
    font-weight: 800 !important;
}

body:has(form[action="bill.cgi"]) #shipping-pricetable td {
    height: 42px !important;

    padding: 6px 10px !important;

    background: transparent !important;
    border: 0 !important;

    color: #515965 !important;

    font-size: 12px !important;
}

body:has(form[action="bill.cgi"]) #shipping-pricetable input[type="text"],
body:has(form[action="bill.cgi"]) #shipping-pricetable input[type="number"] {
    width: 72px !important;
    height: 34px !important;

    padding: 0 8px !important;

    background: #fbfcfd !important;

    border: 1px solid #d4d9df !important;
    border-radius: 5px !important;
}


/* Quantity actions */

body:has(form[action="bill.cgi"]) #qtysel-buttonsbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 8px !important;

    width: 100% !important;

    margin: 0 0 24px !important;
}

body:has(form[action="bill.cgi"]) #qtysel-buttonsbar input,
body:has(form[action="bill.cgi"]) #qtysel-buttonsbar button,
body:has(form[action="bill.cgi"]) #qtysel-buttonsbar a {
    min-height: 36px !important;

    padding: 0 13px !important;

    background: #fff !important;
    color: #414954 !important;

    border: 1px solid #d2d7dc !important;
    border-radius: 5px !important;

    font-family: inherit !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;

    box-shadow: none !important;
}


/* ============================================================
   FOUR MAIN CARDS
   ============================================================ */

body:has(form[action="bill.cgi"]) #requestor-info,
body:has(form[action="bill.cgi"]) #billing-info,
body:has(form[action="bill.cgi"]) #comments2-table,
body:has(form[action="bill.cgi"]) #shipment-info {
    width: auto !important;
    max-width: none !important;

    margin: 0 0 24px !important;

    background: #fff !important;

    border: 1px solid var(--sw-line) !important;
    border-radius: 9px !important;

    box-shadow: var(--sw-shadow) !important;

    overflow: hidden !important;
}


/* Equal top-row cards */

@media only screen and (min-width: 901px) {

    body:has(form[action="bill.cgi"]) #requestor-info,
    body:has(form[action="bill.cgi"]) #billing-info {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
    }

    body:has(form[action="bill.cgi"]) #comments2-table,
    body:has(form[action="bill.cgi"]) #shipment-info {
        height: 235px !important;
        min-height: 235px !important;
        max-height: 235px !important;
    }
}


/* ============================================================
   NATIVE PAGEDNA SECTION HEADERS INSIDE TABLES
   Section Header Style = "In table as a table header"
   ============================================================ */

body:has(form[action="bill.cgi"]) #requestor-info tr:first-child > td[colspan],
body:has(form[action="bill.cgi"]) #requestor-info tr:first-child > th[colspan],
body:has(form[action="bill.cgi"]) #billing-info tr:first-child > td[colspan],
body:has(form[action="bill.cgi"]) #billing-info tr:first-child > th[colspan],
body:has(form[action="bill.cgi"]) #comments2-table tr:first-child > td[colspan],
body:has(form[action="bill.cgi"]) #comments2-table tr:first-child > th[colspan],
body:has(form[action="bill.cgi"]) #shipment-info tr:first-child > td[colspan],
body:has(form[action="bill.cgi"]) #shipment-info tr:first-child > th[colspan] {
    padding: 15px 18px 11px !important;

    background: #fff !important;
    color: var(--sw-ink) !important;

    border: 0 !important;
    border-top: 3px solid var(--sw-orange) !important;
    border-bottom: 1px solid #edf0f2 !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;

    text-align: left !important;
}


/* ============================================================
   REQUESTOR INFORMATION
   ============================================================ */

body:has(form[action="bill.cgi"]) #requestor-info {
    padding-bottom: 14px !important;
}

body:has(form[action="bill.cgi"]) #requestor-info td,
body:has(form[action="bill.cgi"]) #requestor-info th {
    background: transparent !important;
    border: 0 !important;
}

body:has(form[action="bill.cgi"]) #requestor-info td.label {
    width: 31% !important;

    padding: 6px 10px 6px 18px !important;

    color: #454d57 !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: right !important;
    vertical-align: middle !important;
}

body:has(form[action="bill.cgi"]) #requestor-info td.input {
    width: 69% !important;

    padding: 6px 18px 6px 0 !important;
}


/* ============================================================
   PO / ORDER NAME
   ============================================================ */

body:has(form[action="bill.cgi"]) #billing-info {
    padding-bottom: 14px !important;
}

body:has(form[action="bill.cgi"]) #billing-info td,
body:has(form[action="bill.cgi"]) #billing-info th {
    background: transparent !important;
    border: 0 !important;
}

body:has(form[action="bill.cgi"]) #billing-info td.label {
    width: 38% !important;

    padding: 8px 10px 8px 18px !important;

    color: #454d57 !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    text-align: right !important;
    vertical-align: middle !important;
}

body:has(form[action="bill.cgi"]) #billing-info td.input {
    width: 62% !important;

    padding: 8px 18px 8px 0 !important;
}


/* Shared top fields */

body:has(form[action="bill.cgi"]) #requestor-info input[type="text"],
body:has(form[action="bill.cgi"]) #requestor-info input[type="email"],
body:has(form[action="bill.cgi"]) #billing-info input[type="text"],
body:has(form[action="bill.cgi"]) #billing-info input[type="email"] {
    width: 100% !important;
    max-width: none !important;

    height: 40px !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    background: #fbfcfd !important;

    border: 1px solid #d4d9df !important;
    border-radius: 5px !important;

    color: #252a31 !important;

    font-family: inherit !important;
    font-size: 12px !important;

    outline: 0 !important;
}

body:has(form[action="bill.cgi"]) #requestor-info input:focus,
body:has(form[action="bill.cgi"]) #billing-info input:focus {
    background: #fff !important;

    border-color: var(--sw-orange) !important;

    box-shadow: 0 0 0 2px rgba(185, 0, 112,.10) !important;
}


/* ============================================================
   SPECIAL INSTRUCTIONS
   ============================================================ */

body:has(form[action="bill.cgi"]) #comments2-table td,
body:has(form[action="bill.cgi"]) #comments2-table th {
    background: transparent !important;
    border: 0 !important;
}

body:has(form[action="bill.cgi"]) #comments2-table td.label {
    display: block !important;

    width: 100% !important;

    padding: 12px 18px 8px !important;

    color: #444b55 !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    text-align: left !important;
}

body:has(form[action="bill.cgi"]) #comments2-table td.input {
    display: block !important;

    width: 100% !important;

    padding: 0 18px 16px !important;
}

body:has(form[action="bill.cgi"]) #comments2-table textarea {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 145px !important;
    min-height: 145px !important;

    margin: 0 !important;
    padding: 10px 12px !important;

    background: #fbfcfd !important;

    border: 1px solid #d4d9df !important;
    border-radius: 6px !important;

    color: #252a31 !important;

    font-family: inherit !important;
    font-size: 12px !important;

    resize: none !important;
}


/* ============================================================
   DELIVERY METHOD
   ============================================================ */

body:has(form[action="bill.cgi"]) #shipment-info td,
body:has(form[action="bill.cgi"]) #shipment-info th {
    background: transparent !important;
    border: 0 !important;
}

body:has(form[action="bill.cgi"]) #shipment-info td.label {
    display: block !important;

    width: 100% !important;

    padding: 12px 18px 8px !important;

    color: #444b55 !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    text-align: left !important;
}

body:has(form[action="bill.cgi"]) #shipment-info td.input {
    display: block !important;

    width: 100% !important;

    padding: 0 18px 16px !important;
}

body:has(form[action="bill.cgi"]) #shipment-info select,
body:has(form[action="bill.cgi"]) #shipment-info input[type="text"] {
    width: 100% !important;
    max-width: none !important;

    height: 42px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    background: #fbfcfd !important;

    border: 1px solid #d4d9df !important;
    border-radius: 6px !important;

    color: #252a31 !important;

    font-family: inherit !important;
    font-size: 12px !important;
}


/* ============================================================
   REAL PAGEDNA MESSAGES
   ============================================================ */

body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > .message-block:not(:empty) {
    width: 100% !important;

    margin: 0 0 16px !important;
    padding: 10px 14px !important;

    background: #fff5fb !important;

    border: 1px solid #f2ddcd !important;
    border-left: 3px solid var(--sw-orange) !important;
    border-radius: 5px !important;

    color: #626a74 !important;

    font-size: 11px !important;
    line-height: 1.4 !important;
}


/* ============================================================
   FINAL CTA
   ============================================================ */

body:has(form[action="bill.cgi"]) #final-buttonsbar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 2px 0 6px !important;

    text-align: center !important;
}

body:has(form[action="bill.cgi"]) #submit_review_order {
    min-width: 180px !important;
    min-height: 42px !important;

    padding: 0 20px !important;

    background: var(--sw-orange) !important;
    color: #fff !important;

    border: 1px solid var(--sw-orange) !important;
    border-radius: 5px !important;

    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;

    box-shadow: 0 3px 9px rgba(185, 0, 112,.18) !important;

    cursor: pointer !important;
}

body:has(form[action="bill.cgi"]) #submit_review_order:hover {
    background: var(--sw-orange-dark) !important;
    border-color: var(--sw-orange-dark) !important;
}


/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media only screen and (max-width: 900px) {

    body:has(form[action="bill.cgi"]) .main {
        width: calc(100% - 28px) !important;
    }

    body:has(form[action="bill.cgi"]) form[action="bill.cgi"] {
        display: block !important;
    }

    body:has(form[action="bill.cgi"]) #requestor-info,
    body:has(form[action="bill.cgi"]) #billing-info,
    body:has(form[action="bill.cgi"]) #comments2-table,
    body:has(form[action="bill.cgi"]) #shipment-info {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }

    body:has(form[action="bill.cgi"]) #comments2-table textarea {
        height: 120px !important;
        min-height: 120px !important;
    }
}

@media only screen and (max-width: 620px) {

    body:has(form[action="bill.cgi"]) .main {
        width: calc(100% - 20px) !important;
    }

    body:has(form[action="bill.cgi"]) #requestor-info tr,
    body:has(form[action="bill.cgi"]) #billing-info tr {
        display: block !important;
    }

    body:has(form[action="bill.cgi"]) #requestor-info td.label,
    body:has(form[action="bill.cgi"]) #billing-info td.label {
        display: block !important;

        width: 100% !important;

        padding: 8px 14px 5px !important;

        text-align: left !important;
    }

    body:has(form[action="bill.cgi"]) #requestor-info td.input,
    body:has(form[action="bill.cgi"]) #billing-info td.input {
        display: block !important;

        width: 100% !important;

        padding: 0 14px 10px !important;
    }

    body:has(form[action="bill.cgi"]) #submit_review_order {
        width: min(100%, 300px) !important;
    }
}


/* ============================================================
   SHOPRINT REQUESTOR V9 - FINAL POLISH
   Visual-only refinements
   ============================================================ */


/* ============================================================
   1. CENTER ADD MORE PRODUCTS + UPDATE
   ============================================================ */

body:has(form[action="bill.cgi"]) #qtysel-buttonsbar {
    justify-content: center !important;

    margin: 8px 0 26px !important;
    padding: 10px 0 !important;

    background: transparent !important;
}

body:has(form[action="bill.cgi"]) #qtysel-buttonsbar input,
body:has(form[action="bill.cgi"]) #qtysel-buttonsbar button,
body:has(form[action="bill.cgi"]) #qtysel-buttonsbar a {
    min-width: 110px !important;
    min-height: 38px !important;

    padding: 0 14px !important;

    background: #ffffff !important;
    color: #343b44 !important;

    border: 1px solid #d4d9df !important;
    border-radius: 6px !important;

    font-size: 10.5px !important;
    font-weight: 700 !important;

    text-align: center !important;

    box-shadow: 0 2px 5px rgba(20,25,34,.025) !important;
}

body:has(form[action="bill.cgi"]) #qtysel-buttonsbar input:hover,
body:has(form[action="bill.cgi"]) #qtysel-buttonsbar button:hover,
body:has(form[action="bill.cgi"]) #qtysel-buttonsbar a:hover {
    border-color: #b90070 !important;
    color: #b90070 !important;
}


/* ============================================================
   2. TIGHTEN TOP TWO CARDS
   ============================================================ */

@media only screen and (min-width: 901px) {

    body:has(form[action="bill.cgi"]) #requestor-info,
    body:has(form[action="bill.cgi"]) #billing-info {
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;

        margin-bottom: 20px !important;
    }

}

body:has(form[action="bill.cgi"]) #requestor-info tr:first-child > td[colspan],
body:has(form[action="bill.cgi"]) #requestor-info tr:first-child > th[colspan],
body:has(form[action="bill.cgi"]) #billing-info tr:first-child > td[colspan],
body:has(form[action="bill.cgi"]) #billing-info tr:first-child > th[colspan] {
    padding-top: 13px !important;
    padding-bottom: 9px !important;
}


/* Requestor field rows */
body:has(form[action="bill.cgi"]) #requestor-info td.label {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

body:has(form[action="bill.cgi"]) #requestor-info td.input {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}


/* PO / Order field */
body:has(form[action="bill.cgi"]) #billing-info td.label {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

body:has(form[action="bill.cgi"]) #billing-info td.input {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}


/* ============================================================
   3. CONDENSE SPECIAL INSTRUCTIONS
   ============================================================ */

@media only screen and (min-width: 901px) {

    body:has(form[action="bill.cgi"]) #comments2-table {
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;

        margin-bottom: 18px !important;
    }

}

body:has(form[action="bill.cgi"]) #comments2-table tr:first-child > td[colspan],
body:has(form[action="bill.cgi"]) #comments2-table tr:first-child > th[colspan] {
    padding: 12px 16px 9px !important;
}

body:has(form[action="bill.cgi"]) #comments2-table td.label {
    padding: 9px 15px 6px !important;
}

body:has(form[action="bill.cgi"]) #comments2-table td.input {
    padding: 0 15px 13px !important;
}

body:has(form[action="bill.cgi"]) #comments2-table textarea {
    height: 105px !important;
    min-height: 105px !important;

    padding: 9px 10px !important;
}


/* ============================================================
   4. LIGHTER MESSAGE / INSTRUCTION BAR
   Keep real PageDNA information visible, but less dominant.
   ============================================================ */

body:has(form[action="bill.cgi"])
form[action="bill.cgi"] > .message-block:not(:empty) {
    margin: 0 0 14px !important;
    padding: 8px 12px !important;

    background: #fff !important;

    border: 1px solid #e5e8eb !important;
    border-left: 3px solid #b90070 !important;
    border-radius: 5px !important;

    color: #66707a !important;

    font-size: 10px !important;

    box-shadow: none !important;
}


/* ============================================================
   5. FINAL BUTTON AREA - CLEAN CENTER
   ============================================================ */

body:has(form[action="bill.cgi"]) #final-buttonsbar {
    justify-content: center !important;

    margin-top: 4px !important;
    padding: 4px 0 8px !important;

    background: transparent !important;
}

body:has(form[action="bill.cgi"]) #submit_review_order {
    min-width: 180px !important;
    min-height: 42px !important;

    border-radius: 6px !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media only screen and (max-width: 900px) {

    body:has(form[action="bill.cgi"]) #qtysel-buttonsbar {
        justify-content: center !important;
    }

    body:has(form[action="bill.cgi"]) #comments2-table {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    body:has(form[action="bill.cgi"]) #comments2-table textarea {
        height: 110px !important;
        min-height: 110px !important;
    }
    
    }/* REMOVE SHOP BY CATEGORY ARROWS */
.sw-v3-category__arrow {
    display: none !important;
}

/* Keep category titles aligned correctly */
.sw-v3-category__label {
    justify-content: flex-start !important;
}

/* SHOPRINT - CONFIGURATOR SIZE & QUANTITY V4
   VISUAL-ONLY POLISH
   Does not change pricing, form actions, quantities, dimensions,
   upload/proof workflow, or PageDNA business logic.
*/

/* Remove the empty hero gap only on Size & Quantity */
body:has(#estimate-item-container) .static-header-pic {
    display: none !important;
}
body:has(#estimate-item-container) #header-wrapper {
    margin-bottom: 0 !important;
}

/* Page wrapper */
body:has(#estimate-item-container) .main {
    width: min(1180px, calc(100% - 56px)) !important;
    max-width: 1180px !important;
    margin: 34px auto 54px !important;
    padding: 0 !important;
}

/* Configure Your Product title */
body:has(#estimate-item-container) .pagetitle,
body:has(#estimate-item-container) .banner.pagetitle {
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #1d232a !important;
    font-size: 31px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
}

/* Two-column card layout */
body:has(#estimate-item-container) #estimate-item-container {
    display: grid !important;
    grid-template-columns: minmax(0, 38%) minmax(0, 62%) !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
}

/* Left product card */
body:has(#estimate-item-container) #blurb-and-image {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 20px !important;
    background: #fff !important;
    border: 1px solid #e1e6ea !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 18px rgba(20,25,34,.05) !important;
}
body:has(#estimate-item-container) #blurb-and-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 270px !important;
    margin: 10px auto 16px !important;
    object-fit: contain !important;
    border-radius: 7px !important;
}
body:has(#estimate-item-container) #blurb-and-image p {
    margin: 7px 0 !important;
    color: #4e5660 !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
}

/* Right Size & Quantity card */
body:has(#estimate-item-container) #all_options_container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 26px 26px !important;
    background: #fff !important;
    border: 1px solid #e1e6ea !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 18px rgba(20,25,34,.05) !important;
}
body:has(#estimate-item-container) #all_options_container h1,
body:has(#estimate-item-container) #all_options_container h2,
body:has(#estimate-item-container) #all_options_container h3 {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    color: #1c2128 !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

/* Form spacing */
body:has(#estimate-item-container) #all_options_container table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}
body:has(#estimate-item-container) #all_options_container td {
    vertical-align: middle !important;
}
body:has(#estimate-item-container) #all_options_container td.label,
body:has(#estimate-item-container) #all_options_container .label {
    width: 34% !important;
    padding: 0 14px 0 0 !important;
    color: #3e4650 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: right !important;
}
body:has(#estimate-item-container) #all_options_container td.input,
body:has(#estimate-item-container) #all_options_container .input {
    width: 66% !important;
    padding: 0 !important;
}
body:has(#estimate-item-container) #all_options_container input[type="text"],
body:has(#estimate-item-container) #all_options_container input[type="number"],
body:has(#estimate-item-container) #all_options_container select {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    background: #fbfcfd !important;
    border: 1px solid #d4d9df !important;
    border-radius: 6px !important;
    color: #252a31 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    outline: 0 !important;
}
body:has(#estimate-item-container) #all_options_container input:focus,
body:has(#estimate-item-container) #all_options_container select:focus {
    background: #fff !important;
    border-color: #b90070 !important;
    box-shadow: 0 0 0 2px rgba(185, 0, 112,.10) !important;
}

/* Quote */
body:has(#estimate-item-container) #calculated_total {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    background: #fff7f1 !important;
    color: #1d232a !important;
    border: 1px solid #f6d3bd !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* Secondary PageDNA controls */
body:has(#estimate-item-container) #all_options_container button,
body:has(#estimate-item-container) #all_options_container input[type="button"],
body:has(#estimate-item-container) #blurb-and-image button,
body:has(#estimate-item-container) #blurb-and-image input[type="button"] {
    min-height: 32px !important;
    padding: 0 11px !important;
    background: #fff !important;
    color: #56606a !important;
    border: 1px solid #d5dbe0 !important;
    border-radius: 5px !important;
    font-family: inherit !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* Bottom actions */
body:has(#estimate-item-container) .buttonsbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: right !important;
}
body:has(#estimate-item-container) .buttonsbar button,
body:has(#estimate-item-container) .buttonsbar input[type="submit"],
body:has(#estimate-item-container) .buttonsbar input[type="button"] {
    min-height: 42px !important;
    padding: 0 18px !important;
    border-radius: 6px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
}

/* Responsive */
@media only screen and (max-width: 850px) {
    body:has(#estimate-item-container) .main {
        width: calc(100% - 28px) !important;
        margin-top: 24px !important;
    }
    body:has(#estimate-item-container) #estimate-item-container {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    body:has(#estimate-item-container) .buttonsbar {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}


/* ============================================================
   SHOPRINT - CONFIGURATOR CENTER V6
   SCOPED TO SIZE & QUANTITY ONLY
   Visual-only override; native PageDNA fields/actions preserved.
   ============================================================ */

body:has(#estimate-item-container) #estimate-item-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 auto !important;
    padding: 0 !important;

    gap: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#estimate-item-container) #estimate-item-container > tbody,
body:has(#estimate-item-container) #estimate-item-container > tbody > tr {
    display: contents !important;
}

/* Product information is already presented on the preceding native
   product page. Keep the configurator focused on Size & Quantity. */
body:has(#estimate-item-container) #blurb-and-image {
    display: none !important;
}

body:has(#estimate-item-container) #all_options_container {
    display: block !important;

    box-sizing: border-box !important;

    width: min(680px, calc(100% - 30px)) !important;
    max-width: 680px !important;

    min-height: 430px !important;

    margin: 0 auto !important;
    padding: 28px 32px 30px !important;

    background: #ffffff !important;

    border: 1px solid #e1e6ea !important;
    border-radius: 10px !important;

    box-shadow: 0 5px 18px rgba(20,25,34,.05) !important;

    text-align: left !important;
}

body:has(#estimate-item-container) #all_options_container::before {
    text-align: center !important;
}

body:has(#estimate-item-container) #all_options_container table {
    width: 100% !important;
    max-width: 560px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

body:has(#estimate-item-container) #calculated_total {
    font-size: 15px !important;
    font-weight: 800 !important;
}

body:has(#estimate-item-container) .buttonsbar,
body:has(#estimate-item-container) td.submit {
    text-align: center !important;
}

body:has(#estimate-item-container) .buttonsbar {
    justify-content: center !important;
}

@media only screen and (max-width: 760px) {
    body:has(#estimate-item-container) #all_options_container {
        width: 100% !important;
        min-height: 0 !important;
        padding: 20px 16px 22px !important;
    }
}


   SHOPRINT PRODUCT PAGE V6 - SCOPED
   NATIVE PAGEDNA PRODUCT-PAGE POLISH - LANDING PAGES EXCLUDED
   ============================================================ */


/* PAGE BANNER / CATEGORY + PRODUCT NAME */

body:not(:has(.sw-v3)):has(.select-items) .pagetitle {
    width: min(980px, calc(100% - 48px)) !important;

    margin: 28px auto 30px !important;
    padding: 0 0 16px !important;

    color: #1c2128 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;

    text-align: center !important;

    border-bottom: 1px solid #e1e6ea !important;

    text-transform: uppercase !important;
}


/* CENTER NATIVE PAGEDNA PRODUCT */

body:not(:has(.sw-v3)):has(.select-items) .select-items .vertical-shell {
    float: none !important;

    display: block !important;

    width: min(760px, calc(100% - 30px)) !important;
    max-width: 760px !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto 50px !important;
    padding: 0 !important;

    text-align: center !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* PRODUCT IMAGE */

body:not(:has(.sw-v3)):has(.select-items) .select-items .image-container {
    float: none !important;

    width: 100% !important;
    max-width: 520px !important;

    margin: 0 auto 16px !important;

    text-align: center !important;
}

body:not(:has(.sw-v3)):has(.select-items) .select-items .image-container img {
    display: block !important;

    width: auto !important;
    max-width: 460px !important;
    height: auto !important;
    max-height: 460px !important;

    margin: 0 auto !important;

    border-radius: 8px !important;

    object-fit: contain !important;
}


/* PRODUCT NAME / CATALOG NOTE / PRICE */

body:not(:has(.sw-v3)):has(.select-items) .select-items .longname,
body:not(:has(.sw-v3)):has(.select-items) .select-items .responsive-longname {
    float: none !important;

    width: min(720px, 100%) !important;
    max-width: 720px !important;

    margin: 0 auto 10px !important;
    padding: 0 20px !important;

    color: #333945 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;

    text-align: center !important;
}


/* Native product name underneath image becomes secondary,
   because Page Banner is now the main title */

body:not(:has(.sw-v3)):has(.select-items) .select-items .longname b:first-child,
body:not(:has(.sw-v3)):has(.select-items) .select-items .longname strong:first-child,
body:not(:has(.sw-v3)):has(.select-items) .select-items .responsive-longname b:first-child,
body:not(:has(.sw-v3)):has(.select-items) .select-items .responsive-longname strong:first-child {
    display: block !important;

    margin-bottom: 8px !important;

    color: #4f5761 !important;

    font-size: 15px !important;
    font-weight: 700 !important;
}


/* ACTION AREA */

body:not(:has(.sw-v3)):has(.select-items) .select-items .buttonsbar {
    float: none !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    gap: 7px !important;

    width: 100% !important;

    margin: 8px auto 0 !important;
    padding: 0 !important;

    background: transparent !important;

    text-align: center !important;
}


/* NATIVE SIZE & QUANTITY BUTTON */

body:not(:has(.sw-v3)):has(.select-items) .select-items #submit_catalog_add {
    min-width: 200px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 22px !important;

    background: #b90070 !important;
    color: #ffffff !important;

    border: 1px solid #b90070 !important;
    border-radius: 6px !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    box-shadow: 0 4px 11px rgba(185, 0, 112,.20) !important;
}


/* NATIVE PRODUCT INFO BUTTON */

body:not(:has(.sw-v3)):has(.select-items) .select-items [id*="product_info"],
body:not(:has(.sw-v3)):has(.select-items) .select-items [name*="product_info"] {
    min-width: 200px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    background: #ffffff !important;
    color: #414954 !important;

    border: 1px solid #d2d7dc !important;
    border-radius: 6px !important;

    font-size: 10.5px !important;
    font-weight: 700 !important;

    box-shadow: none !important;
}


/* BACKUP ONLY:
   Native PageDNA settings should already have these disabled. */

body:not(:has(.sw-v3)):has(.select-items) input[value*="Save This Order" i],
body:not(:has(.sw-v3)):has(.select-items) button[value*="Save This Order" i],
body:not(:has(.sw-v3)):has(.select-items) input[value*="Continue to Checkout" i],
body:not(:has(.sw-v3)):has(.select-items) button[value*="Continue to Checkout" i] {
    display: none !important;
}


/* MOBILE */

@media only screen and (max-width: 700px) {

    body:not(:has(.sw-v3)):has(.select-items) .pagetitle {
        width: calc(100% - 24px) !important;

        font-size: 24px !important;
    }

    body:not(:has(.sw-v3)):has(.select-items) .select-items .image-container img {
        max-width: 100% !important;
    }

}

/* ============================================================


   SHOPRINT - CATALOG LANDING + PRODUCT LIGHTBOX FIX V5.3
   VISUAL ONLY

   PURPOSE:
   1. Keep PageDNA placeholder/native item controls hidden on the
      custom SW-V3 landing pages.
   2. Allow PageDNA's native product-image lightbox to sit above
      the custom SHOPRINT header/hero on actual product pages.

   Paste at the VERY BOTTOM of:
   Site Header > Additional CSS Content
   ============================================================ */


/* ============================================================
   1. ROOT LANDING PAGES
   The custom SW-V3 Tab Blurb is the visible catalog experience.
   Do not allow the native placeholder item shell/buttons to be
   exposed by product-page styling.
   ============================================================ */

body:has(.sw-v3) .select-items .vertical-shell,
body:has(.sw-v3) .select-items [id*="product_info"],
body:has(.sw-v3) .select-items [name*="product_info"] {
    display: none !important;
}


/* Preserve the custom landing-page card system exactly */
body:has(.sw-v3) .sw-v3,
body:has(.sw-v3) .sw-v3-section,
body:has(.sw-v3) .sw-v3-category-grid,
body:has(.sw-v3) .sw-v3-materials {
    visibility: visible !important;
}


/* ============================================================
   2. REAL PRODUCT PAGE
   Lower only the custom header stacking context so PageDNA's
   native modal/lightbox can cover the header + hero properly.

   Product pages do not contain the .sw-v3 landing-page markup.
   ============================================================ */

body:not(:has(.sw-v3)):has(.select-items) #header-wrapper {
    z-index: 100 !important;
}


/* Keep native header controls above ordinary page content */
body:not(:has(.sw-v3)):has(.select-items) .catalog-header-menu,
body:not(:has(.sw-v3)):has(.select-items) #header-links-container,
body:not(:has(.sw-v3)):has(.select-items) #mobile_cart,
body:not(:has(.sw-v3)):has(.select-items) #header_title .burger {
    z-index: 150 !important;
}


/* Hero stays part of the header but no longer outranks PageDNA modal */
body:not(:has(.sw-v3)):has(.select-items) .static-header-pic {
    z-index: -1 !important;
}

/* ============================================================
   SHOPRINT - CLEAN ADDITIONAL CSS BASELINE V7
   Consolidated 2026-09-23

   Built directly from the last known-good V6 baseline.

   CLEANUP PERFORMED:
   - Removed the accidental duplicate V6.1 configurator-nav block.
   - Consolidated the superseded V6.3G product patch into V6.4.
   - Preserved the working product-shell spacing from V6.3G.
   - Preserved V6.3B automatic ADHESIVE / BOARDS / BANNER prefixes.
   - Preserved V6.4 final product content order.
   - Preserved the selected category hero banners.
   - Preserved the #1D5B6C Popular Materials teal band.
   - No pricing, checkout, upload, proof, routing, or PageDNA
     business logic was intentionally changed.
   ============================================================ */

/* ============================================================
   SHOPRINT V6.1
   CONFIGURATOR GLOBAL NAV + CURRENT ITEM NAME
   VISUAL / NAVIGATION ONLY
   ============================================================ */


/* ============================================================
   GLOBAL CATEGORY NAV
   Hidden everywhere by default.
   ============================================================ */

html body .catalog-header-menu.global-catalog-menu {
    display: none !important;
}


/* Show the global nav on PageDNA configuration/artwork pages.
   Existing header CSS supplies the positioning/styles. */

@media only screen and (min-width: 1025px) {

    html body:has(form[name="f"][action="item_form.cgi"])
    .catalog-header-menu.global-catalog-menu {

        position: absolute !important;

        top: 0 !important;
        left: 275px !important;

        display: block !important;

        width: auto !important;
        height: 72px !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 5700 !important;
    }


    html body:has(form[name="f"][action="item_form.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu {

        display: flex !important;
        align-items: stretch !important;

        height: 72px !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    html body:has(form[name="f"][action="item_form.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu li {

        display: flex !important;

        height: 72px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    html body:has(form[name="f"][action="item_form.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu a {

        position: relative !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        height: 72px !important;

        margin: 0 !important;
        padding: 0 19px !important;

        background: transparent !important;

        color: #161616 !important;

        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        text-decoration: none !important;
    }


    html body:has(form[name="f"][action="item_form.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu a:hover {

        color: #007da8 !important;
    }


    html body:has(form[name="f"][action="item_form.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu a::after {

        content: "";

        position: absolute;

        right: 19px;
        bottom: 9px;
        left: 19px;

        height: 3px;

        background: #00a8e8;

        border-radius: 3px;

        transform: scaleX(0);
        opacity: 0;

        transition:
            transform .18s ease,
            opacity .18s ease;
    }


    html body:has(form[name="f"][action="item_form.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu a:hover::after {

        transform: scaleX(1);
        opacity: 1;
    }

}

/* ============================================================
   SIZE & QUANTITY - DISPLAY CURRENT PAGEDNA ITEM NAME

   V6 hides #blurb-and-image completely.
   We bring the wrapper back ONLY to expose #curr_item_name.
   Image and description remain hidden.
   ============================================================ */

body:has(#estimate-item-container) #blurb-and-image {

    display: block !important;

    box-sizing: border-box !important;

    width: min(680px, calc(100% - 30px)) !important;
    max-width: 680px !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto 10px !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    text-align: center !important;
}


/* Hide everything in the old product card... */

body:has(#estimate-item-container) #blurb-and-image > * {
    display: none !important;
}


/* ...except PageDNA's real current product name */

body:has(#estimate-item-container)
#blurb-and-image #curr_item_name {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #b90070 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;

    letter-spacing: .025em !important;

    text-align: center !important;

    text-transform: uppercase !important;
}


/* Small descriptive prefix */

body:has(#estimate-item-container)
#blurb-and-image #curr_item_name::before {

    content: "CONFIGURING: ";

    color: #6b737d !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    letter-spacing: .04em !important;
}


/* Make sure hidden image/description cannot return */

body:has(#estimate-item-container)
#blurb-and-image img,

body:has(#estimate-item-container)
#blurb-and-image p,

body:has(#estimate-item-container)
#blurb-and-image em,

body:has(#estimate-item-container)
#blurb-and-image i {

    display: none !important;
}


/* Mobile - keep navigation in hamburger rather than crowd header */

@media only screen and (max-width: 1024px) {

    html body
    .catalog-header-menu.global-catalog-menu {
        display: none !important;
    }

    body:has(#estimate-item-container)
    #blurb-and-image #curr_item_name {
        font-size: 14px !important;
    }

}

/* ============================================================
   SHOPRINT V6.3B
   AUTOMATIC CATEGORY PREFIX ON NATIVE PRODUCT NAME
   PRODUCT PAGE ONLY
   ============================================================ */


/* Keep native PageDNA product text as the source */
body:not(:has(.sw-v3)) .select-items .longname,
body:not(:has(.sw-v3)) .select-items .responsive-longname {

    text-align: center !important;

    color: #1c2128 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}


/* ============================================================
   ADHESIVE
   PageDNA already stores the current tab in input[name="tab"].
   ============================================================ */

body:not(:has(.sw-v3))
:has(input[name="tab"][value^="ADHESIVE"])
.select-items .longname::before,

body:not(:has(.sw-v3))
:has(input[name="tab"][value^="ADHESIVE"])
.select-items .responsive-longname::before {

    content: "ADHESIVE - " !important;

    color: #b90070 !important;

    font-weight: 800 !important;
}


/* ============================================================
   BOARDS
   ============================================================ */

body:not(:has(.sw-v3))
:has(input[name="tab"][value^="BOARDS"])
.select-items .longname::before,

body:not(:has(.sw-v3))
:has(input[name="tab"][value^="BOARDS"])
.select-items .responsive-longname::before {

    content: "BOARDS - " !important;

    color: #b90070 !important;

    font-weight: 800 !important;
}


/* ============================================================
   BANNER
   ============================================================ */

body:not(:has(.sw-v3))
:has(input[name="tab"][value^="BANNER"])
.select-items .longname::before,

body:not(:has(.sw-v3))
:has(input[name="tab"][value^="BANNER"])
.select-items .responsive-longname::before {

    content: "BANNER - " !important;

    color: #b90070 !important;

    font-weight: 800 !important;
}

/* ============================================================
   SHOPRINT PRODUCT PAGE V6.4
   FINAL PRODUCT CONTENT ORDER

   TITLE
   IMAGE
   DESCRIPTION
   COST
   SIZE & QUANTITY
   ============================================================ */


/* ============================================================
   PRODUCT CONTENT WRAPPER
   Use CSS Grid so PageDNA's native elements can be reordered
   without changing their HTML or functionality.
   ============================================================ */

body:not(:has(.sw-v3))
.select-items
.height-adjuster {

    display: grid !important;

    grid-template-columns: 1fr !important;

    grid-template-areas:
        "product-title"
        "product-image"
        "product-description"
        "product-price"
        "product-extra" !important;

    justify-items: center !important;
    align-items: start !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding: 0 !important;

    overflow: visible !important;
}


/* ============================================================
   1. PRODUCT TITLE
   Dynamic PageDNA name + V6.3B category prefix
   ============================================================ */

body:not(:has(.sw-v3))
.select-items
.height-adjuster
.responsive-longname {

    grid-area: product-title !important;

    display: block !important;

    width: 100% !important;
    max-width: 760px !important;

    margin: 0 auto 18px !important;
    padding: 0 16px !important;

    color: #1c2128 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    letter-spacing: -.01em !important;

    text-align: center !important;
    text-transform: uppercase !important;
}


body:not(:has(.sw-v3))
.select-items
.height-adjuster
.responsive-longname label {

    color: #1c2128 !important;

    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    text-transform: uppercase !important;
}


/* Keep ADHESIVE / BOARDS / BANNER orange */

body:not(:has(.sw-v3))
:has(input[name="tab"][value^="ADHESIVE"])
.select-items
.responsive-longname::before,

body:not(:has(.sw-v3))
:has(input[name="tab"][value^="BOARDS"])
.select-items
.responsive-longname::before,

body:not(:has(.sw-v3))
:has(input[name="tab"][value^="BANNER"])
.select-items
.responsive-longname::before {

    color: #b90070 !important;

    font-size: 22px !important;
    font-weight: 800 !important;
}


/* ============================================================
   2. PRODUCT IMAGE
   ============================================================ */

body:not(:has(.sw-v3))
.select-items
.height-adjuster
.image-container {

    grid-area: product-image !important;

    width: 100% !important;

    margin: 0 auto 20px !important;
    padding: 0 !important;

    text-align: center !important;
}


body:not(:has(.sw-v3))
.select-items
.height-adjuster
.image-container img {

    display: block !important;

    width: auto !important;
    max-width: 460px !important;
    height: auto !important;

    margin: 0 auto !important;

    border-radius: 8px !important;

    object-fit: contain !important;
}


/* ============================================================
   3. PRODUCT DESCRIPTION
   Native PageDNA Catalog Note
   ============================================================ */

body:not(:has(.sw-v3))
.select-items
.height-adjuster
.responsive-choose-info {

    grid-area: product-description !important;

    display: block !important;

    width: min(720px, calc(100% - 30px)) !important;

    margin: 0 auto 10px !important;
    padding: 0 !important;

    color: #424952 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;

    text-align: center !important;
}


body:not(:has(.sw-v3))
.select-items
.height-adjuster
.responsive-choose-info span {

    font: inherit !important;
    color: inherit !important;

    text-align: inherit !important;
}


/* ============================================================
   4. COST
   ============================================================ */

body:not(:has(.sw-v3))
.select-items
.height-adjuster
.responsive-pricing {

    grid-area: product-price !important;

    display: block !important;

    width: 100% !important;

    margin: 0 auto 12px !important;
    padding: 0 !important;

    color: #222831 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    text-align: center !important;
}


/* Remaining native PageDNA content stays last */

body:not(:has(.sw-v3))
.select-items
.height-adjuster
.responsive-tagcheck {

    grid-area: product-extra !important;
}


/* ============================================================
   SIZE & QUANTITY BUTTON
   Directly below price/content
   ============================================================ */

body:not(:has(.sw-v3))
.select-items
.buttonsbar {

    position: static !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    margin: 4px auto 0 !important;
    padding: 0 0 25px !important;

    overflow: visible !important;

    text-align: center !important;
}


body:not(:has(.sw-v3))
.select-items
#submit_catalog_add {

    position: static !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 200px !important;
    min-height: 44px !important;

    margin: 0 auto !important;
    padding: 0 22px !important;

    visibility: visible !important;
    opacity: 1 !important;

    background: #b90070 !important;
    color: #ffffff !important;

    border: 1px solid #b90070 !important;
    border-radius: 6px !important;

    font-size: 12px !important;
    font-weight: 800 !important;
}


/* Allow entire native product shell to grow */

body:not(:has(.sw-v3))
.select-items
.vertical-shell,

body:not(:has(.sw-v3))
.select-items
.responsive-item {

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media only screen and (max-width: 700px) {

    body:not(:has(.sw-v3))
    .select-items
    .height-adjuster
    .responsive-longname,

    body:not(:has(.sw-v3))
    .select-items
    .height-adjuster
    .responsive-longname label {

        font-size: 19px !important;
    }


    body:not(:has(.sw-v3))
    .select-items
    .height-adjuster
    .image-container img {

        max-width: 100% !important;
    }


    body:not(:has(.sw-v3))
    .select-items
    .height-adjuster
    .responsive-choose-info {

        font-size: 12px !important;
    }

}

/* ============================================================
   PRODUCT PAGE - PRESERVED FINAL SPACING
   Retains the working V6.3G shell spacing that V6.4 did not
   supersede. No PageDNA behavior is changed.
   ============================================================ */

body:not(:has(.sw-v3))
.select-items
.vertical-shell {
    padding-bottom: 55px !important;
    margin-bottom: 35px !important;
}

/* ============================================================
   SHOPRINT - FINAL LANDING PAGE VISUALS
   ORIGINAL SELECTED BANNERS + TEAL POPULAR MATERIALS
   VISUAL ONLY
   ============================================================ */


/* ============================================================
   1. ORIGINAL HERO BANNERS
   These are the versions from BEFORE the zoomed-out replacements.
   ============================================================ */


/* Shared hero behavior */
html body .static-header-pic {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
}


/* ------------------------------------------------------------
   ADHESIVE
   Landing + Adhesive product pages
   ------------------------------------------------------------ */

html body:has(input[name="tab"][value^="ADHESIVE"])
.static-header-pic {
    background-image:
        url("../con/OVERSIGNS ADHESIVES BANNER.png") !important;

    background-position: center center !important;
}


/* ------------------------------------------------------------
   BOARDS - LANDING PAGE
   ------------------------------------------------------------ */

html body:has(.sw-v3)
:has(input[name="tab"][value^="BOARDS"])
.static-header-pic {
    background-image:
        url("../con/OVERSIGNS BOARDS BANNER.png") !important;

    background-position: center center !important;
}


/* ------------------------------------------------------------
   BOARDS - PRODUCT PAGES
   ------------------------------------------------------------ */

html body:not(:has(.sw-v3))
:has(.select-items)
:has(input[name="tab"][value^="BOARDS"])
.static-header-pic {
    background-image:
        url("../con/OVERSIGNS BOARDS BANNER.png") !important;

    background-position: center center !important;
}


/* ------------------------------------------------------------
   BANNERS
   Landing + Banner product pages
   ------------------------------------------------------------ */

html body:has(input[name="tab"][value^="BANNER"])
.static-header-pic {
    background-image:
        url("../con/OVERSIGNS BANNERS.png") !important;

    background-position: center center !important;
}


/* ============================================================
   2. POPULAR MATERIALS - OVERSIGNS DEEP TEAL BAND
   Brand color: #103b4a
   ============================================================ */


/* Turn ONLY the second SW-V3 section into the teal band */
body:has(.sw-v3)
.sw-v3
> .sw-v3-section:nth-of-type(2) {

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

    margin: 38px 0 0 !important;

    padding:
        38px
        0
        58px !important;

    background: #103b4a !important;
}


/* Keep heading + cards aligned with the rest of the site */
body:has(.sw-v3)
.sw-v3
> .sw-v3-section:nth-of-type(2)
> .sw-v3-section__head,

body:has(.sw-v3)
.sw-v3
> .sw-v3-section:nth-of-type(2)
> .sw-v3-materials {

    width: min(1000px, calc(100% - 40px)) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* Popular Materials heading becomes white */
body:has(.sw-v3)
.sw-v3
> .sw-v3-section:nth-of-type(2)
.sw-v3-section__head h2 {

    color: #ffffff !important;
}


/* Remove old extra empty spacing */
body:has(.sw-v3)
.sw-v3
> .sw-v3-section:nth-of-type(2)
.sw-v3-materials {

    padding-bottom: 0 !important;
}


/* White material cards against teal */
body:has(.sw-v3)
.sw-v3
> .sw-v3-section:nth-of-type(2)
.sw-v3-material {

    background: #ffffff !important;

    border:
        1px solid
        rgba(255,255,255,.18) !important;

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.13) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}


/* Card hover */
body:has(.sw-v3)
.sw-v3
> .sw-v3-section:nth-of-type(2)
.sw-v3-material:hover {

    transform: translateY(-4px) !important;

    box-shadow:
        0 14px 30px
        rgba(0,0,0,.20) !important;
}


/* ============================================================
   3. MOBILE
   ============================================================ */

@media only screen and (max-width: 768px) {

    body:has(.sw-v3)
    .sw-v3
    > .sw-v3-section:nth-of-type(2) {

        margin-top: 28px !important;

        padding:
            30px
            0
            42px !important;
    }

}

/* ============================================================
   SHOPRINT V7.1A - UPLOAD ARTWORK PAGE
   STEP 1: REMOVE EMPTY HERO SPACE
   VISUAL ONLY
   ============================================================ */

body:has(
    form[name="f"][action="item_form.cgi"]
    table.imprint-splitview
)
#header-wrapper {
    margin-bottom: 0 !important;
}

/* ============================================================
   SHOPRINT V7.1B - UPLOAD ARTWORK PAGE
   STEP 2: CLEAN SECTION HEADERS
   VISUAL ONLY
   ============================================================ */

/* Full-width PageDNA section headers */
body:has(
    form[name="f"][action="item_form.cgi"]
    table.imprint-splitview
)
td.left-side .form-subheader,

body:has(
    form[name="f"][action="item_form.cgi"]
    table.imprint-splitview
)
td.left-side td.label[colspan] {

    background: #171a21 !important;
    color: #ffffff !important;

    padding: 8px 12px !important;
    margin: 10px 0 8px !important;

    border: 0 !important;
    border-radius: 5px !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;

    line-height: 1.2 !important;
    letter-spacing: .035em !important;

    text-transform: uppercase !important;
}


/* Make any text inside those headers white too */
body:has(
    form[name="f"][action="item_form.cgi"]
    table.imprint-splitview
)
td.left-side .form-subheader *,

body:has(
    form[name="f"][action="item_form.cgi"]
    table.imprint-splitview
)
td.left-side td.label[colspan] * {

    color: #ffffff !important;
}

/* ============================================================
   SHOPRINT V7.1C - UPLOAD ARTWORK
   CORRECT PAGEDNA SECTION LABEL TARGET
   VISUAL ONLY
   ============================================================ */

/* PageDNA uses label.label for these orange section bars */

body:has(
    form[name="f"][action="item_form.cgi"]
    table.imprint-splitview
)
table.imprint-splitview
td.left-side
label.label {

    display: block !important;

    width: 100% !important;

    margin: 8px 0 10px !important;
    padding: 8px 12px !important;

    background: #171a21 !important;
    background-color: #171a21 !important;

    color: #ffffff !important;

    border: 0 !important;
    border-radius: 5px !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    letter-spacing: .035em !important;
    text-transform: uppercase !important;
}


/* Any text nested inside stays white */

body:has(
    form[name="f"][action="item_form.cgi"]
    table.imprint-splitview
)
table.imprint-splitview
td.left-side
label.label * {

    color: #ffffff !important;
}

/* ============================================================
   SHOPRINT V7.1D - ARTWORK PREVIEW STABILITY
   WIDEN PREVIEW + STOP HORIZONTAL PAGE DRIFT
   VISUAL ONLY
   ============================================================ */


/* ------------------------------------------------------------
   STOP THE UPLOAD PAGE FROM HORIZONTALLY DRIFTING
   ------------------------------------------------------------ */

html:has(
    form[name="f"][action="item_form.cgi"]
    table.imprint-splitview
),

body:has(
    form[name="f"][action="item_form.cgi"]
    table.imprint-splitview
) {
    overflow-x: clip !important;
}


body:has(
    form[name="f"][action="item_form.cgi"]
    table.imprint-splitview
)
.main {
    overflow-x: clip !important;
}


/* ------------------------------------------------------------
   GIVE ARTWORK PREVIEW MORE DESKTOP WIDTH
   ------------------------------------------------------------ */

@media only screen and (min-width: 1101px) {

    body:has(
        form[name="f"][action="item_form.cgi"]
        table.imprint-splitview
    )
    table.imprint-splitview {

        grid-template-columns:
            minmax(0, 3fr)
            minmax(460px, 2fr) !important;

        gap: 20px !important;
    }

}


/* ------------------------------------------------------------
   CONTAIN THE PAGEDNA PREVIEW INSIDE ITS CARD
   ------------------------------------------------------------ */

body:has(
    form[name="f"][action="item_form.cgi"]
    table.imprint-splitview
)
table.imprint-splitview
td.right-side {

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow-x: hidden !important;
}


/* Native preview wrappers cannot push the card wider */

body:has(
    form[name="f"][action="item_form.cgi"]
    table.imprint-splitview
)
td.right-side > *,

body:has(
    form[name="f"][action="item_form.cgi"]
    table.imprint-splitview
)
td.right-side div,

body:has(
    form[name="f"][action="item_form.cgi"]
    table.imprint-splitview
)
td.right-side table {

    max-width: 100% !important;

    box-sizing: border-box !important;
}


/* If PageDNA uses an iframe for the viewer,
   force the iframe itself to fit the card */

body:has(
    form[name="f"][action="item_form.cgi"]
    table.imprint-splitview
)
td.right-side iframe {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}

/* ============================================================
   SHOPRINT V7.1G - RESTORE NATIVE PAGEDNA PREVIEW GEOMETRY
   Keeps styling, but lets PageDNA calculate its preview normally.
   ============================================================ */

@media only screen and (min-width: 1101px) {

    /* Give the upload/proof page enough desktop room */
    body:has(
        form[name="f"][action="item_form.cgi"]
        table.imprint-splitview
    )
    form[name="f"][action="item_form.cgi"] {

        width: min(1440px, calc(100% - 48px)) !important;
        max-width: 1440px !important;
    }


    /* Restore PageDNA's native table structure */
    body:has(
        form[name="f"][action="item_form.cgi"]
        table.imprint-splitview
    )
    table.imprint-splitview {

        display: table !important;

        width: 100% !important;

        table-layout: auto !important;

        border-collapse: separate !important;
        border-spacing: 20px 0 !important;
    }


    body:has(
        form[name="f"][action="item_form.cgi"]
        table.imprint-splitview
    )
    table.imprint-splitview > tbody {

        display: table-row-group !important;
    }


    body:has(
        form[name="f"][action="item_form.cgi"]
        table.imprint-splitview
    )
    table.imprint-splitview > tbody > tr {

        display: table-row !important;
    }


    /* Let both PageDNA cells behave like real table cells again */
    body:has(
        form[name="f"][action="item_form.cgi"]
        table.imprint-splitview
    )
    table.imprint-splitview td.left-side,

    body:has(
        form[name="f"][action="item_form.cgi"]
        table.imprint-splitview
    )
    table.imprint-splitview td.right-side {

        display: table-cell !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        vertical-align: top !important;
    }


    /* IMPORTANT:
       Let PageDNA keep the actual viewport size it calculates.
       Do not squeeze the pasteboard with our generic max-width rule.
    */
    body:has(
        form[name="f"][action="item_form.cgi"]
        table.imprint-splitview
    )
    td.right-side #pasteboard {

        max-width: none !important;
    }


    /* Same for PageDNA's draggable artwork page */
    body:has(
        form[name="f"][action="item_form.cgi"]
        table.imprint-splitview
    )
    td.right-side #pasteboard #page {

        max-width: none !important;
        max-height: none !important;
    }

}

/* ============================================================
   SHOPRINT - CONFIGURATOR HEADER SEARCH
   MATCHES EXISTING HOMEPAGE SEARCH
   ============================================================ */


/* Hide everywhere by default */
.shoprint-config-search {
    display: none !important;
}


/* Only show on PageDNA configurator / upload artwork pages */
@media only screen and (min-width: 1025px) {

    body:has(form[name="f"][action="item_form.cgi"])
    .shoprint-config-search {

        position: absolute !important;

        top: 14px !important;
        left: 50% !important;

        transform: translateX(-28%) !important;

        display: flex !important;
        align-items: center !important;

        width: min(35vw, 520px) !important;
        min-width: 330px !important;
        height: 43px !important;

        margin: 0 !important;
        padding: 0 12px 0 7px !important;

        overflow: hidden !important;

        background: #ffffff !important;

        border: 1px solid #d8dce1 !important;
        border-radius: 24px !important;

        box-shadow: none !important;

        z-index: 5300 !important;

        transition:
            border-color .18s ease,
            box-shadow .18s ease !important;
    }


    /* Orange focus ring - same behavior as homepage */

    body:has(form[name="f"][action="item_form.cgi"])
    .shoprint-config-search:focus-within {

        border-color: #00a8e8 !important;

        box-shadow:
            0 0 0 3px rgba(185, 0, 112,.12) !important;
    }


    /* Search field */

    body:has(form[name="f"][action="item_form.cgi"])
    .shoprint-config-search-input {

        order: 2 !important;
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;
        height: 40px !important;

        margin: 0 !important;
        padding: 0 10px 0 3px !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;
        outline: 0 !important;

        color: #202020 !important;

        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 400 !important;
    }


    .shoprint-config-search-input::placeholder {

        color: #8a8f96 !important;
        opacity: 1 !important;
    }


    /* Search icon button */

    body:has(form[name="f"][action="item_form.cgi"])
    .shoprint-config-search-button {

        order: 1 !important;
        flex: 0 0 34px !important;

        position: relative !important;

        width: 34px !important;
        min-width: 34px !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        color: #555b62 !important;

        cursor: pointer !important;
    }


    .shoprint-config-search-button i {

        color: #555b62 !important;

        font-size: 15px !important;
        font-weight: normal !important;
    }


    .shoprint-config-search-button:hover i {

        color: #007da8 !important;
    }

}


/* Keep current mobile header uncluttered */

@media only screen and (max-width: 1024px) {

    .shoprint-config-search {
        display: none !important;
    }

}

/* ============================================================
   OVERSIGNS - BRAND UPDATE V1
   Header color + landing-page link cleanup
   VISUAL ONLY / PAGEDNA SAFE
   ============================================================ */

/* ------------------------------------------------------------
   DESKTOP HEADER / NAVIGATION BAR
   ------------------------------------------------------------ */
@media only screen and (min-width: 1025px) {

    html body #header-wrapper,
    html body #header-wrapper > table.header,
    html body #header-wrapper > table.header > tbody,
    html body #header-wrapper > table.header > tbody > tr,
    html body #header_logo,
    html body #header_title {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    /* Category nav stays transparent so the new header color shows through */
    html body .catalog-header-menu,
    html body .catalog-header-menu .top-menu,
    html body .catalog-header-menu .top-menu li,
    html body .catalog-header-menu .top-menu a {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }
}

/* ------------------------------------------------------------
   ADHESIVE + BOARDS LANDING PAGES
   Remove View All Products / View All Materials only
   ------------------------------------------------------------ */
body:has(.sw-v3):has(input[name="tab"][value^="ADHESIVE"])
.sw-v3-section__link,
body:has(.sw-v3):has(input[name="tab"][value^="BOARDS"])
.sw-v3-section__link {
    display: none !important;
}

/* Keep section headings aligned after the links are removed */
body:has(.sw-v3):has(input[name="tab"][value^="ADHESIVE"])
.sw-v3-section__head,
body:has(.sw-v3):has(input[name="tab"][value^="BOARDS"])
.sw-v3-section__head {
    justify-content: flex-start !important;
}

/* ============================================================
   OVERSIGNS - LOGO VERTICAL ALIGNMENT
   Align logo with navigation
   ============================================================ */

@media only screen and (min-width: 1025px) {

    #header_logo img.no_mobile {
        top: 0 !important;
    }

}

/* ============================================================
   OVERSIGNS - SHIPPING & ORDER DETAILS V11
   Visual layout only. PageDNA fields, controls and actions remain native.
   This replaces the old Shipping V10-V10.3 override sequence.
   ============================================================ */

body:has(form[action="bill.cgi"]) {
  background: #f7f9fb !important;
}

body:has(form[action="bill.cgi"]) .static-header-pic {
  display: none !important;
}

body:has(form[action="bill.cgi"]) #header-wrapper {
  margin-bottom: 0 !important;
}

body:has(form[action="bill.cgi"]) .main {
  width: min(1080px, calc(100% - 48px)) !important;
  max-width: 1080px !important;
  margin: 0 auto 56px !important;
  padding: 32px 0 0 !important;
}

body:has(form[action="bill.cgi"]) .main::before {
  content: "Shipping & Order Details";
  display: block;
  margin: 0 0 5px !important;
  color: #17212b;
  font: 800 30px/1.15 "Open Sans", Arial, sans-serif;
  letter-spacing: -.02em;
}

body:has(form[action="bill.cgi"]) .main::after {
  content: none !important;
}

body:has(form[action="bill.cgi"]) form[action="bill.cgi"]::before {
  content: "Review your order, delivery method, and requestor information before continuing to billing.";
  display: block;
  order: 0 !important;
  flex: 0 0 100% !important;
  width: 100%;
  margin: 0 0 18px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid #dce5eb;
  color: #5f6d79;
  font: 400 13px/1.5 "Open Sans", Arial, sans-serif;
}

@media only screen and (min-width: 901px) {
  body:has(form[action="bill.cgi"]) form[action="bill.cgi"] {
    display: flex !important;
    flex-wrap: wrap !important;
    column-gap: 20px !important;
    align-items: stretch !important;
  }

  body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > .message-block:not(:empty) {
    order: 4 !important;
    flex: 0 0 100% !important;
  }
  body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > table:has(select) {
    order: 5 !important;
    flex: 0 0 100% !important;
  }
  body:has(form[action="bill.cgi"]) #shipment-info {
    order: 5 !important;
    flex: 0 0 100% !important;
  }
  body:has(form[action="bill.cgi"]) #shipping-pricetable {
    order: 10 !important;
    flex: 0 0 100% !important;
  }
  body:has(form[action="bill.cgi"]) #qtysel-buttonsbar {
    order: 20 !important;
    flex: 0 0 100% !important;
  }
  body:has(form[action="bill.cgi"]) :is(#requestor-info, #billing-info) {
    order: 30 !important;
    flex: 0 0 calc((100% - 20px) / 2) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 16px !important;
  }
  body:has(form[action="bill.cgi"]) #comments2-table {
    order: 40 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 16px !important;
  }
  body:has(form[action="bill.cgi"]) #final-buttonsbar {
    order: 50 !important;
    flex: 0 0 100% !important;
  }
}

/* The native helper line is retained above the delivery method. */
body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > .message-block:not(:empty) {
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 11px 14px !important;
  background: #fff !important;
  border: 1px solid #dce5eb !important;
  border-left: 3px solid #b90070 !important;
  border-radius: 6px !important;
  color: #596673 !important;
  font: 400 12px/1.5 "Open Sans", Arial, sans-serif !important;
  box-shadow: none !important;
}

/* The native shipping table is the delivery-method card. */
body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > table:has(select),
body:has(form[action="bill.cgi"]) :is(#shipping-pricetable, #requestor-info, #billing-info, #comments2-table) {
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #dce5eb !important;
  border-top: 3px solid #00a8e8 !important;
  border-radius: 9px !important;
  box-shadow: 0 7px 22px rgba(24,42,56,.055) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
}

body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > table:has(select) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 16px !important;
  padding: 17px 20px 19px !important;
}

body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > table:has(select) tbody,
body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > table:has(select) tr,
body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > table:has(select) td.label,
body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > table:has(select) td.input {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
}

body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > table:has(select) td.label {
  padding: 0 0 10px !important;
  color: #17212b !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-align: left !important;
}

body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > table:has(select) td.input {
  padding: 0 !important;
  text-align: left !important;
}

body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > table:has(select) select {
  display: block !important;
  width: min(100%, 500px) !important;
  max-width: 100% !important;
  height: 44px !important;
  padding: 0 12px !important;
  background: #fbfcfd !important;
  border: 1px solid #cbd8e1 !important;
  border-radius: 6px !important;
  color: #253544 !important;
  font-size: 14px !important;
}

/* Order summary. */
body:has(form[action="bill.cgi"]) #shipping-pricetable {
  width: 100% !important;
  margin: 0 0 10px !important;
  padding: 17px 20px !important;
}

body:has(form[action="bill.cgi"]) #shipping-pricetable tr:first-child > :is(td, th)[colspan] {
  padding: 4px 8px 13px !important;
  color: #17212b !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-align: left !important;
}

body:has(form[action="bill.cgi"]) #shipping-pricetable th {
  padding: 9px 10px !important;
  border-bottom: 1px solid #dce8ef !important;
  color: #344250 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body:has(form[action="bill.cgi"]) #shipping-pricetable td {
  height: 48px !important;
  padding: 8px 10px !important;
  border-top: 1px solid #edf1f4 !important;
  color: #303b47 !important;
  font-size: 13px !important;
}

body:has(form[action="bill.cgi"]) #shipping-pricetable :is(input[type="text"], input[type="number"]) {
  width: 76px !important;
  height: 36px !important;
  padding: 0 9px !important;
  border: 1px solid #cbd8e1 !important;
  border-radius: 6px !important;
  background: #fbfcfd !important;
  font-size: 14px !important;
}

body:has(form[action="bill.cgi"]) #qtysel-buttonsbar {
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  margin: 3px 0 20px !important;
  padding: 8px 0 !important;
}

/* Requestor and order-name cards retain their native inputs. */
body:has(form[action="bill.cgi"]) :is(#requestor-info, #billing-info, #comments2-table) {
  padding-bottom: 13px !important;
}

body:has(form[action="bill.cgi"]) :is(#requestor-info, #billing-info, #comments2-table)
tr:first-child > :is(td, th)[colspan] {
  padding: 15px 18px !important;
  background: #f3f9fc !important;
  border: 0 !important;
  border-bottom: 1px solid #dce8ef !important;
  color: #17212b !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-align: left !important;
}

body:has(form[action="bill.cgi"]) :is(#requestor-info, #billing-info) td.label {
  padding: 9px 10px 9px 18px !important;
  color: #344250 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: right !important;
}

body:has(form[action="bill.cgi"]) :is(#requestor-info, #billing-info) td.input {
  padding: 6px 18px 6px 0 !important;
}

body:has(form[action="bill.cgi"]) :is(#requestor-info, #billing-info) input:is([type="text"], [type="email"]) {
  width: 100% !important;
  height: 42px !important;
  max-width: none !important;
  padding: 0 11px !important;
  background: #fbfcfd !important;
  border: 1px solid #cbd8e1 !important;
  border-radius: 6px !important;
  color: #253544 !important;
  font-size: 14px !important;
}

body:has(form[action="bill.cgi"]) #comments2-table td.input {
  padding: 15px 18px 6px !important;
}

body:has(form[action="bill.cgi"]) #comments2-table textarea {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 112px !important;
  min-height: 112px !important;
  padding: 11px 13px !important;
  background: #fbfcfd !important;
  border: 1px solid #cbd8e1 !important;
  border-radius: 6px !important;
  color: #253544 !important;
  font-size: 14px !important;
}

body:has(form[action="bill.cgi"]) :is(select, textarea, input[type="text"], input[type="email"], input[type="number"]):focus {
  border-color: #00a8e8 !important;
  box-shadow: 0 0 0 3px rgba(0,168,232,.14) !important;
  outline: 0 !important;
}

body:has(form[action="bill.cgi"]) #final-buttonsbar {
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 4px 0 12px !important;
}

@media only screen and (max-width: 900px) {
  body:has(form[action="bill.cgi"]) .main {
    width: calc(100% - 28px) !important;
    padding-top: 24px !important;
  }
  body:has(form[action="bill.cgi"]) .main::before {
    font-size: 26px !important;
  }
  body:has(form[action="bill.cgi"]) form[action="bill.cgi"] > table:has(select) select {
    width: 100% !important;
  }
  body:has(form[action="bill.cgi"]) :is(#requestor-info, #billing-info, #comments2-table) {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  body:has(form[action="bill.cgi"]) #comments2-table textarea {
    height: 108px !important;
    min-height: 108px !important;
  }
}

@media only screen and (max-width: 620px) {
  body:has(form[action="bill.cgi"]) .main {
    width: calc(100% - 20px) !important;
  }
  body:has(form[action="bill.cgi"]) :is(#requestor-info, #billing-info) td.label,
  body:has(form[action="bill.cgi"]) :is(#requestor-info, #billing-info) td.input {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 6px 16px !important;
    text-align: left !important;
  }
  body:has(form[action="bill.cgi"]) :is(#requestor-info, #billing-info) td.input {
    padding-top: 0 !important;
  }
}

/* ============================================================
   OVERSIGNS - SHIPPING PAGE V10.4
   RESTORE FULL DESKTOP HEADER NAV + SEARCH
   SHIPPING PAGE ONLY
   ============================================================ */

@media only screen and (min-width: 1025px) {


    /* ========================================================
       CATEGORY NAV
       ADHESIVE / BOARDS / BANNER
       ======================================================== */

    body:has(form[action="bill.cgi"])
    .catalog-header-menu.global-catalog-menu {

        position: absolute !important;

        top: 0 !important;
        left: 275px !important;

        display: block !important;

        width: auto !important;
        height: 72px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        z-index: 5700 !important;
    }


    body:has(form[action="bill.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu {

        display: flex !important;
        align-items: stretch !important;

        height: 72px !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    body:has(form[action="bill.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu li {

        display: flex !important;

        height: 72px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body:has(form[action="bill.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu a {

        position: relative !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        height: 72px !important;

        margin: 0 !important;
        padding: 0 19px !important;

        background: transparent !important;

        color: #161616 !important;

        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        text-decoration: none !important;
    }


    body:has(form[action="bill.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu a:hover {

        color: #007da8 !important;
    }


    body:has(form[action="bill.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu a::after {

        content: "";

        position: absolute;

        right: 19px;
        bottom: 9px;
        left: 19px;

        height: 3px;

        background: #00a8e8;

        border-radius: 3px;

        transform: scaleX(0);
        opacity: 0;

        transition:
            transform .18s ease,
            opacity .18s ease;
    }


    body:has(form[action="bill.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu a:hover::after {

        transform: scaleX(1);
        opacity: 1;
    }


    /* ========================================================
       HEADER SEARCH
       Match catalog/configurator search exactly
       ======================================================== */

    body:has(form[action="bill.cgi"])
    .shoprint-config-search {

        position: absolute !important;

        top: 14px !important;
        left: 50% !important;

        transform: translateX(-28%) !important;

        display: flex !important;
        align-items: center !important;

        width: min(35vw, 520px) !important;
        min-width: 330px !important;
        height: 43px !important;

        margin: 0 !important;
        padding: 0 12px 0 7px !important;

        overflow: hidden !important;

        background: #ffffff !important;

        border: 1px solid #d8dce1 !important;
        border-radius: 24px !important;

        box-shadow: none !important;

        z-index: 5800 !important;

        transition:
            border-color .18s ease,
            box-shadow .18s ease !important;
    }


    body:has(form[action="bill.cgi"])
    .shoprint-config-search:focus-within {

        border-color: #00a8e8 !important;

        box-shadow:
            0 0 0 3px rgba(185, 0, 112,.12) !important;
    }


    /* Search input */

    body:has(form[action="bill.cgi"])
    .shoprint-config-search-input {

        order: 2 !important;
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;
        height: 40px !important;

        margin: 0 !important;
        padding: 0 10px 0 3px !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;
        outline: 0 !important;

        color: #202020 !important;

        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 400 !important;
    }


    .shoprint-config-search-input::placeholder {

        color: #8a8f96 !important;
        opacity: 1 !important;
    }


    /* Search icon */

    body:has(form[action="bill.cgi"])
    .shoprint-config-search-button {

        order: 1 !important;
        flex: 0 0 34px !important;

        width: 34px !important;
        min-width: 34px !important;
        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        color: #555b62 !important;

        cursor: pointer !important;
    }


    body:has(form[action="bill.cgi"])
    .shoprint-config-search-button i {

        color: #555b62 !important;

        font-size: 15px !important;
        font-weight: normal !important;
    }


    body:has(form[action="bill.cgi"])
    .shoprint-config-search-button:hover i {

        color: #007da8 !important;
    }


    /* ========================================================
       SMALLER LAPTOPS
       ======================================================== */

    @media only screen and (max-width: 1250px) {

        body:has(form[action="bill.cgi"])
        .catalog-header-menu.global-catalog-menu {

            left: 230px !important;
        }


        body:has(form[action="bill.cgi"])
        .catalog-header-menu.global-catalog-menu .top-menu a {

            padding-left: 14px !important;
            padding-right: 14px !important;

            font-size: 13px !important;
        }


        body:has(form[action="bill.cgi"])
        .shoprint-config-search {

            width: min(31vw, 410px) !important;
            min-width: 260px !important;

            transform: translateX(-20%) !important;
        }

    }

}


/* Keep mobile header uncluttered */

@media only screen and (max-width: 1024px) {

    body:has(form[action="bill.cgi"])
    .catalog-header-menu.global-catalog-menu,

    body:has(form[action="bill.cgi"])
    .shoprint-config-search {

        display: none !important;
    }

}

/* ============================================================
   OVERSIGNS - BILLING PAGE V2.7
   HEADER / NAV / CLEANUP
   VISUAL ONLY
   ============================================================ */


/* ============================================================
   1. REMOVE CATALOG HERO FROM BILLING
   ============================================================ */

body:has(form[action="review_bill.cgi"])
.static-header-pic {
    display: none !important;
}

body:has(form[action="review_bill.cgi"])
#header-wrapper {
    margin-bottom: 0 !important;
}


/* ============================================================
   2. BILLING PAGE FOUNDATION
   ============================================================ */

body:has(form[action="review_bill.cgi"]) {
    background: #f7f8fa !important;
}

body:has(form[action="review_bill.cgi"])
.main.billing.catalog--container {

    width: min(1220px, calc(100% - 64px)) !important;
    max-width: 1220px !important;

    margin: 0 auto 52px !important;
    padding: 34px 0 0 !important;
}


/* ============================================================
   3. CLEAN PAGE TITLE
   Replace small native "BILLING:" appearance
   ============================================================ */

body:has(form[action="review_bill.cgi"])
.main.billing .pagetitle {

    margin: 0 0 6px !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;

    color: transparent !important;

    font-size: 0 !important;
    line-height: 1 !important;
}


body:has(form[action="review_bill.cgi"])
.main.billing .pagetitle::before {

    content: "Billing & Payment";

    display: inline-block;

    color: #1c2128 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;

    letter-spacing: -.025em !important;
}


/* Remove old little orange title dash */

body:has(form[action="review_bill.cgi"])
.main.billing .pagetitle::after {

    content: none !important;
    display: none !important;
}


/* Intro text */

body:has(form[action="review_bill.cgi"])
.main.billing.catalog--container > p {

    margin: 0 0 22px !important;
    padding: 0 0 17px !important;

    color: #6b737d !important;

    border-bottom: 1px solid #dde2e7 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}


/* ============================================================
   4. ORDER SUMMARY CARD
   ============================================================ */

body:has(form[action="review_bill.cgi"])
#billing-pricetable {

    width: 100% !important;
    max-width: none !important;

    margin-bottom: 18px !important;

    background: #ffffff !important;

    border: 1px solid #dfe3e7 !important;
    border-top: 4px solid #4d4d4F !important;
    border-radius: 9px !important;

    box-shadow:
        0 6px 20px rgba(20,25,34,.05) !important;
}


/* Cleaner table header */

body:has(form[action="review_bill.cgi"])
#billing-pricetable th {

    color: #252a31 !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    border-bottom: 1px solid #eceff2 !important;
}


/* Preserve strong total row */

body:has(form[action="review_bill.cgi"])
#billing-pricetable tr:last-child td {

    background: #f8f9fa !important;

    border-top: 1px solid #e5e9ed !important;

    color: #1c2128 !important;

    font-weight: 800 !important;
}


body:has(form[action="review_bill.cgi"])
#billing-pricetable tr:last-child td:last-child {

    color: #b90070 !important;
}


/* ============================================================
   5. CREDIT CARD CARD
   ============================================================ */

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable) {

    width: 100% !important;
    max-width: none !important;

    margin-bottom: 14px !important;

    background: #ffffff !important;

    border: 1px solid #dfe3e7 !important;
    border-top: 4px solid #4d4d4F !important;
    border-radius: 9px !important;

    box-shadow:
        0 6px 20px rgba(20,25,34,.05) !important;
}


/* Existing V2.5 adds an orange top stripe.
   Turn that stripe charcoal to match OVERSIGNS. */

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)::before {

    background: #4d4d4F !important;
}


/* Payment section title */

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
> tbody > tr:first-child td,

body:has(form[action="review_bill.cgi"])
form[action="review_bill.cgi"]
> table.form-body:not(#billing-pricetable)
> tbody > tr:first-child th {

    color: #1c2128 !important;

    font-size: 16px !important;
    font-weight: 800 !important;
}


/* ============================================================
   6. BUTTON ROW
   ============================================================ */

body:has(form[action="review_bill.cgi"])
.buttonsbar {

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 9px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 8px 0 0 !important;
}


/* Back */

body:has(form[action="review_bill.cgi"])
.buttonsbar a:first-child,
body:has(form[action="review_bill.cgi"])
input[value*="Back" i],
body:has(form[action="review_bill.cgi"])
button[value*="Back" i] {

    min-height: 42px !important;

    padding: 0 17px !important;

    background: #ffffff !important;
    color: #343b44 !important;

    border: 1px solid #cfd5dc !important;
    border-radius: 6px !important;

    box-shadow: none !important;
}


/* Review Order */

body:has(form[action="review_bill.cgi"])
.buttonsbar a:last-child,
body:has(form[action="review_bill.cgi"])
input[value*="Review Order" i],
body:has(form[action="review_bill.cgi"])
button[value*="Review Order" i] {

    min-height: 44px !important;

    padding: 0 21px !important;

    background: #b90070 !important;
    color: #ffffff !important;

    border: 1px solid #b90070 !important;
    border-radius: 6px !important;

    font-weight: 700 !important;

    box-shadow:
        0 4px 12px rgba(185, 0, 112,.18) !important;
}


/* ============================================================
   7. SHOW GLOBAL CATEGORY NAV
   ============================================================ */

@media only screen and (min-width: 1025px) {

    body:has(form[action="review_bill.cgi"])
    .catalog-header-menu.global-catalog-menu {

        position: absolute !important;

        top: 0 !important;
        left: 275px !important;

        display: block !important;

        width: auto !important;
        height: 72px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        z-index: 5700 !important;
    }


    body:has(form[action="review_bill.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu {

        display: flex !important;
        align-items: stretch !important;

        height: 72px !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    body:has(form[action="review_bill.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu li {

        display: flex !important;

        height: 72px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body:has(form[action="review_bill.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu a {

        position: relative !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        height: 72px !important;

        margin: 0 !important;
        padding: 0 19px !important;

        background: transparent !important;

        color: #161616 !important;

        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;

        text-decoration: none !important;
    }


    body:has(form[action="review_bill.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu a:hover {

        color: #007da8 !important;
    }


    body:has(form[action="review_bill.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu a::after {

        content: "";

        position: absolute;

        right: 19px;
        bottom: 9px;
        left: 19px;

        height: 3px;

        background: #00a8e8;

        border-radius: 3px;

        transform: scaleX(0);
        opacity: 0;

        transition:
            transform .18s ease,
            opacity .18s ease;
    }


    body:has(form[action="review_bill.cgi"])
    .catalog-header-menu.global-catalog-menu .top-menu a:hover::after {

        transform: scaleX(1);
        opacity: 1;
    }


    /* ========================================================
       8. HEADER SEARCH
       ======================================================== */

    body:has(form[action="review_bill.cgi"])
    .shoprint-config-search {

        position: absolute !important;

        top: 14px !important;
        left: 50% !important;

        transform: translateX(-28%) !important;

        display: flex !important;
        align-items: center !important;

        width: min(35vw, 520px) !important;
        min-width: 330px !important;
        height: 43px !important;

        margin: 0 !important;
        padding: 0 12px 0 7px !important;

        overflow: hidden !important;

        background: #ffffff !important;

        border: 1px solid #d8dce1 !important;
        border-radius: 24px !important;

        box-shadow: none !important;

        z-index: 5800 !important;
    }


    body:has(form[action="review_bill.cgi"])
    .shoprint-config-search:focus-within {

        border-color: #00a8e8 !important;

        box-shadow:
            0 0 0 3px rgba(185, 0, 112,.12) !important;
    }


    body:has(form[action="review_bill.cgi"])
    .shoprint-config-search-input {

        order: 2 !important;
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;
        height: 40px !important;

        margin: 0 !important;
        padding: 0 10px 0 3px !important;

        background: transparent !important;

        border: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;

        color: #202020 !important;

        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 12px !important;
    }


    body:has(form[action="review_bill.cgi"])
    .shoprint-config-search-button {

        order: 1 !important;
        flex: 0 0 34px !important;

        width: 34px !important;
        min-width: 34px !important;
        height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;
        box-shadow: none !important;

        color: #555b62 !important;

        cursor: pointer !important;
    }


    body:has(form[action="review_bill.cgi"])
    .shoprint-config-search-button i {

        color: #555b62 !important;

        font-size: 15px !important;
    }


    body:has(form[action="review_bill.cgi"])
    .shoprint-config-search-button:hover i {

        color: #007da8 !important;
    }


    /* Smaller laptops */

    @media only screen and (max-width: 1250px) {

        body:has(form[action="review_bill.cgi"])
        .catalog-header-menu.global-catalog-menu {
            left: 230px !important;
        }

        body:has(form[action="review_bill.cgi"])
        .catalog-header-menu.global-catalog-menu .top-menu a {
            padding-left: 14px !important;
            padding-right: 14px !important;
            font-size: 13px !important;
        }

        body:has(form[action="review_bill.cgi"])
        .shoprint-config-search {
            width: min(31vw, 410px) !important;
            min-width: 260px !important;
            transform: translateX(-20%) !important;
        }
    }
}


/* ============================================================
   9. MOBILE
   ============================================================ */

@media only screen and (max-width: 1024px) {

    body:has(form[action="review_bill.cgi"])
    .catalog-header-menu.global-catalog-menu,

    body:has(form[action="review_bill.cgi"])
    .shoprint-config-search {

        display: none !important;
    }
}


@media only screen and (max-width: 700px) {

    body:has(form[action="review_bill.cgi"])
    .main.billing.catalog--container {

        width: calc(100% - 24px) !important;
        padding-top: 24px !important;
    }

    body:has(form[action="review_bill.cgi"])
    .main.billing .pagetitle::before {

        font-size: 26px !important;
    }
}

/* ============================================================
   OVERSIGNS - BILLING BUTTON REFRESH
   LOOK ONLY - NO LAYOUT / NO WORKFLOW CHANGES
   ============================================================ */


/* Shared button styling */

body:has(form[action="review_bill.cgi"])
.buttonsbar input,

body:has(form[action="review_bill.cgi"])
.buttonsbar button,

body:has(form[action="review_bill.cgi"])
.buttonsbar a {

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 42px !important;

    padding: 0 18px !important;

    border-radius: 7px !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;

    text-decoration: none !important;

    cursor: pointer !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}


/* BACK - secondary */

body:has(form[action="review_bill.cgi"])
input[value*="Back" i],

body:has(form[action="review_bill.cgi"])
button[value*="Back" i],

body:has(form[action="review_bill.cgi"])
.buttonsbar a:first-child {

    min-width: 92px !important;

    background: #ffffff !important;
    color: #4d4d4f !important;

    border: 1px solid #cfd4da !important;

    box-shadow:
        0 2px 6px rgba(20,25,34,.06) !important;
}


/* BACK hover */

body:has(form[action="review_bill.cgi"])
input[value*="Back" i]:hover,

body:has(form[action="review_bill.cgi"])
button[value*="Back" i]:hover,

body:has(form[action="review_bill.cgi"])
.buttonsbar a:first-child:hover {

    background: #f4f5f6 !important;
    color: #20252b !important;

    border-color: #aeb5bd !important;

    transform: translateY(-1px) !important;
}


/* REVIEW ORDER - primary */

body:has(form[action="review_bill.cgi"])
input[value*="Review Order" i],

body:has(form[action="review_bill.cgi"])
button[value*="Review Order" i],

body:has(form[action="review_bill.cgi"])
.buttonsbar a:last-child {

    min-width: 145px !important;

    background: #b90070 !important;
    color: #ffffff !important;

    border: 1px solid #b90070 !important;

    box-shadow:
        0 4px 10px rgba(185, 0, 112,.22) !important;
}


/* REVIEW ORDER hover */

body:has(form[action="review_bill.cgi"])
input[value*="Review Order" i]:hover,

body:has(form[action="review_bill.cgi"])
button[value*="Review Order" i]:hover,

body:has(form[action="review_bill.cgi"])
.buttonsbar a:last-child:hover {

    background: #940058 !important;
    color: #ffffff !important;

    border-color: #940058 !important;

    box-shadow:
        0 5px 13px rgba(148, 0, 88,.26) !important;

    transform: translateY(-1px) !important;
}

/* ============================================================
   OVERSIGNS - SHIPPING + BILLING FINISH
   Consolidated into this full Additional CSS baseline.
   Paired with OVERSIGNS_SHIPPING_BACK.js in Custom JavaScript.
   ============================================================ */

/* One button language across the two checkout steps. */
body:has(form[action="bill.cgi"]) :is(#qtysel-buttonsbar, #final-buttonsbar) :is(a, button, input[type="button"], input[type="submit"]),
body:has(form[action="review_bill.cgi"]) .buttonsbar :is(a, button, input[type="button"], input[type="submit"]) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 7px !important;
    font: 700 11px/1 "Open Sans", Arial, sans-serif !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
body:has(form[action="bill.cgi"]) :is(#qtysel-buttonsbar, #final-buttonsbar) :is(a, button, input[type="button"], input[type="submit"]):not(#submit_review_order),
body:has(form[action="review_bill.cgi"]) .buttonsbar :is(a, button, input[type="button"], input[type="submit"]):first-child {
    background: #fff !important;
    color: #4d4d4f !important;
    border: 1px solid #cfd4da !important;
    box-shadow: 0 2px 6px rgba(20,25,34,.06) !important;
}
body:has(form[action="bill.cgi"]) #submit_review_order,
body:has(form[action="review_bill.cgi"]) .buttonsbar :is(a, button, input[type="button"], input[type="submit"]):last-child:not(:first-child) {
    background: #b90070 !important;
    color: #fff !important;
    border: 1px solid #b90070 !important;
    box-shadow: 0 4px 10px rgba(185, 0, 112,.22) !important;
}
body:has(form[action="bill.cgi"]) #final-buttonsbar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
body:has(form[action="bill.cgi"]) #final-buttonsbar .sw-shipping-back:hover,
body:has(form[action="bill.cgi"]) #qtysel-buttonsbar :is(a, button, input):hover {
    background: #f4f5f6 !important;
    color: #20252b !important;
    border-color: #aeb5bd !important;
}
body:has(form[action="bill.cgi"]) #submit_review_order:hover {
    background: #940058 !important;
    border-color: #940058 !important;
}

/* ============================================================
   OVERSIGNS - BASKET PAGE
   Visual changes only; PageDNA cart controls remain native.
   ============================================================ */

.basket-view {
    background: #f7f8fa !important;
    color: #252a31 !important;
}

/* Give the basket content a consistent reading width */
.basket-view .main {
    width: min(1220px, calc(100% - 48px)) !important;
    max-width: 1220px !important;
    margin: 32px auto 56px !important;
}

/* Order items */
.basket-view .items-table {
    width: 100% !important;
    max-width: 100% !important;
    background: #fff !important;
    border: 1px solid #dfe3e7 !important;
    border-top: 4px solid #4d4d4f !important;
    border-radius: 9px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    box-shadow: 0 6px 20px rgba(20, 25, 34, .05) !important;
}

.basket-view .items-table th,
.basket-view .items-table td {
    padding: 10px 12px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #edf0f2 !important;
}

.basket-view .items-table th {
    color: #4d4d4f !important;
    font-weight: 700 !important;
}

/* Contain artwork previews without cropping customer images */
.basket-view td.previewcell {
    padding: 14px !important;
    background: #fff !important;
    text-align: center !important;
}

.basket-view td.previewcell img {
    display: block !important;
    width: auto !important;
    max-width: min(100%, 360px) !important;
    height: auto !important;
    max-height: 240px !important;
    margin: 0 auto 8px !important;
    object-fit: contain !important;
    border: 1px solid #e2e6ea !important;
    border-radius: 7px !important;
    background: #fff !important;
}

/* Keep preview links and buttons directly beneath each image */
.basket-view td.previewcell a,
.basket-view td.previewcell button {
    margin-top: 6px !important;
}

/* Match the checkout action row */
.basket-view .buttonsbar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 14px auto 22px !important;
    padding: 12px !important;
    background: #fff !important;
    border-radius: 8px !important;
}

.basket-view .buttonsbar :is(button, input[type="button"],
input[type="submit"], a.button) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 7px !important;
    font: 700 11px/1 "Open Sans", Arial, sans-serif !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.basket-view .buttonsbar :is(button, input[type="button"],
input[type="submit"], a.button):hover {
    filter: brightness(.94);
}

@media only screen and (max-width: 700px) {
    .basket-view .main {
        width: calc(100% - 24px) !important;
        margin-top: 20px !important;
    }

    .basket-view td.previewcell img {
        max-width: 100% !important;
        max-height: 190px !important;
    }

    .basket-view .buttonsbar {
        padding: 12px 8px !important;
    }
}

/* ============================================================
   OVERSIGNS - BASKET: TWO COMPLETE PREVIEW CARDS
   ============================================================ */

/* Bring basket content closer to the header */
html body .main.basket-view {
    position: relative !important;
    top: -105px !important;
    margin-bottom: -105px !important;
}

/* Correct the title generated by the older configurator CSS */
html body .main.basket-view::before {
    content: "Your Basket" !important;
}

/* Reset previous preview-table experiments */
html body .main.basket-view table:not(.items-table):has(td.previewcell) {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px auto !important;
}

html body .main.basket-view table:not(.items-table):has(td.previewcell) > tbody {
    display: table-row-group !important;
}

html body .main.basket-view table:not(.items-table):has(td.previewcell)
> tbody > tr {
    display: table-row !important;
}

/* Exactly two items: name + preview on the left,
   name + preview on the right */
@media only screen and (min-width: 701px) {
    html body .main.basket-view
    table:not(.items-table):has(td.previewcell)
    > tbody:has(> tr:nth-child(4):last-child) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto 1fr !important;
        column-gap: 18px !important;
        row-gap: 0 !important;
        align-items: stretch !important;
    }

    html body .main.basket-view
    table:not(.items-table):has(td.previewcell)
    > tbody:has(> tr:nth-child(4):last-child) > tr {
        display: block !important;
        min-width: 0 !important;
        background: #fff !important;
    }

    /* First item's name and image */
    html body .main.basket-view
    table:not(.items-table):has(td.previewcell)
    > tbody:has(> tr:nth-child(4):last-child) > tr:nth-child(1) {
        grid-area: 1 / 1 !important;
    }

    html body .main.basket-view
    table:not(.items-table):has(td.previewcell)
    > tbody:has(> tr:nth-child(4):last-child) > tr:nth-child(2) {
        grid-area: 2 / 1 !important;
    }

    /* Second item's name and image */
    html body .main.basket-view
    table:not(.items-table):has(td.previewcell)
    > tbody:has(> tr:nth-child(4):last-child) > tr:nth-child(3) {
        grid-area: 1 / 2 !important;
    }

    html body .main.basket-view
    table:not(.items-table):has(td.previewcell)
    > tbody:has(> tr:nth-child(4):last-child) > tr:nth-child(4) {
        grid-area: 2 / 2 !important;
    }

    html body .main.basket-view
    table:not(.items-table):has(td.previewcell)
    > tbody:has(> tr:nth-child(4):last-child) > tr > td {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    html body .main.basket-view
    table:not(.items-table):has(td.previewcell)
    > tbody:has(> tr:nth-child(4):last-child) > tr:nth-child(1),
    html body .main.basket-view
    table:not(.items-table):has(td.previewcell)
    > tbody:has(> tr:nth-child(4):last-child) > tr:nth-child(3) {
        padding: 12px 14px 0 !important;
        border: 1px solid #dfe3e7 !important;
        border-bottom: 0 !important;
        border-radius: 9px 9px 0 0 !important;
    }

    html body .main.basket-view
    table:not(.items-table):has(td.previewcell)
    > tbody:has(> tr:nth-child(4):last-child) > tr:nth-child(2),
    html body .main.basket-view
    table:not(.items-table):has(td.previewcell)
    > tbody:has(> tr:nth-child(4):last-child) > tr:nth-child(4) {
        padding: 8px 14px 14px !important;
        border: 1px solid #dfe3e7 !important;
        border-top: 0 !important;
        border-radius: 0 0 9px 9px !important;
    }
}

@media only screen and (max-width: 700px) {
    html body .main.basket-view {
        top: -45px !important;
        margin-bottom: -45px !important;
    }
}

/* OVERSIGNS - reduce space above Your Basket */
@media only screen and (min-width: 701px) {
    html body .main.basket-view {
        top: -165px !important;
        margin-bottom: -165px !important;
    }

    html body .main.basket-view::before {
        padding: 10px 0 14px !important;
    }
}

/* ============================================================
   OVERSIGNS - TRACK ORDERS PAGE
   shiptrack.cgi only; visual changes only
   ============================================================ */

body:has(.main.shiptrack) {
    background: #f7f8fa !important;
}

/* Remove the large catalog banner */
body:has(.main.shiptrack) .static-header-pic {
    display: none !important;
}

/* Page width and spacing */
html body .main.shiptrack {
    box-sizing: border-box !important;
    width: min(980px, calc(100% - 48px)) !important;
    max-width: 980px !important;
    margin: 32px auto 60px !important;
    padding: 0 !important;
    text-align: left !important;
}

.main.shiptrack .pagetitle {
    margin: 0 0 12px !important;
    color: #171a21 !important;
    font: 800 30px/1.2 "Open Sans", Arial, sans-serif !important;
    text-align: left !important;
    text-transform: none !important;
}

.main.shiptrack .pageinstructions {
    max-width: 780px !important;
    margin: 0 0 20px !important;
    color: #59616c !important;
    font: 400 14px/1.55 "Open Sans", Arial, sans-serif !important;
    text-align: left !important;
}

/* Keep PageDNA's original lookup form and fields */
.main.shiptrack form[action="shiptrack.cgi"] {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 0 20px !important;
    padding: 24px !important;
    background: #fff !important;
    border: 1px solid #dfe3e7 !important;
    border-top: 4px solid #4d4d4f !important;
    border-radius: 9px !important;
    box-shadow: 0 6px 20px rgba(20, 25, 34, .05) !important;
    text-align: left !important;
}

.main.shiptrack form[action="shiptrack.cgi"] table {
    width: min(100%, 700px) !important;
    max-width: 700px !important;
    margin: 0 auto 14px !important;
    background: #fff !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

.main.shiptrack form[action="shiptrack.cgi"] td,
.main.shiptrack form[action="shiptrack.cgi"] th {
    padding: 4px 10px !important;
    background: #fff !important;
    color: #303740 !important;
    border: 0 !important;
    font: 600 13px/1.4 "Open Sans", Arial, sans-serif !important;
    vertical-align: middle !important;
}

.main.shiptrack form[action="shiptrack.cgi"] td.label {
    width: 38% !important;
    color: #4d5560 !important;
    text-align: right !important;
}

.main.shiptrack form[action="shiptrack.cgi"]
input:not([type="hidden"]):not([type="submit"]):not([type="button"]) {
    box-sizing: border-box !important;
    width: min(100%, 360px) !important;
    min-height: 42px !important;
    padding: 8px 11px !important;
    background: #fbfcfd !important;
    border: 1px solid #cfd5dc !important;
    border-radius: 6px !important;
    color: #252a31 !important;
    font: 400 13px "Open Sans", Arial, sans-serif !important;
}

.main.shiptrack form[action="shiptrack.cgi"]
input:not([type="hidden"]):focus {
    border-color: #b90070 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(185, 0, 112, .12) !important;
}

.main.shiptrack form[action="shiptrack.cgi"]
:is(button, input[type="submit"]) {
    min-height: 44px !important;
    padding: 0 20px !important;
    background: #b90070 !important;
    color: #fff !important;
    border: 1px solid #b90070 !important;
    border-radius: 7px !important;
    font: 700 12px "Open Sans", Arial, sans-serif !important;
    cursor: pointer !important;
}

.main.shiptrack form[action="shiptrack.cgi"]
:is(button, input[type="submit"]):hover {
    background: #940058 !important;
    border-color: #940058 !important;
}

/* Reuse the existing header category links and search */
@media only screen and (min-width: 1025px) {
    body:has(.main.shiptrack)
    .catalog-header-menu.global-catalog-menu {
        position: absolute !important;
        top: 0 !important;
        left: 275px !important;
        display: block !important;
        width: auto !important;
        height: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        z-index: 5700 !important;
    }

    body:has(.main.shiptrack)
    .catalog-header-menu.global-catalog-menu .top-menu,
    body:has(.main.shiptrack)
    .catalog-header-menu.global-catalog-menu .top-menu li {
        display: flex !important;
        align-items: stretch !important;
        height: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.main.shiptrack)
    .catalog-header-menu.global-catalog-menu .top-menu a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 72px !important;
        padding: 0 19px !important;
        background: transparent !important;
        color: #161616 !important;
        font: 700 14px/1 "Open Sans", Arial, sans-serif !important;
        text-decoration: none !important;
    }

    body:has(.main.shiptrack)
    .catalog-header-menu.global-catalog-menu .top-menu a:hover {
        color: #007da8 !important;
    }

    body:has(.main.shiptrack) .shoprint-config-search {
        position: absolute !important;
        top: 14px !important;
        left: 50% !important;
        transform: translateX(-28%) !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        width: min(35vw, 520px) !important;
        min-width: 330px !important;
        height: 43px !important;
        margin: 0 !important;
        padding: 0 12px 0 7px !important;
        overflow: hidden !important;
        background: #fff !important;
        border: 1px solid #d8dce1 !important;
        border-radius: 24px !important;
        z-index: 5800 !important;
    }

    body:has(.main.shiptrack) .shoprint-config-search-input {
        order: 2 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 0 10px !important;
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    body:has(.main.shiptrack) .shoprint-config-search-button {
        order: 1 !important;
        flex: 0 0 34px !important;
        height: 40px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }
}

@media only screen and (max-width: 700px) {
    html body .main.shiptrack {
        width: calc(100% - 24px) !important;
        margin-top: 20px !important;
    }

    .main.shiptrack .pagetitle {
        font-size: 25px !important;
    }

    .main.shiptrack form[action="shiptrack.cgi"] {
        padding: 16px !important;
    }

    .main.shiptrack form[action="shiptrack.cgi"] td.label {
        width: 42% !important;
    }
}

/* OVERSIGNS - TRACK ORDERS FINAL SPACING */
@media only screen and (min-width: 701px) {
    html body .main.shiptrack {
        position: relative !important;
        top: -140px !important;
        margin-bottom: -140px !important;
    }
}

.main.shiptrack .pagetitle {
    margin-bottom: 10px !important;
}

.main.shiptrack .pageinstructions {
    max-width: 760px !important;
    margin-bottom: 16px !important;
    line-height: 1.5 !important;
}

.main.shiptrack form[action="shiptrack.cgi"] {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* ============================================================
   OVERSIGNS - REORDER SEARCH PAGE
   Visual only; billing and payment pages are untouched
   ============================================================ */

body:has(.main.reorder) {
    background: #f7f8fa !important;
}

body:has(.main.reorder) .static-header-pic {
    display: none !important;
}

html body .main.reorder {
    box-sizing: border-box !important;
    width: min(980px, calc(100% - 48px)) !important;
    max-width: 980px !important;
    margin: 32px auto 60px !important;
    padding: 0 !important;
    text-align: left !important;
}

.main.reorder .pagetitle {
    margin: 0 0 12px !important;
    color: #171a21 !important;
    font: 800 30px/1.2 "Open Sans", Arial, sans-serif !important;
    text-align: left !important;
    text-transform: none !important;
}

.main.reorder .pageinstructions {
    max-width: 780px !important;
    margin: 0 0 20px !important;
    color: #59616c !important;
    font: 400 14px/1.55 "Open Sans", Arial, sans-serif !important;
    text-align: left !important;
}

/* PageDNA's existing reorder lookup form */
.main.reorder form[action="reorder.cgi"] {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 0 20px !important;
    padding: 24px !important;
    background: #fff !important;
    border: 1px solid #dfe3e7 !important;
    border-top: 4px solid #4d4d4f !important;
    border-radius: 9px !important;
    box-shadow: 0 6px 20px rgba(20, 25, 34, .05) !important;
    text-align: left !important;
}

.main.reorder form[action="reorder.cgi"] table {
    width: min(100%, 700px) !important;
    max-width: 700px !important;
    margin: 0 auto 14px !important;
    background: #fff !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

.main.reorder form[action="reorder.cgi"] td,
.main.reorder form[action="reorder.cgi"] th {
    padding: 4px 10px !important;
    background: #fff !important;
    color: #303740 !important;
    border: 0 !important;
    font: 600 13px/1.4 "Open Sans", Arial, sans-serif !important;
    vertical-align: middle !important;
}

.main.reorder form[action="reorder.cgi"] td.label {
    width: 38% !important;
    color: #4d5560 !important;
    text-align: right !important;
}

.main.reorder form[action="reorder.cgi"]
input:not([type="hidden"]):not([type="submit"]):not([type="button"]) {
    box-sizing: border-box !important;
    width: min(100%, 360px) !important;
    min-height: 42px !important;
    padding: 8px 11px !important;
    background: #fbfcfd !important;
    border: 1px solid #cfd5dc !important;
    border-radius: 6px !important;
    color: #252a31 !important;
    font: 400 13px "Open Sans", Arial, sans-serif !important;
}

.main.reorder form[action="reorder.cgi"]
input:not([type="hidden"]):focus {
    border-color: #b90070 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(185, 0, 112, .12) !important;
}

.main.reorder form[action="reorder.cgi"]
:is(button, input[type="submit"], input[type="button"], a.button) {
    box-sizing: border-box !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 7px !important;
    font: 700 12px "Open Sans", Arial, sans-serif !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.main.reorder form[action="reorder.cgi"]
:is(button, input[type="submit"]) {
    background: #b90070 !important;
    color: #fff !important;
    border: 1px solid #b90070 !important;
}

.main.reorder form[action="reorder.cgi"]
:is(button, input[type="submit"]):hover {
    background: #940058 !important;
    border-color: #940058 !important;
}

/* Show the existing category links and search in the header */
@media only screen and (min-width: 1025px) {
    body:has(.main.reorder)
    .catalog-header-menu.global-catalog-menu {
        position: absolute !important;
        top: 0 !important;
        left: 275px !important;
        display: block !important;
        width: auto !important;
        height: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        z-index: 5700 !important;
    }

    body:has(.main.reorder)
    .catalog-header-menu.global-catalog-menu .top-menu,
    body:has(.main.reorder)
    .catalog-header-menu.global-catalog-menu .top-menu li {
        display: flex !important;
        align-items: stretch !important;
        height: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.main.reorder)
    .catalog-header-menu.global-catalog-menu .top-menu a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 72px !important;
        padding: 0 19px !important;
        background: transparent !important;
        color: #161616 !important;
        font: 700 14px/1 "Open Sans", Arial, sans-serif !important;
        text-decoration: none !important;
    }

    body:has(.main.reorder)
    .catalog-header-menu.global-catalog-menu .top-menu a:hover {
        color: #007da8 !important;
    }

    body:has(.main.reorder) .shoprint-config-search {
        position: absolute !important;
        top: 14px !important;
        left: 50% !important;
        transform: translateX(-28%) !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        width: min(35vw, 520px) !important;
        min-width: 330px !important;
        height: 43px !important;
        margin: 0 !important;
        padding: 0 12px 0 7px !important;
        overflow: hidden !important;
        background: #fff !important;
        border: 1px solid #d8dce1 !important;
        border-radius: 24px !important;
        z-index: 5800 !important;
    }

    body:has(.main.reorder) .shoprint-config-search-input {
        order: 2 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 0 10px !important;
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    body:has(.main.reorder) .shoprint-config-search-button {
        order: 1 !important;
        flex: 0 0 34px !important;
        height: 40px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }
}

@media only screen and (max-width: 700px) {
    html body .main.reorder {
        width: calc(100% - 24px) !important;
        margin-top: 20px !important;
    }

    .main.reorder .pagetitle {
        font-size: 25px !important;
    }

    .main.reorder form[action="reorder.cgi"] {
        padding: 16px !important;
    }
}

/* My Account: subtle lines between information rows */
.profile .profile-container table:last-of-type {
  border-collapse: collapse;
}

.profile .profile-container table:last-of-type tr + tr {
  border-top: 1px solid #e7eaf0;
}

/* Give Popular Materials cards more room */
@media (min-width: 1025px) {
  body:has(.sw-v3)
  .sw-v3 > .sw-v3-section:nth-of-type(2) > .sw-v3-section__head,
  body:has(.sw-v3)
  .sw-v3 > .sw-v3-section:nth-of-type(2) > .sw-v3-materials {
    width: min(1280px, calc(100% - 48px)) !important;
  }
}

/* Login page brand heading */
.os-login-brand {
  max-width: 760px;
  margin: 54px auto 30px !important;
  padding: 0 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.os-login-name {
  font-family: Arial, sans-serif;
  font-size: clamp(48px, 6vw, 82px) !important;
  font-weight: 900 !important;
  font-style: italic;
  line-height: 1 !important;
  letter-spacing: -.055em;
}

.os-login-tagline {
  margin-top: 10px !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: 700 !important;
}

.os-login-intro {
  margin-top: 18px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

@media (max-width: 700px) {
  .os-login-brand {
    margin: 36px auto 24px !important;
  }
}
/* ==========================================================
   OVERSIGNS - SHARED BRAND FINISH
   Color styling only. No sizes, positioning or display changes.
   ========================================================== */
html body #header-wrapper,
html body #header-wrapper > table.header,
html body #header-wrapper > table.header > tbody,
html body #header-wrapper > table.header > tbody > tr,
html body #header_logo,
html body #header_title {
  background-color: #fff !important;
}
html body #header-wrapper {
  border-bottom-color: #00a8e8 !important;
  box-shadow: inset 0 -3px 0 #00a8e8 !important;
}

/* Visible cyan accent across the existing category menu. */
html body .catalog-header-menu.global-catalog-menu ul.top-menu {
  box-shadow: inset 0 -3px 0 #00a8e8 !important;
}
html body .catalog-header-menu.global-catalog-menu ul.top-menu > li > a:is(:hover, :focus-visible, .active, [aria-current="page"]) {
  color: #007da8 !important;
}
html body .catalog-header-menu.global-catalog-menu ul.top-menu > li > a::after {
  background-color: #00a8e8 !important;
}

/* Search and keyboard focus. */
html body .shoprint-config-search:focus-within {
  border-color: #00a8e8 !important;
  box-shadow: 0 0 0 3px rgba(0,168,232,.15) !important;
}
html body .catalog-header-menu a:focus-visible {
  outline: 2px solid #007da8 !important;
  outline-offset: -3px;
}

/* Popular Materials: readable titles and descriptions. */
html body .sw-v3 .sw-v3-material :is(h3, h4, strong, [class*="title"], [class*="name"]) {
  font-size: 15px !important;
  line-height: 1.3 !important;
}
html body .sw-v3 .sw-v3-material :is(p, small, [class*="description"], [class*="desc"]) {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* Material text links are the View Product actions; leave image links alone. */
html body .sw-v3 .sw-v3-material :is(a:not(:has(img)), button, input[type="button"], input[type="submit"]) {
  background-color: #b90070 !important;
  border-color: #b90070 !important;
  color: #fff !important;
}
html body .sw-v3 .sw-v3-material :is(a:not(:has(img)), button, input[type="button"], input[type="submit"]):hover {
  background-color: #940058 !important;
  border-color: #940058 !important;
}
/* END OVERSIGNS CONSOLIDATED CSS */

/* Keep the full-width cyan line; remove the extra menu-wide line */
html body .catalog-header-menu.global-catalog-menu ul.top-menu {
  box-shadow: none !important;
}

/* Category underline appears only on hover, focus or active page */
html body .catalog-header-menu.global-catalog-menu
ul.top-menu > li > a::after {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}

html body .catalog-header-menu.global-catalog-menu
ul.top-menu > li > a:is(
  :hover,
  :focus-visible,
  .active,
  [aria-current="page"]
)::after {
  background: #00a8e8 !important;
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

/* Restore larger desktop account and cart controls */
@media (min-width: 1025px) {
  html body #mobile_cart .fa-shopping-basket,
  html body #mobile_cart .fa-shopping-basket::before {
    font-size: 30px !important;
    line-height: 1 !important;
    color: #171a21 !important;
  }

  html body #mobile_cart .fa-shopping-basket::before {
    content: "\f07a" !important;
    font-family: FontAwesome !important;
    font-weight: normal !important;
  }

  html body #header-links-container
  td.header-links > a:nth-of-type(2) {
    width: 128px !important;
  }

  html body #header-links-container
  td.header-links > a:nth-of-type(2)::before {
    content: "\f007" !important;
    font-family: FontAwesome !important;
    font-size: 22px !important;
    font-weight: normal !important;
    color: #171a21 !important;
  }

  html body #header-links-container
  td.header-links > a:nth-of-type(2)::after {
    content: "Account  \f078" !important;
    font-family: "Open Sans", FontAwesome, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: #171a21 !important;
  }
}

/* =====================================================
   OVERSIGNS - ACCOUNT CREATION
   ===================================================== */

/* Remove the large banner and its reserved space */
body:has(.main.new-account) .static-header-pic {
  display: none !important;
}

body:has(.main.new-account) #header-wrapper {
  margin-bottom: 0 !important;
}

body:has(.main.new-account) {
  background: #f7f8fa !important;
}

/* Page width and spacing */
html body .main.new-account {
  box-sizing: border-box;
  width: calc(100% - 32px) !important;
  max-width: 760px !important;
  margin: 56px auto 48px !important;
  padding: 0 !important;
  font-family: Arial, sans-serif;
}

/* Heading and instructions */
.main.new-account .pagetitle {
  margin: 0 0 16px !important;
  color: #171a21 !important;
  font: 800 30px/1.2 Arial, sans-serif !important;
  text-align: left !important;
}

.main.new-account .pageinstructions {
  width: 100% !important;
  margin: 0 0 24px !important;
  color: #4d5560 !important;
  font: 400 15px/1.6 Arial, sans-serif !important;
  text-align: left !important;
}

/* Form card */
.main.new-account form[action="makenewaccount.cgi"] {
  box-sizing: border-box;
  padding: 28px !important;
  background: #fff !important;
  border: 1px solid #dfe3e8 !important;
  border-top: 3px solid #00a8e8 !important;
  border-radius: 9px !important;
  box-shadow: 0 6px 20px rgba(20, 25, 34, .06);
}

/* Clear the yellow label backgrounds */
.main.new-account form[action="makenewaccount.cgi"]
:is(table, tbody, tr, td, th, .label) {
  background: transparent !important;
  background-color: transparent !important;
}

.main.new-account form[action="makenewaccount.cgi"] table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse;
}

.main.new-account form[action="makenewaccount.cgi"] :is(td, th) {
  padding: 9px 8px !important;
  vertical-align: middle;
  font: 400 14px/1.5 Arial, sans-serif !important;
}

.main.new-account form[action="makenewaccount.cgi"] td.label {
  color: #4d5560 !important;
}

/* Keep split phone fields side by side */
.main.new-account input:is(
  [type="text"],
  [type="email"],
  [type="tel"],
  [type="password"]
),
.main.new-account select {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-height: 42px !important;
  padding: 9px 10px !important;
  background: #fbfcfd !important;
  border: 1px solid #cfd5dc !important;
  border-radius: 6px !important;
  color: #171a21 !important;
  font: 400 16px/1.3 Arial, sans-serif !important;
}

/* Full-width fields only when there is one visible input */
.main.new-account td:has(
  > input:is([type="text"], [type="email"], [type="tel"], [type="password"])
):not(:has(
  input:is([type="text"], [type="email"], [type="tel"], [type="password"])
  ~ input:is([type="text"], [type="email"], [type="tel"], [type="password"])
)) > input:is(
  [type="text"], [type="email"], [type="tel"], [type="password"]
) {
  width: 100% !important;
}

.main.new-account input:focus-visible,
.main.new-account select:focus-visible {
  outline: 2px solid #00a8e8 !important;
  outline-offset: 2px;
}

/* Continue button */
.main.new-account :is(
  input[type="submit"],
  button[type="submit"],
  .buttonsbar a
) {
  min-height: 44px !important;
  padding: 12px 24px !important;
  background: #b90070 !important;
  border: 1px solid #b90070 !important;
  border-radius: 7px !important;
  color: #fff !important;
  font: 700 14px/1.3 Arial, sans-serif !important;
  text-decoration: none !important;
  cursor: pointer;
}

.main.new-account :is(
  input[type="submit"],
  button[type="submit"],
  .buttonsbar a
):hover {
  background: #940058 !important;
  border-color: #940058 !important;
}

/* Smaller screens */
@media (max-width: 600px) {
  html body .main.new-account {
    margin-top: 28px !important;
  }

  .main.new-account form[action="makenewaccount.cgi"] {
    padding: 16px !important;
  }

  .main.new-account form[action="makenewaccount.cgi"] :is(td, th) {
    padding: 8px 4px !important;
    font-size: 13px !important;
  }

  .main.new-account .pagetitle {
    font-size: 26px !important;
  }
}

/* OVERSIGNS product detail card */
body:not(:has(.sw-v3)):has(.select-items)
.select-items .vertical-shell {
  box-sizing: border-box !important;
  width: min(640px, calc(100% - 32px)) !important;
  max-width: 640px !important;
  margin: 28px auto 48px !important;
  padding: 28px 30px 32px !important;
  background: #fff !important;
  border: 1px solid #e2e6eb !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(23, 26, 33, .06) !important;
}

body:not(:has(.sw-v3)):has(.select-items)
.select-items .height-adjuster .responsive-longname {
  margin-bottom: 18px !important;
}

body:not(:has(.sw-v3)):has(.select-items)
.select-items .height-adjuster .image-container {
  margin-bottom: 20px !important;
}

body:not(:has(.sw-v3)):has(.select-items)
.select-items .height-adjuster .responsive-choose-info {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 540px !important;
  margin: 0 auto 22px !important;
  padding: 0 !important;
  color: #343b44 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  text-align: left !important;
  white-space: normal !important;
}

body:not(:has(.sw-v3)):has(.select-items)
.select-items .height-adjuster .responsive-choose-info:empty {
  display: none !important;
}

body:not(:has(.sw-v3)):has(.select-items)
.select-items .height-adjuster .responsive-pricing {
  margin-bottom: 14px !important;
}

@media (max-width: 700px) {
  body:not(:has(.sw-v3)):has(.select-items)
  .select-items .vertical-shell {
    margin-top: 20px !important;
    padding: 22px 18px 26px !important;
  }

  body:not(:has(.sw-v3)):has(.select-items)
  .select-items .height-adjuster .responsive-choose-info {
    font-size: 14px !important;
  }
}

/* Product card: target PageDNA's visible content wrapper */
html body:not(:has(.sw-v3))
.select-items .height-adjuster {
  box-sizing: border-box !important;
  width: min(620px, calc(100% - 24px)) !important;
  margin: 0 auto !important;
  padding: 26px 28px !important;
  background: #fff !important;
  border: 1px solid #dfe5ed !important;
  border-top: 3px solid #00a8e8 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(23, 26, 33, .08) !important;
}

@media (max-width: 700px) {
  html body:not(:has(.sw-v3))
  .select-items .height-adjuster {
    padding: 20px 16px !important;
  }
}

/* Let product descriptions show in full */
html body:not(:has(.sw-v3))
.select-items .height-adjuster {
  height: auto !important;
  max-height: none !important;
  grid-template-rows: auto !important;
  grid-auto-rows: auto !important;
  overflow: visible !important;
}

html body:not(:has(.sw-v3))
.select-items .height-adjuster .responsive-choose-info,
html body:not(:has(.sw-v3))
.select-items .height-adjuster .responsive-choose-info * {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  white-space: normal !important;
}

html body:not(:has(.sw-v3))
.select-items .height-adjuster .responsive-choose-info {
  margin-bottom: 22px !important;
  line-height: 1.55 !important;
}

/* Keep product content inside each card when items sit side by side */
html body:not(:has(.sw-v3))
.select-items .height-adjuster {
  min-width: 0 !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

html body:not(:has(.sw-v3))
.select-items .height-adjuster .responsive-longname {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

html body:not(:has(.sw-v3))
.select-items .height-adjuster .responsive-longname label {
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

html body:not(:has(.sw-v3))
.select-items .height-adjuster .image-container {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body:not(:has(.sw-v3))
.select-items .height-adjuster .image-container img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

html body:not(:has(.sw-v3))
.select-items .height-adjuster .responsive-choose-info {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  text-align: left !important;
}

/* OVERSIGNS - category artwork on product variant pages */
html body:not(:has(.sw-v3)):has(.select-items):has(input[name="tab"][value^="BOARDS"])
.static-header-pic {
  background-image: url("../con/OVERSIGNS BOARDS BANNER.png") !important;
  background-position: center center !important;
  background-size: cover !important;
}

html body:not(:has(.sw-v3)):has(.select-items):has(input[name="tab"][value^="BANNER"])
.static-header-pic {
  background-image: url("../con/OVERSIGNS BANNERS.png") !important;
  background-position: center center !important;
  background-size: cover !important;
}


/* Shipping action text size; the shared Billing button rules above remain unchanged. */
body:has(form[action="bill.cgi"]) :is(#qtysel-buttonsbar, #final-buttonsbar) :is(a, button, input[type="button"], input[type="submit"]) {
  font-size: 13px !important;
}

/* ============================================================
   OVERSIGNS - CMY visual finish - 2026-09-28
   Color and icon overrides only. Native PageDNA actions remain intact.
   ============================================================ */
:root {
  --os-action: #b90070;
  --os-action-hover: #940058;
  --os-action-ink: #ffffff;
  --os-page-yellow: #FFFF00;
}

/* Retain the original cyan header line and category underline. */
html body #header-wrapper {
  border-bottom-color: #00A8E8 !important;
  box-shadow: inset 0 -3px 0 #00A8E8 !important;
}
html body .catalog-header-menu ul.top-menu > li > a::after {
  background-color: #00A8E8 !important;
}

/* Popular Materials is the yellow band shown in the page screenshot. */
html body:has(.sw-v3) .sw-v3 > .sw-v3-section:nth-of-type(2) {
  background: var(--os-page-yellow) !important;
}
html body:has(.sw-v3) .sw-v3 > .sw-v3-section:nth-of-type(2)
.sw-v3-section__head h2 {
  color: #171a21 !important;
  text-shadow: none !important;
}
html body:has(.sw-v3) .sw-v3 > .sw-v3-section:nth-of-type(2)
.sw-v3-material {
  border-color: #E9D265 !important;
  box-shadow: 0 7px 19px rgba(71, 53, 0, .13) !important;
}

/* PageDNA actions, including text links that are styled as buttons. */
html body .main :is(
  button:not(.shoprint-config-search-button),
  input[type="submit"], input[type="button"], input[type="reset"],
  a.button, a.btn, .buttonsbar a
):not(:disabled):not([aria-disabled="true"]),
html body .sw-v3 .sw-v3-material :is(
  a:not(:has(img)), button, input[type="submit"], input[type="button"]
),
html body .sw-v3 :is(a.sw-v3-button, a.sw-v3-cta),
html body :is(.footer, .footnote, .footer_bottom_alt) :is(button, a.button) {
  background: var(--os-action) !important;
  background-image: none !important;
  border-color: var(--os-action) !important;
  color: var(--os-action-ink) !important;
  text-shadow: none !important;
}
html body .main :is(
  button:not(.shoprint-config-search-button),
  input[type="submit"], input[type="button"], input[type="reset"],
  a.button, a.btn, .buttonsbar a
):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible),
html body .sw-v3 .sw-v3-material :is(
  a:not(:has(img)), button, input[type="submit"], input[type="button"]
):is(:hover, :focus-visible),
html body .sw-v3 :is(a.sw-v3-button, a.sw-v3-cta):is(:hover, :focus-visible),
html body :is(.footer, .footnote, .footer_bottom_alt) :is(button, a.button):is(:hover, :focus-visible) {
  background: var(--os-action-hover) !important;
  border-color: var(--os-action-hover) !important;
  color: var(--os-action-ink) !important;
}
html body .main :is(button, input[type="submit"], input[type="button"], a.button, .buttonsbar a):focus-visible {
  outline: 3px solid var(--os-page-yellow) !important;
  outline-offset: 2px !important;
}

/* Match PageDNA's more specific action rules on checkout, account and proof. */
html body:has(form[action="bill.cgi"]) :is(#qtysel-buttonsbar, #final-buttonsbar) :is(a, button, input[type="button"], input[type="submit"]),
html body:has(form[action="review_bill.cgi"]) .buttonsbar :is(a, button, input[type="button"], input[type="submit"]),
html body .basket-view .buttonsbar :is(button, input[type="button"], input[type="submit"], a.button),
html body .main.new-account :is(input[type="submit"], button[type="submit"], .buttonsbar a),
html body:has(.profile) :is(.profile, .profile-selection) :is(button, input[type="submit"], a.button),
html body:has(.main.shiptrack) .main.shiptrack :is(button, input[type="submit"], a.button),
html body:has(.main.reorder) .main.reorder :is(button, input[type="submit"], a.button) {
  background: var(--os-action) !important;
  background-image: none !important;
  border-color: var(--os-action) !important;
  color: var(--os-action-ink) !important;
  text-shadow: none !important;
}
html body:has(form[action="bill.cgi"]) :is(#qtysel-buttonsbar, #final-buttonsbar) :is(a, button, input[type="button"], input[type="submit"]):is(:hover, :focus-visible),
html body:has(form[action="review_bill.cgi"]) .buttonsbar :is(a, button, input[type="button"], input[type="submit"]):is(:hover, :focus-visible),
html body .basket-view .buttonsbar :is(button, input[type="button"], input[type="submit"], a.button):is(:hover, :focus-visible),
html body .main.new-account :is(input[type="submit"], button[type="submit"], .buttonsbar a):is(:hover, :focus-visible),
html body:has(.profile) :is(.profile, .profile-selection) :is(button, input[type="submit"], a.button):is(:hover, :focus-visible) {
  background: var(--os-action-hover) !important;
  border-color: var(--os-action-hover) !important;
  color: var(--os-action-ink) !important;
}

/* The View Product control is a span inside a linked material card.
   Style that span; keep the card image and white card surface intact. */
html body .sw-v3 .sw-v3-materials > a.sw-v3-material
.sw-v3-material__action {
  background: var(--os-action) !important;
  background-image: none !important;
  border-color: var(--os-action) !important;
  color: var(--os-action-ink) !important;
  text-shadow: none !important;
}
html body .sw-v3 .sw-v3-materials > a.sw-v3-material:is(:hover, :focus-visible)
.sw-v3-material__action {
  background: var(--os-action-hover) !important;
  border-color: var(--os-action-hover) !important;
  color: var(--os-action-ink) !important;
}

/* Search results have their own product grid. Remove the old category hero
   only when PageDNA renders its search-results marker. */
html body:has(#catalog-search-terms) .static-header-pic {
  display: none !important;
}
html body:has(#catalog-search-terms) #header-wrapper {
  margin-bottom: 16px !important;
}

/* The existing desktop Account link receives a clearer user-circle glyph. */
@media only screen and (min-width: 1025px) {
  html body #header-links-container td.header-links > a:nth-of-type(2)::before {
    content: "\f2bd" !important;
    font-family: FontAwesome !important;
    font-size: 24px !important;
    color: #171a21 !important;
  }
}

/* OVERSIGNS product specifications - add once to Additional CSS Content. */
.os-product-specs {box-sizing:border-box; width:min(100%,980px); margin:32px auto; color:#171a21; font:400 15px/1.55 Arial,sans-serif; clear:both;}
.os-product-specs * {box-sizing:border-box;}
.os-product-specs__overview {background:#33122e; border-left:5px solid #ff00ff; color:#fff; border-radius:10px 10px 0 0; padding:22px 26px;}
.os-product-specs h2 {font:700 21px/1.25 Arial,sans-serif; margin:0 0 12px; letter-spacing:.025em;}
.os-product-specs__overview p {margin:0; max-width:78ch;}
.os-product-specs__body {background:#f7f8fa; border:1px solid #e0e4e8; border-top:0; border-radius:0 0 10px 10px; padding:24px 26px;}
.os-product-specs__grid {display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:start;}
.os-product-specs__grid--single {grid-template-columns:1fr;}
.os-product-specs__body h2 {color:#343b49;}
.os-product-specs__features {margin:0 0 24px; padding:0 0 20px; border-bottom:1px solid #dee3e8;}
.os-product-specs__features ul {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none;}
.os-product-specs__features li {background:#fff; border:1px solid #e1e5e9; border-left:3px solid #b90070; border-radius:6px; padding:10px 12px; font-weight:600;}
.os-product-specs table {border-collapse:collapse; width:100%; table-layout:fixed; font-size:14px; background:#fff;}
.os-product-specs th,.os-product-specs td {text-align:left; vertical-align:top; padding:10px 13px; border:1px solid #dee3e8; overflow-wrap:anywhere;}
.os-product-specs th {width:36%; background:#e9edf1; font-weight:700;}
.os-product-specs tr:nth-child(even) td {background:#fbfcfd;}
.os-product-specs__resources {padding-top:4px;}
.os-product-specs__resource {display:block; background:#fff; border:1px solid #dde3e8; border-radius:8px; padding:13px; color:#202734 !important; text-decoration:none !important; font-weight:700;}
.os-product-specs__resource:hover,.os-product-specs__resource:focus-visible {border-color:#b00079; box-shadow:0 0 0 3px rgba(255,0,255,.12);}
.os-product-specs__resource span {display:block; color:#606b79; font-size:12px; font-weight:400;}
@media(max-width:700px){.os-product-specs {margin:24px auto; padding:0 12px;}.os-product-specs__grid,.os-product-specs__features ul {grid-template-columns:1fr; gap:10px;}.os-product-specs__overview,.os-product-specs__body {padding:18px;}.os-product-specs th {width:42%;}.os-product-specs th,.os-product-specs td {padding:9px;}}


/* OVERSIGNS product detail: native price and order action below image.
   Verified PageDNA hierarchy: pricing, description and responsive-tagcheck
   are direct children of .height-adjuster; the button is inside tagcheck. */
html body:not(:has(.sw-v3)):has(.select-items)
.select-items .height-adjuster {
  grid-template-areas:
    "product-title"
    "product-image"
    "product-price"
    "product-extra"
    "product-description" !important;
}

html body:not(:has(.sw-v3)):has(.select-items)
.select-items .height-adjuster > .responsive-pricing {
  grid-area: product-price !important;
}
html body:not(:has(.sw-v3)):has(.select-items)
.select-items .height-adjuster > .responsive-tagcheck {
  grid-area: product-extra !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
}
html body:not(:has(.sw-v3)):has(.select-items)
.select-items .height-adjuster > .responsive-choose-info {
  grid-area: product-description !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 16px auto 0 !important;
}

/* Keep Key Features readable inside narrow product cards */
html body .select-items .os-product-specs {
  container-type: inline-size;
}

html body .select-items .os-product-specs__features ul {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)) !important;
}

html body .select-items .os-product-specs__features li,
html body .select-items .os-product-specs :is(th, td) {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

@container (max-width: 340px) {
  .os-product-specs .os-product-specs__overview,
  .os-product-specs .os-product-specs__body {
    padding: 17px 14px !important;
  }

  .os-product-specs .os-product-specs__features ul {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .os-product-specs .os-product-specs__features li {
    padding: 9px 11px !important;
  }

  .os-product-specs :is(th, td) {
    padding: 7px 8px !important;
    font-size: 12px !important;
  }
}


/* ============================================================
   OVERSIGNS - 2026-09-29 artwork correction
   Product cards use their entered specification labels, since PageDNA
   often gives the tab a material group name instead of the product name.
   ============================================================ */

/* Put new category artwork over PageDNA's existing card image/background.
   Pointer events pass through to the original category link. */
html body .sw-v3-category-grid > :nth-child(-n+3) {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
}
html body .sw-v3-category-grid > :nth-child(-n+3)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background-size: cover !important;
  background-position: center !important;
  pointer-events: none !important;
}
html body .sw-v3-category-grid > :nth-child(1)::after {
  background-image: linear-gradient(0deg, rgba(0,0,0,.50), transparent 48%), url("../con/Adhesive_Vinyl_Category bold.png") !important;
}
html body .sw-v3-category-grid > :nth-child(2)::after {
  background-image: linear-gradient(0deg, rgba(0,0,0,.50), transparent 48%), url("../con/Boards_Category bold.png") !important;
}
html body .sw-v3-category-grid > :nth-child(3)::after {
  background-image: linear-gradient(0deg, rgba(0,0,0,.50), transparent 48%), url("../con/Banners_Category bold.png") !important;
}
html body .sw-v3-category-grid > :nth-child(-n+3) .sw-v3-category__label {
  position: relative !important;
  z-index: 2 !important;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.55) !important;
  pointer-events: none !important;
}

/* Product variant cards: keep PageDNA's original links and price. */
html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="Econo Vinyl" i]) .image-container img {
  content: url("../con/Econo_Vinyl bold.png") !important;
}

html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="Lintec" i]) .image-container img {
  content: url("../con/Lintec_Clear_White_Ink bold.png") !important;
}

html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="Perforated Vinyl" i]) .image-container img {
  content: url("../con/Perforated_Vinyl_60_40 bold.png") !important;
}

html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="Coroplast" i]) .image-container img {
  content: url("../con/Open House Coroplast Yard Sign-3.png") !important;
}

html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="PVC Sintra" i]) .image-container img {
  content: url("../con/Cobalt form PVC gallery sign-2.png") !important;
}

html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="Styrene" i]) .image-container img {
  content: url("../con/Cobalt Cold Brew Styrene Sign-5.png") !important;
}

html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="Aluminum Composite" i]) .image-container img {
  content: url("../con/Aluminum_Composite_3mm bold.png") !important;
}

html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="13oz Vinyl Banner" i]) .image-container img {
  content: url("../con/Vinyl_Banner_13oz bold.png") !important;
}

html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="18oz Vinyl Banner" i]) .image-container img {
  content: url("../con/Game On Mesh Sports Banner-1.png") !important;
}

/* The landing-page Popular Materials cards are different on each tab.
   Match their current order without altering names, links, or actions. */
html body:has(.sw-v3):has(input[name="tab"][value^="ADHESIVE"])
.sw-v3-materials > a.sw-v3-material:nth-child(1) img {
  content: url("../con/Econo_Vinyl bold.png") !important;
}
html body:has(.sw-v3):has(input[name="tab"][value^="ADHESIVE"])
.sw-v3-materials > a.sw-v3-material:nth-child(3) img {
  content: url("../con/Lintec_Clear_White_Ink bold.png") !important;
}
html body:has(.sw-v3):has(input[name="tab"][value^="ADHESIVE"])
.sw-v3-materials > a.sw-v3-material:nth-child(4) img {
  content: url("../con/Perforated_Vinyl_60_40 bold.png") !important;
}
html body:has(.sw-v3):has(input[name="tab"][value^="BOARDS"])
.sw-v3-materials > a.sw-v3-material:nth-child(1) img {
  content: url("../con/Open House Coroplast Yard Sign-3.png") !important;
}
html body:has(.sw-v3):has(input[name="tab"][value^="BOARDS"])
.sw-v3-materials > a.sw-v3-material:nth-child(2) img {
  content: url("../con/Cobalt form PVC gallery sign-2.png") !important;
}
html body:has(.sw-v3):has(input[name="tab"][value^="BOARDS"])
.sw-v3-materials > a.sw-v3-material:nth-child(3) img {
  content: url("../con/Cobalt Cold Brew Styrene Sign-5.png") !important;
}
html body:has(.sw-v3):has(input[name="tab"][value^="BOARDS"])
.sw-v3-materials > a.sw-v3-material:nth-child(4) img {
  content: url("../con/Aluminum_Composite_3mm bold.png") !important;
}
html body:has(.sw-v3):has(input[name="tab"][value^="BANNER"])
.sw-v3-materials > a.sw-v3-material:nth-child(1) img {
  content: url("../con/Vinyl_Banner_13oz bold.png") !important;
}
html body:has(.sw-v3):has(input[name="tab"][value^="BANNER"])
.sw-v3-materials > a.sw-v3-material:nth-child(2) img {
  content: url("../con/Game On Mesh Sports Banner-1.png") !important;
}

/* Category-level Popular Materials images, used only if their own
   category links are added to the tab content later. */
html body .sw-v3-materials > a.sw-v3-material[href*="tab=ADHESIVE" i]:not([href*="||"], [href*="%7C%7C" i]) img {
  content: url("../con/POPULAR MATERIALS Adhesive.png") !important;
}
html body .sw-v3-materials > a.sw-v3-material[href*="tab=BOARDS" i]:not([href*="||"], [href*="%7C%7C" i]) img {
  content: url("../con/POPULAR MATERIALS Boards.png") !important;
}
html body .sw-v3-materials > a.sw-v3-material[href*="tab=BANNER" i]:not([href*="||"], [href*="%7C%7C" i]) img {
  content: url("../con/POPULAR MATERIALS Banners.png") !important;
}

/* OVERSIGNS - Shop by Category: compact square images on all screens.
   Replace the previous combined Shop by Category blurb with this one.
   Paste at the end of Site Header > Additional CSS Content. */

html body .sw-v3-category-grid {
  display: grid !important;
  width: min(820px, calc(100% - 32px)) !important;
  max-width: 820px !important;
  margin-inline: auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

html body .sw-v3-category-grid > :nth-child(-n+3) {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 260px !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  justify-self: center !important;
  overflow: hidden !important;
  background: #f5f6f7 !important;
  border-radius: 10px !important;
  isolation: isolate;
}

html body .sw-v3-category-grid > :nth-child(-n+3)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
}

html body .sw-v3-category-grid > :nth-child(1)::after {
  background-image: url("../con/POPULAR MATERIALS Adhesive.png") !important;
}
html body .sw-v3-category-grid > :nth-child(2)::after {
  background-image: url("../con/POPULAR MATERIALS Boards.png") !important;
}
html body .sw-v3-category-grid > :nth-child(3)::after {
  background-image: url("../con/POPULAR MATERIALS Banners.png") !important;
}

/* The names are printed in the images; keep PageDNA's text available to readers. */
html body .sw-v3-category-grid > :nth-child(-n+3) .sw-v3-category__label {
  opacity: 0 !important;
}

@media (max-width: 700px) {
  html body .sw-v3-category-grid {
    width: min(540px, calc(100% - 24px)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 550px) {
  html body .sw-v3-category-grid {
    width: min(280px, calc(100% - 24px)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  html body .sw-v3-category-grid > :nth-child(-n+3) {
    max-width: 240px !important;
    margin-inline: auto !important;
  }
}



/* Shop by Category: highlight hovered, focused, or pressed card */
html body .sw-v3-category-grid > :nth-child(-n+3) {
  transition: transform 180ms ease, box-shadow 180ms ease, outline-color 180ms ease !important;
}

html body .sw-v3-category-grid > :nth-child(-n+3):hover,
html body .sw-v3-category-grid > :nth-child(-n+3):focus-within {
  outline: 3px solid #00a8e8 !important;
  outline-offset: 4px;
  box-shadow:
    0 0 0 8px rgba(255, 230, 109, 0.72),
    0 12px 24px rgba(23, 26, 33, 0.18) !important;
  transform: translateY(-3px) !important;
}

html body .sw-v3-category-grid > :nth-child(-n+3):active {
  outline-color: #b90070 !important;
  transform: scale(0.985) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .sw-v3-category-grid > :nth-child(-n+3) {
    transition: none !important;
  }
}


/* ============================================================================
   OVERSIGNS - APPROVED CLEAN BASELINE UPDATE - 2026-09-30
   - My Account redesign (approved mockup direction)
   - Final product thumbnail artwork mapping
   - Restored Shop by Category artwork order: Adhesive / Boards / Banners
   - Preserves PageDNA links, pricing, workflow and native form behavior
   ============================================================================ */

/* ============================================================================
   MY ACCOUNT - CLEAN DASHBOARD V3
   ============================================================================ */

body:has(.main.profile) {
  background: #f7f8fa !important;
}

/* Account pages do not need the large catalog hero. */
body:has(.main.profile) .static-header-pic {
  display: none !important;
}

body:has(.main.profile) #header-wrapper {
  margin-bottom: 0 !important;
}

body:has(.main.profile) .main.profile {
  box-sizing: border-box !important;
  width: min(1280px, calc(100% - 40px)) !important;
  max-width: 1280px !important;
  margin: 28px auto 56px !important;
  padding: 0 !important;
  color: #171a21 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
}

/* Page title */
body:has(.main.profile) .main.profile::before {
  content: "My Account";
  display: block;
  width: max-content;
  margin: 0 0 30px !important;
  padding: 0 0 12px !important;
  border-bottom: 4px solid #b90070;
  color: #111827;
  font: 800 34px/1.05 "Open Sans", Arial, sans-serif !important;
  letter-spacing: -.035em;
}

/* Top order/search card */
body:has(.main.profile) .profile-selection {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 24px !important;
  padding: 26px 30px !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 26px rgba(23,26,33,.06) !important;
}

/* If PageDNA outputs the controls as a table, make the two rows become columns. */
body:has(.main.profile) .profile-selection table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

@media (min-width: 901px) {
  body:has(.main.profile) .profile-selection table > tbody {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  body:has(.main.profile) .profile-selection table > tbody > tr {
    display: grid !important;
    grid-template-columns: max-content minmax(170px,1fr) max-content !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 28px !important;
  }

  body:has(.main.profile) .profile-selection table > tbody > tr:first-child {
    border-right: 1px solid #e2e7ec !important;
  }
}

body:has(.main.profile) .profile-selection :is(td, th, label) {
  color: #171a21 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: normal !important;
}

body:has(.main.profile) .profile-selection :is(input[type="text"], input[type="search"], select) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  background: #fff !important;
  border: 1px solid #cfd6df !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  color: #222936 !important;
  font: 500 14px/1 "Open Sans", Arial, sans-serif !important;
}

body:has(.main.profile) .profile-selection :is(input[type="text"], input[type="search"], select):focus {
  border-color: #00a8e8 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(0,168,232,.14) !important;
}

/* Shared account buttons */
body:has(.main.profile) :is(
  .profile-selection,
  .profile
) :is(button, input[type="submit"], input[type="button"], a.button) {
  box-sizing: border-box !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 10px 17px !important;
  background: #c40074 !important;
  border: 1px solid #c40074 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  color: #fff !important;
  font: 700 13px/1.15 "Open Sans", Arial, sans-serif !important;
  text-decoration: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transition: transform .16s ease, background .16s ease, border-color .16s ease !important;
}

body:has(.main.profile) :is(
  .profile-selection,
  .profile
) :is(button, input[type="submit"], input[type="button"], a.button):hover {
  background: #9d005d !important;
  border-color: #9d005d !important;
  transform: translateY(-1px) !important;
}

/* Re-Order uses a lighter secondary treatment when PageDNA exposes a reorder target. */
body:has(.main.profile) :is(
  a[href*="reorder" i],
  input[value*="re-order" i],
  input[value*="reorder" i]
) {
  background: #fff !important;
  border: 1px solid #c40074 !important;
  color: #c40074 !important;
}

body:has(.main.profile) :is(
  a[href*="reorder" i],
  input[value*="re-order" i],
  input[value*="reorder" i]
):hover {
  background: #fff4fa !important;
  color: #9d005d !important;
}

/* Basket / user action row: give the native controls breathing room without changing actions. */
body:has(.main.profile) .profile-selection + :is(div, table, form),
body:has(.main.profile) .profile > :is(.buttonsbar, .submit) {
  margin-top: 14px !important;
}

body:has(.main.profile) .profile > form {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 28px 0 0 !important;
  padding: 0 32px 32px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 26px rgba(23,26,33,.06) !important;
}

body:has(.main.profile) .profile .profile-container {
  background: transparent !important;
  border: 0 !important;
}

/* Information card header */
body:has(.main.profile) .profile .profile-container .top_of_profile_title {
  position: relative !important;
  box-sizing: border-box !important;
  padding: 30px 24px 26px 72px !important;
  background: transparent !important;
  color: #111827 !important;
  font: 800 27px/1.1 "Open Sans", Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: -.025em !important;
}

body:has(.main.profile) .profile .profile-container .top_of_profile_title::before {
  content: "\f007";
  position: absolute;
  top: 21px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fde8f3;
  color: #c40074;
  font-family: FontAwesome !important;
  font-size: 22px;
  font-weight: normal;
}

body:has(.main.profile) .profile .profile-container .top_of_profile_buttons {
  box-sizing: border-box !important;
  padding: 22px 0 18px 18px !important;
  background: transparent !important;
  text-align: right !important;
}

/* Information table */
body:has(.main.profile) .profile > form table:last-of-type {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}

body:has(.main.profile) .profile > form table:last-of-type tr {
  border-top: 1px solid #e3e8ee !important;
}

body:has(.main.profile) .profile > form table:last-of-type tr:last-child {
  border-bottom: 1px solid #e3e8ee !important;
}

body:has(.main.profile) .profile > form table:last-of-type :is(td, th) {
  box-sizing: border-box !important;
  padding: 10px 14px !important;
  background: #fff !important;
  border: 0 !important;
  color: #222936 !important;
  font: 500 14px/1.35 "Open Sans", Arial, sans-serif !important;
  text-align: left !important;
  vertical-align: middle !important;
}

body:has(.main.profile) .profile > form table:last-of-type :is(td.label, th.label) {
  width: 29% !important;
  background: #fafbfc !important;
  color: #4d5664 !important;
  font-weight: 700 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}

/* Active state - keep text but make it easier to scan. */
body:has(.main.profile) .profile > form table:last-of-type tr:first-child td:not(.label) {
  color: #159447 !important;
  font-weight: 700 !important;
}

/* Remove legacy dark top bars from the account-specific cards. */
body:has(.main.profile) :is(.profile-selection, .profile > form) {
  border-top-width: 1px !important;
}

/* Responsive Account */
@media (max-width: 900px) {
  body:has(.main.profile) .main.profile {
    width: calc(100% - 24px) !important;
    margin-top: 20px !important;
  }

  body:has(.main.profile) .main.profile::before {
    font-size: 29px !important;
  }

  body:has(.main.profile) .profile-selection {
    padding: 18px !important;
  }

  body:has(.main.profile) .profile-selection table > tbody,
  body:has(.main.profile) .profile-selection table > tbody > tr {
    display: table-row-group !important;
  }

  body:has(.main.profile) .profile-selection table > tbody > tr {
    display: table-row !important;
  }

  body:has(.main.profile) .profile-selection :is(td,th) {
    padding: 7px 5px !important;
  }

  body:has(.main.profile) .profile > form {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  body:has(.main.profile) .profile .profile-container .top_of_profile_title {
    padding-left: 62px !important;
    font-size: 23px !important;
  }

  body:has(.main.profile) .profile > form table:last-of-type :is(td.label, th.label) {
    width: 38% !important;
  }
}

@media (max-width: 560px) {
  body:has(.main.profile) .profile > form table:last-of-type :is(td, th) {
    padding: 9px 8px !important;
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.main.profile) .profile > form table:last-of-type :is(td.label, th.label) {
    width: 42% !important;
    font-size: 11px !important;
  }
}


/* ============================================================================
   FINAL THUMBNAIL ARTWORK MAPPING
   ============================================================================ */

/* Product variant pages - preserve PageDNA links, price and actions. */
html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="Econo Vinyl" i]) .image-container img {
  content: url("../con/Econo_Vinyl bold.png") !important;
}
html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="Controltac" i]) .image-container img {
  content: url("../con/3M Controltac Bold Thumbnail.png") !important;
}
html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="Lintec" i]) .image-container img {
  content: url("../con/Lintec_Clear_White_Ink bold.png") !important;
}
html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="Perforated Vinyl" i]) .image-container img {
  content: url("../con/Perforated_Vinyl_60_40 bold.png") !important;
}
html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="Coroplast" i]) .image-container img {
  content: url("../con/Open House Coroplast Yard Sign-3.png") !important;
}
html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="PVC Sintra" i]) .image-container img {
  content: url("../con/Cobalt form PVC gallery sign-2.png") !important;
}
html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="Styrene" i]) .image-container img {
  content: url("../con/Cobalt Cold Brew Styrene Sign-5.png") !important;
}
html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="Aluminum Composite" i]) .image-container img {
  content: url("../con/Aluminum_Composite_3mm bold.png") !important;
}
html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="13oz Vinyl Banner" i]) .image-container img {
  content: url("../con/Vinyl_Banner_13oz bold.png") !important;
}
html body:not(:has(.sw-v3)) .select-items .height-adjuster:has(.os-product-specs[aria-label*="18oz Vinyl Banner" i]) .image-container img {
  content: url("../con/Game On Mesh Sports Banner-1.png") !important;
}

html body .select-items .image-container {
  overflow: hidden !important;
}
html body .select-items .image-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Popular Materials - Adhesive */
html body:has(.sw-v3):has(input[name="tab"][value^="ADHESIVE"]) .sw-v3-materials > a.sw-v3-material:nth-child(1) .sw-v3-material__image {
  background-image: url("../con/Econo_Vinyl bold.png") !important;
}
html body:has(.sw-v3):has(input[name="tab"][value^="ADHESIVE"]) .sw-v3-materials > a.sw-v3-material:nth-child(2) .sw-v3-material__image {
  background-image: url("../con/3M Controltac Bold Thumbnail.png") !important;
}
html body:has(.sw-v3):has(input[name="tab"][value^="ADHESIVE"]) .sw-v3-materials > a.sw-v3-material:nth-child(3) .sw-v3-material__image {
  background-image: url("../con/Lintec_Clear_White_Ink bold.png") !important;
}
html body:has(.sw-v3):has(input[name="tab"][value^="ADHESIVE"]) .sw-v3-materials > a.sw-v3-material:nth-child(4) .sw-v3-material__image {
  background-image: url("../con/Perforated_Vinyl_60_40 bold.png") !important;
}

/* Popular Materials - Boards */
html body:has(.sw-v3):has(input[name="tab"][value^="BOARDS"]) .sw-v3-materials > a.sw-v3-material:nth-child(1) .sw-v3-material__image {
  background-image: url("../con/Open House Coroplast Yard Sign-3.png") !important;
}
html body:has(.sw-v3):has(input[name="tab"][value^="BOARDS"]) .sw-v3-materials > a.sw-v3-material:nth-child(2) .sw-v3-material__image {
  background-image: url("../con/Cobalt form PVC gallery sign-2.png") !important;
}
html body:has(.sw-v3):has(input[name="tab"][value^="BOARDS"]) .sw-v3-materials > a.sw-v3-material:nth-child(3) .sw-v3-material__image {
  background-image: url("../con/Cobalt Cold Brew Styrene Sign-5.png") !important;
}
html body:has(.sw-v3):has(input[name="tab"][value^="BOARDS"]) .sw-v3-materials > a.sw-v3-material:nth-child(4) .sw-v3-material__image {
  background-image: url("../con/Aluminum_Composite_3mm bold.png") !important;
}

/* Popular Materials - Banners */
html body:has(.sw-v3):has(input[name="tab"][value^="BANNER"]) .sw-v3-materials > a.sw-v3-material:nth-child(1) .sw-v3-material__image {
  background-image: url("../con/Vinyl_Banner_13oz bold.png") !important;
}
html body:has(.sw-v3):has(input[name="tab"][value^="BANNER"]) .sw-v3-materials > a.sw-v3-material:nth-child(2) .sw-v3-material__image {
  background-image: url("../con/Game On Mesh Sports Banner-1.png") !important;
}

html body .sw-v3-material__image {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* ============================================================================
   SHOP BY CATEGORY - APPROVED ARTWORK
   Order: Adhesive / Boards / Banners
   ============================================================================ */

html body .sw-v3-category-grid > :nth-child(-n+3) {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 260px !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  justify-self: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #f5f6f7 !important;
  background-image: none !important;
  border-radius: 10px !important;
}

html body .sw-v3-category-grid > :nth-child(-n+3)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
}

html body .sw-v3-category-grid > :nth-child(1)::after {
  background-image: url("../con/POPULAR MATERIALS Adhesive.png") !important;
}
html body .sw-v3-category-grid > :nth-child(2)::after {
  background-image: url("../con/POPULAR MATERIALS Boards.png") !important;
}
html body .sw-v3-category-grid > :nth-child(3)::after {
  background-image: url("../con/POPULAR MATERIALS Banners.png") !important;
}

/* Artwork already contains the category names. */
html body .sw-v3-category-grid > :nth-child(-n+3) .sw-v3-category__label {
  opacity: 0 !important;
}

/* Keep approved category interaction. */
html body .sw-v3-category-grid > :nth-child(-n+3) {
  transition: transform 180ms ease, box-shadow 180ms ease, outline-color 180ms ease !important;
}
html body .sw-v3-category-grid > :nth-child(-n+3):hover,
html body .sw-v3-category-grid > :nth-child(-n+3):focus-within {
  outline: 3px solid #00a8e8 !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 8px rgba(255,230,109,.72), 0 12px 24px rgba(23,26,33,.18) !important;
  transform: translateY(-3px) !important;
}
html body .sw-v3-category-grid > :nth-child(-n+3):active {
  outline-color: #b90070 !important;
  transform: scale(.985) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .sw-v3-category-grid > :nth-child(-n+3) {
    transition: none !important;
  }
}

/* END - OVERSIGNS APPROVED CLEAN BASELINE UPDATE - 2026-09-30 */

/* ============================================================


/* ============================================================================
   OVERSIGNS - CLEAN FINAL POLISH LAYER - 2026-10-01
   Consolidated replacement for the post-baseline patch stack.

   PURPOSE
   - Preserve the approved storefront/header/category/configurator/checkout work.
   - Preserve approved thumbnails and Shop by Category artwork.
   - Remove the abandoned live-size visualizer.
   - Replace broad late-stage selectors with page-scoped rules.
   - Keep cyan for structure and magenta for actions.
   - Fix product Overview text without leaking order-page typography.
   ============================================================================ */


/* ============================================================================
   1. PRODUCT DETAIL / OVERVIEW - LOCKED READABILITY
   ============================================================================ */

html body:not(:has(.sw-v3))
.select-items .os-product-specs {
  color: #171a21 !important;
}

html body:not(:has(.sw-v3))
.select-items .os-product-specs .os-product-specs__overview {
  background: #33122e !important;
  border-left: 5px solid #ff00ff !important;
  border-radius: 10px 10px 0 0 !important;
  color: #ffffff !important;
}

html body:not(:has(.sw-v3))
.select-items .os-product-specs .os-product-specs__overview :is(h1,h2,h3,h4,h5,h6,strong,b,span,a) {
  color: #ffffff !important;
  text-shadow: none !important;
}

html body:not(:has(.sw-v3))
.select-items .os-product-specs .os-product-specs__overview p {
  color: rgba(255,255,255,.90) !important;
  text-shadow: none !important;
}

html body:not(:has(.sw-v3))
.select-items .os-product-specs .os-product-specs__body :is(h1,h2,h3,h4,h5,h6) {
  color: #171a21 !important;
}


/* ============================================================================
   2. MY ACCOUNT - KEEP APPROVED DASHBOARD, ADD CYAN STRUCTURE
   ============================================================================ */

body:has(.main.profile) .profile-selection,
body:has(.main.profile) .profile > form {
  position: relative !important;
}

body:has(.main.profile) .profile-selection::after,
body:has(.main.profile) .profile > form::after {
  content: "" !important;
  position: absolute !important;
  top: -1px !important;
  right: -1px !important;
  left: -1px !important;
  height: 4px !important;
  background: #00a8e8 !important;
  border-radius: 12px 12px 0 0 !important;
  pointer-events: none !important;
}


/* ============================================================================
   3. REVIEW ORDER - SCOPED ONLY TO .main.review
   ============================================================================ */

body:has(.main.review) {
  background: #f5f7f9 !important;
}

html body .main.review {
  box-sizing: border-box !important;
  width: min(1040px, calc(100% - 48px)) !important;
  max-width: 1040px !important;
  margin: 30px auto 56px !important;
  padding: 0 !important;
  color: #303b45 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
}

.main.review .pagetitle {
  margin: 0 0 4px !important;
  padding: 0 !important;
  color: #171a21 !important;
  border: 0 !important;
  font: 800 31px/1.1 "Open Sans", Arial, sans-serif !important;
  letter-spacing: -.03em !important;
  text-transform: none !important;
}

.main.review .pageinstructions {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 0 24px !important;
  padding: 8px 0 14px !important;
  color: #596672 !important;
  border-bottom: 3px solid #00a8e8 !important;
  font: 400 13px/1.45 "Open Sans", Arial, sans-serif !important;
  text-align: left !important;
}

.main.review .form-body {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #dbe3e8 !important;
  border-radius: 11px !important;
  box-shadow: 0 8px 24px rgba(23,26,33,.06) !important;
}

.main.review table {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.main.review td {
  box-sizing: border-box !important;
  padding: 11px 14px !important;
  color: #303a44 !important;
  border: 0 !important;
  border-bottom: 1px solid #edf0f2 !important;
  font: 400 13px/1.45 "Open Sans", Arial, sans-serif !important;
  vertical-align: top !important;
}

.main.review td.label {
  width: 32% !important;
  padding: 12px 16px !important;
  background: #eaf7fc !important;
  color: #22313b !important;
  border-left: 4px solid #00a8e8 !important;
  font: 800 11px/1.35 "Open Sans", Arial, sans-serif !important;
  letter-spacing: .035em !important;
  text-align: right !important;
  text-transform: uppercase !important;
}

.main.review td.data {
  background: #fff !important;
  color: #26323c !important;
}

.main.review .previewcell {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 24px 26px !important;
  background: #fff !important;
  border: 1px solid #dbe3e8 !important;
  border-top: 4px solid #00a8e8 !important;
  border-radius: 11px !important;
  text-align: left !important;
  box-shadow: 0 8px 24px rgba(23,26,33,.06) !important;
}

.main.review .previewcell img {
  display: block !important;
  width: auto !important;
  max-width: 240px !important;
  height: auto !important;
  margin: 18px auto 8px !important;
  background: #fff !important;
  border: 1px solid #d8e1e7 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(23,26,33,.07) !important;
}

.main.review .previewcell a span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  margin: 6px 0 !important;
  padding: 0 13px !important;
  background: #eaf7fc !important;
  color: #007da8 !important;
  border: 1px solid #a8d9eb !important;
  border-radius: 6px !important;
  font: 700 11px/1 "Open Sans", Arial, sans-serif !important;
  text-shadow: none !important;
}

.main.review :is(button,input[type="button"],input[type="submit"]) {
  min-height: 42px !important;
  padding: 0 18px !important;
  background: #b90070 !important;
  color: #fff !important;
  border: 1px solid #b90070 !important;
  border-radius: 7px !important;
  font: 800 12px/1 "Open Sans", Arial, sans-serif !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.main.review :is(button,input[type="button"],input[type="submit"]):hover {
  background: #940058 !important;
  border-color: #940058 !important;
}


/* ============================================================================
   4. FINAL ORDER CONFIRMATION - .done ONLY
   ============================================================================ */

body:has(.main.done) {
  background: #f5f7f9 !important;
}

html body .main.done {
  box-sizing: border-box !important;
  width: min(1120px, calc(100% - 48px)) !important;
  max-width: 1120px !important;
  margin: 32px auto 60px !important;
  padding: 0 !important;
  color: #303b45 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
}

.main.done div {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.main.done > div:first-of-type {
  box-sizing: border-box !important;
  margin: 0 0 22px !important;
  padding: 26px 30px !important;
  background: #fff !important;
  border: 1px solid #dce4e9 !important;
  border-top: 4px solid #00a8e8 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(23,26,33,.07) !important;
  color: #4e5a65 !important;
  font: 400 14px/1.55 "Open Sans", Arial, sans-serif !important;
}

.main.done > div:first-of-type :is(h1,h2,h3,strong,b):first-child {
  display: block !important;
  margin: 0 0 18px !important;
  color: #171a21 !important;
  font: 800 26px/1.15 "Open Sans", Arial, sans-serif !important;
  letter-spacing: -.025em !important;
}

.main.done > :is(b,strong) {
  display: block !important;
  margin: 24px 0 10px !important;
  padding: 0 0 10px !important;
  color: #171a21 !important;
  border-bottom: 3px solid #00a8e8 !important;
  font: 800 19px/1.2 "Open Sans", Arial, sans-serif !important;
}

.main.done > table {
  width: 100% !important;
  overflow: hidden !important;
  margin: 0 0 22px !important;
  background: #fff !important;
  border: 1px solid #dce4e9 !important;
  border-radius: 11px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  box-shadow: 0 8px 24px rgba(23,26,33,.06) !important;
}

.main.done td {
  box-sizing: border-box !important;
  padding: 11px 14px !important;
  color: #303b45 !important;
  border: 0 !important;
  border-bottom: 1px solid #edf0f2 !important;
  font: 400 13px/1.45 "Open Sans", Arial, sans-serif !important;
  vertical-align: top !important;
}

.main.done td.label {
  width: 30% !important;
  background: #eaf7fc !important;
  color: #22313b !important;
  border-left: 4px solid #00a8e8 !important;
  font: 800 11px/1.35 "Open Sans", Arial, sans-serif !important;
  letter-spacing: .03em !important;
  text-align: right !important;
  text-transform: uppercase !important;
}

.main.done td.data {
  background: #fff !important;
  color: #27333d !important;
}

.main.done .accept-proofs,
.main.done .accept-proofs .form-body {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 22px 0 0 !important;
}

.main.done .accept-proofs .form-body {
  padding: 24px 28px !important;
  background: #fff !important;
  border: 1px solid #dce4e9 !important;
  border-top: 4px solid #00a8e8 !important;
  border-radius: 11px !important;
  box-shadow: 0 8px 24px rgba(23,26,33,.06) !important;
}

.main.done .previewcell {
  height: auto !important;
  min-height: 0 !important;
  padding: 18px 20px !important;
  background: #fff !important;
  text-align: left !important;
}

.main.done .previewcell img {
  display: block !important;
  width: auto !important;
  max-width: 230px !important;
  height: auto !important;
  margin: 16px auto 6px !important;
  background: #fff !important;
  border: 1px solid #d9e1e6 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(23,26,33,.07) !important;
}

.main.done .previewcell a span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  margin: 6px 0 !important;
  padding: 0 13px !important;
  background: #eaf7fc !important;
  color: #007da8 !important;
  border: 1px solid #a8d9eb !important;
  border-radius: 6px !important;
  font: 700 11px/1 "Open Sans", Arial, sans-serif !important;
  text-shadow: none !important;
}

.main.done :is(button,input[type="button"],input[type="submit"]) {
  min-height: 44px !important;
  padding: 0 20px !important;
  background: #b90070 !important;
  color: #fff !important;
  border: 1px solid #b90070 !important;
  border-radius: 7px !important;
  font: 800 12px/1 "Open Sans", Arial, sans-serif !important;
  text-shadow: none !important;
  box-shadow: none !important;
}


/* ============================================================================
   5. APPROVAL REQUIRED - ONLY WHEN .accept-proofs IS PRESENT
   ============================================================================ */

body:has(.accept-proofs):not(:has(.main.done)) .accept-proofs {
  box-sizing: border-box !important;
  width: min(1040px, calc(100% - 48px)) !important;
  max-width: 1040px !important;
  margin: 24px auto 50px !important;
  padding: 26px 28px !important;
  background: #fff !important;
  border: 1px solid #dce4e9 !important;
  border-top: 4px solid #00a8e8 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(23,26,33,.075) !important;
}

body:has(.accept-proofs):not(:has(.main.done)) .accept-proofs table {
  width: 100% !important;
  margin: 0 !important;
}

body:has(.accept-proofs):not(:has(.main.done)) .accept-proofs :is(h1,h2,h3,b,strong) {
  color: #171a21 !important;
}

body:has(.accept-proofs):not(:has(.main.done)) .accept-proofs textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 92px !important;
  padding: 11px 12px !important;
  background: #fff !important;
  border: 1px solid #cbd5dc !important;
  border-radius: 7px !important;
  color: #171a21 !important;
  font: 400 14px/1.45 "Open Sans", Arial, sans-serif !important;
  resize: vertical !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body:has(.accept-proofs):not(:has(.main.done)) .accept-proofs textarea:focus {
  border-color: #00a8e8 !important;
  box-shadow: 0 0 0 3px rgba(0,168,232,.13) !important;
}

body:has(.accept-proofs):not(:has(.main.done)) .accept-proofs input[type="radio"] {
  width: 17px !important;
  height: 17px !important;
  margin-right: 8px !important;
  accent-color: #00a8e8 !important;
}


/* ============================================================================
   6. TRACK YOUR ORDERS - TABLE DASHBOARD
   This is in addition to the already-approved .main.shiptrack lookup styles.
   ============================================================================ */

.main.shiptrack > table {
  width: 100% !important;
  max-width: none !important;
  margin: 20px 0 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #dce4e9 !important;
  border-top: 4px solid #00a8e8 !important;
  border-radius: 11px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  box-shadow: 0 8px 24px rgba(23,26,33,.06) !important;
}

.main.shiptrack > table :is(td,th) {
  box-sizing: border-box !important;
  padding: 11px 13px !important;
  color: #303a44 !important;
  border: 0 !important;
  border-bottom: 1px solid #e8edf0 !important;
  font: 400 13px/1.4 "Open Sans", Arial, sans-serif !important;
  text-align: left !important;
}

.main.shiptrack > table tr:first-child :is(td,th) {
  background: #f1f6f8 !important;
  color: #52606c !important;
  font-weight: 800 !important;
}

.main.shiptrack > table tr:first-child a {
  display: inline-flex !important;
  align-items: center !important;
  margin: 2px 5px 2px 0 !important;
  padding: 5px 9px !important;
  background: #eaf7fc !important;
  color: #007da8 !important;
  border: 1px solid #b9dfea !important;
  border-radius: 999px !important;
  font: 700 11px/1 "Open Sans", Arial, sans-serif !important;
  text-decoration: none !important;
}

.main.shiptrack > table td a {
  color: #007da8 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.main.shiptrack > table tr:nth-child(even) td {
  background: #fafbfc !important;
}


/* ============================================================================
   7. ALREADY-SUBMITTED / ERROR PAGE - TIGHTLY SCOPED
   ============================================================================ */

body:has(input[value*="Begin a New Order" i]) {
  background: #f5f7f9 !important;
}

body:has(input[value*="Begin a New Order" i]) .main > div:has(a[href*="customer"]),
body:has(input[value*="Begin a New Order" i]) .main > form:has(input[value*="Begin a New Order" i]) {
  box-sizing: border-box !important;
  width: min(820px, calc(100% - 40px)) !important;
  max-width: 820px !important;
  margin: 90px auto 60px !important;
  padding: 34px 38px !important;
  background: #fff !important;
  border: 1px solid #dce4e9 !important;
  border-top: 4px solid #00a8e8 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(23,26,33,.07) !important;
}

body:has(input[value*="Begin a New Order" i]) .main :is(h1,h2,h3) {
  color: #171a21 !important;
  font: 800 28px/1.15 "Open Sans", Arial, sans-serif !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}

body:has(input[value*="Begin a New Order" i]) .main input[type="submit"] {
  min-height: 42px !important;
  padding: 0 20px !important;
  background: #b90070 !important;
  color: #fff !important;
  border: 1px solid #b90070 !important;
  border-radius: 7px !important;
  font: 800 12px/1 "Open Sans", Arial, sans-serif !important;
  text-shadow: none !important;
  box-shadow: none !important;
}


/* ============================================================================
   8. EXTEND EXISTING GLOBAL NAV + SEARCH TO LEGACY ORDER PAGES
   Uses the ORIGINAL Custom Site Title HTML:
   .global-catalog-menu + .shoprint-config-search
   ============================================================================ */

@media only screen and (min-width: 1025px) {

  body:has(.main.done) .catalog-header-menu.global-catalog-menu,
  body:has(.main.review) .catalog-header-menu.global-catalog-menu,
  body:has(.accept-proofs):not(:has(.main.done)) .catalog-header-menu.global-catalog-menu,
  body:has(input[value*="Begin a New Order" i]) .catalog-header-menu.global-catalog-menu {
    position: absolute !important;
    top: 0 !important;
    left: 275px !important;
    display: block !important;
    width: auto !important;
    height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 5700 !important;
  }

  body:has(.main.done) .global-catalog-menu .top-menu,
  body:has(.main.review) .global-catalog-menu .top-menu,
  body:has(.accept-proofs):not(:has(.main.done)) .global-catalog-menu .top-menu,
  body:has(input[value*="Begin a New Order" i]) .global-catalog-menu .top-menu {
    display: flex !important;
    align-items: stretch !important;
    height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  body:has(.main.done) .global-catalog-menu .top-menu > li,
  body:has(.main.review) .global-catalog-menu .top-menu > li,
  body:has(.accept-proofs):not(:has(.main.done)) .global-catalog-menu .top-menu > li,
  body:has(input[value*="Begin a New Order" i]) .global-catalog-menu .top-menu > li {
    display: flex !important;
    height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:has(.main.done) .global-catalog-menu .top-menu > li > a,
  body:has(.main.review) .global-catalog-menu .top-menu > li > a,
  body:has(.accept-proofs):not(:has(.main.done)) .global-catalog-menu .top-menu > li > a,
  body:has(input[value*="Begin a New Order" i]) .global-catalog-menu .top-menu > li > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 72px !important;
    margin: 0 !important;
    padding: 0 19px !important;
    background: transparent !important;
    color: #171a21 !important;
    font: 700 14px/1 "Open Sans", Arial, sans-serif !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  body:has(.main.done) .shoprint-config-search,
  body:has(.main.review) .shoprint-config-search,
  body:has(.accept-proofs):not(:has(.main.done)) .shoprint-config-search,
  body:has(input[value*="Begin a New Order" i]) .shoprint-config-search {
    box-sizing: border-box !important;
    position: absolute !important;
    top: 14px !important;
    left: 50% !important;
    display: flex !important;
    align-items: center !important;
    width: min(34vw, 460px) !important;
    min-width: 300px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    transform: translateX(-28%) !important;
    background: #fff !important;
    border: 1px solid #d8dce1 !important;
    border-radius: 24px !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 5800 !important;
    box-shadow: none !important;
  }
}


/* ============================================================================
   9. BURGER MENU - NO STUCK FOCUS HIGHLIGHT
   ============================================================================ */

@media only screen and (min-width: 1025px) {
  #header_title .burger nav a,
  #header_title .burger nav a:link,
  #header_title .burger nav a:visited,
  #header_title .burger nav a:focus,
  #header_title .burger nav a:focus-visible,
  #header_title .burger nav a:active {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #222 !important;
  }

  #header_title .burger nav a:hover {
    background: #fff5fb !important;
    color: #b90070 !important;
  }
}


/* ============================================================================
   10. MOBILE SAFETY FOR NEWLY-SCOPED LEGACY PAGES
   ============================================================================ */

@media only screen and (max-width: 1024px) {
  html body .catalog-header-menu.global-catalog-menu,
  html body .shoprint-config-search {
    display: none !important;
  }
}

@media only screen and (max-width: 700px) {
  html body .main.review,
  html body .main.done {
    width: calc(100% - 20px) !important;
    margin: 20px auto 40px !important;
  }

  .main.review .pagetitle {
    font-size: 25px !important;
  }

  .main.review td,
  .main.done td {
    padding: 9px !important;
    font-size: 12px !important;
  }

  .main.review td.label,
  .main.done td.label {
    width: 36% !important;
    font-size: 10px !important;
  }

  .main.review .previewcell,
  .main.done .accept-proofs .form-body {
    padding: 17px !important;
  }

  .main.review .previewcell img,
  .main.done .previewcell img {
    max-width: 210px !important;
  }

  body:has(input[value*="Begin a New Order" i]) .main > div:has(a[href*="customer"]),
  body:has(input[value*="Begin a New Order" i]) .main > form:has(input[value*="Begin a New Order" i]) {
    width: calc(100% - 20px) !important;
    margin: 34px auto 40px !important;
    padding: 22px 20px !important;
  }
}

/* ============================================================
   OVERSIGNS - FINAL CONSOLIDATED POLISH LAYER - 2026-10-02

   Consolidated from the approved working patches for:
   - Track Your Orders (shiptrack_view2)
   - Track Orders nav/search restoration
   - View Order / Order Details
   - Reorder
   - Main storefront polish

   This layer preserves PageDNA workflow/routing and is visual-only.
   ============================================================ */

/* ============================================================
   OVERSIGNS - TRACK YOUR ORDERS - SHIPTRACK VIEW 2
   Exact PageDNA wrapper:
   .main.shiptrack_view2.catalog--container
   ============================================================ */

html body .main.shiptrack_view2.catalog--container {
  box-sizing: border-box !important;
  width: min(1040px, calc(100% - 48px)) !important;
  max-width: 1040px !important;
  margin: 34px auto 70px !important;
  padding: 0 !important;

  font-family: "Open Sans", Arial, sans-serif !important;
  text-align: left !important;
}


/* PAGE TITLE */
html body .main.shiptrack_view2 .pagetitle {
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;

  color: #171a21 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;

  text-align: left !important;
  text-transform: uppercase !important;

  border-bottom: 4px solid #00a8e8 !important;
}


/* PAGEDNA TITLE SPAN */
html body .main.shiptrack_view2 #shiptrack_view2\.title {
  color: #171a21 !important;
  font: inherit !important;
}


/* INSTRUCTIONS */
html body .main.shiptrack_view2 .pageinstructions {
  width: 100% !important;
  max-width: 760px !important;

  margin: 0 auto 22px !important;
  padding: 0 !important;

  color: #59616c !important;

  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;

  text-align: center !important;
}


/* LINKS ABOVE TABLE */
html body .main.shiptrack_view2 .pageinstructions a {
  color: #b90070 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

html body .main.shiptrack_view2 .pageinstructions a:hover {
  color: #940058 !important;
  text-decoration: underline !important;
}


/* ============================================================
   ORDER TABLE
   ============================================================ */

html body .main.shiptrack_view2 > table.tabular {
  width: 100% !important;
  max-width: none !important;

  margin: 0 auto !important;

  background: #ffffff !important;

  border: 1px solid #dce4e9 !important;
  border-top: 5px solid #00a8e8 !important;
  border-radius: 11px !important;

  border-collapse: separate !important;
  border-spacing: 0 !important;

  overflow: hidden !important;

  box-shadow: 0 8px 24px rgba(23,26,33,.08) !important;
}


/* ALL CELLS */
html body .main.shiptrack_view2 > table.tabular th,
html body .main.shiptrack_view2 > table.tabular td {
  box-sizing: border-box !important;

  padding: 13px 13px !important;

  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.35 !important;

  vertical-align: middle !important;

  border: 0 !important;
  border-right: 1px solid #e2e8ed !important;
  border-bottom: 1px solid #e2e8ed !important;
}


/* COLUMN HEADERS */
html body .main.shiptrack_view2 > table.tabular th {
  background: #0784a9 !important;
  color: #ffffff !important;

  font-weight: 700 !important;
  text-align: left !important;

  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}


/* NORMAL ROWS */
html body .main.shiptrack_view2 > table.tabular td {
  background: #ffffff !important;
  color: #27313a !important;
}


/* ALTERNATING ROWS */
html body .main.shiptrack_view2 > table.tabular tr:nth-child(even) td {
  background: #f8fafb !important;
}


/* ROW HOVER */
html body .main.shiptrack_view2 > table.tabular tr:hover td {
  background: #f1faff !important;
}


/* ORDER TOKEN LINKS */
html body .main.shiptrack_view2 > table.tabular td a {
  color: #b90070 !important;

  font-weight: 700 !important;
  text-decoration: none !important;
}

html body .main.shiptrack_view2 > table.tabular td a:hover {
  color: #940058 !important;
  text-decoration: underline !important;
}


/* ============================================================
   FILTER ROW
   The first row contains:
   All | Awaiting Approval | In Production | Shipped | Cancelled
   ============================================================ */

html body .main.shiptrack_view2 > table.tabular tr:first-child td {
  padding: 12px 14px !important;

  background: #f5f8fa !important;

  color: #59616c !important;

  font-size: 12px !important;
  font-weight: 600 !important;

  border-bottom: 1px solid #dce4e9 !important;
}


html body .main.shiptrack_view2 > table.tabular tr:first-child td a {
  display: inline-block !important;

  margin: 2px 3px !important;
  padding: 6px 10px !important;

  background: #ffffff !important;

  color: #007da8 !important;

  border: 1px solid #d3dfe7 !important;
  border-radius: 999px !important;

  font-size: 11px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}


html body .main.shiptrack_view2 > table.tabular tr:first-child td a:hover {
  background: #00a8e8 !important;
  border-color: #00a8e8 !important;
  color: #ffffff !important;
}


/* STATUS COLUMN */
html body .main.shiptrack_view2 > table.tabular td:last-child {
  color: #7a2631 !important;
  font-weight: 700 !important;
}



/* TOKEN / ORDER LINKS */
html body .main.shiptrack_view2 > table.tabular td:first-child a {
  display: inline-block !important;
  color: #b90070 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

html body .main.shiptrack_view2 > table.tabular td:first-child a:hover {
  color: #940058 !important;
  text-decoration: underline !important;
}

/* ROW HOVER - exclude filter row */
html body .main.shiptrack_view2 > table.tabular tbody tr:not(:first-child):hover td {
  background: #f4fbfe !important;
}

/* FINAL PAGE SPACING */
html body .main.shiptrack_view2.catalog--container {
  margin-bottom: 42px !important;
}

html body:has(.main.shiptrack_view2) #footer {
  margin-top: 20px !important;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media only screen and (max-width: 760px) {

  html body .main.shiptrack_view2.catalog--container {
    width: calc(100% - 24px) !important;
    margin-top: 24px !important;
  }

  html body .main.shiptrack_view2 {
    overflow-x: auto !important;
  }

  html body .main.shiptrack_view2 > table.tabular {
    min-width: 760px !important;
  }

  html body .main.shiptrack_view2 .pagetitle {
    font-size: 22px !important;
  }
}

/* HIDE LARGE HEADER BANNER ON TRACK ORDERS PAGE */
body:has(.main.shiptrack_view2) .static-header-pic {
  display: none !important;
}

/* REMOVE THE SPACE RESERVED FOR THAT BANNER */
body:has(.main.shiptrack_view2) #header-wrapper {
  margin-bottom: 0 !important;
}

/* ============================================================

OVERSIGNS - RESTORE NAV + SEARCH ON TRACK ORDERS VIEW 2
   ============================================================ */

@media only screen and (min-width: 1025px) {

  /* CATEGORY NAV */
  body:has(.main.shiptrack_view2)
  .catalog-header-menu.global-catalog-menu {
    position: absolute !important;

    top: 0 !important;
    left: 275px !important;

    display: block !important;

    width: auto !important;
    height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    z-index: 5700 !important;
  }

  body:has(.main.shiptrack_view2)
  .catalog-header-menu.global-catalog-menu .top-menu,
  body:has(.main.shiptrack_view2)
  .catalog-header-menu.global-catalog-menu .top-menu li {
    display: flex !important;
    align-items: stretch !important;

    height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  body:has(.main.shiptrack_view2)
  .catalog-header-menu.global-catalog-menu .top-menu a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 72px !important;

    padding: 0 19px !important;

    background: transparent !important;

    color: #161616 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
  }

  body:has(.main.shiptrack_view2)
  .catalog-header-menu.global-catalog-menu .top-menu a:hover {
    color: #007da8 !important;
  }


  /* SEARCH */
  body:has(.main.shiptrack_view2)
  .shoprint-config-search {
    position: absolute !important;

    top: 14px !important;
    left: 50% !important;

    transform: translateX(-28%) !important;

    display: flex !important;
    align-items: center !important;

    box-sizing: border-box !important;

    width: min(35vw, 520px) !important;
    min-width: 330px !important;
    height: 43px !important;

    margin: 0 !important;
    padding: 0 12px 0 7px !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid #d8dce1 !important;
    border-radius: 24px !important;

    z-index: 5800 !important;
  }

  body:has(.main.shiptrack_view2)
  .shoprint-config-search-input {
    order: 2 !important;
    flex: 1 1 auto !important;

    min-width: 0 !important;
    height: 40px !important;

    padding: 0 10px !important;

    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 12px !important;
  }

  body:has(.main.shiptrack_view2)
  .shoprint-config-search-button {
    order: 1 !important;
    flex: 0 0 34px !important;

    width: 34px !important;
    height: 40px !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    cursor: pointer !important;
  }

  body:has(.main.shiptrack_view2)
  .shoprint-config-search-button i {
    color: #555b62 !important;
    font-size: 15px !important;
  }

  body:has(.main.shiptrack_view2)
  .shoprint-config-search-button:hover i {
    color: #007da8 !important;
  }
}


/* MOBILE - KEEP NAV IN HAMBURGER */
@media only screen and (max-width: 1024px) {

  body:has(.main.shiptrack_view2)
  .catalog-header-menu.global-catalog-menu,

  body:has(.main.shiptrack_view2)
  .shoprint-config-search {
    display: none !important;
  }
}

/* ============================================================

OVERSIGNS - ORDER DETAILS / VIEW ORDER PAGE
   Exact PageDNA wrapper:
   .main.view-order.catalog--container
   VISUAL ONLY
   ============================================================ */


/* PAGE SHELL */
html body .main.view-order.catalog--container {
  box-sizing: border-box !important;

  width: min(1040px, calc(100% - 48px)) !important;
  max-width: 1040px !important;

  margin: 18px auto 60px !important;
  padding: 0 !important;

  font-family: "Open Sans", Arial, sans-serif !important;
  text-align: left !important;
}


/* REMOVE LARGE HERO BANNER */
body:has(.main.view-order) .static-header-pic {
  display: none !important;
}


/* REMOVE RESERVED HERO SPACE */
body:has(.main.view-order) #header-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

html body .main.view-order .pagetitle {
  margin-top: 0 !important;
}


/* ============================================================
   PAGE TITLE
   ============================================================ */

html body .main.view-order .pagetitle {
  width: 100% !important;

  margin: 0 0 16px !important;
  padding: 0 0 13px !important;

  color: #171a21 !important;

  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;

  text-align: left !important;
  text-transform: uppercase !important;

  border-bottom: 4px solid #00a8e8 !important;
}


/* ============================================================
   TOP ACTION LINKS
   ============================================================ */

html body .main.view-order .note {
  box-sizing: border-box !important;

  margin: 0 0 22px !important;
  padding: 14px 16px !important;

  background: #f5f8fa !important;

  border: 1px solid #dce4e9 !important;
  border-left: 4px solid #00a8e8 !important;
  border-radius: 8px !important;

  color: #59616c !important;

  font-size: 12px !important;
  line-height: 1.5 !important;
}


html body .main.view-order .note a {
  color: #b90070 !important;

  font-weight: 700 !important;
  text-decoration: none !important;
}


html body .main.view-order .note a:hover {
  color: #940058 !important;
  text-decoration: underline !important;
}


/* ============================================================
   GENERAL ORDER DETAIL TABLES
   ============================================================ */

html body .main.view-order table.items-table,
html body .main.view-order table.tabular {
  width: 100% !important;
  max-width: none !important;

  margin: 0 0 20px !important;

  background: #ffffff !important;

  border: 1px solid #dce4e9 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;

  border-radius: 10px !important;

  overflow: hidden !important;

  box-shadow: 0 6px 20px rgba(23,26,33,.05) !important;
}


/* ALL CELLS */
html body .main.view-order table.items-table td,
html body .main.view-order table.items-table th,
html body .main.view-order table.tabular td,
html body .main.view-order table.tabular th {
  box-sizing: border-box !important;

  padding: 11px 13px !important;

  color: #27313a !important;

  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;

  vertical-align: middle !important;

  border: 0 !important;
  border-right: 1px solid #e3e9ed !important;
  border-bottom: 1px solid #e3e9ed !important;
}


/* LABEL CELLS */
html body .main.view-order table.items-table td:first-child,
html body .main.view-order table.items-table th:first-child {
  font-weight: 700 !important;
}


/* ============================================================
   OVERVIEW TABLES
   ============================================================ */

html body .main.view-order table.items-table:first-of-type,
html body .main.view-order table.items-table:nth-of-type(2) {
  border-top: 4px solid #00a8e8 !important;
}


/* alternate rows */
html body .main.view-order table.items-table tr:nth-child(even) td {
  background: #f9fbfc !important;
}


/* ============================================================
   ORDER STATUS HISTORY
   ============================================================ */

html body .main.view-order table.items-table:nth-of-type(3) {
  border-top: 4px solid #00a8e8 !important;
}


/* status history rows */
html body .main.view-order table.items-table:nth-of-type(3) td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}


/* alternating history rows */
html body .main.view-order table.items-table:nth-of-type(3)
tr:nth-child(odd) td {
  background: #ffffff !important;
}

html body .main.view-order table.items-table:nth-of-type(3)
tr:nth-child(even) td {
  background: #f6f8fa !important;
}


/* kill neon-green PageDNA highlight */
html body .main.view-order table.items-table:nth-of-type(3)
tr[style*="background"],
html body .main.view-order table.items-table:nth-of-type(3)
td[style*="background"] {
  background: #eef9f3 !important;
  color: #225b3a !important;
}


/* ============================================================
   ITEM / QUANTITY TABLE
   ============================================================ */

html body .main.view-order table.tabular {
  border-top: 4px solid #00a8e8 !important;
}


/* table header */
html body .main.view-order table.tabular th {
  background: #0784a9 !important;
  color: #ffffff !important;

  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}


/* item rows */
html body .main.view-order table.tabular td {
  background: #ffffff !important;
}


/* ============================================================
   LINKS
   ============================================================ */

html body .main.view-order a {
  color: #b90070 !important;
}

html body .main.view-order a:hover {
  color: #940058 !important;
}


/* ============================================================
   BUTTON AREA
   ============================================================ */

html body .main.view-order .buttonsbar {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;

  margin: 22px 0 0 !important;
}


html body .main.view-order .buttonsbar
:is(a, button, input[type="button"], input[type="submit"]) {
  min-height: 42px !important;

  padding: 0 18px !important;

  background: #b90070 !important;
  color: #ffffff !important;

  border: 1px solid #b90070 !important;
  border-radius: 7px !important;

  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;

  text-decoration: none !important;
}


html body .main.view-order .buttonsbar
:is(a, button, input[type="button"], input[type="submit"]):hover {
  background: #940058 !important;
  border-color: #940058 !important;
}


/* ============================================================
   RESTORE NAV + SEARCH
   ============================================================ */

@media only screen and (min-width: 1025px) {

  body:has(.main.view-order)
  .catalog-header-menu.global-catalog-menu {
    position: absolute !important;

    top: 0 !important;
    left: 275px !important;

    display: block !important;

    width: auto !important;
    height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    z-index: 5700 !important;
  }


  body:has(.main.view-order)
  .catalog-header-menu.global-catalog-menu .top-menu,
  body:has(.main.view-order)
  .catalog-header-menu.global-catalog-menu .top-menu li {
    display: flex !important;
    align-items: stretch !important;

    height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  body:has(.main.view-order)
  .catalog-header-menu.global-catalog-menu .top-menu a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 72px !important;

    padding: 0 19px !important;

    background: transparent !important;
    color: #161616 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
  }


  body:has(.main.view-order)
  .catalog-header-menu.global-catalog-menu .top-menu a:hover {
    color: #007da8 !important;
  }


  body:has(.main.view-order)
  .shoprint-config-search {
    position: absolute !important;

    top: 14px !important;
    left: 50% !important;

    transform: translateX(-28%) !important;

    display: flex !important;
    align-items: center !important;

    box-sizing: border-box !important;

    width: min(35vw, 520px) !important;
    min-width: 330px !important;
    height: 43px !important;

    margin: 0 !important;
    padding: 0 12px 0 7px !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid #d8dce1 !important;
    border-radius: 24px !important;

    z-index: 5800 !important;
  }


  body:has(.main.view-order)
  .shoprint-config-search-input {
    order: 2 !important;
    flex: 1 1 auto !important;

    min-width: 0 !important;
    height: 40px !important;

    padding: 0 10px !important;

    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    font-size: 12px !important;
  }


  body:has(.main.view-order)
  .shoprint-config-search-button {
    order: 1 !important;
    flex: 0 0 34px !important;

    width: 34px !important;
    height: 40px !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media only screen and (max-width: 1024px) {

  body:has(.main.view-order)
  .catalog-header-menu.global-catalog-menu,

  body:has(.main.view-order)
  .shoprint-config-search {
    display: none !important;
  }
}


@media only screen and (max-width: 760px) {

  html body .main.view-order.catalog--container {
    width: calc(100% - 24px) !important;
    margin-top: 24px !important;
  }

  html body .main.view-order {
    overflow-x: auto !important;
  }

  html body .main.view-order .pagetitle {
    font-size: 22px !important;
  }

  html body .main.view-order table {
    min-width: 680px !important;
  }
}

/* ============================================================
   OVERSIGNS - REORDER PAGE FINAL CLEANUP
   VISUAL ONLY
   ============================================================ */


/* REMOVE EXCESS GAP ABOVE REORDER CARD */
html body .main.reorder,
html body:has(.main.reorder) .main.reorder {
  margin-top: 18px !important;
  padding-top: 0 !important;
}


/* REMOVE ANY EXTRA HEADER SPACING ON THIS PAGE */
body:has(.main.reorder) #header-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* MAIN REORDER CARD */
html body .main.reorder {
  box-sizing: border-box !important;

  width: min(900px, calc(100% - 48px)) !important;
  max-width: 900px !important;

  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 42px !important;

  padding: 28px 30px 26px !important;

  background: #ffffff !important;

  border: 1px solid #dfe5ea !important;
  border-top: 4px solid #00a8e8 !important;
  border-radius: 10px !important;

  box-shadow: 0 8px 22px rgba(23,26,33,.06) !important;

  font-family: "Open Sans", Arial, sans-serif !important;
}


/* PAGE TITLE */
html body .main.reorder .pagetitle {
  margin: 0 0 10px !important;
  padding: 0 0 10px !important;

  color: #171a21 !important;

  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;

  text-align: left !important;

  border-bottom: 4px solid #00a8e8 !important;
}


/* INSTRUCTIONS */
html body .main.reorder .pageinstructions {
  max-width: 760px !important;

  margin: 0 0 18px !important;

  color: #66717b !important;

  font-size: 11px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;

  text-align: left !important;
}


/* FORM AREA */
html body .main.reorder form {
  width: 100% !important;
  max-width: 720px !important;

  margin: 0 auto !important;
}


/* LOOKUP HEADING */
html body .main.reorder form strong,
html body .main.reorder form b {
  color: #171a21 !important;
  font-weight: 800 !important;
}


/* FORM TABLE */
html body .main.reorder form table {
  width: 100% !important;

  margin: 12px auto 14px !important;

  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}


/* LABEL CELLS */
html body .main.reorder form td.label,
html body .main.reorder form th.label {
  width: 44% !important;

  padding-right: 16px !important;

  color: #39424c !important;

  font-size: 12px !important;
  font-weight: 700 !important;

  text-align: right !important;
  vertical-align: middle !important;
}


/* INPUT CELLS */
html body .main.reorder form td:not(.label) {
  vertical-align: middle !important;
}


/* INPUTS */
html body .main.reorder input[type="text"],
html body .main.reorder input[type="email"] {
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: 360px !important;
  min-height: 42px !important;

  padding: 9px 11px !important;

  background: #ffffff !important;

  border: 1px solid #ccd5dd !important;
  border-radius: 6px !important;

  color: #252a31 !important;

  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 13px !important;
}


/* INPUT FOCUS */
html body .main.reorder input[type="text"]:focus,
html body .main.reorder input[type="email"]:focus {
  border-color: #00a8e8 !important;
  outline: 0 !important;

  box-shadow: 0 0 0 3px rgba(0,168,232,.12) !important;
}


/* BUTTON BAR */
html body .main.reorder .buttonsbar {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;

  margin: 12px 0 12px !important;
}


/* BUTTONS */
html body .main.reorder .buttonsbar
:is(a, button, input[type="button"], input[type="submit"]) {
  min-height: 44px !important;

  padding: 0 18px !important;

  background: #b90070 !important;
  color: #ffffff !important;

  border: 1px solid #b90070 !important;
  border-radius: 7px !important;

  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;

  text-decoration: none !important;

  box-shadow: 0 5px 14px rgba(185,0,112,.14) !important;
}


/* BUTTON HOVER */
html body .main.reorder .buttonsbar
:is(a, button, input[type="button"], input[type="submit"]):hover {
  background: #940058 !important;
  border-color: #940058 !important;
}


/* NOTE */
html body .main.reorder .note {
  margin-top: 8px !important;

  color: #59616c !important;

  font-size: 12px !important;
  line-height: 1.45 !important;

  text-align: center !important;
}



/* FLATTEN PAGEDNA INNER WRAPPER */
html body .main.reorder .form-body,
html body .main.reorder form {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .main.reorder form {
  text-align: center !important;
}

body:has(.main.reorder) #footer {
  margin-top: 24px !important;
}

/* MOBILE */
@media only screen and (max-width: 760px) {

  html body .main.reorder {
    width: calc(100% - 24px) !important;

    padding: 22px 16px !important;
  }

  html body .main.reorder .pagetitle {
    font-size: 24px !important;
  }

  html body .main.reorder form table,
  html body .main.reorder form tbody,
  html body .main.reorder form tr,
  html body .main.reorder form td {
    display: block !important;
    width: 100% !important;
  }

  html body .main.reorder form td.label,
  html body .main.reorder form th.label {
    width: 100% !important;

    padding: 0 0 6px !important;

    text-align: left !important;
  }

  html body .main.reorder input[type="text"],
  html body .main.reorder input[type="email"] {
    max-width: none !important;
  }

  html body .main.reorder .buttonsbar {
    flex-direction: column !important;
  }
}

/* ============================================================
   OVERSIGNS - MAIN STOREFRONT FINAL POLISH
   VISUAL ONLY - NO ROUTING / LINK / IMAGE CHANGES
   2026-10-02
   ============================================================ */


/* ============================================================
   SHOP BY CATEGORY
   ============================================================ */

/* Give the section a little more breathing room */
html body:has(.sw-v3) .sw-v3-category-section {
  padding-top: 26px !important;
  padding-bottom: 34px !important;
}


/* Align heading with the category cards */
html body:has(.sw-v3) .sw-v3-category-section h2,
html body:has(.sw-v3) .sw-v3-category-title {
  width: min(900px, calc(100% - 40px)) !important;
  max-width: 900px !important;

  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 18px !important;

  color: #171a21 !important;

  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}


/* Slightly larger category-card area */
html body:has(.sw-v3) .sw-v3-category-grid {
  width: min(900px, calc(100% - 40px)) !important;
  max-width: 900px !important;

  gap: 22px !important;
}


/* Slightly enlarge approved category artwork cards */
html body:has(.sw-v3)
.sw-v3-category-grid > :nth-child(-n+3) {
  max-width: 275px !important;

  border-radius: 12px !important;

  box-shadow:
    0 8px 22px rgba(23,26,33,.08) !important;
}


/* Cleaner hover */
html body:has(.sw-v3)
.sw-v3-category-grid > :nth-child(-n+3):hover,
html body:has(.sw-v3)
.sw-v3-category-grid > :nth-child(-n+3):focus-within {
  box-shadow:
    0 0 0 5px rgba(0,168,232,.12),
    0 13px 28px rgba(23,26,33,.14) !important;

  transform: translateY(-3px) !important;
}



/* ============================================================
   POPULAR MATERIALS
   ============================================================ */

/* Keep the yellow identity, but make it less overpowering */
html body:has(.sw-v3) .sw-v3-materials-section {
  padding-top: 30px !important;
  padding-bottom: 42px !important;

  background: #fff59a !important;
}


/* Popular Materials heading */
html body:has(.sw-v3) .sw-v3-materials-section h2,
html body:has(.sw-v3) .sw-v3-materials-title {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;

  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 16px !important;

  color: #171a21 !important;

  font-size: 28px !important;
  font-weight: 800 !important;
}


/* Material card row */
html body:has(.sw-v3) .sw-v3-materials {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  gap: 16px !important;
}


/* Material cards */
html body:has(.sw-v3) .sw-v3-material {
  overflow: hidden !important;

  background: #ffffff !important;

  border: 1px solid rgba(23,26,33,.10) !important;
  border-radius: 10px !important;

  box-shadow:
    0 7px 18px rgba(23,26,33,.08) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease !important;
}


/* Material-card hover */
html body:has(.sw-v3) .sw-v3-material:hover,
html body:has(.sw-v3) .sw-v3-material:focus-within {
  transform: translateY(-3px) !important;

  box-shadow:
    0 12px 26px rgba(23,26,33,.14) !important;
}


/* Give card text a touch more breathing room */
html body:has(.sw-v3) .sw-v3-material__content {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}


/* Keep product names strong */
html body:has(.sw-v3) .sw-v3-material__title {
  color: #171a21 !important;

  font-weight: 800 !important;
  line-height: 1.25 !important;
}


/* Product descriptions */
html body:has(.sw-v3) .sw-v3-material__description {
  color: #59616c !important;

  line-height: 1.4 !important;
}


/* Keep CTA hierarchy consistent */
html body:has(.sw-v3) .sw-v3-material
:is(.button, button, input[type="button"], input[type="submit"]) {
  border-radius: 6px !important;

  box-shadow:
    0 4px 10px rgba(185,0,112,.12) !important;
}



/* ============================================================
   BOTTOM SPACING / FOOTER
   ============================================================ */

html body:has(.sw-v3) .sw-v3 {
  padding-bottom: 34px !important;
}

html body:has(.sw-v3) #footer {
  margin-top: 0 !important;
}



/* ============================================================
   MOBILE SAFETY
   ============================================================ */

@media only screen and (max-width: 760px) {

  html body:has(.sw-v3) .sw-v3-category-section {
    padding-top: 20px !important;
    padding-bottom: 26px !important;
  }

  html body:has(.sw-v3) .sw-v3-category-grid {
    width: calc(100% - 24px) !important;
    gap: 14px !important;
  }

  html body:has(.sw-v3)
  .sw-v3-category-grid > :nth-child(-n+3) {
    max-width: 100% !important;
  }

  html body:has(.sw-v3) .sw-v3-materials-section {
    padding-top: 24px !important;
    padding-bottom: 30px !important;
  }

  html body:has(.sw-v3) .sw-v3-materials {
    width: calc(100% - 24px) !important;
  }

}

/* ============================================================
   OVERSIGNS - SHIPPING & ORDER DETAILS FINAL POLISH
   VISUAL ONLY - PRESERVE PAGEDNA WORKFLOW
   2026-10-02
   ============================================================ */

/* PAGE WIDTH / SPACING */
html body .main.shipping {
  width: min(1080px, calc(100% - 48px)) !important;
  max-width: 1080px !important;
  margin: 24px auto 42px !important;
  padding: 0 !important;
}

/* PAGE TITLE */
html body .main.shipping .pagetitle {
  margin: 0 0 6px !important;
  color: #171a21 !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

/* PAGE INSTRUCTIONS */
html body .main.shipping .pageinstructions {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 16px !important;
  color: #66717b !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

/* TOP NOTE */
html body .main.shipping .form-subheader:first-of-type {
  margin-bottom: 10px !important;
  padding: 11px 14px !important;
  background: #ffffff !important;
  border: 1px solid #dce4e9 !important;
  border-left: 4px solid #b90070 !important;
  border-radius: 7px !important;
  color: #39424c !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ALL MAJOR FORM CARDS */
html body .main.shipping .form-body {
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #dce4e9 !important;
  border-top: 4px solid #00a8e8 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(23,26,33,.05) !important;
  margin-bottom: 12px !important;
}

/* SECTION HEADINGS */
html body .main.shipping .form-subheader {
  padding: 12px 14px !important;
  background: #f5f8fa !important;
  color: #171a21 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-bottom: 1px solid #dce4e9 !important;
}

/* DELIVERY CARD */
html body .main.shipping select {
  min-height: 42px !important;
  padding: 7px 10px !important;
  background: #ffffff !important;
  border: 1px solid #cdd6de !important;
  border-radius: 6px !important;
  color: #27313a !important;
}

/* QUANTITY TABLE */
html body .main.shipping table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

html body .main.shipping table th {
  padding: 10px 12px !important;
  color: #59616c !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-bottom: 1px solid #dce4e9 !important;
}

html body .main.shipping table td {
  padding: 10px 12px !important;
  color: #27313a !important;
  font-size: 12px !important;
  border-bottom: 1px solid #edf1f4 !important;
}

/* INPUTS */
html body .main.shipping input[type="text"],
html body .main.shipping input[type="email"],
html body .main.shipping textarea {
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #cdd6de !important;
  border-radius: 6px !important;
  color: #27313a !important;
  font-size: 12px !important;
}

/* INPUT FOCUS */
html body .main.shipping input[type="text"]:focus,
html body .main.shipping input[type="email"]:focus,
html body .main.shipping textarea:focus,
html body .main.shipping select:focus {
  border-color: #00a8e8 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(0,168,232,.12) !important;
}

/* REQUESTOR + PO CARDS */
html body .main.shipping .form-body:has(input[name*="request" i]),
html body .main.shipping .form-body:has(input[name*="order" i]) {
  min-height: 158px !important;
}

/* TEXTAREA */
html body .main.shipping textarea {
  min-height: 92px !important;
  padding: 10px !important;
  resize: vertical !important;
}

/* BUTTONS */
html body .main.shipping :is(button, input[type="button"], input[type="submit"]) {
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* ADD / UPDATE */
html body .main.shipping
:is(button, input[type="button"], input[type="submit"]):not(.primary) {
  box-shadow: 0 4px 10px rgba(23,26,33,.06) !important;
}

/* BILLING CTA */
html body .main.shipping #final-buttonsbar
:is(button, input[type="submit"], input[type="button"]) {
  min-width: 150px !important;
  background: #b90070 !important;
  color: #ffffff !important;
  border: 1px solid #b90070 !important;
  box-shadow: 0 6px 14px rgba(185,0,112,.15) !important;
}

html body .main.shipping #final-buttonsbar
:is(button, input[type="submit"], input[type="button"]):hover {
  background: #940058 !important;
  border-color: #940058 !important;
}

/* TIGHTER SECTION SPACING */
html body .main.shipping .buttonsbar {
  margin-top: 10px !important;
  margin-bottom: 12px !important;
}

/* FOOTER SPACING */
body:has(.main.shipping) #footer {
  margin-top: 24px !important;
}

/* MOBILE */
@media only screen and (max-width: 760px) {
  html body .main.shipping {
    width: calc(100% - 24px) !important;
  }

  html body .main.shipping .pagetitle {
    font-size: 24px !important;
  }
}


/* ============================================================
   OVERSIGNS - MOBILE FINAL POLISH
   MOBILE ONLY - DESKTOP UNTOUCHED
   2026-10-02
   ============================================================ */

@media only screen and (max-width: 760px) {

  /* ==========================================================
     1. MOBILE PAGE FOUNDATION
     ========================================================== */

  html body {
    overflow-x: hidden !important;
  }

  html body .main {
    width: 100% !important;
    max-width: 100% !important;
  }


  /* ==========================================================
     2. MOBILE HEADER
     ========================================================== */

  #header-wrapper {
    min-height: 76px !important;
    height: 76px !important;

    margin-bottom: 0 !important;

    background: #ffffff !important;
    border-bottom: 3px solid #00a8e8 !important;

    box-shadow: none !important;
  }


  /* LOGO */
  #header_logo {
    position: absolute !important;

    top: 18px !important;
    left: 50% !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateX(-50%) !important;

    z-index: 5200 !important;
  }

  #header_logo img,
  #header_logo img.no_mobile,
  #header_logo img.no_desktop {
    display: block !important;

    width: 190px !important;
    max-width: 190px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* ACCOUNT */
  #header-links-container {
    position: absolute !important;

    top: 19px !important;
    left: 18px !important;
    right: auto !important;

    display: block !important;

    width: 38px !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    z-index: 5300 !important;
  }


  /* CART */
  #mobile_cart {
    position: absolute !important;

    top: 18px !important;
    right: 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #mobile_cart .fa-shopping-basket {
    font-size: 30px !important;
  }

  #mobile_cart .item_count {
    top: -3px !important;
    right: -2px !important;

    min-width: 18px !important;
    height: 18px !important;

    padding: 0 4px !important;

    background: #b90070 !important;
    color: #ffffff !important;

    border-radius: 10px !important;

    font-size: 9px !important;
    font-weight: 800 !important;
  }


  /* ==========================================================
     3. MOBILE SEARCH
     ========================================================== */

  .item-search-block,
  .shoprint-config-search {
    box-sizing: border-box !important;

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    display: flex !important;
    align-items: center !important;

    width: calc(100% - 32px) !important;
    max-width: none !important;
    min-width: 0 !important;

    height: 46px !important;

    margin: 14px auto 18px !important;
    padding: 0 10px !important;

    background: #ffffff !important;

    border: 1px solid #d5dde3 !important;
    border-radius: 23px !important;

    box-shadow: 0 3px 10px rgba(23,26,33,.05) !important;
  }


  .item-search-block input,
  .shoprint-config-search-input {
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: 42px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    font-size: 13px !important;
  }


  /* ==========================================================
     4. PRODUCT DETAIL CARDS
     ========================================================== */

  body:not(:has(.sw-v3)) .select-items {
    width: 100% !important;
    max-width: 100% !important;

    padding: 0 10px 24px !important;
  }


  body:not(:has(.sw-v3))
  .select-items .height-adjuster {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 20px !important;
    padding: 18px 14px 20px !important;

    background: #ffffff !important;

    border: 1px solid #dce4e9 !important;
    border-top: 4px solid #00a8e8 !important;
    border-radius: 10px !important;

    box-shadow: 0 6px 18px rgba(23,26,33,.06) !important;
  }


  /* PRODUCT IMAGE */
  body:not(:has(.sw-v3))
  .select-items .image-container {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto 14px !important;

    text-align: center !important;
  }

  body:not(:has(.sw-v3))
  .select-items .image-container img {
    width: min(100%, 330px) !important;
    height: auto !important;

    margin: 0 auto !important;

    border-radius: 8px !important;

    object-fit: cover !important;
  }


  /* PRODUCT NAME */
  body:not(:has(.sw-v3))
  .select-items .longname,
  body:not(:has(.sw-v3))
  .select-items .longname * {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    text-align: center !important;
  }


  /* ==========================================================
     5. OVERVIEW / FEATURES
     ========================================================== */

  .os-product-specs {
    width: 100% !important;

    margin-top: 18px !important;

    text-align: left !important;
  }


  .os-product-specs__overview {
    padding: 20px 16px !important;

    border-radius: 8px 8px 0 0 !important;

    text-align: center !important;
  }


  .os-product-specs__overview h2 {
    margin: 0 0 10px !important;

    font-size: 21px !important;
  }


  .os-product-specs__overview p {
    margin: 0 auto !important;

    font-size: 13px !important;
    line-height: 1.55 !important;
  }


  .os-product-specs__body {
    padding: 20px 14px !important;
  }


  .os-product-specs__features h2,
  .os-product-specs__grid h2,
  .os-product-specs__resources h2 {
    margin-bottom: 14px !important;

    font-size: 20px !important;

    text-align: center !important;
  }


  /* Feature list - stop awkward centered bullets */
  .os-product-specs__features ul {
    width: min(100%, 360px) !important;

    margin: 0 auto 22px !important;
    padding-left: 24px !important;

    text-align: left !important;
  }

  .os-product-specs__features li {
    margin-bottom: 8px !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
  }


  /* ==========================================================
     6. SPECIFICATIONS TABLE
     ========================================================== */

  .os-product-specs__grid {
    display: block !important;
  }


  .os-product-specs table {
    width: 100% !important;

    margin: 0 0 22px !important;

    border-collapse: separate !important;
    border-spacing: 0 !important;

    overflow: hidden !important;

    border: 1px solid #d8e0e6 !important;
    border-radius: 7px !important;
  }


  .os-product-specs table tr {
    display: grid !important;

    grid-template-columns: 42% 58% !important;
  }


  .os-product-specs table th,
  .os-product-specs table td {
    box-sizing: border-box !important;

    width: auto !important;

    padding: 10px 9px !important;

    font-size: 12px !important;
    line-height: 1.35 !important;

    text-align: left !important;
    vertical-align: middle !important;

    border-bottom: 1px solid #dfe5e9 !important;
  }


  .os-product-specs table th {
    background: #f0f3f5 !important;

    color: #171a21 !important;

    font-weight: 800 !important;
  }


  .os-product-specs table td {
    background: #ffffff !important;

    color: #39424c !important;
  }


  /* ==========================================================
     7. MANUFACTURER BULLETIN
     ========================================================== */

  .os-product-specs__resources {
    margin-top: 20px !important;

    text-align: center !important;
  }


  .os-product-specs__resource {
    display: block !important;

    width: calc(100% - 12px) !important;
    max-width: 360px !important;

    margin: 0 auto !important;
    padding: 13px 14px !important;

    background: #ffffff !important;
    color: #b90070 !important;

    border: 1px solid #d9e1e6 !important;
    border-radius: 8px !important;

    box-shadow: 0 4px 12px rgba(23,26,33,.06) !important;

    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;

    text-align: center !important;
    text-decoration: none !important;
  }


  .os-product-specs__resource span {
    display: block !important;

    margin-top: 5px !important;

    color: #59616c !important;

    font-size: 11px !important;
    font-weight: 600 !important;
  }


  /* ==========================================================
     8. PRIMARY PRODUCT BUTTONS
     ========================================================== */

  body:not(:has(.sw-v3))
  .select-items .buttonsbar {
    display: flex !important;
    justify-content: center !important;

    width: 100% !important;

    margin: 14px auto 0 !important;
  }


  body:not(:has(.sw-v3))
  .select-items .buttonsbar
  :is(button, input[type="button"], input[type="submit"], a.button) {
    min-width: 190px !important;
    min-height: 44px !important;

    padding: 0 18px !important;

    background: #b90070 !important;
    color: #ffffff !important;

    border: 1px solid #b90070 !important;
    border-radius: 7px !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    box-shadow: 0 5px 12px rgba(185,0,112,.16) !important;
  }


  /* ==========================================================
     9. POPULAR MATERIALS
     ========================================================== */

  html body:has(.sw-v3) .sw-v3-materials-section {
    padding: 24px 14px 32px !important;
  }


  html body:has(.sw-v3) .sw-v3-materials {
    width: 100% !important;

    gap: 12px !important;
  }


  /* Change old orange mobile CTAs to OVERSIGNS magenta */
  html body:has(.sw-v3)
  .sw-v3-material
  :is(a, button, .button) {
    background: #b90070 !important;
    color: #ffffff !important;

    border-color: #b90070 !important;

    border-radius: 6px !important;

    font-weight: 800 !important;
  }


  html body:has(.sw-v3)
  .sw-v3-material
  :is(a, button, .button):hover {
    background: #940058 !important;
    border-color: #940058 !important;
  }


  /* ==========================================================
     10. FOOTER
     ========================================================== */

  #footer {
    margin-top: 28px !important;

    border-top: 3px solid #00a8e8 !important;
  }


  #footer,
  #footer * {
    font-size: 11px !important;
  }

}


/* ============================================================
   OVERSIGNS - MOBILE COLOR SYSTEM POLISH
   Keeps mobile aligned with approved desktop branding
   ============================================================ */

@media only screen and (max-width: 760px) {

  /* PAGE BACKGROUND */
  html body {
    background: #f7f8fa !important;
    color: #171a21 !important;
  }


  /* MAIN CONTENT AREAS */
  html body .main,
  html body .catalog--container {
    background: transparent !important;
  }


  /* WHITE CONTENT CARDS */
  html body .form-body,
  html body .height-adjuster,
  html body .os-product-specs,
  html body .sw-v3-material {
    background: #ffffff !important;
  }


  /* STRUCTURAL ACCENT */
  html body .form-body,
  html body .height-adjuster,
  html body .os-product-specs,
  html body .sw-v3-material {
    border-color: #dce4e9 !important;
  }

  html body .form-body,
  html body .height-adjuster {
    border-top-color: #00a8e8 !important;
  }


  /* HEADINGS */
  html body h1,
  html body h2,
  html body h3,
  html body h4,
  html body .pagetitle,
  html body .longname {
    color: #171a21 !important;
  }


  /* SECONDARY TEXT */
  html body p,
  html body .pageinstructions,
  html body .field-note,
  html body .os-product-specs p,
  html body .sw-v3-material__description {
    color: #59616c !important;
  }


  /* PRIMARY ACTIONS */
  html body
  :is(
    button,
    input[type="submit"],
    input[type="button"],
    a.button
  ) {
    background: #b90070 !important;
    color: #ffffff !important;

    border-color: #b90070 !important;
  }


  html body
  :is(
    button,
    input[type="submit"],
    input[type="button"],
    a.button
  ):hover {
    background: #940058 !important;
    border-color: #940058 !important;
  }


  /* LINKS */
  html body a {
    color: #b90070;
  }

  html body a:hover {
    color: #940058;
  }


  /* INPUTS */
  html body
  :is(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    select,
    textarea
  ) {
    background: #ffffff !important;

    border-color: #cfd8df !important;

    color: #27313a !important;
  }


  html body
  :is(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    select,
    textarea
  ):focus {
    border-color: #00a8e8 !important;

    box-shadow:
      0 0 0 3px rgba(0,168,232,.12) !important;
  }


  /* SPECIFICATION TABLE */
  html body .os-product-specs table th {
    background: #eef3f6 !important;
    color: #171a21 !important;
  }

  html body .os-product-specs table td {
    background: #ffffff !important;
    color: #39424c !important;
  }


  /* OVERVIEW CARD */
  html body .os-product-specs__overview {
    background: #33122e !important;
    color: #ffffff !important;

    border-left: 4px solid #b90070 !important;
  }

  html body .os-product-specs__overview h2,
  html body .os-product-specs__overview p {
    color: #ffffff !important;
  }


  /* POPULAR MATERIALS
     Replace loud yellow mobile band with a softer shell */
  html body:has(.sw-v3) .sw-v3-materials-section {
    background: #f3f6f8 !important;

    border-top: 3px solid #00a8e8 !important;
  }


  html body:has(.sw-v3) .sw-v3-materials-title,
  html body:has(.sw-v3) .sw-v3-materials-section h2 {
    color: #171a21 !important;
  }


  /* CATEGORY SECTION */
  html body:has(.sw-v3) .sw-v3-category-section {
    background: #ffffff !important;
  }


  /* MANUFACTURER RESOURCE */
  html body .os-product-specs__resource {
    background: #ffffff !important;
    color: #b90070 !important;

    border: 1px solid #dce4e9 !important;
    border-top: 3px solid #00a8e8 !important;
  }


  /* FOOTER */
  html body #footer {
    background: #18232d !important;
    color: #ffffff !important;

    border-top: 3px solid #00a8e8 !important;
  }

}

/* ============================================================
   OVERSIGNS - MOBILE POLISH V1
   MOBILE ONLY - DESKTOP UNTOUCHED
   2026-10-05
   ============================================================ */

@media only screen and (max-width: 760px) {

  /* =========================================================
     PAGE FOUNDATION
     ========================================================= */

  html,
  body {
    overflow-x: hidden !important;
  }

  html body {
    background: #f7f8fa !important;
  }

  html body .main {
    box-sizing: border-box !important;
  }


  /* =========================================================
     HEADER
     ========================================================= */

  #header-wrapper {
    min-height: 76px !important;
    height: 76px !important;

    margin-bottom: 0 !important;

    background: #ffffff !important;

    border-bottom: 3px solid #00a8e8 !important;

    box-shadow: none !important;
  }


  /* CENTER LOGO */
  #header_logo {
    position: absolute !important;

    top: 18px !important;
    left: 50% !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateX(-50%) !important;

    z-index: 5200 !important;
  }

  #header_logo img,
  #header_logo img.no_mobile,
  #header_logo img.no_desktop {
    width: 180px !important;
    max-width: 180px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* CART */
  #mobile_cart {
    position: absolute !important;

    top: 17px !important;
    right: 16px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #mobile_cart .fa-shopping-basket {
    font-size: 29px !important;
  }

  #mobile_cart .item_count {
    top: -2px !important;
    right: -2px !important;

    min-width: 18px !important;
    height: 18px !important;

    padding: 0 4px !important;

    background: #b90070 !important;
    color: #ffffff !important;

    border-radius: 999px !important;

    font-size: 9px !important;
    font-weight: 800 !important;
  }


  /* =========================================================
     PRODUCT PAGES
     ========================================================= */

  html body:not(:has(.sw-v3)) .select-items {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    padding: 0 12px 28px !important;
  }


  /* PRODUCT CARD */
  html body:not(:has(.sw-v3))
  .select-items .height-adjuster {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 0 18px !important;
    padding: 18px 14px 20px !important;

    background: #ffffff !important;

    border: 1px solid #dce4e9 !important;
    border-top: 4px solid #00a8e8 !important;
    border-radius: 10px !important;

    box-shadow: 0 6px 18px rgba(23,26,33,.06) !important;
  }


  /* PRODUCT IMAGE */
  html body:not(:has(.sw-v3))
  .select-items .image-container {
    width: 100% !important;

    margin: 0 auto 14px !important;

    text-align: center !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .image-container img {
    display: block !important;

    width: min(100%, 330px) !important;
    height: auto !important;

    margin: 0 auto !important;

    border-radius: 8px !important;
  }


  /* PRODUCT NAME */
  html body:not(:has(.sw-v3))
  .select-items .longname,
  html body:not(:has(.sw-v3))
  .select-items .longname * {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;

    text-align: center !important;
  }


  /* =========================================================
     PRODUCT SPECS
     ========================================================= */

  html body .os-product-specs {
    width: 100% !important;

    margin-top: 18px !important;

    text-align: left !important;
  }


  /* OVERVIEW */
  html body .os-product-specs__overview {
    padding: 18px 16px !important;

    border-radius: 8px 8px 0 0 !important;

    text-align: center !important;
  }

  html body .os-product-specs__overview h2 {
    margin: 0 0 8px !important;

    font-size: 21px !important;
  }

  html body .os-product-specs__overview p {
    margin: 0 !important;

    font-size: 13px !important;
    line-height: 1.55 !important;
  }


  /* BODY */
  html body .os-product-specs__body {
    padding: 18px 14px 20px !important;
  }


  html body .os-product-specs__features h2,
  html body .os-product-specs__grid h2,
  html body .os-product-specs__resources h2 {
    margin-bottom: 12px !important;

    font-size: 19px !important;

    text-align: center !important;
  }


  /* FEATURES - LEFT ALIGN BULLETS */
  html body .os-product-specs__features ul {
    width: min(100%, 360px) !important;

    margin: 0 auto 20px !important;
    padding-left: 24px !important;

    text-align: left !important;
  }

  html body .os-product-specs__features li {
    margin-bottom: 8px !important;

    font-size: 13px !important;
    line-height: 1.45 !important;
  }


  /* =========================================================
     SPECIFICATIONS TABLE
     ========================================================= */

  html body .os-product-specs__grid {
    display: block !important;
  }

  html body .os-product-specs table {
    width: 100% !important;

    margin: 0 0 20px !important;

    border-collapse: separate !important;
    border-spacing: 0 !important;

    border: 1px solid #d8e0e6 !important;
    border-radius: 7px !important;

    overflow: hidden !important;
  }

  html body .os-product-specs table tr {
    display: grid !important;

    grid-template-columns: 42% 58% !important;
  }

  html body .os-product-specs table th,
  html body .os-product-specs table td {
    box-sizing: border-box !important;

    width: auto !important;

    padding: 10px 9px !important;

    font-size: 12px !important;
    line-height: 1.35 !important;

    text-align: left !important;
    vertical-align: middle !important;

    border-bottom: 1px solid #dfe5e9 !important;
  }

  html body .os-product-specs table th {
    background: #eef3f6 !important;

    color: #171a21 !important;

    font-weight: 800 !important;
  }

  html body .os-product-specs table td {
    background: #ffffff !important;

    color: #39424c !important;
  }


  /* =========================================================
     MANUFACTURER BULLETIN
     ========================================================= */

  html body .os-product-specs__resources {
    margin-top: 18px !important;

    text-align: center !important;
  }

  html body .os-product-specs__resource {
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    max-width: 360px !important;

    margin: 0 auto !important;
    padding: 13px 14px !important;

    background: #ffffff !important;
    color: #b90070 !important;

    border: 1px solid #d9e1e6 !important;
    border-top: 3px solid #00a8e8 !important;
    border-radius: 8px !important;

    box-shadow: 0 4px 12px rgba(23,26,33,.06) !important;

    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;

    text-align: center !important;
    text-decoration: none !important;
  }

  html body .os-product-specs__resource span {
    display: block !important;

    margin-top: 5px !important;

    color: #59616c !important;

    font-size: 11px !important;
    font-weight: 600 !important;
  }


  /* =========================================================
     HOMEPAGE / POPULAR MATERIALS
     ========================================================= */

  html body:has(.sw-v3) .sw-v3-category-section {
    padding-top: 20px !important;
    padding-bottom: 24px !important;
  }

  html body:has(.sw-v3) .sw-v3-materials-section {
    padding: 24px 12px 30px !important;
  }

  html body:has(.sw-v3) .sw-v3-materials {
    width: 100% !important;

    gap: 12px !important;
  }

  html body:has(.sw-v3) .sw-v3-material {
    border-radius: 9px !important;

    box-shadow: 0 5px 14px rgba(23,26,33,.07) !important;
  }


  /* MATERIAL BUTTONS */
  html body:has(.sw-v3)
  .sw-v3-material
  :is(a.button, button, input[type="button"], input[type="submit"]) {
    background: #b90070 !important;
    color: #ffffff !important;

    border-color: #b90070 !important;

    border-radius: 6px !important;

    font-weight: 800 !important;
  }


  /* =========================================================
     FOOTER
     ========================================================= */

  html body #footer {
    margin-top: 26px !important;

    border-top: 3px solid #00a8e8 !important;
  }

}

/* ============================================================
   OVERSIGNS - MOBILE COLOR SYSTEM V1
   MOBILE ONLY
   2026-10-05
   ============================================================ */

@media only screen and (max-width: 760px) {

  /* =========================================================
     PAGE SHELL
     ========================================================= */

  html body {
    background: #f5f7f9 !important;
    color: #171a21 !important;
  }


  /* =========================================================
     TYPOGRAPHY
     ========================================================= */

  html body h1,
  html body h2,
  html body h3,
  html body h4,
  html body .pagetitle,
  html body .longname {
    color: #171a21 !important;
  }

  html body p,
  html body .pageinstructions,
  html body .field-note {
    color: #59616c !important;
  }


  /* =========================================================
     CONTENT CARDS
     ========================================================= */

  html body .form-body,
  html body .height-adjuster,
  html body .os-product-specs,
  html body .sw-v3-material {
    background: #ffffff !important;

    border-color: #dce4e9 !important;
  }

  html body .form-body,
  html body .height-adjuster {
    border-top-color: #00a8e8 !important;
  }


  /* =========================================================
     SECTION HEADERS
     ========================================================= */

  html body .form-subheader {
    background: #f0f5f8 !important;

    color: #171a21 !important;

    border-bottom-color: #dce4e9 !important;
  }


  /* =========================================================
     PRODUCT OVERVIEW
     Keep the darker premium card from desktop
     ========================================================= */

  html body .os-product-specs__overview {
    background: #33122e !important;

    border-left: 4px solid #b90070 !important;

    color: #ffffff !important;
  }

  html body .os-product-specs__overview h1,
  html body .os-product-specs__overview h2,
  html body .os-product-specs__overview h3,
  html body .os-product-specs__overview p,
  html body .os-product-specs__overview strong {
    color: #ffffff !important;
  }


  /* =========================================================
     FEATURES
     ========================================================= */

  html body .os-product-specs__features {
    color: #39424c !important;
  }

  html body .os-product-specs__features li::marker {
    color: #00a8e8 !important;
  }


  /* =========================================================
     SPECIFICATIONS TABLE
     ========================================================= */

  html body .os-product-specs table {
    border-color: #dce4e9 !important;
  }

  html body .os-product-specs table th {
    background: #edf3f6 !important;

    color: #171a21 !important;

    border-bottom-color: #dce4e9 !important;
  }

  html body .os-product-specs table td {
    background: #ffffff !important;

    color: #39424c !important;

    border-bottom-color: #edf1f4 !important;
  }


  /* =========================================================
     MANUFACTURER RESOURCE
     ========================================================= */

  html body .os-product-specs__resource {
    background: #ffffff !important;

    color: #b90070 !important;

    border: 1px solid #dce4e9 !important;
    border-top: 3px solid #00a8e8 !important;
  }

  html body .os-product-specs__resource span {
    color: #66717b !important;
  }


  /* =========================================================
     INPUTS / SELECTS
     ========================================================= */

  html body
  :is(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea
  ) {
    background: #ffffff !important;

    color: #27313a !important;

    border-color: #cdd6de !important;
  }

  html body
  :is(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea
  ):focus {
    border-color: #00a8e8 !important;

    outline: 0 !important;

    box-shadow:
      0 0 0 3px rgba(0,168,232,.12) !important;
  }


  /* =========================================================
     PRIMARY ACTIONS
     ========================================================= */

  html body
  :is(
    button,
    input[type="submit"],
    input[type="button"],
    a.button
  ) {
    background: #b90070 !important;

    color: #ffffff !important;

    border-color: #b90070 !important;

    box-shadow:
      0 4px 10px rgba(185,0,112,.12) !important;
  }

  html body
  :is(
    button,
    input[type="submit"],
    input[type="button"],
    a.button
  ):hover {
    background: #940058 !important;

    border-color: #940058 !important;

    color: #ffffff !important;
  }


  /* =========================================================
     TEXT LINKS
     ========================================================= */

  html body a {
    color: #b90070;
  }

  html body a:hover {
    color: #940058;
  }


  /* =========================================================
     HOMEPAGE CATEGORY AREA
     ========================================================= */

  html body:has(.sw-v3) .sw-v3-category-section {
    background: #ffffff !important;
  }


  /* =========================================================
     POPULAR MATERIALS
     Softer mobile treatment instead of large yellow field
     ========================================================= */

  html body:has(.sw-v3) .sw-v3-materials-section {
    background: #f0f4f6 !important;

    border-top: 3px solid #00a8e8 !important;
  }

  html body:has(.sw-v3)
  .sw-v3-materials-section h2,
  html body:has(.sw-v3)
  .sw-v3-materials-title {
    color: #171a21 !important;
  }

  html body:has(.sw-v3) .sw-v3-material {
    background: #ffffff !important;

    border: 1px solid #dce4e9 !important;
  }

  html body:has(.sw-v3)
  .sw-v3-material__title {
    color: #171a21 !important;
  }

  html body:has(.sw-v3)
  .sw-v3-material__description {
    color: #59616c !important;
  }


  /* =========================================================
     SMALL YELLOW ACCENT ONLY
     ========================================================= */

  html body .os-mobile-accent {
    background: #ffe500 !important;
  }


  /* =========================================================
     FOOTER
     ========================================================= */

  html body #footer {
    background: #18232d !important;

    color: #ffffff !important;

    border-top: 3px solid #00a8e8 !important;
  }

  html body #footer a {
    color: #ffffff !important;
  }

}


/* ============================================================
   OVERSIGNS - VENDOR ACCOUNT SETUP POLISH
   Account Setup / Vendor Application
   ============================================================ */

@media only screen and (min-width: 701px) {

  /* Wider, cleaner account setup card */
  html body .main.new-account {
    width: calc(100% - 40px) !important;
    max-width: 980px !important;
    margin: 48px auto 55px !important;
  }

  html body .main.new-account form[action="makenewaccount.cgi"] {
    padding: 30px 34px 34px !important;
    border: 1px solid #dfe4ea !important;
    border-top: 4px solid #00a8e8 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(23,26,33,.07) !important;
  }

  /* Remove the old centered "Profile Fields:" look */
  html body .main.new-account
  form[action="makenewaccount.cgi"] table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"] table > tbody {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 18px 24px !important;
    width: 100% !important;
  }

  /* Each PageDNA field becomes its own compact card row */
  html body .main.new-account
  form[action="makenewaccount.cgi"] table > tbody > tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 7px !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"] table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Labels above fields */
  html body .main.new-account
  form[action="makenewaccount.cgi"] td.label {
    margin: 0 !important;
    padding: 0 !important;

    color: #39414c !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    text-align: left !important;
    text-transform: uppercase !important;
    letter-spacing: .025em !important;
  }

  /* Standard fields */
  html body .main.new-account
  form[action="makenewaccount.cgi"]
  input:not([type="hidden"]):not([type="submit"]),

  html body .main.new-account
  form[action="makenewaccount.cgi"] select,

  html body .main.new-account
  form[action="makenewaccount.cgi"] textarea {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 10px 12px !important;

    background: #fbfcfd !important;
    border: 1px solid #ccd5de !important;
    border-radius: 7px !important;

    color: #171a21 !important;
    font: 500 14px/1.35 "Open Sans", Arial, sans-serif !important;

    box-shadow: none !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  input:not([type="hidden"]):not([type="submit"]),
  html body .main.new-account
  form[action="makenewaccount.cgi"] select {
    min-height: 43px !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"] textarea {
    min-height: 105px !important;
    resize: vertical !important;
  }

  /* Focus */
  html body .main.new-account
  form[action="makenewaccount.cgi"]
  :is(input,select,textarea):focus {
    outline: 0 !important;
    border-color: #00a8e8 !important;
    box-shadow: 0 0 0 3px rgba(0,168,232,.12) !important;
  }

  /* ---------------------------------------------------------
     FULL WIDTH ROWS
     Expected Products + Comments
     Based on current PageDNA field order
     --------------------------------------------------------- */

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-last-child(3),

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-last-child(2) {
    grid-column: 1 / -1 !important;
  }

  /* Spell check buttons underneath text areas */
  html body .main.new-account
  form[action="makenewaccount.cgi"]
  input[value*="Spell Check" i],
  html body .main.new-account
  form[action="makenewaccount.cgi"]
  button[value*="Spell Check" i] {
    width: auto !important;
    min-height: 28px !important;
    margin-top: 4px !important;
    padding: 4px 10px !important;

    background: #f2f5f7 !important;
    border: 1px solid #d7dde3 !important;
    border-radius: 5px !important;

    color: #59616c !important;
    font-size: 11px !important;
  }

  /* Continue row */
  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:last-child {
    grid-column: 1 / -1 !important;
    margin-top: 10px !important;
    text-align: center !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  input[type="submit"],
  html body .main.new-account
  form[action="makenewaccount.cgi"]
  button[type="submit"] {
    width: auto !important;
    min-width: 180px !important;
    min-height: 46px !important;

    margin: 8px auto 0 !important;
    padding: 0 26px !important;

    background: #b90070 !important;
    border: 1px solid #b90070 !important;
    border-radius: 7px !important;

    color: #ffffff !important;
    font-weight: 700 !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  :is(input[type="submit"],button[type="submit"]):hover {
    background: #940058 !important;
    border-color: #940058 !important;
  }
}


/* ============================================================
   MOBILE
   Keep everything single-column and comfortable
   ============================================================ */

@media only screen and (max-width: 700px) {

  html body .main.new-account {
    width: calc(100% - 24px) !important;
    margin: 26px auto 36px !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"] {
    padding: 20px 16px 24px !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody {
    display: block !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr {
    display: block !important;
    margin-bottom: 16px !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"] td.label {
    margin-bottom: 6px !important;
    text-align: left !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"] textarea {
    width: 100% !important;
    min-height: 100px !important;
  }
}

/* ============================================================
   OVERSIGNS - ACCOUNT SETUP PHONE FIX V2
   ============================================================ */

@media only screen and (min-width: 701px) {

  /* Phone Number row */
  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-child(6) > td:last-child {
    display: grid !important;
    grid-template-columns: 70px 70px 95px !important;
    gap: 8px !important;
    justify-content: start !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Override the general full-width input rule */
  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-child(6) > td:last-child input {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 43px !important;
    margin: 0 !important;
    padding: 9px 8px !important;
  }
}


/* PHONE - MOBILE */
@media only screen and (max-width: 700px) {

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-child(6) > td:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.35fr !important;
    gap: 7px !important;
    width: 100% !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-child(6) > td:last-child input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}


/* ============================================================
   OVERSIGNS - ACCOUNT SETUP VISUAL POLISH V2
   Paste at VERY BOTTOM of Additional CSS Content
   ============================================================ */


/* ------------------------------------------------------------
   1. CLEAN UP THE TOP "PROFILE FIELDS" LABEL
   Convert it into ACCOUNT INFORMATION
   ------------------------------------------------------------ */

html body .main.new-account
form[action="makenewaccount.cgi"]
table > tbody > tr:first-child > td:first-child {
  position: relative !important;

  color: transparent !important;
  font-size: 0 !important;

  padding-top: 6px !important;
}

html body .main.new-account
form[action="makenewaccount.cgi"]
table > tbody > tr:first-child > td:first-child::after {
  content: "ACCOUNT INFORMATION";

  display: block;

  color: #007da8;

  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;

  letter-spacing: .035em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------
   2. SHIPPING ADDRESS SECTION
   Street Address begins this section
   ------------------------------------------------------------ */

@media only screen and (min-width: 701px) {

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-child(7) {
    grid-column: 1 / -1 !important;

    position: relative !important;

    margin-top: 8px !important;
    padding-top: 50px !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-child(7)::before {
    content: "SHIPPING ADDRESS";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    display: flex;
    align-items: center;

    height: 38px;
    padding: 0 14px;

    background: #f5f8fa;
    border-left: 4px solid #00a8e8;
    border-radius: 6px;

    color: #39414c;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;

    letter-spacing: .03em;
    text-transform: uppercase;
  }
}


/* ------------------------------------------------------------
   3. FIX VENDOR INFORMATION POSITION
   Remove previous heading position
   ------------------------------------------------------------ */

html body .main.new-account
form[action="makenewaccount.cgi"]
table > tbody > tr:nth-child(11)::before {
  content: none !important;
  display: none !important;
}

html body .main.new-account
form[action="makenewaccount.cgi"]
table > tbody > tr:nth-child(11) {
  grid-column: auto !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* Vendor section should begin AFTER ZIP */
@media only screen and (min-width: 701px) {

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-child(12) {
    grid-column: 1 / -1 !important;

    position: relative !important;

    margin-top: 10px !important;
    padding-top: 50px !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-child(12)::before {
    content: "VENDOR INFORMATION";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    display: flex;
    align-items: center;

    height: 38px;
    padding: 0 14px;

    background: #eef9fd;
    border-left: 4px solid #00a8e8;
    border-radius: 6px;

    color: #007da8;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;

    letter-spacing: .035em;
    text-transform: uppercase;
  }
}


/* ------------------------------------------------------------
   4. MORE CONSISTENT LABEL SPACING
   ------------------------------------------------------------ */

html body .main.new-account
form[action="makenewaccount.cgi"] td.label {
  margin-bottom: 6px !important;

  color: #2f3742 !important;

  font-size: 12px !important;
  font-weight: 700 !important;

  letter-spacing: .02em !important;
}


/* ------------------------------------------------------------
   5. SLIGHTLY SOFTER INPUTS
   ------------------------------------------------------------ */

html body .main.new-account
form[action="makenewaccount.cgi"]
:is(
  input:not([type="hidden"]):not([type="submit"]),
  select,
  textarea
) {
  background: #ffffff !important;

  border-color: #cfd8e2 !important;

  transition:
    border-color .15s ease,
    box-shadow .15s ease !important;
}

html body .main.new-account
form[action="makenewaccount.cgi"]
:is(
  input:not([type="hidden"]):not([type="submit"]),
  select,
  textarea
):focus {
  border-color: #00a8e8 !important;
  box-shadow: 0 0 0 3px rgba(0,168,232,.11) !important;
}


/* ------------------------------------------------------------
   6. MOBILE SECTION HEADINGS
   ------------------------------------------------------------ */

@media only screen and (max-width: 700px) {

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-child(7),
  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-child(12) {
    position: relative !important;
    padding-top: 50px !important;
    margin-top: 10px !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-child(7)::before {
    content: "SHIPPING ADDRESS";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    display: flex;
    align-items: center;

    height: 38px;
    padding: 0 12px;

    background: #f5f8fa;
    border-left: 4px solid #00a8e8;
    border-radius: 6px;

    color: #39414c;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-child(12)::before {
    content: "VENDOR INFORMATION";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    display: flex;
    align-items: center;

    height: 38px;
    padding: 0 12px;

    background: #eef9fd;
    border-left: 4px solid #00a8e8;
    border-radius: 6px;

    color: #007da8;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
  }
}


/* ============================================================
   OVERSIGNS - VENDOR APPLICATION FINAL POLISH
   Paste at VERY BOTTOM of Additional CSS Content
   ============================================================ */


/* ------------------------------------------------------------
   TEXT AREAS - keep them useful without making page enormous
   ------------------------------------------------------------ */

html body .main.new-account
form[action="makenewaccount.cgi"] textarea {
  min-height: 110px !important;
  height: 110px !important;
  max-height: 180px !important;
  resize: vertical !important;

  padding: 12px !important;

  background: #fff !important;
  border: 1px solid #cfd8e2 !important;
  border-radius: 7px !important;

  font: 500 14px/1.45 "Open Sans", Arial, sans-serif !important;
}


/* ------------------------------------------------------------
   SPELL CHECK - make native PageDNA control much quieter
   ------------------------------------------------------------ */

html body .main.new-account
form[action="makenewaccount.cgi"]
:is(
  input[value*="Spell Check" i],
  button[value*="Spell Check" i]
) {
  width: auto !important;
  min-width: 0 !important;
  min-height: 28px !important;

  margin: 5px 0 0 !important;
  padding: 4px 10px !important;

  background: #f5f7f9 !important;
  border: 1px solid #d9e0e6 !important;
  border-radius: 5px !important;

  color: #68717c !important;

  font-size: 10px !important;
  font-weight: 700 !important;

  box-shadow: none !important;
  text-shadow: none !important;
}


/* ------------------------------------------------------------
   CONFIRMATION AREA
   The final signature/confirmation rows become a distinct block
   ------------------------------------------------------------ */

html body .main.new-account
form[action="makenewaccount.cgi"]
table > tbody > tr:nth-last-child(4) {
  grid-column: 1 / -1 !important;

  position: relative !important;

  margin-top: 18px !important;
  padding-top: 58px !important;
}


/* Section heading */
html body .main.new-account
form[action="makenewaccount.cgi"]
table > tbody > tr:nth-last-child(4)::before {
  content: "CONFIRMATION OF INFORMATION ACCURACY";

  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;

  height: 40px;
  padding: 0 14px;

  background: #eef9fd;
  border-left: 4px solid #00a8e8;
  border-radius: 6px;

  color: #007da8;

  font-family: "Open Sans", Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;

  letter-spacing: .025em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------
   SIGNATURE + DATE
   ------------------------------------------------------------ */

html body .main.new-account
form[action="makenewaccount.cgi"]
table > tbody > tr:nth-last-child(4),

html body .main.new-account
form[action="makenewaccount.cgi"]
table > tbody > tr:nth-last-child(3) {
  background: #fbfcfd !important;
  border-radius: 8px !important;
}


/* ------------------------------------------------------------
   ACCURACY CHECKBOX ROW
   ------------------------------------------------------------ */

html body .main.new-account
form[action="makenewaccount.cgi"]
tr:has(input[type="checkbox"]) {
  grid-column: 1 / -1 !important;

  padding: 16px 18px !important;

  background: #f8fbfc !important;

  border: 1px solid #dce6eb !important;
  border-radius: 8px !important;
}


/* Checkbox label */
html body .main.new-account
form[action="makenewaccount.cgi"]
tr:has(input[type="checkbox"]) td.label {
  color: #27313b !important;

  font-size: 12px !important;
  font-weight: 700 !important;

  text-transform: none !important;
  letter-spacing: 0 !important;
}


/* Make checkbox look like a normal professional checkbox */
html body .main.new-account
form[action="makenewaccount.cgi"]
input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;

  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;

  height: 20px !important;
  min-height: 20px !important;

  margin: 0 !important;
  padding: 0 !important;

  accent-color: #00a8e8 !important;
}


/* Center checkbox vertically */
html body .main.new-account
form[action="makenewaccount.cgi"]
tr:has(input[type="checkbox"]) td:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}


/* ------------------------------------------------------------
   SUBMIT / AUTHENTICATION BUTTON
   ------------------------------------------------------------ */

html body .main.new-account
form[action="makenewaccount.cgi"]
:is(
  input[type="submit"],
  button[type="submit"]
) {
  min-width: 230px !important;
  min-height: 48px !important;

  margin-top: 18px !important;
  padding: 0 26px !important;

  background: #b90070 !important;
  border: 1px solid #b90070 !important;
  border-radius: 7px !important;

  color: #fff !important;

  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;

  box-shadow: 0 5px 14px rgba(185,0,112,.14) !important;
}

html body .main.new-account
form[action="makenewaccount.cgi"]
:is(
  input[type="submit"],
  button[type="submit"]
):hover {
  background: #940058 !important;
  border-color: #940058 !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media only screen and (max-width: 700px) {

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-last-child(4) {
    padding-top: 62px !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  table > tbody > tr:nth-last-child(4)::before {
    min-height: 42px !important;
    height: auto !important;

    padding: 10px 12px !important;

    font-size: 12px !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  tr:has(input[type="checkbox"]) {
    padding: 14px !important;
  }

  html body .main.new-account
  form[action="makenewaccount.cgi"]
  :is(
    input[type="submit"],
    button[type="submit"]
  ) {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* ============================================================
   OVERSIGNS - CONFIRMATION CHECKBOX FINAL FIX
   ============================================================ */

html body .main.new-account
form[action="makenewaccount.cgi"]
tr:has(input[type="checkbox"]) {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 12px !important;

  padding: 16px 18px !important;

  background: #f8fbfc !important;
  border: 1px solid #dce6eb !important;
  border-radius: 8px !important;
}

/* Put checkbox first */
html body .main.new-account
form[action="makenewaccount.cgi"]
tr:has(input[type="checkbox"]) td:last-child {
  grid-column: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  padding: 0 !important;
}

/* Label beside checkbox */
html body .main.new-account
form[action="makenewaccount.cgi"]
tr:has(input[type="checkbox"]) td.label {
  grid-column: 2 !important;

  display: block !important;

  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #27313b !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;

  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Normal-size checkbox */
html body .main.new-account
form[action="makenewaccount.cgi"]
tr:has(input[type="checkbox"])
input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;

  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;

  height: 18px !important;
  min-height: 18px !important;

  margin: 0 !important;
  padding: 0 !important;

  accent-color: #00a8e8 !important;
}


/* ============================================================
   OVERSIGNS - ERIC REVIEW FINAL PATCH V3 - 2026-10-07

   - Removes Account dropdown arrow
   - Protects all 3 category nav labels from search overlap
   - Makes desktop search shrink with available header space
   - Category-specific Popular Materials bands
   - Uniform 2-column product feature boxes
   - Corrects selectable hero-text overlay so it REPLACES
     the text baked into the banner artwork visually

   VISUAL ONLY - native PageDNA routes/actions remain unchanged.
   ============================================================ */


/* ============================================================
   1. ACCOUNT - REMOVE ARROW, KEEP ICON + "Account"
   ============================================================ */

@media only screen and (min-width: 1025px) {

  html body
  #header-links-container
  .header-links > a:nth-of-type(2)::after,

  html body
  #header-links-container
  td.header-links > a:nth-of-type(2)::after {

    content: "Account" !important;

    font-family:
      "Open Sans",
      Arial,
      sans-serif !important;

    white-space: nowrap !important;
  }
}


/* ============================================================
   2. DESKTOP SEARCH - FINAL COLLISION FIX
   Reserve a protected zone for:
   LOGO + ADHESIVE + BOARDS + BANNER

   Search begins only AFTER all three category labels.
   It then shrinks as the browser narrows.
   ============================================================ */

@media only screen and (min-width: 1025px) {

  /* Custom Site Title search */
  html body
  #header_title
  form.shoprint-config-search {

    position: absolute !important;

    top: 14px !important;
    left: 550px !important;
    right: auto !important;

    width: clamp(
      150px,
      calc(100vw - 870px),
      520px
    ) !important;

    min-width: 0 !important;
    max-width: 520px !important;

    height: 43px !important;

    margin: 0 !important;

    transform: none !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
  }


  html body
  #header_title
  form.shoprint-config-search
  .shoprint-config-search-input {

    flex: 1 1 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    overflow: hidden !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }


  /* Native PageDNA catalog search, where present */
  html body
  .main
  .catalog
  .item-search-block {

    left: 550px !important;
    right: auto !important;

    width: clamp(
      150px,
      calc(100vw - 870px),
      520px
    ) !important;

    min-width: 0 !important;
    max-width: 520px !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  html body
  .main
  .catalog
  .item-search-block
  input#searchfield_input {

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* ============================================================
   3. POPULAR MATERIALS - CATEGORY-SPECIFIC BRAND BANDS

   ADHESIVE = CYAN
   BOARDS   = MAGENTA
   BANNER   = YELLOW
   ============================================================ */


/* ADHESIVE */
html body:has(.sw-v3):has(input[name="tab"][value^="ADHESIVE"])
.sw-v3 > .sw-v3-section:nth-of-type(2) {
  background: #00A8E8 !important;
}

html body:has(.sw-v3):has(input[name="tab"][value^="ADHESIVE"])
.sw-v3 > .sw-v3-section:nth-of-type(2)
.sw-v3-section__head h2 {
  color: #ffffff !important;
  text-shadow: none !important;
}


/* BOARDS */
html body:has(.sw-v3):has(input[name="tab"][value^="BOARDS"])
.sw-v3 > .sw-v3-section:nth-of-type(2) {
  background: #B90070 !important;
}

html body:has(.sw-v3):has(input[name="tab"][value^="BOARDS"])
.sw-v3 > .sw-v3-section:nth-of-type(2)
.sw-v3-section__head h2 {
  color: #ffffff !important;
  text-shadow: none !important;
}


/* BANNERS */
html body:has(.sw-v3):has(input[name="tab"][value^="BANNER"])
.sw-v3 > .sw-v3-section:nth-of-type(2) {
  background: #FFE500 !important;
}

html body:has(.sw-v3):has(input[name="tab"][value^="BANNER"])
.sw-v3 > .sw-v3-section:nth-of-type(2)
.sw-v3-section__head h2 {
  color: #171A21 !important;
  text-shadow: none !important;
}


/* Shared white cards against all three band colors */
html body:has(.sw-v3)
.sw-v3 > .sw-v3-section:nth-of-type(2)
.sw-v3-material {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.13) !important;
}


/* ============================================================
   4. PRODUCT KEY-FEATURE BLOCKS - UNIFORM + READABLE

   Desktop/tablet:
   - 2 equal columns
   - same width
   - same minimum height
   - never break words in the middle
   - odd final card stays same width and centers itself
   ============================================================ */

html body
.select-items
.os-product-specs__features ul {

  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 10px !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;

  text-align: left !important;
}


html body
.select-items
.os-product-specs__features li {

  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  min-height: 64px !important;

  margin: 0 !important;
  padding: 10px 14px !important;

  background: #ffffff !important;

  border: 1px solid #e1e5e9 !important;
  border-left: 3px solid #B90070 !important;
  border-radius: 6px !important;

  color: #171A21 !important;

  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;

  text-align: center !important;

  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}


/* If there are 3 / 5 / etc. features,
   center the final card WITHOUT making it wider */
html body
.select-items
.os-product-specs__features li:last-child:nth-child(odd) {

  grid-column: 1 / -1 !important;

  width: calc(50% - 5px) !important;

  justify-self: center !important;
}


@media only screen and (max-width: 600px) {

  html body
  .select-items
  .os-product-specs__features ul {

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 8px !important;
  }


  html body
  .select-items
  .os-product-specs__features li,
  html body
  .select-items
  .os-product-specs__features li:last-child:nth-child(odd) {

    grid-column: auto !important;

    width: 100% !important;

    min-height: 54px !important;

    padding: 10px 12px !important;

    font-size: 13px !important;
  }
}


/* ============================================================
   5. SELECTABLE CATEGORY HERO TEXT - VISUAL REPLACEMENT V3

   Works with the Site Title HTML classes:
     .os-hero-text
     .os-hero-adhesive
     .os-hero-boards
     .os-hero-banners

   The old PNG still supplies the photography.
   This opaque panel now starts early enough to COVER the
   words baked into the PNG instead of displaying beside them.
   ============================================================ */

html body .os-hero-text {
  display: none !important;
}


@media only screen and (min-width: 1025px) {

  html body #header_title {
    position: relative !important;
  }


  html body:has(.sw-v3)
  #header_title
  .os-hero-text {

    position: absolute !important;

    top: 100px !important;
    right: 0 !important;

    box-sizing: border-box !important;

    /* Deliberately wide enough to cover the original
       baked-in title/subtitle area in the banner PNG */
    width: 40vw !important;
    max-width: none !important;
    height: 220px !important;

    padding:
      0
      clamp(30px, 4vw, 64px) !important;

    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    /* Nearly opaque so old image text cannot show through */
    background: rgba(17,17,17,.985) !important;

    color: #ffffff !important;

    z-index: 30 !important;

    pointer-events: auto !important;

    user-select: text !important;
    -webkit-user-select: text !important;
  }


  /* Correct category only */
  html body:has(.sw-v3):has(input[name="tab"][value^="ADHESIVE"])
  #header_title .os-hero-adhesive {
    display: flex !important;
  }

  html body:has(.sw-v3):has(input[name="tab"][value^="BOARDS"])
  #header_title .os-hero-boards {
    display: flex !important;
  }

  html body:has(.sw-v3):has(input[name="tab"][value^="BANNER"])
  #header_title .os-hero-banners {
    display: flex !important;
  }


  html body
  #header_title
  .os-hero-text strong {

    display: block !important;

    margin: 0 0 4px !important;

    color: #ffffff !important;

    font-family:
      "Open Sans",
      Arial,
      sans-serif !important;

    font-size: clamp(38px, 4vw, 62px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    letter-spacing: -.02em !important;

    text-transform: uppercase !important;

    cursor: text !important;
  }


  html body
  #header_title
  .os-hero-text span {

    display: block !important;

    margin: 0 !important;

    color: #ffffff !important;

    font-family:
      "Open Sans",
      Arial,
      sans-serif !important;

    font-size: clamp(16px, 1.55vw, 24px) !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;

    cursor: text !important;
  }


  html body #header_title .os-hero-adhesive {
    border-left: 6px solid #00A8E8 !important;
  }

  html body #header_title .os-hero-boards {
    border-left: 6px solid #B90070 !important;
  }

  html body #header_title .os-hero-banners {
    border-left: 6px solid #FFE500 !important;
  }
}


@media only screen and (max-width: 1024px) {

  html body .os-hero-text {
    display: none !important;
  }
}

/* ============================================================
   OVERSIGNS - HEADER + ADHESIVE HERO FINAL PATCH
   2026-10-07
   ============================================================ */


/* ============================================================
   SEARCH BAR
   Never allow search to overlap ADHESIVE / BOARDS / BANNER
   ============================================================ */

@media only screen and (min-width: 1025px) {

  /* Custom OVERSIGNS search */
  html body
  #header_title
  form.shoprint-config-search {

    position: absolute !important;

    top: 14px !important;

    /* Protected nav area ends here */
    left: 600px !important;

    /* Protect Account / Cart / Menu on right */
    right: 300px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 43px !important;

    margin: 0 !important;

    transform: none !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
  }


  html body
  #header_title
  form.shoprint-config-search
  .shoprint-config-search-input {

    flex: 1 1 auto !important;

    width: 100% !important;
    min-width: 0 !important;

    overflow: hidden !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }


  /* Native PageDNA search - same protected area */
  html body
  .main
  .catalog
  .item-search-block {

    left: 600px !important;
    right: 300px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    transform: none !important;

    box-sizing: border-box !important;
  }

}


/* ============================================================
   EXTRA-NARROW DESKTOP
   Search can become small - but NEVER covers navigation
   ============================================================ */

@media only screen and (min-width: 1025px) and (max-width: 1120px) {

  html body
  #header_title
  form.shoprint-config-search,

  html body
  .main
  .catalog
  .item-search-block {

    left: 570px !important;
    right: 290px !important;
  }


  /* Hide long placeholder when space gets tight */
  html body
  .shoprint-config-search-input::placeholder {

    color: transparent !important;
  }

}


/* ============================================================
   ADHESIVE HERO
   Cover the ORIGINAL baked-in Adhesives wording completely.
   Boards + Banners are left untouched.
   ============================================================ */

@media only screen and (min-width: 1025px) {

  html body:has(.sw-v3):has(input[name="tab"][value^="ADHESIVE"])
  #header_title
  .os-hero-adhesive {

    /* Extend farther left than Boards/Banners */
    width: 45vw !important;

    max-width: none !important;

    right: 0 !important;

    /* Fully hide the original text in the PNG */
    background: #111111 !important;
  }

}


/* ============================================================
   OVERSIGNS - ADHESIVE WIDTH MAX NOTICE
   Native PageDNA Width field
   Maximum production width: 53 inches
   ============================================================ */

/* Width input */
html body
td.input.tr_width_inches
input[name="width_inches"] {
  box-sizing: border-box !important;

  border: 1px solid #00A8E8 !important;
  border-radius: 6px !important;

  background: #ffffff !important;

  font-weight: 700 !important;
}


/* Add production-limit message directly below Width */
html body
td.input.tr_width_inches::after {
  content: "Maximum width: 53 inches";

  display: block !important;

  margin-top: 6px !important;

  color: #B90070 !important;

  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}


/* Make WIDTH label slightly more prominent */
html body
td.label.tr_width_inches {
  color: #171A21 !important;

  font-weight: 800 !important;
}



/* ===================================================
   OVERSIGNS - REORDER PAGE VISUAL REFRESH
   CSS ONLY - NO JAVASCRIPT
   =================================================== */

/* Reorder page heading */
[id="reorder.introbanner"] {
  display: block;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: #17232d;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 3px solid #00a9e8;
}

/* Reorder page instructions */
[id="reorder.introtext"] {
  display: block;
  max-width: 680px;
  margin: 0 auto 20px;
  font-size: 14px;
  line-height: 1.7;
  color: #52616d;
}

/* Form table only when preceded by reorder intro */
[id="reorder.introtext"] ~ table.form-body,
p:has(> [id="reorder.introtext"]) ~ table.form-body {
  width: 100%;
  max-width: 680px;
  margin: 18px auto 0;
  border-collapse: separate;
  border-spacing: 0 8px;
}

/* Reorder form labels */
p:has(> [id="reorder.introtext"]) ~ table.form-body td,
p:has(> [id="reorder.introtext"]) ~ table.form-body th {
  padding: 9px 12px;
  vertical-align: middle;
}

/* Reorder form inputs */
p:has(> [id="reorder.introtext"]) ~ table.form-body input[type="text"],
p:has(> [id="reorder.introtext"]) ~ table.form-body input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 390px;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid #d8e1e8;
  border-radius: 9px;
  background: #fff;
  color: #17232d;
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}

p:has(> [id="reorder.introtext"]) ~ table.form-body input:focus {
  outline: none;
  border-color: #1d5b6c;
  box-shadow: 0 0 0 3px rgba(29,91,108,.12);
}

/* Reorder form buttons */
p:has(> [id="reorder.introtext"]) ~ table.form-body input[type="submit"],
p:has(> [id="reorder.introtext"]) ~ table.form-body input[type="button"],
p:has(> [id="reorder.introtext"]) ~ table.form-body button,
p:has(> [id="reorder.introtext"]) ~ table.form-body a.btn {
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  transition: filter .2s;
}

p:has(> [id="reorder.introtext"]) ~ table.form-body input[type="submit"]:hover,
p:has(> [id="reorder.introtext"]) ~ table.form-body button:hover,
p:has(> [id="reorder.introtext"]) ~ table.form-body a.btn:hover {
  filter: brightness(.94);
}

/* Mobile */
@media (max-width: 640px) {
  [id="reorder.introbanner"] {
    font-size: 24px;
  }

  [id="reorder.introtext"] {
    font-size: 13px;
  }

  p:has(> [id="reorder.introtext"]) ~ table.form-body {
    width: 100%;
  }

  p:has(> [id="reorder.introtext"]) ~ table.form-body td,
  p:has(> [id="reorder.introtext"]) ~ table.form-body th {
    padding: 8px 6px;
  }
}



/* OVERSIGNS - Reorder inner card cleanup */
.main.reorder.catalog--container
  :is(form, .form-body) {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}


/* OVERSIGNS - Approval page */
form[action="do_approve.cgi"] {
  --approval-teal: #1d5b6c;
  --approval-border: #dbe4e8;
  color: #263942;
  font-family: inherit;
}

form[action="do_approve.cgi"] .pagetitle {
  margin: 28px 0 14px;
  color: var(--approval-teal);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
}

form[action="do_approve.cgi"] > table.form-body {
  width: 100%;
  margin-bottom: 22px;
  border: 1px solid var(--approval-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  background: #fff;
}

form[action="do_approve.cgi"] > table.form-body > tbody > tr > th,
form[action="do_approve.cgi"] > table.form-body > tbody > tr > td {
  padding: 14px 18px;
  vertical-align: middle;
}

#approval-order-details-table th {
  background: #edf4f6 !important;
  color: #1d5b6c;
  font-weight: 700;
  text-align: left;
}

#approval-order-details-table td {
  border-top: 1px solid #e5ecef;
}

#approval-order-price-detail-table td.label,
#approval-approve-info-table td.label {
  background: #edf4f6 !important;
  color: #263942 !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
}

#approval-approve-info-table .optional {
  margin-top: 5px;
  color: #586b74;
  font-size: 12px;
}

#approval-approve-info-table th {
  background: #fff !important;
  color: #263942;
  font-weight: 500;
  text-align: left;
}

#approval-approve-info-table input[type="radio"] {
  accent-color: #1d5b6c;
  margin-right: 8px;
}

form[action="do_approve.cgi"] select,
form[action="do_approve.cgi"] textarea {
  box-sizing: border-box;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #b9cbd2;
  border-radius: 6px;
  background: #fff;
  color: #263942;
  font: inherit;
}

form[action="do_approve.cgi"] textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
}

form[action="do_approve.cgi"] select:focus-visible,
form[action="do_approve.cgi"] textarea:focus-visible,
form[action="do_approve.cgi"] button:focus-visible {
  outline: 3px solid #81b9c9;
  outline-offset: 3px;
}

#submit_do_changeall,
#submit_submit_decision {
  padding: 12px 24px !important;
  border: 1px solid #1d5b6c !important;
  border-radius: 6px !important;
  background: #1d5b6c !important;
  background-image: none !important;
  color: #fff !important;
  font: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

#submit_do_changeall:hover:not(:disabled),
#submit_submit_decision:hover:not(:disabled) {
  background: #164653 !important;
  border-color: #164653 !important;
}

#submit_do_changeall:disabled,
#submit_submit_decision:disabled {
  opacity: .6;
  cursor: default;
}

#approval-proof-table .previewcell {
  padding: 24px !important;
  background: #f7f9fa !important;
}

#approval-proof-table .previewcell img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 640px) {
  form[action="do_approve.cgi"] .pagetitle {
    font-size: 19px;
  }

  #approval-order-price-detail-table td.label,
  #approval-order-price-detail-table td.input,
  #approval-approve-info-table td.label,
  #approval-approve-info-table td.input {
    display: block;
    box-sizing: border-box;
    width: 100%;
  }

  #submit_do_changeall,
  #submit_submit_decision {
    width: 100%;
  }
}

/* OVERSIGNS - Reduce approval-page top gap */
.main:has(form[action="do_approve.cgi"]) {
  margin-top: 24px !important;
  padding-top: 0 !important;
}

form[action="do_approve.cgi"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

form[action="do_approve.cgi"] > .pagetitle:first-of-type {
  margin-top: 0 !important;
}

/* Remove reserved banner space on approval page only */
body:has(form[action="do_approve.cgi"]) #header-wrapper {
  margin-bottom: 0 !important;
}


/* OVERSIGNS - Reorder centered single-column layout */

/* Give the heading and instructions the full content width */
html body .main.reorder form[action="reorder.cgi"] {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep one blue divider */
html body .main.reorder form[action="reorder.cgi"] > .pagetitle {
  border: 0 !important;
  padding-bottom: 0 !important;
}

html body .main.reorder [id="reorder.introbanner"] {
  display: block;
  margin: 0 0 18px !important;
  padding-bottom: 18px !important;
  border-bottom: 3px solid #00a8e8 !important;
}

html body .main.reorder [id="reorder.introtext"] {
  max-width: none !important;
  margin: 0 0 28px !important;
}

/* One centered column for the lookup form */
html body .main.reorder form[action="reorder.cgi"] > table.form-body {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .main.reorder form[action="reorder.cgi"] > table.form-body > tbody,
html body .main.reorder form[action="reorder.cgi"] > table.form-body > tbody > tr {
  display: block !important;
  width: 100% !important;
}

/* Reset the old table-column spacing */
html body .main.reorder form[action="reorder.cgi"] > table.form-body > tbody > tr > td,
html body .main.reorder form[action="reorder.cgi"] > table.form-body > tbody > tr > th {
  display: block !important;
  box-sizing: border-box !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

/* Lookup heading and helper text */
html body .main.reorder [id="reorder.searchlbl"] {
  display: block;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

html body .main.reorder .form-subheader {
  margin: 4px 0 22px !important;
  padding: 0 !important;
  color: #52616d !important;
  text-align: left !important;
  font-size: 13px !important;
}

/* Labels above their fields */
html body .main.reorder form[action="reorder.cgi"] td.label label {
  display: block !important;
  margin: 16px 0 6px !important;
  color: #263942 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

html body .main.reorder .form-sublabel {
  margin: 0 0 6px !important;
  color: #52616d !important;
  font-size: 12px !important;
  text-align: left !important;
}

/* Consistent field widths */
html body .main.reorder form[action="reorder.cgi"] td.input input[type="text"] {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: #fafbfd !important;
}

/* Buttons centered directly beneath the fields */
html body .main.reorder form[action="reorder.cgi"] > table.form-body > tbody > tr > td.submit {
  padding: 22px 0 0 !important;
  text-align: center !important;
}

html body .main.reorder #button_reorder_back,
html body .main.reorder #submit_lookup_orders {
  display: inline-block !important;
  position: static !important;
  float: none !important;
  transform: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 44px !important;
  margin: 0 3px 8px !important;
  padding: 12px 18px !important;
  vertical-align: middle !important;
}

/* Patience note */
html body .main.reorder td.submit > p {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

html body .main.reorder [id="reorder.outrotext"] {
  color: #52616d !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}


/* OVERSIGNS - Track Orders */

/* Main card */
html body .main.shiptrack_view2 {
  box-sizing: border-box !important;
  width: calc(100% - 40px) !important;
  max-width: 1120px !important;
  margin: 24px auto 40px !important;
  padding: 28px 30px 34px !important;
  background: #fff !important;
  border: 1px solid #dbe2e9 !important;
  border-top: 3px solid #00a8e8 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(23, 26, 33, .06) !important;
}

/* Heading */
html body .main.shiptrack_view2 > .pagetitle {
  margin: 0 0 18px !important;
  padding: 0 0 18px !important;
  border: 0 !important;
  border-bottom: 3px solid #00a8e8 !important;
  color: #17232d !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-transform: none !important;
}

html body .main.shiptrack_view2
[id="shiptrack_view2.title"] {
  border: 0 !important;
}

/* Instructions and return link */
html body .main.shiptrack_view2 > .pageinstructions {
  margin: 0 0 24px !important;
  padding: 0 !important;
  color: #52616d !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  letter-spacing: normal !important;
  text-align: left !important;
}

html body .main.shiptrack_view2 > .pageinstructions a {
  display: inline-block;
  margin-top: 8px;
  color: #b90070 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Order table */
html body .main.shiptrack_view2 > table.tabular {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body .main.shiptrack_view2 > table.tabular th,
html body .main.shiptrack_view2 > table.tabular td {
  padding: 14px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid #e4eaf0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  vertical-align: middle !important;
}

html body .main.shiptrack_view2 > table.tabular th {
  background: #edf4f6 !important;
  color: #244652 !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

html body .main.shiptrack_view2 > table.tabular td {
  background: #fff !important;
  color: #263942;
}

html body .main.shiptrack_view2 > table.tabular
tr:nth-child(even) > td {
  background: #fafbfd !important;
}

/* Filter row: hide separator characters visually */
html body .main.shiptrack_view2 > table.tabular th.filters {
  padding: 0 0 18px !important;
  border: 0 !important;
  background: #fff !important;
  font-size: 0 !important;
  text-transform: none !important;
}

html body .main.shiptrack_view2 th.filters > br {
  display: none;
}

html body .main.shiptrack_view2
[id="shiptrack_view2.filter_headertext"] {
  display: block;
  margin-bottom: 10px;
  color: #52616d !important;
  font-size: 12px !important;
  font-weight: 600;
}

/* Native filter links and selected filter */
html body .main.shiptrack_view2 th.filters > a,
html body .main.shiptrack_view2
th.filters > span[id^="shiptrack_view2.filterlabel_"] {
  display: inline-block !important;
  box-sizing: border-box !important;
  min-height: 44px;
  margin: 0 8px 8px 0 !important;
  padding: 11px 14px !important;
  border: 1px solid #dbe2e9 !important;
  border-radius: 6px !important;
  background: #f7f9fb !important;
  color: #314553 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-decoration: none !important;
}

html body .main.shiptrack_view2
th.filters > span[id^="shiptrack_view2.filterlabel_"] {
  border-color: #1d5b6c !important;
  background: #1d5b6c !important;
  color: #fff !important;
}

html body .main.shiptrack_view2 th.filters > a:hover {
  border-color: #1d5b6c !important;
  background: #edf4f6 !important;
}

/* Order-number links */
html body .main.shiptrack_view2
table.tabular td a[href*="vieworder.cgi"] {
  color: #b90070 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

html body .main.shiptrack_view2
table.tabular td a[href*="vieworder.cgi"]:hover {
  text-decoration: underline !important;
}

/* Cancelled status labels */
html body .main.shiptrack_view2
table.tabular td.cancelled > span {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 5px;
  background: #fceeee !important;
  color: #9b3030 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* Keep the wide table accessible on smaller screens */
@media (max-width: 760px) {
  html body .main.shiptrack_view2 {
    width: calc(100% - 24px) !important;
    padding: 22px 16px !important;
  }

  html body .main.shiptrack_view2 > .pagetitle {
    font-size: 24px !important;
  }

  html body .main.shiptrack_view2 > table.tabular {
    display: block !important;
    overflow-x: auto !important;
  }

  html body .main.shiptrack_view2 > table.tabular > tbody {
    display: table;
    width: 100%;
    min-width: 680px;
  }
}


/* OVERSIGNS - Account overview refresh */

/* Scope to the overview with an Edit Profile button */
html body .main.profile:has(#submit_edit_profile) {
  box-sizing: border-box !important;
  width: calc(100% - 40px) !important;
  max-width: 1000px !important;
  margin: 24px auto 40px !important;
  color: #17232d;
  font-size: 14px;
}

/* Customer selection and search */
html body .main.profile:has(#submit_edit_profile)
.profile-selection {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  box-sizing: border-box;
  padding: 24px !important;
  margin: 0 0 22px !important;
  background: #fff !important;
  border: 1px solid #dbe2e9 !important;
  border-top: 3px solid #00a8e8 !important;
  border-radius: 9px !important;
  box-shadow: 0 5px 18px rgba(23, 26, 33, .04) !important;
}

html body .main.profile:has(#submit_edit_profile)
.profile-selection > form {
  min-width: 0;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .main.profile:has(#submit_edit_profile)
.profile-userlist-label {
  display: block !important;
  margin: 0 0 8px !important;
  color: #263942 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

html body .main.profile:has(#submit_edit_profile)
.profile-selection :is(select, input[type="text"]) {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 44px !important;
  margin: 0 0 10px !important;
  padding: 8px 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: #fafbfd !important;
  color: #17232d !important;
  font-size: 16px !important;
}

/* Consistent action buttons */
html body .main.profile:has(#submit_edit_profile)
:is(
  #submit_new_person,
  #submit_profile_search,
  #submit_start_shopping,
  #submit_lookup_orders,
  #submit_edit_profile
) {
  position: static !important;
  float: none !important;
  transform: none !important;
  box-sizing: border-box;
  width: auto !important;
  max-width: 100% !important;
  min-height: 44px !important;
  padding: 12px 18px !important;
  border: 1px solid #b90070 !important;
  border-radius: 6px !important;
  background: #b90070 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html body .main.profile:has(#submit_edit_profile)
:is(#submit_new_person, #submit_profile_search, #submit_lookup_orders) {
  border-color: #c9dce3 !important;
  background: #edf4f6 !important;
  color: #1d5b6c !important;
}

/* Shopping actions together */
html body .main.profile:has(#submit_edit_profile)
.top-button-container {
  width: auto !important;
  margin: 0 auto 16px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .main.profile:has(#submit_edit_profile)
.top-button-container > tbody > tr {
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

html body .main.profile:has(#submit_edit_profile)
.top-button-container td {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body .main.profile:has(#submit_edit_profile)
.top-button-container form {
  margin: 0 !important;
  padding: 0 !important;
}

html body .main.profile:has(#submit_edit_profile)
.profile-basket-header {
  margin: 0 0 22px !important;
  padding: 0 !important;
  color: #52616d !important;
  font-size: 13px !important;
  text-align: center !important;
}

/* My Information card */
html body .main.profile
> form[name="f"]:has(#submit_edit_profile) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 1px solid #dbe2e9 !important;
  border-top: 3px solid #00a8e8 !important;
  border-radius: 9px !important;
  background: #fff !important;
  box-shadow: 0 5px 18px rgba(23, 26, 33, .04) !important;
}

/* Remove nested table borders and backgrounds */
html body .main.profile
> form[name="f"]:has(#submit_edit_profile)
:is(.profile-container, .profile-form) {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .main.profile
> form[name="f"]:has(#submit_edit_profile)
.profile-fields > tbody > tr > td {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Information heading and edit button */
html body .main.profile:has(#submit_edit_profile)
:is(.top_of_profile_title, .top_of_profile_buttons) {
  padding: 0 0 16px !important;
  border: 0 !important;
  border-bottom: 1px solid #e4eaf0 !important;
  background: transparent !important;
  vertical-align: middle !important;
}

html body .main.profile:has(#submit_edit_profile)
.top_of_profile_title {
  color: #17232d !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-align: left !important;
  text-transform: none !important;
}

html body .main.profile:has(#submit_edit_profile)
.top_of_profile_buttons {
  width: auto !important;
  text-align: right !important;
}

/* Readable profile details */
html body .main.profile
> form[name="f"]:has(#submit_edit_profile)
.profile-form > tbody > tr > td {
  box-sizing: border-box !important;
  padding: 12px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid #edf0f3 !important;
  background: #fff !important;
  line-height: 1.5 !important;
  text-align: left !important;
  vertical-align: top !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  overflow-wrap: anywhere;
}

html body .main.profile
> form[name="f"]:has(#submit_edit_profile)
.profile-form td.label {
  width: 42% !important;
  color: #52616d !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

html body .main.profile
> form[name="f"]:has(#submit_edit_profile)
.profile-form td.input {
  width: 58% !important;
  color: #263942 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* Mobile layout */
@media (max-width: 640px) {
  html body .main.profile:has(#submit_edit_profile) {
    width: calc(100% - 24px) !important;
  }

  html body .main.profile:has(#submit_edit_profile)
  .profile-selection {
    grid-template-columns: 1fr;
    padding: 18px !important;
  }

  html body .main.profile
  > form[name="f"]:has(#submit_edit_profile) {
    padding: 18px !important;
  }

  html body .main.profile
  > form[name="f"]:has(#submit_edit_profile)
  .profile-form > tbody > tr {
    display: block !important;
    padding: 10px 0;
    border-bottom: 1px solid #edf0f3;
  }

  html body .main.profile
  > form[name="f"]:has(#submit_edit_profile)
  .profile-form > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    padding: 3px 0 !important;
    border: 0 !important;
  }
}

/* Account overview - remove overlapping heading icon */
html body .main.profile:has(#submit_edit_profile)
.profile-container .top_of_profile_title::before {
  content: none !important;
  display: none !important;
}

/* OVERSIGNS - Show BANNERS once in category navigation */
html body .catalog-header-menu .top-menu > li >
a[href*="tab=BANNER"],
html body .catalog-header-menu .top-menu > li >
a[href*="tab=BANNER"] * {
  font-size: 0 !important;
}

/* Remove additional generated labels */
html body .catalog-header-menu .top-menu > li >
a[href*="tab=BANNER"]::after,
html body .catalog-header-menu .top-menu > li >
a[href*="tab=BANNER"] *::before,
html body .catalog-header-menu .top-menu > li >
a[href*="tab=BANNER"] *::after {
  content: none !important;
}

/* Display one label */
html body .catalog-header-menu .top-menu > li >
a[href*="tab=BANNER"]::before {
  content: "BANNERS" !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* =========================================
   OVERSIGNS - HEADER NAV SPACING FIX
   Basket / Shipping / Billing
   ========================================= */

@media only screen and (min-width: 1025px) {

  #header-wrapper .global-catalog-menu .top-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    white-space: nowrap !important;
  }

  #header-wrapper .global-catalog-menu .top-menu li {
    margin: 0 !important;
    padding: 0 !important;
  }

  #header-wrapper .global-catalog-menu .top-menu a {
    padding-left: 0 !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
  }

}

/* OVERSIGNS - Fix duplicate BANNER on order pages */
html body:has(.main.reorder, .main.shiptrack, .main.shiptrack_view2)
.catalog-header-menu.global-catalog-menu .top-menu > li >
a[href*="tab=BANNER"],
html body:has(.main.reorder, .main.shiptrack, .main.shiptrack_view2)
.catalog-header-menu.global-catalog-menu .top-menu > li >
a[href*="tab=BANNER"] * {
  font-size: 0 !important;
}

/* Keep only the replacement label visible */
html body:has(.main.reorder, .main.shiptrack, .main.shiptrack_view2)
.catalog-header-menu.global-catalog-menu .top-menu > li >
a[href*="tab=BANNER"]::before {
  content: "BANNERS" !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* OVERSIGNS - Order cancellation page */
html body .main:has([id="cancel.cancelmsg"]) {
  box-sizing: border-box !important;
  width: calc(100% - 40px) !important;
  max-width: 760px !important;
  margin: 48px auto 60px !important;
  padding: 36px 40px !important;
  background: #ffffff !important;
  border: 1px solid #dce5e8 !important;
  border-top: 4px solid #00a8e8 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(23, 26, 33, .08) !important;
  font-family: Arial, sans-serif !important;
  text-align: center !important;
}

/* Heading */
html body .main:has([id="cancel.cancelmsg"]) .pagetitle {
  margin: 0 0 24px !important;
  padding: 0 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid #e4eaf0 !important;
  background: transparent !important;
  color: #17232d !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  text-align: center !important;
}

html body .main:has([id="cancel.cancelmsg"])
[id="cancel.cancelmsg"] p {
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
  text-transform: none !important;
}

/* Explanatory text */
html body .main:has([id="cancel.cancelmsg"]) .message-block {
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #52616d !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  letter-spacing: normal !important;
  text-align: center !important;
}

html body .main:has([id="cancel.cancelmsg"]) .message-block p {
  margin: 0 0 16px !important;
  color: #52616d !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  letter-spacing: normal !important;
}

html body .main:has([id="cancel.cancelmsg"])
.message-block a {
  color: #007da8 !important;
  font-weight: 700 !important;
  overflow-wrap: anywhere;
}

/* Existing restart button */
html body .main:has([id="cancel.cancelmsg"]) .buttonsbar {
  margin: 26px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

html body .main:has([id="cancel.cancelmsg"])
.buttonsbar :is(a, button, input[type="submit"], input[type="button"]) {
  display: inline-block !important;
  box-sizing: border-box !important;
  float: none !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 13px 26px !important;
  border: 1px solid #b90070 !important;
  border-radius: 7px !important;
  background: #b90070 !important;
  color: #ffffff !important;
  font: 700 14px/1.4 Arial, sans-serif !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

html body .main:has([id="cancel.cancelmsg"])
.buttonsbar :is(a, button) span {
  color: #ffffff !important;
}

html body .main:has([id="cancel.cancelmsg"])
.buttonsbar :is(a, button, input[type="submit"], input[type="button"]):hover {
  background: #940058 !important;
  border-color: #940058 !important;
}

html body .main:has([id="cancel.cancelmsg"])
.buttonsbar :is(a, button, input):focus-visible {
  outline: 3px solid #00a8e8 !important;
  outline-offset: 4px !important;
}

/* Mobile */
@media (max-width: 640px) {
  html body .main:has([id="cancel.cancelmsg"]) {
    width: calc(100% - 24px) !important;
    margin: 24px auto 36px !important;
    padding: 28px 20px !important;
  }

  html body .main:has([id="cancel.cancelmsg"]) .pagetitle {
    font-size: 23px !important;
  }
}