/* ============================================================
   OVERSIGNS - RESPONSIVE CSS - 2026-09-24
   FULL REPLACEMENT for the responsive CSS supplied in Pasted text(6).
   All rules are limited to screens 1024px wide or smaller.
   Desktop styling remains in Site Header > Additional CSS Content.
   Native PageDNA menu, cart and form controls are retained.
   ============================================================ */

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

  /* 1. MOBILE COLOR THEME */
  :root {
    --links-fa-color: #171a21;
    --links-fa-color-hover: #007da8;
    --header-bkgd-color: #ffffff;
    --header-link-bkgd-color: #ffffff;
    --links-txt-color: #171a21;
    --links-txt-color-hover: #007da8;
    --tab-blurb-text-color: #171a21;
    --custom-font: Arial, sans-serif;
  }

  /* 2. NATIVE MOBILE ICONS
     Preserve the supplied mappings: PageDNA uses the user control
     to open its mobile links menu and the bars control for categories.
     Keep icon codes escaped so they survive pasting into PageDNA. */
  .fa-shopping-basket,
  .fa-user {
    color: var(--links-fa-color);
  }
  .fa-shopping-basket:hover,
  .fa-user:hover {
    color: var(--links-fa-color-hover);
  }
  .fa-bars::before {
    content: "\f02b" !important;
  }
  .fa-user::before {
    content: "\f0c9" !important;
  }

  /* 3. HEADER - SCROLL WITH THE PAGE */
  #header-wrapper,
  #header_logo {
    background-color: var(--header-bkgd-color);
  }
  #header-wrapper,
  table.header,
  .header,
  #header_title,
  #header_title .burger,
  .burger,
  #mobile_cart {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }
  #header-wrapper {
    width: 100% !important;
    z-index: 50 !important;
  }
  #header_title .burger,
  .burger,
  #mobile_cart {
    z-index: 60 !important;
  }
  #mobile_cart .fa-shopping-basket,
  #mobile_cart .item_count {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }
  /* The existing open drawer and its backdrop cover the viewport. */
  #mobile_link_box,
  .exit_overlay {
    position: fixed !important;
  }

  /* 4. LINKS - RESTING TEXT IS DARK; INTERACTION USES CYAN */
  a,
  a:link,
  a:visited {
    color: var(--links-txt-color);
  }
  a:hover,
  a:focus {
    color: var(--links-txt-color-hover);
  }

  /* 5. CATALOG PREVIEW AND PRODUCT IMAGES */
  #lightbox-container-image-box,
  #lightbox-container-image-data-box {
    width: 90% !important;
    margin: 0 auto !important;
  }
  #lightbox-container-image-box {
    height: auto !important;
  }
  #lightbox-container-image-box img {
    width: 100% !important;
    height: auto;
  }
  #lightbox-container-image-data-box {
    padding: 0 !important;
  }
  #blurb-and-image img {
    max-width: 100%;
  }
  .item-search-block {
    display: flex !important;
  }

  /* 6. EXISTING CATEGORY / DEEP-LINK CARDS */
  #deep_link_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto;
  }
  .deep_links_holder {
    margin: 10px;
    width: 250px;
    max-width: calc(100% - 20px);
  }
  .deep_links img {
    max-width: 100%;
  }
  .deep_links img:hover {
    box-shadow: 0 20px 38px rgba(0,0,0,.16) !important;
    transform: translateY(-3px);
    transition-duration: .45s;
  }
  #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;
    text-align: center;
    margin: 0 auto !important;
  }
  .ind_para {
    font-family: var(--custom-font);
    color: var(--tab-blurb-text-color);
    margin: 0 !important;
  }
  .corp_divisions li {
    line-height: 2 !important;
  }

  /* 7. NATIVE CATALOG AND ARTWORK CONTROLS */
  .select-items #navTabs,
  #header-wrapper a#mobile_cart,
  #header-wrapper ul#mobile_xtra_links,
  #tab_responsive_tabs i#mobile_tab_closer,
  #item_details_view span#mobile_link_closer,
  .responsive_tabs-shell #submit_catalog_search,
  .detail_closer {
    color: #171a21;
  }
  .item_count {
    border-color: #171a21;
  }
  #mobile_form_show,
  #mobile_form_hide {
    color: #171a21;
    background: #e5e7eb;
    box-shadow: 2px 3px 4px rgba(0,0,0,.2);
  }
  .select-items .responsive_tabs div.off,
  .select-items .responsive_tabs div.on {
    max-width: 80%;
  }

  /* 8. MOBILE FOOTER - ALLOW CONTENT TO SET ITS HEIGHT */
  .footer_bottom_alt {
    box-sizing: border-box;
    height: auto;
    width: 100%;
    padding: 24px 16px;
    background-color: #f5f5f5;
    float: left;
  }
  .footer_bottom_alt_container {
    text-align: center;
    color: #171a21;
    margin-top: 0;
    font: 400 14px/1.5 Arial, sans-serif;
  }
  .footer_copy {
    padding-left: 2%;
    padding-right: 2%;
  }
}
/* END OVERSIGNS RESPONSIVE CSS */

/* OVERSIGNS: stack native product cards on phones */
@media only screen and (max-width: 700px) {
  html body:not(:has(.sw-v3)) .main:has(.select-items),
  html body:not(:has(.sw-v3)) .select-items {
    display: flow-root !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* PageDNA's actual card wrapper on this view */
  html body:not(:has(.sw-v3))
  .select-items :has(> .height-adjuster) {
    box-sizing: border-box !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    position: relative !important;
    width: min(100%, 620px) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 24px !important;
    overflow: visible !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .height-adjuster {
    box-sizing: border-box !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  html body:not(:has(.sw-v3)) .footer,
  html body:not(:has(.sw-v3)) .footer_bottom_alt {
    clear: both !important;
  }
}

/* OVERSIGNS / PageDNA mobile catalog polish
   Paste at the END of Responsive CSS. Desktop remains unchanged. */
@media only screen and (max-width: 700px) {
  /* The existing PageDNA catalog drawer; preserve native links and clicks. */
  html body #tab_responsive_tabs {
    box-sizing: border-box !important;
    position: fixed !important;
    top: 76px !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(86vw, 370px) !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100dvh - 76px) !important;
    padding: 18px 16px 30px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: #fff !important;
    box-shadow: 12px 0 30px rgba(9, 32, 45, .22) !important;
    z-index: 6100 !important;
  }

  /* PageDNA already renders every category and product link in these groups. */
  html body #tab_responsive_tabs > div[id^="tab_"] {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 0 12px !important;
    border-bottom: 1px solid #e2e8ee !important;
  }
  html body #tab_responsive_tabs .innertab-closed,
  html body #tab_responsive_tabs .innertab-opened {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body #tab_responsive_tabs > div[id^="tab_"] > dfn,
  html body #tab_responsive_tabs > div[id^="tab_"] > dfn a {
    display: block !important;
    width: 100% !important;
    margin: 0 0 5px !important;
    color: #007da8 !important;
    font: 800 15px/1.35 Arial, sans-serif !important;
    letter-spacing: .035em !important;
    text-decoration: none !important;
  }
  html body #tab_responsive_tabs .innertab-closed > div,
  html body #tab_responsive_tabs .innertab-opened > div {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body #tab_responsive_tabs .innertab-closed a,
  html body #tab_responsive_tabs .innertab-opened a {
    display: block !important;
    width: 100% !important;
    padding: 9px 12px !important;
    border-radius: 7px !important;
    color: #1b2730 !important;
    font: 500 14px/1.35 Arial, sans-serif !important;
    text-decoration: none !important;
    white-space: normal !important;
  }
  html body #tab_responsive_tabs .innertab-closed .on a,
  html body #tab_responsive_tabs .innertab-opened .on a {
    background: #e6f7fc !important;
    color: #006f95 !important;
    font-weight: 800 !important;
  }
  html body #tab_responsive_tabs .innertab-closed a:hover,
  html body #tab_responsive_tabs .innertab-opened a:hover {
    background: #eef8fb !important;
  }
  html body #tab_responsive_tabs #mobile_tab_closer {
    position: sticky !important;
    top: 0 !important;
    float: right !important;
    z-index: 2 !important;
    padding: 8px !important;
    background: white !important;
    color: #17212b !important;
    font-size: 24px !important;
  }

  /* Native account menu: Home, My Profile, Search Orders, Logout. */
  html body #mobile_link_box {
    box-sizing: border-box !important;
    position: fixed !important;
    top: 76px !important;
    right: auto !important;
    left: 12px !important;
    bottom: auto !important;
    width: min(320px, calc(100vw - 24px)) !important;
    height: auto !important;
    max-height: calc(100dvh - 88px) !important;
    padding: 10px !important;
    overflow-y: auto !important;
    background: #fff !important;
    border: 1px solid #d9e3ea !important;
    border-radius: 10px !important;
    box-shadow: 0 14px 34px rgba(9, 32, 45, .22) !important;
    z-index: 6100 !important;
  }
  html body #mobile_link_box a.mobile_link {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    background: transparent !important;
    border-radius: 7px !important;
    color: #192631 !important;
    font: 700 14px/1.35 Arial, sans-serif !important;
    text-align: left !important;
    text-decoration: none !important;
  }
  html body #mobile_link_box a.mobile_link:hover,
  html body #mobile_link_box a.mobile_link:focus {
    background: #e6f7fc !important;
    color: #006f95 !important;
  }

  /* Make the existing search control feel like part of the catalog. */
  html body .main .catalog .item-search-block {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: calc(100vw - 105px) !important;
    min-height: 42px !important;
    padding: 4px 9px !important;
    background: #fff !important;
    border: 1px solid #cbd9e2 !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 8px rgba(16, 38, 51, .05) !important;
  }
  html body .main .catalog .item-search-block:focus-within {
    border-color: #00a8e8 !important;
    box-shadow: 0 0 0 3px rgba(0, 168, 232, .15) !important;
  }
  html body .main .catalog .item-search-block input#searchfield_input {
    min-height: 32px !important;
    padding: 4px 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font: 400 14px Arial, sans-serif !important;
  }

  /* Product cards and readable descriptions. */
  html body .main-section:has(.select-items),
  html body .select-items,
  html body .select-items .stretchy_cols {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body .select-items .stretchy_cols {
    display: block !important;
    float: none !important;
    width: min(100%, 560px) !important;
    margin: 0 auto 24px !important;
  }
  html body .select-items .height-adjuster {
    box-sizing: border-box !important;
    float: none !important;
    width: calc(100% - 28px) !important;
    max-width: 530px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 22px !important;
    padding: 18px !important;
    background: #fff !important;
    border: 1px solid #dce5ec !important;
    border-top: 3px solid #00a8e8 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 22px rgba(16, 38, 51, .09) !important;
  }
  html body .select-items .height-adjuster .responsive-choose-info {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
    font: 400 14px/1.55 Arial, sans-serif !important;
    text-align: left !important;
  }
  html body .select-items .height-adjuster .responsive-choose-info * {
    max-height: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
  }
  html body .select-items .height-adjuster .responsive-longname,
  html body .select-items .height-adjuster .responsive-longname label {
    white-space: normal !important;
    font: 800 19px/1.22 Arial, sans-serif !important;
    text-align: center !important;
  }
  html body .select-items .height-adjuster .image-container img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 7px !important;
  }

  /* Remove the old floated footer behavior on catalog pages. */
  html body:has(.select-items) .footer_bottom_alt,
  html body:has(.select-items) .footnote {
    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 28px !important;
  }
  html body:has(.select-items) .footer_bottom_alt_container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 22px !important;
    text-align: center !important;
  }
}

/* Keep the PageDNA footer below all mobile product cards */
@media only screen and (max-width: 700px) {
  html body:has(.select-items) > .container {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
  }

  html body:has(.select-items) > .container > .ng-scope,
  html body:has(.select-items) .main-section {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body:has(.select-items) > .container > .ng-scope {
    flex: 1 0 auto !important;
  }

  html body:has(.select-items) > .container > .footer,
  html body:has(.select-items) > .container > .footnote {
    order: 2 !important;
    flex: none !important;
  }

  html body:has(.select-items) .footnote,
  html body:has(.select-items) .footer_bottom_alt,
  html body:has(.select-items) .footer_bottom_alt_container,
  html body:has(.select-items) .footer_copy {
    position: static !important;
    float: none !important;
    clear: both !important;
    transform: none !important;
    height: auto !important;
  }

  html body:has(.select-items) .footer_bottom_alt {
    width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 18px 16px !important;
  }
}

/* OVERSIGNS tablet logo sizing */
@media only screen and (min-width: 701px) and (max-width: 1024px) {
  html body #header_logo {
    box-sizing: border-box !important;
    width: 300px !important;
    min-width: 0 !important;
    max-width: 300px !important;
    height: 90px !important;
    max-height: 90px !important;
    padding: 0 14px !important;
    overflow: hidden !important;
    vertical-align: middle !important;
  }

  html body #header_logo img,
  html body #header_logo img.no_desktop,
  html body #header_logo img.no_mobile {
    box-sizing: border-box !important;
    width: min(270px, 31vw) !important;
    min-width: 0 !important;
    max-width: min(270px, 31vw) !important;
    height: auto !important;
    max-height: 82px !important;
    padding: 0 !important;
    object-fit: contain !important;
  }
}

/* OVERSIGNS tablet header alignment
   Paste AFTER OVERSIGNS_tablet_logo_fix.css in Responsive CSS. */
@media only screen and (min-width: 701px) and (max-width: 1024px) {
  html body #header-wrapper {
    box-sizing: border-box !important;
    position: relative !important;
    width: 100% !important;
    height: 84px !important;
    min-height: 84px !important;
    margin: 0 0 16px !important;
    background: #fff !important;
    border-bottom: 3px solid #00a8e8 !important;
  }
  html body #header-wrapper > table.header,
  html body #header-wrapper > table.header > tbody,
  html body #header-wrapper > table.header > tbody > tr {
    box-sizing: border-box !important;
    position: static !important;
    width: 100% !important;
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
  }
  html body #header_title {
    position: static !important;
    height: auto !important;
  }
  html body #header_logo {
    position: absolute !important;
    top: 15px !important;
    left: 86px !important;
    width: 280px !important;
    min-width: 0 !important;
    max-width: 280px !important;
    height: 56px !important;
    max-height: 56px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  html body #header_logo img {
    display: block !important;
    width: min(270px, 31vw) !important;
    max-width: min(270px, 31vw) !important;
    height: auto !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body #header_logo img.no_mobile {
    display: none !important;
  }
  html body #header_title .burger {
    position: absolute !important;
    top: 20px !important;
    left: 24px !important;
    right: auto !important;
    bottom: auto !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 70 !important;
  }
  html body #header-wrapper #mobile_cart {
    position: absolute !important;
    top: 19px !important;
    right: 24px !important;
    bottom: auto !important;
    left: auto !important;
    width: 43px !important;
    height: 46px !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 70 !important;
  }
  html body #mobile_cart .item_count {
    position: absolute !important;
    top: -5px !important;
    right: -7px !important;
    bottom: auto !important;
    left: auto !important;
  }

  /* Keep the existing PageDNA account links in a compact panel. */
  html body #mobile_link_box {
    box-sizing: border-box !important;
    position: fixed !important;
    top: 84px !important;
    left: 18px !important;
    right: auto !important;
    bottom: auto !important;
    width: 300px !important;
    height: auto !important;
    max-height: calc(100dvh - 100px) !important;
    padding: 9px !important;
    overflow-y: auto !important;
    background: #fff !important;
    border: 1px solid #d9e3ea !important;
    border-radius: 10px !important;
    box-shadow: 0 14px 34px rgba(9, 32, 45, .22) !important;
    z-index: 6100 !important;
  }
  html body #mobile_link_box a.mobile_link {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    background: transparent !important;
    border-radius: 7px !important;
    color: #192631 !important;
    font: 700 14px/1.35 Arial, sans-serif !important;
    text-align: left !important;
    text-decoration: none !important;
  }
  html body #mobile_link_box a.mobile_link:hover,
  html body #mobile_link_box a.mobile_link:focus {
    background: #e6f7fc !important;
    color: #006f95 !important;
  }
}

/* Move the category tabs below the tablet header */

@media only screen and (min-width: 701px) and (max-width: 1024px) {
  html body:has(.sw-v3) span:has(> .catalog-header-menu > ul.top-menu)
  > .catalog-header-menu {
    translate: 0 20px !important;
  }
}

/* ============================================================
   OVERSIGNS - responsive CMY finish - 2026-09-28
   Visual only; native PageDNA mobile controls keep their click targets.
   ============================================================ */
@media only screen and (max-width: 1024px) {
  html body #header-wrapper {
    border-bottom-color: #00A8E8 !important;
    box-shadow: inset 0 -3px 0 #00A8E8 !important;
  }
  /* PageDNA's .fa-user is the existing mobile account-menu control. */
  html body .fa-user::before {
    content: "\f2bd" !important;
    font-family: FontAwesome !important;
    font-size: 27px !important;
    font-weight: normal !important;
    line-height: 1 !important;
  }
  html body #mobile_link_box a.mobile_link:is(:hover, :focus-visible),
  html body #tab_responsive_tabs a:is(:hover, :focus-visible) {
    background-color: #FFFDD1 !important;
    color: #171a21 !important;
  }
  html body .select-items .height-adjuster {
    border-top-color: #00A8E8 !important;
  }
}

/* ============================================================
   OVERSIGNS - RESPONSIVE PROFESSIONAL POLISH
   2026-09-30

   Scoped to tablet / mobile.
   Preserves existing PageDNA navigation + responsive behavior.
   ============================================================ */


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


  /* =========================================================
     MY ACCOUNT
     ========================================================= */

  body:has(.main.profile)
  .main.profile {
    width: calc(100% - 28px) !important;

    margin: 24px auto 42px !important;
  }


  body:has(.main.profile)
  .main.profile::before {
    margin-bottom: 20px !important;

    font-size: 28px !important;
  }


  body:has(.main.profile)
  .profile-selection {
    padding: 20px !important;
  }


  body:has(.main.profile)
  .profile-selection
  table > tbody {
    display: block !important;
  }


  body:has(.main.profile)
  .profile-selection
  table > tbody > tr {
    width: 100% !important;

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

    border: 0 !important;
    border-bottom: 1px solid #e8ecef !important;
  }


  body:has(.main.profile)
  .profile-selection
  table > tbody > tr:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;

    border-bottom: 0 !important;
  }


  /* =========================================================
     SIZE + QUANTITY / UPLOAD ARTWORK
     Existing CSS already stacks these pages;
     this only improves spacing.
     ========================================================= */

  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: 20px !important;
  }


  /* Preview comes below the upload form cleanly */
  form[name="f"][action="item_form.cgi"]
  table.imprint-splitview
  td.right-side {
    min-height: 0 !important;
  }


  /* =========================================================
     PRODUCT CARDS
     ========================================================= */

  html body
  .select-items
  .height-adjuster {
    padding: 17px !important;

    border-radius: 9px !important;
  }


  html body
  .select-items
  .height-adjuster
  .responsive-choose-info {
    font-size: 13px !important;

    line-height: 1.5 !important;
  }

}



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


  /* =========================================================
     MY ACCOUNT - PHONE
     ========================================================= */

  body:has(.main.profile)
  .main.profile {
    width: calc(100% - 20px) !important;

    margin-top: 18px !important;
  }


  body:has(.main.profile)
  .main.profile::before {
    font-size: 25px !important;
  }


  body:has(.main.profile)
  .profile-selection {
    padding: 16px !important;

    border-radius: 8px !important;
  }


  body:has(.main.profile)
  .profile
  .profile-container
  table:last-of-type {
    width: 100% !important;

    margin: 8px 0 18px !important;
  }


  body:has(.main.profile)
  .profile
  .profile-container
  table:last-of-type
  :is(td, th) {
    padding: 8px !important;

    font-size: 12px !important;
  }


  /* =========================================================
     UPLOAD / CONFIGURATOR - PHONE
     ========================================================= */

  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: 16px !important;

    border-radius: 8px !important;
  }


  form[name="f"][action="item_form.cgi"]
  table.imprint-splitview
  td.left-side::before {
    font-size: 21px !important;
  }


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

    font-size: 16px !important;
  }


  /* Prevent iOS-style tiny form controls / zoom behavior */
  form[name="f"][action="item_form.cgi"]
  #all_options_container
  :is(
    input[type="text"],
    input[type="number"],
    select
  ) {
    font-size: 16px !important;
  }

}


/* ============================================================
   END RESPONSIVE PROFESSIONAL POLISH
   ============================================================ */

/* ============================================================
   OVERSIGNS - MOBILE COLOR + THUMBNAIL FINAL OVERRIDE
   PHONE ONLY - 2026-10-05
   Preserves PageDNA mobile navigation and product functionality.
   ============================================================ */

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

  :root {
    --os-mobile-cyan: #00a8e8;
    --os-mobile-cyan-dark: #007da8;
    --os-mobile-magenta: #b90070;
    --os-mobile-magenta-dark: #940058;
    --os-mobile-charcoal: #171a21;
    --os-mobile-muted: #59616c;
    --os-mobile-shell: #f5f7f9;
    --os-mobile-border: #dce4e9;
  }

  html body {
    background: var(--os-mobile-shell) !important;
    color: var(--os-mobile-charcoal) !important;
  }

  html body h1,
  html body h2,
  html body h3,
  html body h4,
  html body .pagetitle,
  html body .responsive-longname,
  html body .longname {
    color: var(--os-mobile-charcoal) !important;
  }

  html body p,
  html body .pageinstructions,
  html body .field-note {
    color: var(--os-mobile-muted) !important;
  }

  html body #header-wrapper {
    background: #ffffff !important;
    border-bottom-color: var(--os-mobile-cyan) !important;
    box-shadow: inset 0 -3px 0 var(--os-mobile-cyan) !important;
  }

  html body .main .catalog .item-search-block {
    background: #ffffff !important;
    border-color: #cbd9e2 !important;
    box-shadow: 0 3px 10px rgba(23,26,33,.05) !important;
  }

  html body .main .catalog .item-search-block:focus-within {
    border-color: var(--os-mobile-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0,168,232,.13) !important;
  }

  html body .main .catalog .item-search-block input#searchfield_input {
    color: var(--os-mobile-charcoal) !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .height-adjuster {
    background: #ffffff !important;
    border: 1px solid var(--os-mobile-border) !important;
    border-top: 4px solid var(--os-mobile-cyan) !important;
    box-shadow: 0 8px 22px rgba(23,26,33,.07) !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .height-adjuster .responsive-longname,
  html body:not(:has(.sw-v3))
  .select-items .height-adjuster .responsive-longname label {
    color: var(--os-mobile-charcoal) !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .os-product-specs {
    background: #ffffff !important;
    border: 1px solid var(--os-mobile-border) !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .os-product-specs .os-product-specs__overview {
    background: #33122e !important;
    color: #ffffff !important;
    border: 0 !important;
    border-left: 5px solid var(--os-mobile-magenta) !important;
    border-radius: 0 !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .os-product-specs .os-product-specs__overview
  :is(h1,h2,h3,h4,h5,h6,p,strong,b,span,a) {
    color: #ffffff !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .os-product-specs__body {
    background: #ffffff !important;
    color: var(--os-mobile-charcoal) !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .os-product-specs__features {
    color: #39424c !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .os-product-specs__features li::marker {
    color: var(--os-mobile-cyan) !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .os-product-specs table {
    border-color: var(--os-mobile-border) !important;
    background: #ffffff !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .os-product-specs table th {
    background: #edf3f6 !important;
    color: var(--os-mobile-charcoal) !important;
    border-color: var(--os-mobile-border) !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .os-product-specs table td {
    background: #ffffff !important;
    color: #39424c !important;
    border-color: #edf1f4 !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .os-product-specs__resource {
    background: #ffffff !important;
    color: var(--os-mobile-magenta) !important;
    border: 1px solid var(--os-mobile-border) !important;
    border-top: 3px solid var(--os-mobile-cyan) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(23,26,33,.06) !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .os-product-specs__resource span {
    color: #66717b !important;
  }

  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: var(--os-mobile-cyan) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(0,168,232,.12) !important;
  }

  html body
  :is(
    button,
    input[type="submit"],
    input[type="button"],
    a.button
  ) {
    background: var(--os-mobile-magenta) !important;
    color: #ffffff !important;
    border-color: var(--os-mobile-magenta) !important;
    border-radius: 6px !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,
  html body
  :is(
    button,
    input[type="submit"],
    input[type="button"],
    a.button
  ):focus {
    background: var(--os-mobile-magenta-dark) !important;
    border-color: var(--os-mobile-magenta-dark) !important;
    color: #ffffff !important;
  }

  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:not(:has(.sw-v3))
  .select-items .image-container {
    overflow: hidden !important;
  }

  html body:not(:has(.sw-v3))
  .select-items .image-container img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 7px !important;
  }

  html body:has(.sw-v3) .sw-v3-category-section {
    background: #ffffff !important;
  }

  html body:has(.sw-v3) .sw-v3-materials-section {
    background: #f0f4f6 !important;
    border-top: 3px solid var(--os-mobile-cyan) !important;
  }

  html body:has(.sw-v3)
  .sw-v3-materials-section h2,
  html body:has(.sw-v3)
  .sw-v3-materials-title {
    color: var(--os-mobile-charcoal) !important;
  }

  html body:has(.sw-v3) .sw-v3-material {
    background: #ffffff !important;
    border: 1px solid var(--os-mobile-border) !important;
  }

  html body:has(.sw-v3) .sw-v3-material__title {
    color: var(--os-mobile-charcoal) !important;
  }

  html body:has(.sw-v3) .sw-v3-material__description {
    color: var(--os-mobile-muted) !important;
  }

  html body:has(.sw-v3)
  .sw-v3-material
  :is(a.button, button, input[type="button"], input[type="submit"]) {
    background: var(--os-mobile-magenta) !important;
    color: #ffffff !important;
    border-color: var(--os-mobile-magenta) !important;
  }

  html body .footer_bottom_alt,
  html body #footer {
    background: #18232d !important;
    color: #ffffff !important;
    border-top: 3px solid var(--os-mobile-cyan) !important;
  }

  html body .footer_bottom_alt_container,
  html body .footer_copy,
  html body #footer,
  html body #footer * {
    color: #ffffff !important;
  }
}

/* ============================================================
   END MOBILE COLOR + THUMBNAIL FINAL OVERRIDE
   ============================================================ */
   
   /* ============================================================
   OVERSIGNS - MOBILE COMPLETION PASS V2
   Fixes remaining mobile inconsistencies
   2026-10-05
   ============================================================ */

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

  /* =========================================================
     1. FORCE MOBILE PAGE WIDTH SAFETY
     ========================================================= */

  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body *,
  html body *::before,
  html body *::after {
    box-sizing: border-box !important;
  }


  /* =========================================================
     2. HOMEPAGE MATERIAL BUTTONS
     Kill remaining legacy orange
     ========================================================= */

  html body:has(.sw-v3)
  .sw-v3-material
  a,

  html body:has(.sw-v3)
  .sw-v3-material
  .button,

  html body:has(.sw-v3)
  .sw-v3-material
  button,

  html body:has(.sw-v3)
  .sw-v3-material
  input[type="button"],

  html body:has(.sw-v3)
  .sw-v3-material
  input[type="submit"] {
    background: #b90070 !important;
    background-image: none !important;

    color: #ffffff !important;

    border: 1px solid #b90070 !important;
    border-radius: 6px !important;

    box-shadow: none !important;

    text-shadow: none !important;
  }

  html body:has(.sw-v3)
  .sw-v3-material
  a:hover,

  html body:has(.sw-v3)
  .sw-v3-material
  .button:hover,

  html body:has(.sw-v3)
  .sw-v3-material
  button:hover {
    background: #940058 !important;
    border-color: #940058 !important;
    color: #ffffff !important;
  }


  /* =========================================================
     3. PRODUCT IMAGE OVERRIDES
     Broader selectors so mobile catches the same desktop assets
     ========================================================= */

  /* ECONO */
  html body:not(:has(.sw-v3))
  .select-items
  :has(.os-product-specs[aria-label*="Econo" i])
  .image-container img {
    content: url("../con/Econo_Vinyl bold.png") !important;
  }

  /* CONTROLTAC */
  html body:not(:has(.sw-v3))
  .select-items
  :has(.os-product-specs[aria-label*="Controltac" i])
  .image-container img {
    content: url("../con/3M Controltac Bold Thumbnail.png") !important;
  }

  /* LINTEC */
  html body:not(:has(.sw-v3))
  .select-items
  :has(.os-product-specs[aria-label*="Lintec" i])
  .image-container img {
    content: url("../con/Lintec_Clear_White_Ink bold.png") !important;
  }

  /* PERFORATED */
  html body:not(:has(.sw-v3))
  .select-items
  :has(.os-product-specs[aria-label*="Perforated" i])
  .image-container img {
    content: url("../con/Perforated_Vinyl_60_40 bold.png") !important;
  }

  /* COROPLAST */
  html body:not(:has(.sw-v3))
  .select-items
  :has(.os-product-specs[aria-label*="Coroplast" i])
  .image-container img {
    content: url("../con/Open House Coroplast Yard Sign-3.png") !important;
  }

  /* PVC / SINTRA */
  html body:not(:has(.sw-v3))
  .select-items
  :has(.os-product-specs[aria-label*="PVC" i])
  .image-container img,

  html body:not(:has(.sw-v3))
  .select-items
  :has(.os-product-specs[aria-label*="Sintra" i])
  .image-container img {
    content: url("../con/Cobalt form PVC gallery sign-2.png") !important;
  }

  /* STYRENE */
  html body:not(:has(.sw-v3))
  .select-items
  :has(.os-product-specs[aria-label*="Styrene" i])
  .image-container img {
    content: url("../con/Cobalt Cold Brew Styrene Sign-5.png") !important;
  }

  /* ACM */
  html body:not(:has(.sw-v3))
  .select-items
  :has(.os-product-specs[aria-label*="Aluminum" i])
  .image-container img {
    content: url("../con/Aluminum_Composite_3mm bold.png") !important;
  }

  /* 13oz */
  html body:not(:has(.sw-v3))
  .select-items
  :has(.os-product-specs[aria-label*="13oz" i])
  .image-container img {
    content: url("../con/Vinyl_Banner_13oz bold.png") !important;
  }

  /* 18oz / MESH */
  html body:not(:has(.sw-v3))
  .select-items
  :has(.os-product-specs[aria-label*="18oz" i])
  .image-container img,

  html body:not(:has(.sw-v3))
  .select-items
  :has(.os-product-specs[aria-label*="Mesh" i])
  .image-container img {
    content: url("../con/Game On Mesh Sports Banner-1.png") !important;
  }


  /* =========================================================
     4. PRODUCT SPEC CARD POLISH
     ========================================================= */

  html body:not(:has(.sw-v3))
  .os-product-specs {
    margin-top: 16px !important;

    background: #ffffff !important;

    border: 1px solid #dce4e9 !important;
    border-radius: 9px !important;

    overflow: hidden !important;
  }


  html body:not(:has(.sw-v3))
  .os-product-specs__overview {
    padding: 18px 16px !important;

    background: #33122e !important;
    color: #ffffff !important;

    border-left: 5px solid #b90070 !important;
  }


  html body:not(:has(.sw-v3))
  .os-product-specs__overview
  :is(h1,h2,h3,h4,h5,h6,p,strong,b,span) {
    color: #ffffff !important;
  }


  html body:not(:has(.sw-v3))
  .os-product-specs__body {
    padding: 18px 14px 20px !important;

    background: #ffffff !important;
  }


  /* =========================================================
     5. SPEC TABLE - BETTER PHONE WIDTH
     ========================================================= */

  html body:not(:has(.sw-v3))
  .os-product-specs table {
    width: 100% !important;

    margin: 0 0 18px !important;

    table-layout: fixed !important;
  }


  html body:not(:has(.sw-v3))
  .os-product-specs table tr {
    display: grid !important;

    grid-template-columns: 43% 57% !important;
  }


  html body:not(:has(.sw-v3))
  .os-product-specs table th,
  html body:not(:has(.sw-v3))
  .os-product-specs table td {
    width: auto !important;

    padding: 9px 8px !important;

    font-size: 11px !important;
    line-height: 1.35 !important;

    overflow-wrap: anywhere !important;
  }


  /* =========================================================
     6. MANUFACTURER BULLETIN
     Make it feel like an actual resource button
     ========================================================= */

  html body:not(:has(.sw-v3))
  .os-product-specs__resources {
    margin-top: 18px !important;
  }


  html body:not(:has(.sw-v3))
  .os-product-specs__resource {
    display: block !important;

    width: 100% !important;

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

    background: #ffffff !important;

    color: #b90070 !important;

    border: 1px solid #dce4e9 !important;
    border-top: 3px solid #00a8e8 !important;
    border-radius: 7px !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;

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


  html body:not(:has(.sw-v3))
  .os-product-specs__resource span {
    display: block !important;

    margin-top: 5px !important;

    color: #66717b !important;

    font-size: 10px !important;
    font-weight: 600 !important;
  }


  /* =========================================================
     7. CONFIGURE ITEM / UPLOAD PAGE
     ========================================================= */

  html body:has(form[name="f"][action="item_form.cgi"])
  .main {
    width: 100% !important;
    max-width: 100% !important;

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


  html body:has(form[name="f"][action="item_form.cgi"])
  #estimate-item-container,

  html body:has(form[name="f"][action="item_form.cgi"])
  #all_options_container,

  html body:has(form[name="f"][action="item_form.cgi"])
  #blurb-and-image {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto 14px !important;
  }


  /* =========================================================
     8. CONFIGURATOR INPUTS
     ========================================================= */

  html body:has(form[name="f"][action="item_form.cgi"])
  :is(
    input[type="text"],
    input[type="number"],
    input[type="email"],
    select,
    textarea
  ) {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 44px !important;

    padding: 8px 10px !important;

    background: #ffffff !important;

    border: 1px solid #cdd6de !important;
    border-radius: 6px !important;

    font-size: 16px !important;
  }


  /* =========================================================
     9. PREVIEW AREA
     Stop giant desktop preview from owning the phone
     ========================================================= */

  html body:has(form[name="f"][action="item_form.cgi"])
  table.imprint-splitview,

  html body:has(form[name="f"][action="item_form.cgi"])
  table.imprint-splitview tbody,

  html body:has(form[name="f"][action="item_form.cgi"])
  table.imprint-splitview tr {
    display: block !important;

    width: 100% !important;
  }


  html body:has(form[name="f"][action="item_form.cgi"])
  table.imprint-splitview td.left-side,

  html body:has(form[name="f"][action="item_form.cgi"])
  table.imprint-splitview td.right-side {
    display: block !important;

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

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

    background: #ffffff !important;

    border: 1px solid #dce4e9 !important;
    border-top: 3px solid #00a8e8 !important;
    border-radius: 8px !important;
  }


  /* PREVIEW BOX */
  html body:has(form[name="f"][action="item_form.cgi"])
  td.right-side
  :is(
    iframe,
    canvas,
    img,
    .preview,
    .previewcell,
    .proof_preview,
    .imprint-preview
  ) {
    max-width: 100% !important;
    height: auto !important;

    min-height: 0 !important;
  }


  html body:has(form[name="f"][action="item_form.cgi"])
  td.right-side iframe {
    width: 100% !important;
    height: min(65vh, 520px) !important;
  }


  /* =========================================================
     10. CONFIGURE BUTTONS
     ========================================================= */

  html body:has(form[name="f"][action="item_form.cgi"])
  .buttonsbar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;

    gap: 8px !important;

    width: 100% !important;

    margin: 14px auto !important;
  }


  html body:has(form[name="f"][action="item_form.cgi"])
  .buttonsbar
  :is(
    button,
    input[type="button"],
    input[type="submit"],
    a.button
  ) {
    min-height: 42px !important;

    padding: 0 16px !important;

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

    border: 1px solid #b90070 !important;
    border-radius: 6px !important;

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


  /* =========================================================
     11. SMALL PRODUCT / CONFIG TITLE
     ========================================================= */

  html body:has(form[name="f"][action="item_form.cgi"])
  .pagetitle,

  html body:has(form[name="f"][action="item_form.cgi"])
  #curr_item_name {
    color: #171a21 !important;

    font-size: 20px !important;
    font-weight: 800 !important;

    text-align: center !important;
  }

}

/* ============================================================
   OVERSIGNS - MOBILE FINAL BRAND PASS V3
   2026-10-05
   FINAL COLOR / SPACING CLEANUP
   ============================================================ */

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

  /* =========================================================
     1. REMOVE REMAINING LEGACY ORANGE BUTTONS
     ========================================================= */

  html body
  :is(
    button,
    input[type="button"],
    input[type="submit"],
    a.button,
    .button
  ) {
    background: #b90070 !important;
    background-image: none !important;

    color: #ffffff !important;

    border-color: #b90070 !important;

    text-shadow: none !important;
  }

  html body
  :is(
    button,
    input[type="button"],
    input[type="submit"],
    a.button,
    .button
  ):hover,
  html body
  :is(
    button,
    input[type="button"],
    input[type="submit"],
    a.button,
    .button
  ):focus {
    background: #940058 !important;
    background-image: none !important;

    color: #ffffff !important;

    border-color: #940058 !important;
  }


  /* HOMEPAGE MATERIAL BUTTONS - EXTRA SPECIFIC */
  html body:has(.sw-v3)
  .sw-v3-material
  :is(a, a.button, .button, button, input[type="button"], input[type="submit"]) {
    background: #b90070 !important;
    background-image: none !important;

    color: #ffffff !important;

    border: 1px solid #b90070 !important;
    border-radius: 6px !important;

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


  /* =========================================================
     2. SEARCH - BRING INTO BRAND SYSTEM
     ========================================================= */

  html body .main .catalog .item-search-block {
    background: #ffffff !important;

    border: 1px solid #d5dde3 !important;

    box-shadow: 0 3px 10px rgba(23,26,33,.05) !important;
  }

  html body .main .catalog .item-search-block:focus-within {
    border-color: #00a8e8 !important;

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

  html body .main .catalog
  .item-search-block
  #submit_catalog_search {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: #007da8 !important;
  }

  html body .main .catalog
  .item-search-block
  #submit_catalog_search::before {
    color: #007da8 !important;
  }


  /* =========================================================
     3. HOMEPAGE - CLEANER MOBILE RHYTHM
     ========================================================= */

  html body:has(.sw-v3) .sw-v3-category-section {
    padding-top: 18px !important;
    padding-bottom: 22px !important;

    background: #ffffff !important;
  }

  html body:has(.sw-v3) .sw-v3-category-grid {
    gap: 12px !important;
  }

  html body:has(.sw-v3)
  .sw-v3-category-grid > :nth-child(-n+3) {
    border: 1px solid #e0e6ea !important;
    border-radius: 9px !important;

    box-shadow: 0 5px 14px rgba(23,26,33,.06) !important;
  }


  /* POPULAR MATERIALS */
  html body:has(.sw-v3) .sw-v3-materials-section {
    padding-top: 22px !important;
    padding-bottom: 28px !important;

    background: #f1f5f7 !important;

    border-top: 3px solid #00a8e8 !important;
  }

  html body:has(.sw-v3) .sw-v3-materials {
    gap: 12px !important;
  }

  html body:has(.sw-v3) .sw-v3-material {
    background: #ffffff !important;

    border: 1px solid #dce4e9 !important;
    border-radius: 9px !important;

    box-shadow: 0 5px 14px rgba(23,26,33,.07) !important;
  }


  /* =========================================================
     4. PRODUCT CARD SPACING
     ========================================================= */

  html body:not(:has(.sw-v3))
  .select-items .height-adjuster {
    padding: 16px !important;

    border-radius: 9px !important;

    box-shadow: 0 6px 18px rgba(23,26,33,.06) !important;
  }


  html body:not(:has(.sw-v3))
  .select-items .image-container {
    margin-bottom: 12px !important;
  }


  html body:not(:has(.sw-v3))
  .select-items .responsive-longname,
  html body:not(:has(.sw-v3))
  .select-items .responsive-longname label {
    margin-bottom: 8px !important;

    color: #171a21 !important;

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


  /* =========================================================
     5. PRODUCT SPEC CONTENT
     ========================================================= */

  html body:not(:has(.sw-v3))
  .os-product-specs__body {
    padding: 16px 13px 18px !important;
  }

  html body:not(:has(.sw-v3))
  .os-product-specs__features {
    margin-bottom: 18px !important;
  }

  html body:not(:has(.sw-v3))
  .os-product-specs__features h2,

  html body:not(:has(.sw-v3))
  .os-product-specs__grid h2,

  html body:not(:has(.sw-v3))
  .os-product-specs__resources h2 {
    margin: 0 0 10px !important;

    color: #171a21 !important;

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


  html body:not(:has(.sw-v3))
  .os-product-specs__features ul {
    margin-bottom: 16px !important;
  }

  html body:not(:has(.sw-v3))
  .os-product-specs__features li {
    margin-bottom: 6px !important;

    color: #39424c !important;

    line-height: 1.4 !important;
  }


  /* =========================================================
     6. SPEC TABLE - CLEANER
     ========================================================= */

  html body:not(:has(.sw-v3))
  .os-product-specs table {
    margin-bottom: 18px !important;

    border: 1px solid #dce4e9 !important;
    border-radius: 7px !important;
  }

  html body:not(:has(.sw-v3))
  .os-product-specs table th {
    background: #eef3f6 !important;

    color: #171a21 !important;

    font-weight: 800 !important;
  }

  html body:not(:has(.sw-v3))
  .os-product-specs table td {
    background: #ffffff !important;

    color: #39424c !important;
  }

  html body:not(:has(.sw-v3))
  .os-product-specs table th,
  html body:not(:has(.sw-v3))
  .os-product-specs table td {
    padding: 9px 8px !important;

    font-size: 11px !important;
  }


  /* =========================================================
     7. MANUFACTURER RESOURCE
     ========================================================= */

  html body:not(:has(.sw-v3))
  .os-product-specs__resources {
    margin-top: 22px !important;
    padding-top: 4px !important;
  }

  html body:not(:has(.sw-v3))
  .os-product-specs__resource {
    padding: 14px 12px !important;

    background: #ffffff !important;

    border: 1px solid #dce4e9 !important;
    border-top: 3px solid #00a8e8 !important;
    border-radius: 8px !important;

    box-shadow: 0 4px 12px rgba(23,26,33,.06) !important;
  }

  html body:not(:has(.sw-v3))
  .os-product-specs__resource:hover {
    background: #fff7fb !important;

    border-top-color: #b90070 !important;
  }


  /* =========================================================
     8. CONFIGURATOR / FORM PAGE CLEANUP
     ========================================================= */

  html body:has(form[name="f"][action="item_form.cgi"])
  #estimate-item-container,

  html body:has(form[name="f"][action="item_form.cgi"])
  #all_options_container,

  html body:has(form[name="f"][action="item_form.cgi"])
  table.imprint-splitview td.left-side,

  html body:has(form[name="f"][action="item_form.cgi"])
  table.imprint-splitview td.right-side {
    background: #ffffff !important;

    border: 1px solid #dce4e9 !important;
    border-top: 3px solid #00a8e8 !important;
    border-radius: 8px !important;

    box-shadow: 0 5px 14px rgba(23,26,33,.05) !important;
  }


  /* INPUTS */
  html body:has(form[name="f"][action="item_form.cgi"])
  :is(
    input[type="text"],
    input[type="email"],
    input[type="number"],
    select,
    textarea
  ) {
    background: #ffffff !important;

    color: #27313a !important;

    border: 1px solid #cdd6de !important;
    border-radius: 6px !important;
  }


  /* =========================================================
     9. FOOTER / LOWER PAGE SPACE
     ========================================================= */

  html body .footer_bottom_alt,
  html body #footer {
    margin-top: 24px !important;

    padding-top: 18px !important;
    padding-bottom: 18px !important;

    background: #18232d !important;

    color: #ffffff !important;

    border-top: 3px solid #00a8e8 !important;
  }

  html body .footer_bottom_alt_container,
  html body .footer_copy,
  html body #footer,
  html body #footer * {
    color: #ffffff !important;
  }


  /* =========================================================
     10. NO STRAY YELLOW / ORANGE MOBILE UI
     Keep yellow only as logo/accent artwork
     ========================================================= */

  html body
  :is(
    .form-body td.label,
    label.label
  ) {
    background: #eef3f6 !important;

    color: #171a21 !important;
  }

}

/* ============================================================
   OVERSIGNS - MOBILE NAV + ORANGE CLEANUP
   FINAL TARGETED FIX
   2026-10-05
   ============================================================ */

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

  /* =========================================================
     1. REMOVE OLD FLOATING CATEGORY NAV ON PHONE
     Mobile already has native menu controls.
     ========================================================= */

  html body .catalog-header-menu,
  html body .catalog-header-menu.global-catalog-menu {
    display: none !important;

    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;
    translate: none !important;
  }


  /* =========================================================
     2. FORCE POPULAR MATERIAL ACTIONS TO MAGENTA
     Exact class used by these cards.
     ========================================================= */

  html body .sw-v3 .sw-v3-material__action {
    background: #b90070 !important;
    background-color: #b90070 !important;
    background-image: none !important;

    color: #ffffff !important;

    border-color: #b90070 !important;

    text-shadow: none !important;
  }

  html body .sw-v3-material:hover .sw-v3-material__action,
  html body .sw-v3-material:focus-within .sw-v3-material__action {
    background: #940058 !important;
    background-color: #940058 !important;

    color: #ffffff !important;

    border-color: #940058 !important;
  }


  /* =========================================================
     3. VIEW ALL MATERIALS LINK
     Keep as a lightweight text action.
     ========================================================= */

  html body .sw-v3-section__link {
    color: #b90070 !important;

    background: transparent !important;

    border: 0 !important;

    font-weight: 700 !important;
  }

  html body .sw-v3-section__link:hover {
    color: #940058 !important;
  }

}

/* ============================================================
   OVERSIGNS - MOBILE POPULAR MATERIAL THUMBNAIL FIX
   Keep approved desktop artwork - fix mobile cropping only
   2026-10-05
   ============================================================ */

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

  /* Keep two product cards across the screen,
     but stack each card's artwork above its information. */
  html body:has(.sw-v3) .sw-v3-material {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid #dce4e9 !important;
    border-radius: 9px !important;
  }


  /* THUMBNAIL AREA */
  html body:has(.sw-v3) .sw-v3-material__image {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;

    aspect-ratio: 4 / 3 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    border-radius: 0 !important;
  }


  /* If PageDNA renders an actual IMG inside the thumbnail,
     make it follow the same desktop artwork cleanly. */
  html body:has(.sw-v3)
  .sw-v3-material__image img {
    display: block !important;

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

    aspect-ratio: 4 / 3 !important;

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

    margin: 0 !important;
  }


  /* PRODUCT INFO BELOW IMAGE */
  html body:has(.sw-v3) .sw-v3-material__body {
    display: flex !important;
    flex-direction: column !important;

    min-height: 145px !important;

    padding: 12px 10px 11px !important;

    text-align: center !important;
  }


  html body:has(.sw-v3)
  .sw-v3-material__body h3 {
    margin: 0 0 6px !important;

    color: #171a21 !important;

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


  html body:has(.sw-v3)
  .sw-v3-material__body p {
    margin: 0 0 10px !important;

    color: #59616c !important;

    font-size: 11px !important;
    line-height: 1.4 !important;
  }


  /* KEEP BUTTONS ALIGNED AT BOTTOM */
  html body:has(.sw-v3)
  .sw-v3-material__action {
    margin-top: auto !important;

    width: 100% !important;
    min-height: 36px !important;

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

    border-radius: 6px !important;

    text-align: center !important;
  }

}

/* ============================================================
   OVERSIGNS - MOBILE POPULAR MATERIALS IMAGE OVERRIDE
   EXACT DESKTOP THUMBNAILS
   2026-10-05
   ============================================================ */

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

  /* =========================================================
     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;
  }


  /* =========================================================
     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;
  }


  /* =========================================================
     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;
  }


  /* =========================================================
     CONSISTENT MOBILE IMAGE PRESENTATION
     ========================================================= */

  html body:has(.sw-v3)
  .sw-v3-material__image {
    width: 100% !important;

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

    aspect-ratio: 4 / 3 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

}

/* ============================================================
   OVERSIGNS - MOBILE SHOP BY CATEGORY
   USE FULL CATEGORY BANNER ARTWORK
   2026-10-05
   ============================================================ */

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

  /* ONE WIDE CATEGORY CARD PER ROW */
  html body .sw-v3-category-grid {
    width: calc(100% - 24px) !important;
    max-width: 560px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }


  /* MATCH THE ACTUAL BANNER RATIO */
  html body .sw-v3-category-grid > :nth-child(-n+3) {
    width: 100% !important;
    max-width: 100% !important;

    aspect-ratio: 2048 / 682 !important;

    margin: 0 !important;

    background: #000000 !important;

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

    overflow: hidden !important;

    box-shadow: 0 5px 14px rgba(23,26,33,.08) !important;
  }


  /* FULL BANNER - NO CROPPING */
  html body .sw-v3-category-grid > :nth-child(-n+3)::after {
    inset: 0 !important;

    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    border-radius: 10px !important;
  }


  /* ADHESIVE */
  html body .sw-v3-category-grid > :nth-child(1)::after {
    background-image:
      url("../con/OVERSIGNS ADHESIVES BANNER.png") !important;
  }


  /* BOARDS */
  html body .sw-v3-category-grid > :nth-child(2)::after {
    background-image:
      url("../con/OVERSIGNS BOARDS BANNER.png") !important;
  }


  /* BANNERS */
  html body .sw-v3-category-grid > :nth-child(3)::after {
    background-image:
      url("../con/OVERSIGNS BANNERS.png") !important;
  }


  /* HIDE OLD CATEGORY TEXT
     banner artwork already contains the titles */
  html body .sw-v3-category-grid > :nth-child(-n+3)
  .sw-v3-category__label {
    opacity: 0 !important;
  }

}

/* ============================================================
   OVERSIGNS - MOBILE SHOP BY CATEGORY
   DIRECT BANNER BACKGROUND FIX
   2026-10-05
   ============================================================ */

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

  /* =========================================================
     GRID
     ========================================================= */

  html body .sw-v3-category-grid {
    width: calc(100% - 24px) !important;
    max-width: 560px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }


  /* =========================================================
     CARDS
     ========================================================= */

  html body .sw-v3-category-grid > :nth-child(-n+3) {
    width: 100% !important;
    max-width: 100% !important;

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

    aspect-ratio: 2048 / 682 !important;

    margin: 0 auto !important;

    background-color: #111111 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

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

    overflow: hidden !important;

    box-shadow: 0 5px 14px rgba(23,26,33,.08) !important;
  }


  /* =========================================================
     DISABLE OLD CATEGORY ARTWORK PSEUDO ELEMENT
     ========================================================= */

  html body .sw-v3-category-grid > :nth-child(-n+3)::after {
    content: none !important;

    display: none !important;

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


  /* =========================================================
     EXACT MOBILE BANNERS
     ========================================================= */

  html body .sw-v3-category-grid > :nth-child(1) {
    background-image:
      url("../con/OVERSIGNS ADHESIVES BANNER.png") !important;
  }

  html body .sw-v3-category-grid > :nth-child(2) {
    background-image:
      url("../con/OVERSIGNS BOARDS BANNER.png") !important;
  }

  html body .sw-v3-category-grid > :nth-child(3) {
    background-image:
      url("../con/OVERSIGNS BANNERS.png") !important;
  }


  /* Artwork already includes the category title */
  html body .sw-v3-category-grid > :nth-child(-n+3)
  .sw-v3-category__label {
    opacity: 0 !important;
  }

}

/* ============================================================
   OVERSIGNS - MOBILE SHOP BY CATEGORY
   DIRECT BANNER BACKGROUND FIX
   2026-10-05
   ============================================================ */

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

  /* =========================================================
     GRID
     ========================================================= */

  html body .sw-v3-category-grid {
    width: calc(100% - 24px) !important;
    max-width: 560px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }


  /* =========================================================
     CARDS
     ========================================================= */

  html body .sw-v3-category-grid > :nth-child(-n+3) {
    width: 100% !important;
    max-width: 100% !important;

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

    aspect-ratio: 2048 / 682 !important;

    margin: 0 auto !important;

    background-color: #111111 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

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

    overflow: hidden !important;

    box-shadow: 0 5px 14px rgba(23,26,33,.08) !important;
  }


  /* =========================================================
     DISABLE OLD CATEGORY ARTWORK PSEUDO ELEMENT
     ========================================================= */

  html body .sw-v3-category-grid > :nth-child(-n+3)::after {
    content: none !important;

    display: none !important;

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


  /* =========================================================
     EXACT MOBILE BANNERS
     ========================================================= */

  html body .sw-v3-category-grid > :nth-child(1) {
    background-image:
      url("../con/OVERSIGNS ADHESIVES BANNER.png") !important;
  }

  html body .sw-v3-category-grid > :nth-child(2) {
    background-image:
      url("../con/OVERSIGNS BOARDS BANNER.png") !important;
  }

  html body .sw-v3-category-grid > :nth-child(3) {
    background-image:
      url("../con/OVERSIGNS BANNERS.png") !important;
  }


  /* Artwork already includes the category title */
  html body .sw-v3-category-grid > :nth-child(-n+3)
  .sw-v3-category__label {
    opacity: 0 !important;
  }

}


/* ============================================================
   OVERSIGNS - FINAL TABLET LAYER
   701px-1024px ONLY
   Consolidated 2026-10-07

   Goals:
   - one centered OVERSIGNS logo
   - hamburger on left
   - native account icon + cart on right
   - remove old orange/category icon nav on tablet
   - no tablet search crowding
   - approved category + product thumbnails
   - category-specific Popular Materials band colors
   ============================================================ */

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

  /* ----------------------------------------------------------
     HEADER SHELL
     ---------------------------------------------------------- */

  html body #header-wrapper {
    box-sizing: border-box !important;
    position: relative !important;
    width: 100% !important;
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 3px solid #00A8E8 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body #header-wrapper > table.header,
  html body #header-wrapper > table.header > tbody,
  html body #header-wrapper > table.header > tbody > tr {
    box-sizing: border-box !important;
    position: static !important;
    width: 100% !important;
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  html body #header_title {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }


  /* ----------------------------------------------------------
     SINGLE CENTERED LOGO
     Return to PageDNA's native tablet image choice, but center it.
     ---------------------------------------------------------- */

  html body #header_logo {
    position: absolute !important;
    top: 17px !important;
    left: 50% !important;
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: translateX(-50%) !important;
    z-index: 6200 !important;
  }

  /* Tablet uses the non-desktop logo only. */
  html body #header_logo img {
    display: none !important;
  }

  html body #header_logo img.no_desktop {
    display: block !important;
    width: 230px !important;
    max-width: 230px !important;
    height: auto !important;
    max-height: 50px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
  }

  html body #header_logo img.no_mobile {
    display: none !important;
  }


  /* ----------------------------------------------------------
     HAMBURGER - LEFT
     Existing Custom Site Title control
     ---------------------------------------------------------- */

  html body #header_title .burger,
  html body .burger {
    position: absolute !important;
    top: 20px !important;
    left: 22px !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background: transparent !important;
    z-index: 6500 !important;
  }

  html body .burger > input[type="checkbox"] {
    position: absolute !important;
    inset: 0 !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 5 !important;
  }

  html body .burger .bars {
    position: absolute !important;
    top: 9px !important;
    left: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 30px !important;
    height: 24px !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  html body .burger .bar {
    position: static !important;
    display: block !important;
    width: 30px !important;
    height: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #171A21 !important;
    border: 0 !important;
    border-radius: 2px !important;
    transform: none !important;
  }

  html body .burger .nav-menu-text {
    display: none !important;
  }


  /* ----------------------------------------------------------
     ACCOUNT - RIGHT, BEFORE CART
     Keep PageDNA's native account menu trigger.
     ---------------------------------------------------------- */

  html body #header-wrapper .fa-user {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 25px !important;
    right: 88px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #171A21 !important;
    font-size: 27px !important;
    line-height: 1 !important;
    z-index: 6500 !important;
    cursor: pointer !important;
  }

  html body #header-wrapper .fa-user::before {
    content: "\f2bd" !important;
    font-family: FontAwesome !important;
    font-size: 27px !important;
    font-weight: normal !important;
    line-height: 1 !important;
  }

  html body #header-wrapper .fa-user:hover,
  html body #header-wrapper .fa-user:focus {
    color: #007DA8 !important;
  }


  /* ----------------------------------------------------------
     CART - FAR RIGHT
     ---------------------------------------------------------- */

  html body #header-wrapper #mobile_cart {
    position: absolute !important;
    top: 18px !important;
    right: 24px !important;
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 6500 !important;
  }

  html body #mobile_cart .fa-shopping-basket {
    position: static !important;
    color: #171A21 !important;
    font-size: 28px !important;
  }

  html body #mobile_cart .item_count {
    position: absolute !important;
    top: -4px !important;
    right: -5px !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 5px !important;
    background: #B90070 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    text-align: center !important;
  }


  /* ----------------------------------------------------------
     REMOVE TABLET CATEGORY NAV / ORANGE ARTIFACT
     Category thumbnails below already provide navigation.
     ---------------------------------------------------------- */

  html body .catalog-header-menu,
  html body .catalog-header-menu.global-catalog-menu,
  html body #navTabs,
  html body .responsive_tabs-shell > .responsive_tabs,
  html body .responsive_tabs-shell > .after {
    display: none !important;
    visibility: hidden !important;
  }


  /* ----------------------------------------------------------
     SEARCH - HIDE ON TABLET TO KEEP HEADER CLEAN
     ---------------------------------------------------------- */

  html body .shoprint-config-search,
  html body .main .catalog .item-search-block {
    display: none !important;
  }


  /* ----------------------------------------------------------
     ACCOUNT MENU PANEL
     ---------------------------------------------------------- */

  html body #mobile_link_box {
    box-sizing: border-box !important;
    position: fixed !important;
    top: 78px !important;
    right: 72px !important;
    left: auto !important;
    bottom: auto !important;
    width: 285px !important;
    height: auto !important;
    max-height: calc(100dvh - 94px) !important;
    padding: 9px !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border: 1px solid #d9e3ea !important;
    border-radius: 10px !important;
    box-shadow: 0 14px 34px rgba(9,32,45,.22) !important;
    z-index: 7000 !important;
  }

  html body #mobile_link_box a.mobile_link {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    background: transparent !important;
    border-radius: 7px !important;
    color: #192631 !important;
    font: 700 14px/1.35 Arial, sans-serif !important;
    text-align: left !important;
    text-decoration: none !important;
  }

  html body #mobile_link_box a.mobile_link:hover,
  html body #mobile_link_box a.mobile_link:focus {
    background: #e6f7fc !important;
    color: #006f95 !important;
  }


  /* ----------------------------------------------------------
     SHOP BY CATEGORY - APPROVED ARTWORK
     ---------------------------------------------------------- */

  html body:has(.sw-v3) .sw-v3-category-section {
    padding-top: 24px !important;
    padding-bottom: 30px !important;
    background: #ffffff !important;
  }

  html body:has(.sw-v3) .sw-v3-category-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: calc(100% - 48px) !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    gap: 16px !important;
  }

  html body:has(.sw-v3)
  .sw-v3-category-grid > :nth-child(-n+3) {
    position: relative !important;
    display: block !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: 1px solid #dce4e9 !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 18px rgba(23,26,33,.09) !important;
  }

  html body:has(.sw-v3)
  .sw-v3-category-grid > :nth-child(-n+3)::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    z-index: 3 !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
  }

  html body:has(.sw-v3)
  .sw-v3-category-grid > :nth-child(1)::after {
    background-image: url("../con/POPULAR MATERIALS Adhesive.png") !important;
  }

  html body:has(.sw-v3)
  .sw-v3-category-grid > :nth-child(2)::after {
    background-image: url("../con/POPULAR MATERIALS Boards.png") !important;
  }

  html body:has(.sw-v3)
  .sw-v3-category-grid > :nth-child(3)::after {
    background-image: url("../con/POPULAR MATERIALS Banners.png") !important;
  }

  html body:has(.sw-v3)
  .sw-v3-category-grid .sw-v3-category__label {
    opacity: 0 !important;
  }


  /* ----------------------------------------------------------
     POPULAR MATERIALS - TABLET LAYOUT
     ---------------------------------------------------------- */

  html body:has(.sw-v3) .sw-v3-materials {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: calc(100% - 48px) !important;
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 14px !important;
  }

  html body:has(.sw-v3) .sw-v3-material {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #dce4e9 !important;
    border-radius: 9px !important;
    box-shadow: 0 5px 14px rgba(23,26,33,.07) !important;
  }

  html body:has(.sw-v3) .sw-v3-material__image {
    position: relative !important;
    width: 120px !important;
    height: 100% !important;
    min-height: 145px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  html body:has(.sw-v3) .sw-v3-material__image img {
    opacity: 0 !important;
  }

  html body:has(.sw-v3) .sw-v3-material__body {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    padding: 14px 14px 12px !important;
    text-align: center !important;
  }

  html body:has(.sw-v3) .sw-v3-material__body h3 {
    margin: 0 0 7px !important;
    color: #171A21 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  html body:has(.sw-v3) .sw-v3-material__body p {
    margin: 0 0 12px !important;
    color: #59616C !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  html body:has(.sw-v3) .sw-v3-material__action {
    margin-top: auto !important;
    width: 100% !important;
    min-height: 36px !important;
    background: #B90070 !important;
    background-image: none !important;
    border: 1px solid #B90070 !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: none !important;
  }


  /* ----------------------------------------------------------
     APPROVED POPULAR MATERIAL THUMBNAILS
     ---------------------------------------------------------- */

  html body:has(.sw-v3):has(input[name="tab"][value^="ADHESIVE"])
  .sw-v3-materials > .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 > .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 > .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 > .sw-v3-material:nth-child(4) .sw-v3-material__image {
    background-image: url("../con/Perforated_Vinyl_60_40 bold.png") !important;
  }

  html body:has(.sw-v3):has(input[name="tab"][value^="BOARDS"])
  .sw-v3-materials > .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 > .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 > .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 > .sw-v3-material:nth-child(4) .sw-v3-material__image {
    background-image: url("../con/Aluminum_Composite_3mm bold.png") !important;
  }

  html body:has(.sw-v3):has(input[name="tab"][value^="BANNER"])
  .sw-v3-materials > .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 > .sw-v3-material:nth-child(2) .sw-v3-material__image {
    background-image: url("../con/Game On Mesh Sports Banner-1.png") !important;
  }


  /* ----------------------------------------------------------
     CATEGORY-SPECIFIC POPULAR MATERIALS BAND
     ---------------------------------------------------------- */

  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^="BOARDS"])
  .sw-v3 > .sw-v3-section:nth-of-type(2) {
    background: #B90070 !important;
  }

  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^="ADHESIVE"])
  .sw-v3 > .sw-v3-section:nth-of-type(2) h2,
  html body:has(.sw-v3):has(input[name="tab"][value^="BOARDS"])
  .sw-v3 > .sw-v3-section:nth-of-type(2) h2 {
    color: #ffffff !important;
  }

  html body:has(.sw-v3):has(input[name="tab"][value^="BANNER"])
  .sw-v3 > .sw-v3-section:nth-of-type(2) h2 {
    color: #171A21 !important;
  }

}


/* ============================================================
   OVERSIGNS - TABLET NAV + PRODUCT FLOW POLISH V2
   701px-1024px ONLY
   2026-10-07

   - Restores visible hamburger navigation
   - Restores Account control
   - Keeps cart visible
   - Keeps category icon/tab strip removed
   - Removes View All Products / View All Materials
   - Polishes product selection and configurator/upload flow
   ============================================================ */

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


  /* =========================================================
     1. HEADER - MAKE THE INTERACTIVE CONTROLS UNMISSABLE
     ========================================================= */

  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_title {
    overflow: visible !important;
  }


  /* ---------------------------------------------------------
     HAMBURGER / MAIN NAV - LEFT
     Use the Custom Site Title burger that contains:
     Home / My Account / Track Orders / Reorder / Log Out
     --------------------------------------------------------- */

  html body #header_title label.burger,
  html body #header_title .burger,
  html body label.burger {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;
    top: 20px !important;
    left: 24px !important;
    right: auto !important;
    bottom: auto !important;

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

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

    place-items: center !important;

    background: transparent !important;

    transform: none !important;

    cursor: pointer !important;

    z-index: 9000 !important;
  }

  html body #header_title label.burger .bars,
  html body #header_title .burger .bars,
  html body label.burger .bars {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;

    width: 30px !important;
    height: 23px !important;

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

    pointer-events: none !important;
  }

  html body #header_title label.burger .bar,
  html body #header_title .burger .bar,
  html body label.burger .bar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;
    left: 0 !important;

    width: 30px !important;
    height: 3px !important;

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

    background: #171A21 !important;
    border: 0 !important;
    border-radius: 2px !important;
  }

  html body label.burger .bar:nth-child(1) {
    top: 1px !important;
  }

  html body label.burger .bar:nth-child(2) {
    top: 10px !important;
  }

  html body label.burger .bar:nth-child(3) {
    top: 19px !important;
  }

  html body label.burger .nav-menu-text {
    display: none !important;
  }

  /* Keep burger drawer above the storefront. */
  html body label.burger nav {
    z-index: 9100 !important;
  }


  /* ---------------------------------------------------------
     ACCOUNT - RIGHT, JUST LEFT OF CART
     Use the existing desktop Account anchor rather than
     depending on PageDNA's disappearing tablet .fa-user.
     --------------------------------------------------------- */

  html body #header-links-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: static !important;

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

    overflow: visible !important;
  }

  html body #header-links-container .header-links,
  html body #header-links-container td.header-links {
    position: static !important;

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

    overflow: visible !important;
  }

  /* Hide other desktop links on tablet. */
  html body #header-links-container
  .header-links > a,
  html body #header-links-container
  td.header-links > a {
    display: none !important;
  }

  /* Account is the second anchor in the working desktop header. */
  html body #header-links-container
  .header-links > a:nth-of-type(2),
  html body #header-links-container
  td.header-links > a:nth-of-type(2) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;
    top: 21px !important;
    right: 86px !important;
    left: auto !important;

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

    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !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: 1 !important;

    text-decoration: none !important;

    z-index: 9000 !important;
  }

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

    display: block !important;

    color: #171A21 !important;

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

  /* Kill the desktop "Account" text/arrow pseudo-element on tablet. */
  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: none !important;
    display: none !important;
  }

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


  /* Cart remains far-right. */
  html body #header-wrapper #mobile_cart {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

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

    z-index: 9000 !important;
  }


  /* =========================================================
     2. REMOVE OLD CATEGORY/TAB STRIP + VIEW ALL LINKS
     Category thumbnails already provide category navigation.
     ========================================================= */

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

  html body:has(.sw-v3)
  .sw-v3-section__link {
    display: none !important;
  }

  html body:has(.sw-v3)
  .sw-v3-section__head {
    justify-content: flex-start !important;
  }


  /* =========================================================
     3. PRODUCT SELECTION PAGE
     Make the old tiny centered PageDNA card feel intentional.
     ========================================================= */

  html body:not(:has(.sw-v3)):has(.select-items) {
    background: #f5f7f9 !important;
  }

  html body:not(:has(.sw-v3)):has(.select-items)
  .main,
  html body:not(:has(.sw-v3)):has(.select-items)
  .main-section {
    box-sizing: border-box !important;

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

    margin: 0 auto !important;
    padding: 28px 24px 42px !important;

    background: #f5f7f9 !important;
  }

  html body:not(:has(.sw-v3))
  .select-items {
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    max-width: 860px !important;

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

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

    overflow: visible !important;
  }

  html body:not(:has(.sw-v3))
  .select-items
  .stretchy_cols {
    box-sizing: border-box !important;

    display: block !important;
    float: none !important;

    width: 100% !important;
    max-width: 860px !important;

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

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

    overflow: visible !important;
  }

  html body:not(:has(.sw-v3))
  .select-items
  .height-adjuster {
    box-sizing: border-box !important;

    display: grid !important;

    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) !important;
    grid-template-areas:
      "image title"
      "image info"
      "image details"
      "image action" !important;

    column-gap: 30px !important;
    row-gap: 10px !important;

    float: none !important;

    width: 100% !important;
    max-width: 820px !important;

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

    margin: 0 auto 26px !important;
    padding: 28px !important;

    overflow: visible !important;

    background: #ffffff !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,.08) !important;
  }

  html body:not(:has(.sw-v3))
  .select-items
  .height-adjuster
  .responsive-longname {
    grid-area: title !important;

    display: block !important;

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

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

    color: #171A21 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

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

  html body:not(:has(.sw-v3))
  .select-items
  .height-adjuster
  .responsive-longname label {
    color: #171A21 !important;

    font: inherit !important;

    text-transform: none !important;
  }

  html body:not(:has(.sw-v3))
  .select-items
  .height-adjuster
  .image-container {
    grid-area: image !important;

    align-self: start !important;

    width: 100% !important;

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

    overflow: hidden !important;

    background: #f7f8fa !important;

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

    text-align: center !important;
  }

  html body:not(:has(.sw-v3))
  .select-items
  .height-adjuster
  .image-container img {
    display: block !important;

    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;

    margin: 0 auto !important;

    border-radius: 9px !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  html body:not(:has(.sw-v3))
  .select-items
  .height-adjuster
  .responsive-choose-info {
    grid-area: info !important;

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

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

    color: #59616C !important;

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

    text-align: left !important;
  }

  /* Product spec section becomes the lower full-width content. */
  html body:not(:has(.sw-v3))
  .select-items
  .height-adjuster
  .os-product-specs {
    grid-area: details !important;

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

    margin: 14px 0 0 !important;
  }

  /* Native Size and Quantity / choose controls. */
  html body:not(:has(.sw-v3))
  .select-items
  .height-adjuster
  :is(
    input[type="submit"],
    input[type="button"],
    button,
    a.button
  ) {
    min-height: 42px !important;

    padding: 0 18px !important;

    background: #B90070 !important;
    background-image: none !important;

    color: #ffffff !important;

    border: 1px solid #B90070 !important;
    border-radius: 6px !important;

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

    text-shadow: none !important;

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

  html body:not(:has(.sw-v3))
  .select-items
  .height-adjuster
  :is(
    input[type="submit"],
    input[type="button"],
    button,
    a.button
  ):hover {
    background: #940058 !important;
    border-color: #940058 !important;
  }


  /* =========================================================
     4. CONFIGURATOR / SIZE & QUANTITY / UPLOAD
     ========================================================= */

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

  html body:has(form[name="f"][action="item_form.cgi"])
  .main {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 960px !important;

    margin: 0 auto !important;
    padding: 28px 24px 48px !important;

    background: #f5f7f9 !important;
  }

  html body:has(form[name="f"][action="item_form.cgi"])
  form[name="f"][action="item_form.cgi"] {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 900px !important;

    margin: 0 auto !important;
  }

  html body:has(form[name="f"][action="item_form.cgi"])
  #estimate-item-container,
  html body:has(form[name="f"][action="item_form.cgi"])
  table.imprint-splitview {
    box-sizing: border-box !important;

    display: grid !important;

    grid-template-columns: 1fr !important;

    width: 100% !important;
    max-width: 900px !important;

    margin: 0 auto !important;

    gap: 18px !important;
  }

  html body:has(form[name="f"][action="item_form.cgi"])
  #blurb-and-image,
  html body:has(form[name="f"][action="item_form.cgi"])
  #all_options_container,
  html body:has(form[name="f"][action="item_form.cgi"])
  table.imprint-splitview td.left-side,
  html body:has(form[name="f"][action="item_form.cgi"])
  table.imprint-splitview td.right-side {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 900px !important;

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

    background: #ffffff !important;

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

    box-shadow: 0 8px 24px rgba(23,26,33,.07) !important;
  }

  html body:has(form[name="f"][action="item_form.cgi"])
  #all_options_container {
    border-top: 4px solid #00A8E8 !important;
  }

  html body:has(form[name="f"][action="item_form.cgi"])
  table.imprint-splitview td.left-side {
    border-top: 4px solid #B90070 !important;
  }

  html body:has(form[name="f"][action="item_form.cgi"])
  table.imprint-splitview td.right-side {
    min-height: 0 !important;

    border-top: 4px solid #00A8E8 !important;
  }

  html body:has(form[name="f"][action="item_form.cgi"])
  :is(
    input[type="text"],
    input[type="email"],
    input[type="number"],
    select,
    textarea
  ) {
    box-sizing: border-box !important;

    min-height: 42px !important;

    padding: 8px 11px !important;

    background: #ffffff !important;
    color: #27313A !important;

    border: 1px solid #cdd6de !important;
    border-radius: 6px !important;

    font-size: 15px !important;
  }

  html body:has(form[name="f"][action="item_form.cgi"])
  :is(
    input[type="text"],
    input[type="email"],
    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;
  }

  html body:has(form[name="f"][action="item_form.cgi"])
  :is(
    input[type="submit"],
    input[type="button"],
    button
  ) {
    min-height: 42px !important;

    padding: 0 18px !important;

    background: #B90070 !important;
    background-image: none !important;

    color: #ffffff !important;

    border: 1px solid #B90070 !important;
    border-radius: 6px !important;

    font-weight: 800 !important;

    text-shadow: none !important;

    box-shadow: none !important;
  }

  html body:has(form[name="f"][action="item_form.cgi"])
  :is(
    input[type="submit"],
    input[type="button"],
    button
  ):hover {
    background: #940058 !important;
    border-color: #940058 !important;
  }


  /* =========================================================
     5. PRODUCT/CONFIGURATOR FOOTER
     ========================================================= */

  html body:not(:has(.sw-v3)):has(.select-items)
  .footer_bottom_alt,
  html body:has(form[name="f"][action="item_form.cgi"])
  .footer_bottom_alt {
    box-sizing: border-box !important;

    width: 100% !important;

    margin-top: 28px !important;
    padding: 18px 20px !important;

    background: #18232D !important;
    color: #ffffff !important;

    border-top: 3px solid #00A8E8 !important;
  }

  html body:not(:has(.sw-v3)):has(.select-items)
  .footer_bottom_alt *,
  html body:has(form[name="f"][action="item_form.cgi"])
  .footer_bottom_alt * {
    color: #ffffff !important;
  }

}


/* Tablet product card becomes single-column before phone rules take over. */
@media only screen and (min-width: 701px) and (max-width: 820px) {

  html body:not(:has(.sw-v3))
  .select-items
  .height-adjuster {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "image"
      "info"
      "details"
      "action" !important;

    max-width: 700px !important;
  }

  html body:not(:has(.sw-v3))
  .select-items
  .height-adjuster
  .responsive-longname,
  html body:not(:has(.sw-v3))
  .select-items
  .height-adjuster
  .responsive-choose-info {
    text-align: center !important;
  }

  html body:not(:has(.sw-v3))
  .select-items
  .height-adjuster
  .image-container {
    max-width: 360px !important;
    margin: 0 auto !important;
  }

}

/* ============================================================
   OVERSIGNS - TABLET LOGO SIZE BUMP
   701px-1024px ONLY
   ============================================================ */

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

  html body #header_logo {
    width: 265px !important;
    min-width: 265px !important;
    max-width: 265px !important;

    height: 56px !important;
    max-height: 56px !important;
  }

  html body #header_logo img.no_desktop {
    width: 265px !important;
    max-width: 265px !important;

    height: auto !important;
    max-height: 56px !important;
  }

}

/* ============================================================
   OVERSIGNS - TABLET LOGO HOME LINK
   Makes centered logo clickable   homepage
   701px-1024px ONLY
   ============================================================ */

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

  /* Restore PageDNA's existing HOME link only */
  html body #header-links-container
  .header-links > a:nth-of-type(1),

  html body #header-links-container
  td.header-links > a:nth-of-type(1) {

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;

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

    width: 275px !important;
    height: 60px !important;

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

    transform: translateX(-50%) !important;

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

    color: transparent !important;
    font-size: 0 !important;

    cursor: pointer !important;

    z-index: 8950 !important;
  }

}