@media (max-width: 768px) {
  /* --- Mobile Global Reset Engines --- */
  #masthead-front #block-headerblock,
  #masthead-sub #block-headerblock {
    width: 300px;
    height: 33px;
    margin: 0 auto 10px auto;
  }

  #block-ps-fg-2 {
    position: absolute;
    width: 100%;
  }
  #block-ps-fg-2 svg {
    width: 70%;
    display: block;
    margin: 60px auto 0 auto;
  }

  #banner {
    height: 77px;
  }

  #sub-header-wrapper {
    margin-bottom: 40px;
  }
  #main-page-wrapper {
  }

  #desktop {
  /* is visible in max-wdth */
  }
  
  #menu-area {
  background: #015c93;
  }

  /* --- Mobile Global Reset Engines --- */
  #masthead-front #block-headerblock,
  #masthead-sub #block-headerblock {
    width: 300px;
    height: 33px;
    margin: 0 auto 10px auto;
  }

  /* ==========================================================================
     Mobile Superfish Accordion Restructuring: High-Contrast Contrast Fix
     ========================================================================== */
  
  /* 1. Force the main mobile menu bar to have a solid deep blue background */
  #menu-area,
  #block-tools {
    background: #015c93 !important;   /* Solid dark blue mobile navigation container canvas */
    width: 100% !important;
    border: none !important;
    box-sizing: border-box !important;
  }

  .sf-depth-1, .sf-depth-2, .sf-depth-3, .sf-no-children, .sf-first {
   color: white !important;
   font-size: 18px;
   }
   .sf-depth-2 {
    margin-left: 30px !important;
   }

  /* 2. Style the main mobile menu accordion toggle button */
  .sf-accordion-toggle.sf-style-white,
  #superfish-tools-toggle,
  a#superfish-tools-toggle {
    background: #015c93 !important;   /* Matches your deep blue theme */
    color: #ffffff !important;         /* Pure white readable text for the word "MENU" */
    font-family: 'Poiret One', sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-align: center !important;
    padding: 12px 0 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }

  /* Add the clean maroon hover effect directly to the mobile main menu button */
  #superfish-tools-toggle:hover,
  .sf-accordion-toggle.sf-style-white:hover {
    background: #8e0202 !important;   /* Changes to maroon smoothly on finger tap/mouse hover */
    color: #ffffff !important;
  }

  /* 3. UNIVERSAL MOBILE LINK LOCK: Style all expanded accordion list links and blocks */
  ul#superfish-tools.sf-accordion,
  ul#superfish-tools.sf-accordion ul,
  ul#superfish-tools.sf-accordion li,
  ul#superfish-tools.sf-accordion a,
  ul#superfish-tools.sf-accordion span.nolink {
    background: #015c93 !important;   /* Solid deep blue background across ALL mobile sub-rows */
    color: #ffffff !important;         /* FORCES all black text to turn crisp pure white */
    text-transform: uppercase !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border-bottom: 1px solid #004b75 !important; /* Clean, subtle border separating mobile options */
    box-sizing: border-box !important;
    text-align: left !important;
    cursor: pointer !important;
  }

  /* 4. Apply your signature maroon accent color when hovering or actively tapping a mobile row */
  ul#superfish-tools.sf-accordion li a:hover,
  ul#superfish-tools.sf-accordion li a:active,
  ul#superfish-tools.sf-accordion li.sfHover > a,
  ul#superfish-tools.sf-accordion li.sfHover > span.nolink {
    background: #8e0202 !important;   /* High-contrast maroon highlight tracking */
    color: #ffffff !important;
  }

  /* Hide the raw unstyled list immediately on initial paint to protect mobile CLS */
  ul#superfish-tools:not(.sf-js-enabled) {
    display: none !important;
  }

  /* ... Keep the rest of your original mobile layout parameters clean beneath this ... */
  #block-ps-fg-2 {
    position: absolute;
    width: 100%;
  }

  div.sf-accordion-toggle.sf-style-white a{font-size:14px;text-align: center;}
  div.sf-accordion-toggle.sf-style-white a:hover, .cart-block--summary:hover{
    background: #b0cbda;
  }

  #mobile {
    display: block !important;
    width: 100% !important;
    float: none !important;
  }

  #mobile .sf-accordion-toggle.sf-style-white {
    display: block !important;
    width: 100% !important;
  }

  #front-page-wrapper {
    margin-top: 0px;
  }
  #sub-header-wrapper {
    margin-bottom: 0px;
  }

  #block-tools {
    width: 100%;
    margin: auto;
    height: 49px;
    border-top: 1px solid white;
  }

  /* Hide the raw unstyled list immediately to stop the mobile flash */
  /* Only show it once Superfish JS activates the mobile accordion wrapper */
  ul#superfish-tools.sf-js-enabled, ul#superfish-tools.sf-accordion {display: none !important;}

  .tca-header{
   margin: auto;
   max-width: 600px;
   border-bottom:1px solid black;
   margin-bottom:10px;
   padding-bottom:10px;
  }
  .tca {
    margin: auto;
    max-width: 600px;
    column-count: 2;
    column-fill: balance;
    border-bottom:1px solid black;
    margin-bottom:10px;
    padding-bottom:10px;
  }

  .visible-sm { display: block !important; }
  tr.visible-sm { display: table-row !important; }
  th.visible-sm, td.visible-sm { display: table-cell !important; }

  .hidden-sm { display: none !important; }
  tr.hidden-sm { display: none !important; }
  th.hidden-sm, td.hidden-sm { display: none !important; }

  #front-margin { margin-top: 160px; }
  #main-content { margin: -5px 0 0 0; }
  select.mnav { width: 100%; margin-bottom: 10px; }

  /* --- Mobile Sharpness & Typography Overrides --- */
  #block-ps-page-title h1 span {
    font-size: 1.4rem;
    text-shadow: 0 0 0.5px currentColor;
    letter-spacing: 0.05em;
  }

  #sidebar {
    text-align: justify;
    padding: 0 20px;
    max-width: 100%;
  }
  #sidebar h1 { font-size: 1.0em; }
  #sidebar h2 { font-size: 0.9em; }
  #sidebar h3 { font-size: 0.8em; }
  #sidebar h4 { font-size: 0.75em; }

  /* Target the commerce block container specifically */
  .block-commerce-cart .cart-block--contents {
   display: none !important;
   }

   /* Ensure that when a user actively clicks/hovers to open it, it becomes visible again */
   .block-commerce-cart:hover .cart-block--contents,
   .block-commerce-cart.is-open .cart-block--contents {
     display: block !important;
   }

  .PSLogo-Contact {
    width: 22vw;
    margin: 0 auto 15px auto;
    float: none;
  }

  .views-front-body {
    float: right;
    background: rgba(140, 73, 24, 0.12);
    transform: scale(0.7);
    margin: -30px -40px -20px 0;
    color: white;
    font-family: 'Poiret One', sans-serif;
    font-weight: 700;
    font-variant-caps: all-small-caps;
  }

  /* --- Front Image Component Blocks --- */
  .flex-caption { bottom: 20px; }
  .flex-direction-nav .flex-prev,
  .flex-direction-nav .flex-next { z-index: 1000; }
  .flex-direction-nav .flex-prev:hover,
  .flex-direction-nav .flex-next:hover { z-index: 1012; }

  .front-shop-banner-large { font-size: 4vw; }

  #block-ps-page-title {
    margin: 0 auto;
    color: slategrey;
    text-align: center;
    font-family: 'Poiret One', sans-serif;
    font-weight: 700;
  }

  .icon-reward-star { width: 300px; }
  .icon-reward-star:after { font-size: 3.57em; }
  .icon-reward-star-text { font-size: 1.43em; margin: 24px 0 0 20px; }
  .menu-buy-basket:after { font-size: 9vw; }

  .squareuplogo img {
    padding: 0;
    float: none;
    width: auto;
  }

  /* --- Accordion Menu Overrides --- */
  div.sf-accordion-toggle.sf-style-default a {
    background: #648195;
    color: white;
    display: inline-block;
    font-weight: bold;
    padding: 1em 3em 1em 1em;
    position: relative;
    width: 100%;
  }

  div.sf-accordion-toggle.sf-style-default a.sf-expanded,
  ul.sf-menu.sf-style-default.sf-accordion li.sf-expanded > a,
  ul.sf-menu.sf-style-default.sf-accordion li.sf-expanded > span.nolink {
    font-weight: bold;
    padding-left: 70px;
  }

  ul.sf-menu.sf-style-white li:hover, ul.sf-menu.sf-style-white li.sfHover, ul.sf-menu.sf-style-white a.is-active, ul.sf-menu.sf-style-white a:focus, ul.sf-menu.sf-style-white a:hover, ul.sf-menu.sf-style-white span.nolink:hover {
  background: #3990c5 !important;
  outline: 0;
  }

  ul.sf-menu .sf-sub-indicator { right: 5em; }

  ul.sf-menu.sf-accordion,
  ul.sf-menu.sf-accordion ul,
  ul.sf-menu.sf-accordion li {
    float: none;
    text-align: left;
    width: 100% !important;
    box-sizing: border-box;
  }

  ul.sf-menu.sf-style-default li:hover,
  ul.sf-menu.sf-style-default li.sfHover,
  ul.sf-menu.sf-style-default a.is-active,
  ul.sf-menu.sf-style-default a:focus,
  ul.sf-menu.sf-style-default a:hover,
  ul.sf-menu.sf-style-default span.nolink:hover {
    background: #105875;
    outline: 0;
  }

  div.sf-accordion-toggle.sf-style-default a.sf-expanded,
  ul.sf-menu.sf-style-default.sf-accordion li.sf-expanded {
    background: #648195;
  }

  ul.sf-menu.sf-accordion.sf-expanded,
  ul.sf-menu.sf-accordion li.sf-expanded > ul {
    z-index: 0;
  }

  ul.sf-menu.sf-style-default a,
  ul.sf-menu.sf-style-default a:visited,
  ul.sf-menu.sf-style-default span.nolink {
    border: 0 none;
    color: white;
    padding: 0.75em 1em;
  }

  ul.sf-menu.sf-style-default li li,
  ul.sf-menu.sf-style-default.sf-navbar > li > ul {
    background: #648195;
  }

  ul.sf-menu.sf-style-default.sf-accordion li li a,
  ul.sf-menu.sf-style-default.sf-accordion li li span.nolink {
    padding-left: 2em;
    border-bottom: 1px solid white;
  }

  ul.sf-menu.sf-style-default li li li { background: #005b9e; }

  .tca {
    margin: auto;
    max-width: 480px;
    column-count: 1;
    column-fill: balance;
  }
  /* --- Content Custom Columns & GDPR Layout Extensions --- */
  .gdpr-article { margin: 0; }
  .anatomy-main { display: block; }
  .rows-pen-anatomy .views-field.views-field-field-article-top-images-inline {
    float: left;
    width: 35%;
    margin-right: 20px;
  }
  .rows-pen-anatomy .views-field-field-article-top-images-inline svg {
    float: left;
    clear: both;
  }

  ul.sf-menu.sf-style-white.sf-accordion li {
    float: none;
    text-align: left;
    width: 100% !important;
    box-sizing: border-box;
  }

  .sf-accordion-toggle.sf-style-white {
    background: #015c93 !important;
    margin: auto;
    display: block;
  }

  div.sf-accordion-toggle.sf-style-white a.sf-expanded,
  ul.sf-menu.sf-style-white.sf-accordion li.sf-expanded {
    background: #015c93 !important;
    width: 100%;
  }

  ul.sf-menu.sf-accordion.sf-expanded,
  ul.sf-menu.sf-accordion li.sf-expanded > ul {
    background: #015c93;
    top: auto !important;
    z-index: 10000;
    display: block !important;
  }

  ul.sf-menu.sf-style-white a,
  ul.sf-menu.sf-style-white a:visited,
  ul.sf-menu.sf-style-white span.nolink {
    color: white;
    background: #015c93;
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  #block-cart-2 h2, #block-cart-3 h2, button, input[type="submit"], input[type="reset"], input[type="button"], .label input[type="submit"], .label input[type="reset"], .label input[type="button"], #edit-submit, #edit-actions input, .product-form-cart-main .label, .product-form-cart-main input[type="submit"], .product-form-cart-main input[type="reset"], .product-form-cart-main input[type="button"], .link--previous, .link--previous a:visited, .cart--cart-block {
    background: white;
    color: black !important;
  }
  .cart-block--summary__icon,
  .cart-block--summary__count,
  .cart--cart-block a,
  .cart-block--summary__count a,
  #block-useraccountmenu ul li a,
  #block-useraccountmenu ul li a:visited{
     color: white;
  }
  .cart-block--contents{
     position: relative;
     display: none;
     margin:auto;
   }
  .cart-block--summary {
     background: #a6c3d2;
   }
  .cart-block--summary__icon{
  display:none;
  }
  .cart-block--summary__count:before{
  content:"BASKET: "
  }
  .cart-block--summary {
    display: inline-block;
    width: 100%;
    padding: 10px 0 10px 0;
    background: #015c93;
    color: white;
  }
}

@media (max-width: 600px) {
  .art-img-group a{
  float: left;
  width: 48%;
  text-align: center;
  margin-right: 10px;
  clear:none;
  }
  .article-body {
  display: inline-block;
  }
}

@media (min-width: 601px) {
  .art-img-group {
  float: left;
  width: 40%;
  text-align: center;
  margin-right: 2em;
  clear: left;
  }
}

@media (min-width: 769px) {


/* ==========================================================================
   Isolated CLS Protection: Single parent wrapper constraint
   ========================================================================== */
#main-page-wrapper {
  /* Forces the main container to fill the viewport minus estimated header space */
  min-height: calc(100vh - 150px) !important; 
  box-sizing: border-box !important;
}

  /* ==========================================================================
     1. The Absolute Menu Center & CLS Zero Lock (Fixed Position/Contain)
     ========================================================================== */
  #menu-area {
    height: 44px !important;         /* Hard-locks the vertical box container size */
    min-height: 44px !important;
    max-height: 44px !important;
    display: block !important;
    background: #015c93 !important;   /* High-contrast solid dark blue background */
    box-sizing: border-box !important;
    box-shadow: 0px 6px 10px -10px black;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
    width:90%;
    margin:auto;
  }

  #block-tools,
  #masthead-front #block-tools,
  #masthead-sub #block-tools {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  /* FORCES the inner menu elements to float as a centered flexbox row */
  ul#superfish-tools {
    display: flex !important;
    justify-content: center !important; /* PERFECTLY CENTERS the entire group of menu buttons */
    align-items: center !important;
    width: 100% !important;          
    height: 44px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent;
  }

  /* Structural list-item bounds */
  ul#superfish-tools > li {
    display: inline-block !important;
    float: none !important;          
    height: 44px !important;
    position: relative !important;
    border-right: 1px solid white;    /* Adds a subtle layout separation between buttons */
    border-left: 1px solid white;
  }

  /* --- FIXED TEXT & CONTRAST LOCK --- */
  /* Target all combinations of normal, active, trailing, and hover menu links */
  #menu-area ul#superfish-tools a.sf-depth-1,
  #menu-area ul#superfish-tools span.sf-depth-1,
  #menu-area ul#superfish-tools a.is-active,
  #menu-area ul#superfish-tools li.sfHover > a,
  #menu-area ul#superfish-tools li:hover > a,
  #menu-area ul#superfish-tools li.active-trail > a,
  #menu-area ul#superfish-tools li.active-trail > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;         
    line-height: 44px !important;    /* Hard-locks vertical text strings completely static */
    padding: 0 24px !important;      
    vertical-align: middle !important;
    box-sizing: border-box !important;
    text-transform: uppercase !important; /* FORCES text to be uppercase ALWAYS */
    font-size: 14px !important;
    color: #ffffff !important;            /* Pure white readable text contrast link */
    font-weight: 400 !important;          /* Keeps font weight identical to prevent width expansions */
    letter-spacing: 0.05em !important;
    text-rendering: optimizeSpeed !important; 
    border: none !important;
    background: transparent !important;   
    position: relative !important;
  }

  /* Clean background shifts ONLY on explicit link hover states */
  #menu-area ul#superfish-tools li:hover > a,
  #menu-area ul#superfish-tools li.sfHover > a {
    background: #8e0202 !important;       /* Seamless dark red desktop hover accent */
    color: #ffffff !important;
  }

  /* Target link wrappers containing drop-menus to pre-cushion the pop-in arrow */
  #menu-area ul#superfish-tools li.menuparent > a,
  #menu-area ul#superfish-tools li.menuparent > span {
    padding-right: 36px !important;       /* Reserves right-side area to hold the arrow glyph natively */
  }

  /* Pin the indicator inside the pre-reserved cushion padding without affecting row widths */
  ul.sf-menu .sf-sub-indicator {
    display: inline-block !important;
    position: absolute !important;        /* Pulls arrow out of inline text flow entirely */
    right: 14px !important;               /* Positions arrow cleanly inside our 36px cushion zone */
    top: 50% !important;
    transform: translateY(-50%) !important; 
    margin: 0 !important;
    width: 15px !important;
    color: #ffffff !important;            /* Keeps indicator arrows pure white */
  }

  ul.sf-menu.sf-style-white {
    background: transparent !important;
    width: 100% !important;          
    margin: auto;
  }

  /* ==========================================================================
     2. Dropdown Sub-Menu Realignment & Specificity Anchor
     ========================================================================== */
  
  /* Force the dropdown list containers to frame the text tightly and remain solid */
  ul#superfish-tools ul {
    background: #015c93 !important;      /* Solid high-contrast blue dropdown window container */
    border: 1px solid #004b75 !important;
    padding: 10px 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    width: max-content !important;        
    display: block !important;
    min-height: auto !important;
    min-width: 160px !important;          
    text-align: left !important;          
  }

  /* Prevent inner list items from introducing hidden shifts */
  ul#superfish-tools ul li {
    display: block !important;
    float: none !important;
    width: max-content !important;        
    min-width: 100% !important;           
    background: transparent !important;   
    margin: 0 !important;
    padding: 0 !important;                
    text-align: left !important;
  }
  
  ul.sf-menu li:hover > ul,
  ul.sf-menu li.sfHover > ul {
  left: 0;
  top: 3.2em;
  }

  /* Forces ALL nested links, states, and classes to freeze alignment and size parameters */
  ul#superfish-tools ul li a,
  ul#superfish-tools ul li span,
  ul#superfish-tools ul li a:link,
  ul#superfish-tools ul li a:visited,
  ul#superfish-tools ul li a:hover,
  ul#superfish-tools ul li span:hover,
  ul#superfish-tools ul li.sfHover > a,
  ul#superfish-tools ul li.sfHover > span,
  ul#superfish-tools ul li.sf-first a,
  ul#superfish-tools ul li.sf-first span,
  ul.sf-menu.sf-style-white ul li a,                     
  ul.sf-menu.sf-style-white ul li span,
  ul.sf-menu.sf-style-white ul li a:hover,
  #menu-area ul#superfish-tools ul li a,
  #menu-area ul#superfish-tools ul li span,
  #menu-area ul#superfish-tools ul li a:hover,
  #menu-area ul#superfish-tools ul li.sf-first a:hover,
  #menu-area ul#superfish-tools ul li[id*="tools-views"] a,
  #menu-area ul#superfish-tools ul li[id*="tools-views"] a:hover {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    line-height: 22px !important;
    padding: 8px 20px !important;         /* Hard-locks uniform horizontal buffers */
    color: #ffffff !important;
    text-transform: uppercase !important; 
    font-size: 15px !important;           /* Unified sizing target */
    font-weight: 400 !important;          
    letter-spacing: 0.05em !important;
    text-align: left !important;          
    justify-content: flex-start !important;
    text-indent: 0 !important;            
    margin-left: 0 !important;            
    margin-right: 0 !important;
  }

  /* Apply maroon background on sub-link hover, with zero structural movement */
  ul#superfish-tools ul li:hover > a,
  ul#superfish-tools ul li.sfHover > a,
  #menu-area ul#superfish-tools ul li:hover > a,
  #menu-area ul#superfish-tools ul li a:hover,
  ul.sf-menu.sf-style-white ul li a:hover {
    background: #8e0202 !important;       /* Clean solid maroon background highlight */
    color: #ffffff !important;
    text-indent: 0 !important;
    margin-left: 0 !important;
    padding-left: 20px !important;        
  }

  /* Force select pointer globally on all active navigation pieces */
  ul#superfish-tools a,
  ul#superfish-tools span,
  ul#superfish-tools .nolink {
    cursor: pointer !important;           
  }

  /* ==========================================================================
     3. Layout Components & Core Grid Overrides
     ========================================================================== */
  #sidebar {
    column-count: 1;
    padding-left: 20px;
    margin-top: 25px;
  }

  #mobile { display: none; }
  #desktop { display: block; }

  #block-ps-fg-2 {
    position: absolute;
    width: 100%;
  }
  #block-ps-fg-2 svg {
    width: 50%;
    margin: 100px auto 0 auto;
    display: block;
  }



  .lead { font-size: 1.5em; }
  .row .row { margin-right: -15px; margin-left: -15px; }
  .container { max-width: 94%; }  
  
  .form-horizontal .form-group { margin-right: -15px; margin-left: -15px; }
  .form-horizontal .control-label { text-align: right; }

  .navbar-nav { float: left; margin: 0; }
  .navbar-nav > li { float: left; }
  .navbar-toggle { display: none; }

  .modal-dialog { right: auto; left: 50%; width: 600px; padding-top: 30px; padding-bottom: 30px; }
  .modal-content { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }

  .carousel-control .glyphicon,
  .carousel-control .icon-prev,
  .carousel-control .icon-next { width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; font-size: 2.1429em; }
  .carousel-caption { right: 20%; left: 20%; padding-bottom: 30px; }
  .carousel-indicators { bottom: 20px; }

  .jumbotron { padding: 50px 60px; border-radius: 6px; }
  .jumbotron h1 { font-size: 4.5em; }

  /* --- Grid Definitions --- */
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    position: relative;
    min-height: 0;
    padding: 0;
  }

  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }

  .col-1  { width: 8.3333%; }
  .col-2  { width: 16.6667%; }
  .col-3  { width: 25%; }
  .col-4  { width: 33.3333%; }
  .col-5  { width: 41.6667%; }
  .col-6  { width: 50%; }
  .col-7  { width: 58.3333%; }
  .col-8  { width: 66.6667%; }
  .col-9  { width: 75%; }
  .col-10 { width: 83.3333%; }
  .col-11 { width: 91.6667%; }
  .col-12 { width: 100%; }

  .col-sm-1  { width: 8.3333%; }
  .col-sm-2  { width: 16.6667%; }
  .col-sm-3  { width: 25%; }
  .col-sm-4  { width: 33.3333%; }
  .col-sm-5  { width: 41.6667%; }
  .col-sm-6  { width: 47%; margin-right: 3%; }
  .col-sm-7  { width: 58.3333%; }
  .col-sm-8  { width: 66.6667%; }
  .col-sm-9  { width: 75%; }
  .col-sm-10 { width: 83.3333%; }
  .col-sm-11 { width: 91.6667%; }
  .col-sm-12 { width: 100%; }

  .col-push-1  { left: 8.3333%; }
  .col-push-2  { left: 16.6667%; }
  .col-push-3  { left: 25%; }
  .col-push-4  { left: 33.3333%; }
  .col-push-5  { left: 41.6667%; }
  .col-push-6  { left: 50%; }
  .col-push-7  { left: 58.3333%; }
  .col-push-8  { left: 66.6667%; }
  .col-push-9  { left: 75%; }
  .col-push-10 { left: 83.3333%; }
  .col-push-11 { left: 91.6667%; }

  .col-pull-1  { right: 8.3333%; }
  .col-pull-2  { right: 16.6667%; }
  .col-pull-3  { right: 25%; }
  .col-pull-4  { right: 33.3333%; }
  .col-pull-5  { right: 41.6667%; }
  .col-pull-6  { right: 50%; }
  .col-pull-7  { right: 58.3333%; }
  .col-pull-8  { right: 66.6667%; }
  .col-pull-9  { right: 75%; }
  .col-pull-10 { right: 83.3333%; }
  .col-pull-11 { right: 91.6667%; }

  .anatomy-main { display: block; }
  .rows-pen-anatomy .views-field.views-field-field-article-top-images-inline { margin-bottom: 20px; width: 30%; height: auto; }

  .tca-header {
    margin: auto;
    max-width: 1000px;
    border-bottom: 1px solid black;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .tca {
    margin: auto;
    max-width: 1000px;
    column-count: 2;
    column-fill: balance;
    border-bottom: 1px solid black;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  /* --- Shopping Cart Block Layout Controls --- */
  #block-cart-2 h2, 
  #block-cart-3 h2, 
  button, 
  input[type="submit"], 
  input[type="reset"], 
  input[type="button"], 
  .label input[type="submit"], 
  .label input[type="reset"], 
  .label input[type="button"], 
  #edit-submit, 
  #edit-actions input, 
  .product-form-cart-main .label, 
  .product-form-cart-main input[type="submit"], 
  .product-form-cart-main input[type="reset"], 
  .product-form-cart-main input[type="button"], 
  .link--previous, 
  .link--previous a:visited, 
  .cart--cart-block {
    background: #0c3b57;
    color: white !important;
  }
  
  .cart-block--summary__icon,
  .cart-block--summary__count,
  .cart--cart-block a,
  .cart-block--summary__count a,
  #block-useraccountmenu ul li a,
  #block-useraccountmenu ul li a:visited {
    color: white;
  }
  
  .cart-block--contents {
    position: relative;
    display: block;
    margin: auto;
  }
  
  .cart-block--summary {
    display: inline-block;
    background: #015c93;
    width: 100%;
    height: 34px;
  }
}

/* ==========================================================================
   4. Screen Scaling Scale Breakpoints (Keep these separate below layout)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1300px) {
  #block-cart { display: none; }
  #sidebar h1 { font-size: 1.4em; }
  #sidebar h2 { font-size: 1.8em; }
  #sidebar h3 { font-size: 1.4em; }
  #sidebar h4 { font-size: 1.2em; }
}

@media (min-width: 1300px) {
  #block-cart { display: none; }
  #sidebar h1 { font-size: 1.8em; }
  #sidebar h2 { font-size: 2.0em; }
  #sidebar h3 { font-size: 1.6em; }
  #sidebar h4 { font-size: 1.5em; }
}

@media (min-width: 992px) {
  .container { max-width: 94%; }
  #masthead-holder .container,
  #masthead-holder-front .container { padding: 0; max-width: 100%; }

  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }

  .col-lg-1  { width: 8.3333%; }
  .col-lg-2  { width: 16.6667%; }
  .col-lg-3  { width: 25%; }
  .col-lg-4  { width: 33.3333%; }
  .col-lg-5  { width: 41.6667%; }
  .col-lg-6  { width: 50%; }
  .col-lg-7  { width: 58.3333%; }
  .col-lg-8  { width: 66.6667%; }
  .col-lg-9  { width: 75%; }
  .col-lg-10 { width: 83.3333%; }
  .col-lg-11 { width: 91.6667%; }
  .col-lg-12 { width: 100%; }

  .col-offset-1  { margin-left: 8.3333%; }
  .col-offset-2  { margin-left: 16.6667%; }
  .col-offset-3  { margin-left: 25%; }
  .col-offset-4  { margin-left: 33.3333%; }
  .col-offset-5  { margin-left: 41.6667%; }
  .col-offset-6  { margin-left: 50%; }
  .col-offset-7  { margin-left: 58.3333%; }
  .col-offset-8  { margin-left: 66.6667%; }
  .col-offset-9  { margin-left: 75%; }
  .col-offset-10 { margin-left: 83.3333%; }
  .col-offset-11 { margin-left: 91.6667%; }
}

@media (min-width: 769px) and (max-width: 991px) {
  .visible-md, .hidden-sm, .hidden-lg { display: block !important; }
  tr.visible-md, tr.hidden-sm, tr.hidden-lg { display: table-row !important; }
  th.visible-md, td.visible-md, th.hidden-sm, td.hidden-sm, th.hidden-lg, td.hidden-lg { display: table-cell !important; }

  .visible-sm, .visible-lg, .hidden-md { display: none !important; }
  tr.visible-sm, tr.visible-lg, tr.hidden-md { display: none !important; }
  th.visible-sm, td.visible-sm, th.visible-lg, td.visible-lg, th.hidden-md, td.hidden-md { display: none !important; }
}