/* ============================================================================
 * Storefront V2 — Skin 15 package (compiled CSS artifact) — #133
 *
 * CDN destination (future publish step, NOT part of #133):
 *   https://cdn.presscentric.com/skins/css-v2/skin-v2-15/css/skin-v2-15.css
 *
 * Source of truth
 * ---------------
 * This file is the REVIEWED COMPILED ARTIFACT of
 *   skins/sass-v2/skin-v2-15/main.scss
 * which itself is a verbatim copy of the legacy V1 Skin 15
 * stylesheet from
 *   https://cdn.presscentric.com/skins/css/skin-15/css/skin-15.css
 * (1,824 lines / 47,218 bytes).
 *
 * #133 deliberately does NOT introduce a Sass build pipeline. The
 * SCSS source is written as CSS-compatible SCSS (plain selectors,
 * no nesting, no variables, no partials; the only `@import`
 * directives are the two legacy external imports the original V1
 * skin shipped). This CSS file mirrors the SCSS source 1:1 and is
 * committed alongside it so the "compiled" artifact is reviewable
 * from the same PR.
 *
 * The same `Scope` / `Non-goals` / `Compatibility hooks` notes
 * from the SCSS header above apply here verbatim.
 * ========================================================================== */

/* CUSTOM COLUMNS */
@import url("https://cdn.presscentric.com/skins/css/fa-all-5-12-0.min.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:ital,wght@0,700;1,600&display=swap");
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px; }

.col-xs-5ths {
  width: 20%;
  float: left; }

@media (min-width: 768px) {
  .col-sm-5ths {
    width: 20%;
    float: left; } }

@media (min-width: 992px) {
  .col-md-5ths {
    width: 20%;
    float: left; } }

@media (min-width: 1200px) {
  .col-lg-5ths {
    width: 20%;
    float: left; } }

pc-header::before, pc-header::after {
  content: none; }

div#s-menu {
  border-top-color: transparent !important; }

#hdr-products {
  background-color: transparent !important; }

.featured .featured-product-wrapper .product .caption.title {
  background-color: transparent !important; }

body.product #order #quote-top, body.product #order #quote-val, body.product #order #save-unit {
  color: inherit !important; }

.bs-example {
  margin-right: 0;
  margin-left: 0;
  background-color: #fff;
  border-color: #ddd;
  border-width: 1px;
  -webkit-border-radius: 4px 4px 0 0;
          border-radius: 4px 4px 0 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  position: relative;
  padding: 45px 15px 15px;
  margin: 0 -15px 15px;
  border-color: #e5e5e5 #eee #eee;
  border-style: solid;
  border-width: 1px 0;
  -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05); }

.featured .featured-product-wrapper {
  padding: 0px; }
  .featured .featured-product-wrapper .product {
    height: initial; }
    .featured .featured-product-wrapper .product .title {
      position: relative;
      padding: 0;
      bottom: initial;
      height: initial;
      width: initial; }
      .featured .featured-product-wrapper .product .title h3 {
        overflow: initial;
        white-space: initial;
        padding: 0px;
        text-overflow: initial; }

.navbar-default .navbar-nav > li > a,
a,
.link {
  color: #337ab7; }
  .navbar-default .navbar-nav > li > a:hover,
  a:hover,
  .link:hover {
    color: #23527c; }

.section-title {
  text-align: center;
  margin-bottom: 40px; }
  .section-title + p {
    margin: 0 auto 60px auto;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .section-title + p {
        max-width: 50%; } }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", Geneva, Verdana, sans-serif;
  font-weight: 600;
  color: #333333 !important; }

body,
p {
  font-family: "Montserrat", Geneva, Verdana, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 28px; }

.escape-container {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -webkit-calc(-50vw + 0px);
  margin-left: -moz-calc(-50vw + 0px);
  margin-left: calc(-50vw + 0px);
  margin-right: -webkit-calc(-50vw + 0px);
  margin-right: -moz-calc(-50vw + 0px);
  margin-right: calc(-50vw + 0px); }

.no-style-list {
  list-style: none; }

.image-icon {
  display: inline; }

/* Resolve JS Issue where popout in order form not toggled off properly */
#tip_paper .popover {
  display: none !important; }

#tip_paper .popover {
  display: block !important; }

a:hover.append-play-button::after {
  -webkit-transform: scale(2) translate(5%, -27%);
     -moz-transform: scale(2) translate(5%, -27%);
      -ms-transform: scale(2) translate(5%, -27%);
          transform: scale(2) translate(5%, -27%); }

.append-play-button::before {
  display: block;
  content: "";
  width: 100px;
  height: 100px;
  background-color: #1fbbd7;
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  border: 10px solid #fff;
  -webkit-border-radius: 50%;
          border-radius: 50%; }

.append-play-button::after {
  display: block;
  content: "\f04b";
  position: absolute;
  width: 20px;
  height: 20px;
  right: 58px;
  top: 50%;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: -webkit-transform 600ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
  transition: -webkit-transform 600ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
  -moz-transition: transform 600ms cubic-bezier(0.68, -0.6, 0.32, 1.6), -moz-transform 600ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
  transition: transform 600ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
  transition: transform 600ms cubic-bezier(0.68, -0.6, 0.32, 1.6), -webkit-transform 600ms cubic-bezier(0.68, -0.6, 0.32, 1.6), -moz-transform 600ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
  font-family: "Font Awesome 5 Free";
  color: #fff;
  font-size: 20px; }

@media screen and (min-width: 768px) {
  .col-sm-abs {
    position: absolute;
    margin: 15px 30px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.6); }
    .col-sm-abs--top-left {
      top: 0px;
      left: 0px; }
    .col-sm-abs--top-right {
      top: 0px;
      right: 0px; }
    .col-sm-abs--bottom-right {
      bottom: 0px;
      right: 0px; }
    .col-sm-abs--bottom-left {
      bottom: 0px;
      left: 0px; } }

.col--rounded-top {
  -webkit-border-top-left-radius: 1rem;
          border-top-left-radius: 1rem;
  -webkit-border-top-right-radius: 1rem;
          border-top-right-radius: 1rem; }

a.cta-item-md-2-col {
  margin-bottom: 70px;
  display: block;
  -webkit-transition: opacity 400ms ease-in-out;
  -moz-transition: opacity 400ms ease-in-out;
  transition: opacity 400ms ease-in-out;
  padding: 0 40px; }

html {
  overflow-x: hidden; }

/* Sets content wrapper to fill available space */
#s-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh; }

#container__content {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
     -moz-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  padding-bottom: 40px; }

img {
  max-width: 100%;
  height: auto; }

/* BUTTONS */
button,
.btn,
button.btn {
  background-color: #000;
  color: #fff;
  font-family: "Montserrat", Geneva, Verdana, sans-serif, sans-serif;
  font-weight: 400;
  display: inline-block;
  padding: 10px 30px;
  margin-bottom: 0;
  font-size: 1.4rem;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  -webkit-border-radius: 9px;
          border-radius: 9px;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out; }

button:hover,
.btn:hover,
button.btn:hover {
  background-color: #fff;
  border-color: #1fbbd7;
  color: #1fbbd7; }

#btnUpload {
  background-color: #1fbbd7;
  border: none; }

#btnUpload:hover,
#btnUpload:active,
#btnUpload:focus {
  background-color: #1fbbd7; }

.btn.btn-light {
  color: #1fbbd7;
  border: 1px solid #1fbbd7;
  background-color: transparent; }
  .btn.btn-light:hover {
    color: #1fbbd7;
    border: 1px solid #1fbbd7;
    background-color: #1fbbd7; }

#carousel {
  padding-bottom: 20px; }

.carousel-inner > .item > a > img.background-image,
.carousel-inner > .item > img.background-image {
  width: 100%;
  min-height: 320px;
  -o-object-fit: cover;
     object-fit: cover; }

.carousel-indicators.bars li {
  width: 40px;
  height: 3px;
  -webkit-border-radius: 0px;
          border-radius: 0px;
  background-color: #fff;
  border-color: #fff;
  opacity: 0.4; }

.carousel-indicators.bars li.active {
  width: 40px;
  height: 3px;
  opacity: 1;
  margin: 1px; }

@media screen and (min-width: 768px) {
  .slide-title,
  .slide-content {
    margin-bottom: 40px; }
  .slide-title h2 {
    color: #fff; } }

.slide-content ul {
  margin-bottom: 10px;
  margin-top: 0px;
  padding-left: 40px;
  list-style: disc; }

@media screen and (max-width: 767px) {
  .slide-title {
    position: absolute;
    top: 0px; }
  .slide-content {
    margin-top: 20px; }
  .carousel-indicators .active {
    background-color: #fff; }
  .carousel-indicators li {
    border-color: #fff; }
  .slide-title h1,
  .slide-title h2 {
    font-size: 24px; }
  /* .slide-title p {
    font-size: 22px;
  }
  
  .slide-content h3 {
    font-size: 36px;
  }
  
  .slide-content p,
  .slide-content ul {
    font-size: 22px;
  } */ }

@media screen and (min-width: 768px) {
  .carousel-custom {
    position: absolute;
    top: 0px;
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    height: 100%;
    padding-top: 40px;
    padding-bottom: 40px; }
  .carousel-indicators.bars li {
    background-color: #fff;
    border-color: #fff; }
  .slide-title h1,
  .slide-title h2 {
    font-size: 36px; }
  .slide-title p {
    font-size: 18px; }
  .slide-content {
    color: #fff; }
  .slide-content h3 {
    color: #fff;
    font-size: 28px; }
  .slide-content p,
  .slide-content ul {
    font-size: 18px; } }

@media screen and (min-width: 1170px) {
  .slide-title h1,
  .slide-title h2 {
    font-size: 48px; }
  .slide-title p {
    font-size: 22px; }
  .slide-content h3 {
    font-size: 36px; }
  .slide-content p,
  .slide-content ul {
    font-size: 22px; } }

/* CTA IMAGE BLOCKS */
.CTA__image-block-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center; }

@media screen and (min-width: 768px) {
  .CTA__image-block-wrapper {
    margin: 40px auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
            flex-direction: row; }
  .CTA__image-element {
    max-width: 570px; } }

.CTA__image-block-item {
  margin-bottom: 20px;
  -webkit-box-shadow: 0px 1px 5px 0px #a8a8a8;
          box-shadow: 0px 1px 5px 0px #a8a8a8;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  -moz-transition: transform 200ms ease-in-out, -moz-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out, -moz-transform 200ms ease-in-out; }
  .CTA__image-block-item--no-bg {
    -webkit-border-radius: 9px;
            border-radius: 9px; }
    .CTA__image-block-item--no-bg .CTA__image-block-text {
      background-color: transparent; }

.CTA__image-block-item:hover {
  -webkit-transform: translateY(-10px);
     -moz-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
          transform: translateY(-10px); }

@media screen and (min-width: 768px) {
  .CTA__image-block-item {
    margin-left: 20px;
    margin-bottom: 20px;
    position: relative; } }

.CTA__image-block-item:hover .CTA__image-block-text {
  background-color: rgba(31, 187, 215, 0.6); }

.CTA__image-element {
  width: 100%; }

.CTA__image-block-text-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  width: 100%; }
  .CTA__image-block-text-wrapper--bottom {
    -webkit-transform: translate(-50%, 0%);
       -moz-transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
    top: auto;
    bottom: 0; }
  .CTA__image-block-text-wrapper * {
    color: #fff; }

.CTA__image-block-text {
  background-color: rgba(0, 0, 0, 0.6);
  display: block;
  color: #fff;
  padding: 20px;
  -webkit-transition: background-color 200ms ease-in-out;
  -moz-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out; }

.cta-img-full-width {
  width: 100%;
  position: relative; }
  .cta-img-full-width__image-wrapper {
    overflow: hidden;
    margin: 0 15px;
    padding: 0;
    width: -webkit-calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    width: calc(100% - 30px); }
    @media screen and (min-width: 768px) {
      .cta-img-full-width__image-wrapper {
        width: 100%;
        margin: 0px;
        padding: 0 15px; } }
    .cta-img-full-width__image-wrapper img {
      max-width: initial; }
      @media screen and (min-width: 768px) {
        .cta-img-full-width__image-wrapper img {
          max-width: 100%; } }
  .cta-img-full-width__content-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    background-color: rgba(255, 255, 255, 0.6); }
    @media screen and (min-width: 768px) {
      .cta-img-full-width__content-wrapper {
        background-color: transparent; }
        .cta-img-full-width__content-wrapper.float-right {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: reverse;
          -webkit-flex-direction: row-reverse;
             -moz-box-orient: horizontal;
             -moz-box-direction: reverse;
              -ms-flex-direction: row-reverse;
                  flex-direction: row-reverse; } }
  .cta-img-full-width__content {
    -webkit-align-self: center;
        -ms-flex-item-align: center;
                -ms-grid-row-align: center;
            align-self: center;
    text-align: center;
    padding: 20px; }
    .cta-img-full-width__content h4 {
      font-size: 2.4rem; }

/* CTA IMAGE-TEXT LAYOUT */
.CTA-left,
.CTA-right {
  text-align: center;
  margin-bottom: 60px; }

.CTA-left img,
.CTA-right img {
  height: auto;
  width: 100%; }

.CTA-left .CTA__caption {
  text-align: left; }

.CTA-right .CTA__caption {
  text-align: right; }

@media screen and (min-width: 768px) {
  .CTA-left,
  .CTA-right {
    display: block;
    float: left; }
  .CTA-left {
    text-align: left; }
  .CTA-right {
    text-align: right; }
  .CTA-left .CTA__caption,
  .CTA-right .CTA__caption {
    line-height: 3rem; } }

.cta-product-feature {
  background-color: #eaeaea;
  color: #333;
  display: block;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  margin-bottom: 20px; }
  .cta-product-feature:hover {
    color: #1fbbd7;
    -webkit-transform: translateY(-10px);
       -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
            transform: translateY(-10px); }
    .cta-product-feature:hover .cta-product-feature__caption-title {
      color: #1fbbd7; }
  @media screen and (min-width: 768px) {
    .cta-product-feature {
      max-width: -webkit-calc(50% - 22px);
      max-width: -moz-calc(50% - 22px);
      max-width: calc(50% - 22px);
      margin-left: 15px; } }
  .cta-product-feature__image-wrapper {
    padding: 0px !important; }
  .cta-product-feature__caption-wrapper {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%); }
  .cta-product-feature__caption-title {
    font-weight: 600;
    margin: 0px; }
  .cta-product-feature strong {
    color: #1fbbd7; }

.cta-social-share-item__content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: -webkit-calc(100% - 30px);
  width: -moz-calc(100% - 30px);
  width: calc(100% - 30px);
  height: 100%;
  margin-left: 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in-out;
  -moz-transition: opacity 400ms ease-in-out;
  transition: opacity 400ms ease-in-out;
  text-align: center; }

.cta-social-share-item:hover .cta-social-share-item__content-wrapper {
  opacity: 1; }

.cta-social-share-item__content-wrapper {
  color: #fff; }

a.cta-social-share-item__link {
  padding: 0 5px;
  color: #bfbfbf; }

.cta-social-share-item a:hover {
  color: #fff;
  text-decoration: none; }

.cta-social__title {
  font-size: 18px; }

.featured .featured-product-wrapper .thumbnail.product {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.hero-wrapper {
  position: relative; }
  .hero-wrapper .hero-image-wrapper img {
    width: 100%; }
  .hero-wrapper .hero-content__title {
    font-size: 3.6rem; }
    @media screen and (min-width: 768px) {
      .hero-wrapper .hero-content__title {
        font-size: 3rem;
        font-weight: 700; } }
    @media screen and (min-width: 1600px) {
      .hero-wrapper .hero-content__title {
        font-size: 5.8rem; } }
    @media screen and (min-width: 2000px) {
      .hero-wrapper .hero-content__title {
        font-size: 7.2rem; } }
  @media screen and (min-width: 992px) {
    .hero-wrapper .hero-content-wrapper {
      position: absolute;
      top: 0;
      left: 50%;
      -webkit-transform: translateX(-50%);
         -moz-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
      text-align: center;
      color: #fff;
      max-width: 480px;
      margin-top: 40px; } }
  @media screen and (min-width: 992px) {
    .hero-wrapper .hero-content-wrapper,
    .hero-wrapper .hero-content__title {
      max-width: 960px; } }

.mosaic-wrapper {
  list-style: none;
  padding: 0px;
  margin: 0px; }

li.mosaic-item-wrapper {
  -webkit-transition: opacity 400ms ease-in-out;
  -moz-transition: opacity 400ms ease-in-out;
  transition: opacity 400ms ease-in-out;
  opacity: 1; }

li.mosaic-item-wrapper:hover {
  opacity: 0.6; }

@media screen and (max-width: 767px) {
  li.mosaic-item-wrapper {
    margin-bottom: 20px; } }

@media screen and (min-width: 768px) {
  .mosaic-wrapper {
    display: -ms-inline-grid;
    display: inline-grid;
    -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    width: 100%;
    margin: 0;
    padding: 0;
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px; }
  .mosaic-wrapper > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
  .mosaic-wrapper > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3; }
  .mosaic-wrapper > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5; }
  .mosaic-wrapper > *:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 1; }
  .mosaic-wrapper > *:nth-child(5) {
    -ms-grid-row: 2;
    -ms-grid-column: 3; }
  .mosaic-wrapper > *:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 5; }
  .mosaic-wrapper > *:nth-child(7) {
    -ms-grid-row: 3;
    -ms-grid-column: 1; }
  .mosaic-wrapper > *:nth-child(8) {
    -ms-grid-row: 3;
    -ms-grid-column: 3; }
  .mosaic-wrapper > *:nth-child(9) {
    -ms-grid-row: 3;
    -ms-grid-column: 5; }
  li.mosaic-item-wrapper:nth-child(1) {
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-column-span: 1;
    grid-column-end: 2;
    -ms-grid-row: 1;
        grid-row-start: 1;
    -ms-grid-row-span: 1;
    grid-row-end: 2; }
  li.mosaic-item-wrapper:nth-child(2) {
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-column-span: 1;
    grid-column-end: 2;
    -ms-grid-row: 2;
        grid-row-start: 2;
    -ms-grid-row-span: 2;
    grid-row-end: 4; }
  li.mosaic-item-wrapper:nth-child(3) {
    -ms-grid-column: 2;
        grid-column-start: 2;
    -ms-grid-column-span: 1;
    grid-column-end: 3;
    -ms-grid-row: 1;
        grid-row-start: 1;
    -ms-grid-row-span: 2;
    grid-row-end: 3; }
  li.mosaic-item-wrapper:nth-child(4) {
    -ms-grid-column: 2;
        grid-column-start: 2;
    -ms-grid-column-span: 1;
    grid-column-end: 3;
    -ms-grid-row: 3;
        grid-row-start: 3;
    -ms-grid-row-span: 1;
    grid-row-end: 4;
    -ms-grid-row-align: self-end;
        align-self: self-end; }
  li.mosaic-item-wrapper:nth-child(5) {
    -ms-grid-column: 3;
        grid-column-start: 3;
    -ms-grid-column-span: 1;
    grid-column-end: 4;
    -ms-grid-row: 1;
        grid-row-start: 1;
    -ms-grid-row-span: 1;
    grid-row-end: 2; }
  li.mosaic-item-wrapper:nth-child(6) {
    -ms-grid-column: 3;
        grid-column-start: 3;
    -ms-grid-column-span: 1;
    grid-column-end: 4;
    -ms-grid-row: 2;
        grid-row-start: 2;
    -ms-grid-row-span: 2;
    grid-row-end: 4; } }

.review-item {
  -webkit-box-shadow: 0px 0px 5px #ddd;
          box-shadow: 0px 0px 5px #ddd;
  -webkit-border-radius: 9px;
          border-radius: 9px;
  margin-bottom: 60px;
  padding: 20px; }
  .review-item__content-writeup {
    margin-bottom: 30px; }
  .review-item__score {
    color: #1fbbd7;
    margin-bottom: 10px; }
  .review-item__profile-image {
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    border: 3px solid #bfeced; }
  .review-item__content-author {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 0px;
    margin-top: 20px; }

body:not(.home) #System_PreContent {
  display: none; }

.system-precontent__content-page {
  display: none; }

body:not(.home):not(.product) #System_PreContent .system-precontent__content-page {
  display: block; }

#System_Header {
  font-family: "Open Sans";
  font-weight: 600; }

.tabberlive .tabbertabhide {
  display: none; }

.tabberlive {
  margin-top: 1em; }

ul.tabbernav {
  margin: 0;
  padding: 3px 0;
  height: 24px;
  width: 100%;
  border: none; }

ul.tabbernav li {
  list-style: none;
  margin: 0;
  display: inline; }

ul.tabbernav li a {
  color: #fff;
  padding: 0 24px;
  text-decoration: none;
  text-align: center;
  display: block;
  float: left;
  font-size: 1.2em;
  line-height: 47px;
  height: 47px;
  background: #1fbbd7;
  border-top: 1px solid #1fbbd7;
  border-right: 1px solid #1fbbd7;
  border-left: 1px solid #1fbbd7;
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px; }

ul.tabbernav li a:link {
  background: #1fbbd7;
  color: #fff; }

ul.tabbernav li a:hover {
  color: #fff;
  background: #1fbbd7;
  border-top: 1px solid #1fbbd7;
  border-right: 1px solid #1fbbd7;
  border-left: 1px solid #1fbbd7; }

ul.tabbernav li.tabberactive a {
  color: #1fbbd7;
  background: #fff;
  border-top: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
  border-left: 1px solid #d9d9d9; }

ul.tabbernav li.tabberactive a:hover {
  color: #1fbbd7;
  background: #fff;
  border-top: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
  border-left: 1px solid #d9d9d9; }

.tabberlive .tabbertab {
  background: #fff;
  border: 1px solid #d9d9d9;
  margin-top: 26px;
  padding: 10px;
  width: 100%; }

table.list {
  width: 100%;
  margin-bottom: 20px; }
  table.list th,
  table.list td {
    padding: 10px 0px; }

a.template-item .caption * {
  word-wrap: anywhere;
  font-size: 2rem; }

.title-separator--center::after,
.title-separator--left::after,
.title-separator--right::after {
  content: "";
  display: block;
  height: 2px;
  width: 70px;
  background-color: #212121;
  position: absolute;
  top: -webkit-calc(100% + 20px);
  top: -moz-calc(100% + 20px);
  top: calc(100% + 20px); }

.title-separator--center,
.title-separator--left,
.title-separator--right {
  position: relative;
  margin-bottom: 60px; }

@media screen and (max-width: 991px) {
  .title-separator--left::after,
  .title-separator--right::after {
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); } }

@media screen and (min-width: 992px) {
  .title-separator--left {
    text-align: left; }
  .title-separator--center {
    text-align: center; }
  .title-separator--right {
    text-align: right; }
  .title-separator--center::after {
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); }
  .title-separator--right::after {
    right: 0; } }

#container__content {
  margin-bottom: 60px; }

/* ======================================================================================================================== */
/* Footer */
/* ======================================================================================================================== */
#container__footer {
  background-color: #000;
  color: #fff !important;
  padding-top: 80px;
  padding-bottom: 80px; }

#p-footer h1,
#p-footer h2,
#p-footer h3,
#p-footer h4,
#p-footer h5,
#p-footer h6 {
  color: #fff !important; }

#p-footer a {
  display: inline-block;
  -webkit-transition: color 200ms ease-in-out;
  -moz-transition: color 200ms ease-in-out;
  transition: color 200ms ease-in-out;
  text-decoration: none; }
  #p-footer a:not(:hover) {
    color: #fff; }

#p-footer a::after {
  content: "";
  width: 1%;
  height: 1px;
  display: block;
  background-color: transparent;
  -webkit-transition: width 200ms ease-in-out;
  -moz-transition: width 200ms ease-in-out;
  transition: width 200ms ease-in-out; }

#p-footer a:hover {
  color: #1fbbd7; }

#p-footer a:hover::after {
  width: 100%;
  background-color: #1fbbd7; }

#p-footer .social a:hover::after {
  display: none;
  content: none; }

.footer-logo {
  height: auto;
  width: 100%;
  max-width: 255px; }

.footer-column {
  margin-bottom: 20px; }

.footer-column > h4 {
  margin-bottom: 30px; }

.footer-column ul {
  padding-left: 0px;
  list-style: none; }

.footer-column:not(.social) ul {
  padding-left: 20px; }

.footer-column a {
  color: #fff; }

.footer-column.social ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex; }

.footer-column.social ul li {
  margin-right: 20px;
  font-size: 6px; }

/* .footer-column a:hover {
color: #3790ee;
} */
#copyright_footer {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-size: 12px;
  margin: 0px; }

@media screen and (min-width: 992px) {
  .footer-column:not(.social) ul,
  .footer-column ul {
    list-style: none;
    padding-left: 0px; } }

@media screen and (max-width: 767px) {
  .navbar-default {
    margin-left: -15px;
    margin-right: -15px;
    background-color: #fff;
    border: none;
    border-bottom: 1px solid #e7e7e7; }
  .navbar-brand {
    height: 60px;
    width: 250px; }
  pc-header {
    display: none; } }

div#s-header-logo-mobile,
div#s-header-logo {
  width: 100%;
  height: 100%;
  background: url("https://cdn.presscentric.com/skins/css/skin-15/assets/logo.png");
  -webkit-background-size: contain;
          background-size: contain;
  background-repeat: no-repeat;
  background-position: left center; }

.navbar-default {
  border: none; }

#s-nav {
  background-color: transparent; }
  #s-nav .container nav.navbar-default {
    margin-bottom: 0px;
    background-color: transparent; }

@media screen and (min-width: 768px) {
  .navbar-header {
    margin: 0px; }
  #s-nav .container > .navbar-default > .navbar-header {
    display: none; }
  #s-nav .navbar-collapse {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    #s-nav .navbar-collapse::after, #s-nav .navbar-collapse::before {
      content: none;
      width: 0px; }
  #System_Header,
  #s-user {
    padding: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  #System_Header {
    color: #fff;
    background-color: #000;
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
       -moz-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 50%;
       -moz-box-flex: 1;
        -ms-flex: 1 0 50%;
            flex: 1 0 50%;
    position: relative;
    max-width: 50%; }
    #System_Header::before {
      content: "";
      display: block;
      height: 100%;
      background-color: #000;
      position: absolute;
      top: 0px;
      right: 100%;
      width: 50vw; }
    #System_Header a {
      color: #1fbbd7; }
  #s-user {
    background-color: #000;
    color: #fff;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
       -moz-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 50%;
       -moz-box-flex: 1;
        -ms-flex: 1 0 50%;
            flex: 1 0 50%;
    text-align: right;
    margin: 0px;
    position: relative;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    max-width: 50%; }
    #s-user a,
    #s-user a.btn {
      color: #1fbbd7;
      font-size: 1.4rem; }
      #s-user a:hover,
      #s-user a.btn:hover {
        text-decoration: underline; }
    #s-user * {
      display: inline-block;
      float: none !important;
      margin: 0;
      padding: 0 5px; }
    #s-user .btn,
    #s-user #user-cart {
      background-color: initial;
      border: none;
      padding: 0px; }
    #s-user::after {
      content: "";
      display: block;
      height: 100%;
      background-color: #000;
      position: absolute;
      top: 0px;
      left: 100%;
      width: 50vw; }
  pc-header {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
       -moz-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 25%;
       -moz-box-flex: 0;
        -ms-flex: 0 1 25%;
            flex: 0 1 25%;
    margin: 0px;
    max-width: 25%; }
  #s-menu {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
       -moz-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 75%;
       -moz-box-flex: 0;
        -ms-flex: 0 1 75%;
            flex: 0 1 75%;
    text-align: right;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    max-width: 75%; }
    #s-menu > ul.navbar-nav > li {
      height: 100%;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
         -moz-box-align: center;
          -ms-flex-align: center;
              align-items: center; }
  #s-menu > * {
    display: inline-block; }
  #s-header {
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: transparent;
    -webkit-border-radius: 0px;
            border-radius: 0px;
    z-index: 1; }
    #s-header .navbar-header {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      float: none; }
    #s-header a.navbar-brand {
      display: block;
      float: none;
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 50%;
         -moz-box-flex: 0;
          -ms-flex: 0 0 50%;
              flex: 0 0 50%;
      max-width: 50%;
      padding: 0px; }
      #s-header a.navbar-brand:only-child {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
           -moz-box-flex: 0;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
        max-width: 100%; }
    #s-header a.ng-scope {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 50%;
         -moz-box-flex: 0;
          -ms-flex: 0 0 50%;
              flex: 0 0 50%;
      max-width: 50%;
      max-height: 50px; }
      #s-header a.ng-scope:only-child {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
           -moz-box-flex: 0;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%; }
    #s-header a {
      color: #1fbbd7; } }

div.section-wrapper {
  margin-bottom: 60px; }

#container__content div.content__column-left {
  display: none; }

#container__content #s-main {
  width: 100%; }

#s-products #hdr-products p {
  font-size: 30px;
  margin-top: 20px;
  margin-bottom: 0;
  font-family: "Open Sans", Geneva, Verdana, sans-serif;
  font-weight: bold;
  text-align: center; }

#s-products .btn {
  background-color: #fff;
  color: #1fbbd7; }
  #s-products .btn:hover {
    background-color: #45cce4;
    color: #fff; }

#s-products .list-group-item > a:hover {
  background-color: #45cce4;
  color: #fff; }

.sideMenu .dropup a span.tag {
  display: none; }

.sideMenu .btn {
  text-align: left; }

#order-shipbill,
#order-shipbill #order,
#order-confirm #order,
.field.form-group.fields-billing {
  padding: 20px; }

#adr-billing .field.form-group.fields-billing,
#adr-shipping .field {
  padding: 0 20px;
  margin-bottom: 15px; }

/* ========================================== ORDER UPLOAD ========================================== */
#order-upload {
  margin: 40px auto; }

#order-upload .form.upload {
  display: inline-block;
  width: 100%;
  padding: 20px 0;
  margin: 20px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd; }

#uploads-drop .file .progress {
  display: none; }

body.product {
  /* order form */ }
  body.product .job-specification__wrapper {
    list-style: none;
    padding: 0px; }
  body.product #product-header {
    overflow: hidden;
    margin-bottom: 50px; }
  body.product #product-header img {
    height: 100%;
    width: 100%;
    -o-object-position: center;
       object-position: center; }
  @media (min-width: 768px) {
    body.product #order_wrapper {
      margin-top: 40px; } }
  body.product #product img {
    display: block;
    max-width: 100%;
    height: auto; }
  body.product #product .pheader h1 {
    margin-top: 10px;
    font-size: 18pt; }
  body.product #order {
    -webkit-border-radius: 0px;
            border-radius: 0px;
    border: none; }
  body.product #order .panel-heading {
    color: #fff;
    background-color: #fff !important;
    -webkit-border-radius: 0px;
            border-radius: 0px;
    background: #fff !important;
    color: #fff;
    height: 47px;
    padding: 0;
    border: none; }
  body.product #order .panel-heading .jobspecs {
    font-size: 18pt;
    padding: 0 24px;
    margin: 0;
    display: block;
    height: 47px;
    line-height: 47px;
    color: #000; }
  body.product #order .panel-body {
    background-color: #fff; }
  body.product #order ul {
    list-style-type: none;
    padding: 0; }
  body.product #order .fields .form-group * {
    -webkit-border-radius: 0px;
            border-radius: 0px; }
  body.product #order .list-group-item {
    background-color: transparent; }
  body.product #pricingWrapper li {
    border: none; }

h1,
.h1,
.h2,
h2,
.section-title {
  font-size: 36px; }

h3,
.h3 {
  font-size: 32px; }

#System_Header, #s-user {
  padding: 20px; }

/* ======================================================================================================================== */
/* Featured Product Cards */
/* ======================================================================================================================== */
.row.featured {
  margin-bottom: 100px; }

.featured-product-wrapper {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -moz-transform: translateY(0px);
       transform: translateY(0px);
  -webkit-transition: -webkit-transform 100ms ease-in-out;
  transition: -webkit-transform 100ms ease-in-out;
  -moz-transition: transform 100ms ease-in-out, -moz-transform 100ms ease-in-out;
  transition: transform 100ms ease-in-out;
  transition: transform 100ms ease-in-out, -webkit-transform 100ms ease-in-out, -moz-transform 100ms ease-in-out;
  transition: transform 100ms ease-in-out, -webkit-transform 100ms ease-in-out; }

.featured-product-wrapper:hover {
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
       transform: translateY(-10px); }

.featured .featured-product-wrapper .product {
  min-height: 220px;
  -webkit-box-shadow: 0px 1px 5px 0px #a8a8a8;
  box-shadow: 0px 1px 5px 0px #a8a8a8;
  height: auto; }

.featured .featured-product-wrapper .thumbnail .caption.title {
  padding: 0;
  position: inherit;
  height: auto;
  width: auto; }

.featured .featured-product-wrapper .product .title h3 {
  font-size: 1.75rem;
  white-space: normal; }

@media screen and (min-width: 768px) {
  .featured-product-wrapper {
    height: 275px;
    margin-bottom: 20px;
    padding: 0 10px; }
  .featured .featured-product-wrapper .product {
    border: none;
    padding: 0px;
    height: 100%;
    max-width: 270px;
    -webkit-box-shadow: 0px 1px 5px 0px #a8a8a8;
    box-shadow: 0px 1px 5px 0px #a8a8a8; }
  .featured-product-thumbnail-wrapper {
    overflow: hidden; }
  .featured .featured-product-wrapper .product.thumbnail img {
    max-height: 275px;
    -o-object-fit: contain;
    object-fit: contain;
    /* min-width: 100%; */
    /* min-height: 100%; */
    height: 100%;
    padding: 10px 10px 0px 10px; }
  .featured .featured-product-wrapper .product .title h3 {
    font-size: 1.75rem;
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding-bottom: 40px;
    padding-right: -webkit-calc(5% + 5px);
    padding-right: -moz-calc(5% + 5px);
    padding-right: calc(5% + 5px);
    white-space: normal;
    background-color: rgba(255, 255, 255, 0.6); }
  .featured .featured-product-wrapper .product .title .sale {
    position: absolute;
    top: -10px;
    right: 0px;
    -webkit-border-radius: 7000px;
            border-radius: 7000px;
    padding: 0px 10px;
    background: #60e4ff;
    color: white;
    height: 80px;
    width: 80px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 15px;
    font-weight: bold;
    z-index: 10;
    -webkit-background-size: contain;
            background-size: contain; } }

/* ======================================================================================================================== */
/* Product Page */
/* ======================================================================================================================== */
#product img {
  display: block;
  max-width: 100%;
  height: auto; }

#order {
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none; }

#order h2.jobspecs {
  font-size: 24px; }

#order input,
#order select {
  -webkit-border-radius: 0px;
          border-radius: 0px;
  font-style: italic; }

#order .panel-heading {
  background-color: transparent;
  border: none;
  padding: 0px; }

#order .panel-body {
  padding: 0px; }

#order .job-specification__wrapper {
  list-style: none;
  padding: 0px;
  font-size: 16px; }

#order .job-specification__wrapper label {
  font-weight: 500; }

#order .job-specification__wrapper h3.details {
  margin: 0;
  padding: 20px;
  margin-bottom: 20px;
  font-size: 22px; }

#order li > .fields,
#realtimeQuote,
#pricingSection {
  padding: 0px 20px; }

#order #debug {
  margin: 20px; }

#pricingWrapper li {
  border: none;
  -webkit-border-radius: 0px;
          border-radius: 0px;
  padding: 10px 0px; }

#pricingWrapper li label {
  font-weight: 400; }

#debug h3 {
  font-size: 18px; }

.cta-item-content.cta-item-content-overlay {
  position: absolute;
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
  bottom: 0;
  padding: 20px;
  width: -webkit-calc(100% - 80px);
  width: -moz-calc(100% - 80px);
  width: calc(100% - 80px);
  max-width: 100%;
  font-size: 1.6rem; }

@media screen and (min-width: 768px) {
  .cta-item-content.cta-item-content-overlay {
    font-size: 3rem; } }

/* ======================================================================================================================== */
/* Tabber */
/* ======================================================================================================================== */
.tab-content {
  padding: 20px 10px;
  background: #fff;
  margin-top: -2px;
  font-size: 13px;
  color: #959595;
  border: 1px solid #d9d9d9; }

.nav.nav-tabs {
  border: none;
  margin-left: 5px; }

.nav.nav-tabs li {
  margin: 1px 2px;
  padding: 0;
  background: #fff; }

.nav.nav-tabs li a {
  padding: 13px 24px;
  margin: 0;
  font: normal 15px "MyriadPro-Light", "sans-serif";
  border: solid 1px #d9d9d9;
  border-bottom: none; }

.nav.nav-tabs li.active a {
  border: none; }

.tabberlive .tabbertabhide {
  display: none; }

.tabberlive {
  margin-top: 1em;
  margin-bottom: 40px; }

ul.tabbernav {
  margin: 0;
  padding: 3px 0;
  height: 18px;
  width: 100%;
  border: none; }

ul.tabbernav li {
  list-style: none;
  margin: 0;
  display: inline-block;
  width: 50%; }

ul.tabbernav li a {
  padding: 0 24px;
  text-decoration: none;
  text-align: center;
  display: block;
  font-size: 1.2em;
  line-height: 47px;
  height: 47px;
  width: 100%;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
  border-right: 1px solid #bbb;
  color: #bbb;
  background: #fff;
  -webkit-border-radius: 0px;
          border-radius: 0px; }

/* ul.tabbernav li a:link {
border: #1480b9;
color: #1480b9;
} */
/* ul.tabbernav li a:hover {
  color: #1fbbd7;
  border-color: #1fbbd7;
} */
ul.tabbernav li.tabberactive a {
  /* color: #1fbbd7; */
  /* border-color: #1fbbd7; */
  border-bottom: 1px solid transparent; }

/* ul.tabbernav li.tabberactive a:hover {
  border-color: #1fbbd7;
} */
.tabberlive .tabbertab {
  background: #fff;
  /* border: 1px solid #1fbbd7; */
  margin-top: 26px;
  padding: 10px;
  width: 100%; }

#btn-submit {
  -webkit-border-radius: 0px;
          border-radius: 0px;
  font-weight: 600;
  font-size: 22px;
  padding: 12px 50px; }

/*
"$base-color":"#1fbbd7",
"$secondary-color":"#045870",
"$black":"#000",
"$logoUrl":"\"https:\\/\\/cdn.presscentric.com/skins/css/skin-15/assets/logo.png\"",
"$button-corner-radius":"9px",
"$use-sticky-menu":"false",
"$sticky-menu-margin":"146px",
"$sticky-menu-margin-mobile":"60px",
"$logo-height-mobile":"60px",
"$logo-height-desktop":"50px",
"$nav-background-color":"transparent",
"$system-header-background-color":"#000",
"$system-header-text-color":"#fff",
"$system-header-link-color":"#1fbbd7",
"$s-user-background-color":"#000",
"$s-user-text-color":"#fff",
"$s-user-link-color":"#1fbbd7",
"$s-menu-justify":"\"left\"",
"$font-family":"\"Montserrat\",Geneva,Verdana,sans-serif",
"$secondary-font-family":"\"Open Sans\",Geneva,Verdana,sans-serif",
"$font-size":"1.4rem",
"$font-weight":"400",
"$line-height":"28px",
"$title-font-family":"\"Montserrat\",Geneva,Verdana,sans-serif",
"$title-color":"#333",
"$title-font-weight":"600",
"$link-color":"#337ab7",
"$link-hover":"#23527c",
"$carousel-title-color":"#fff",
"$carousel-title-shadow":"false",
"$carousel-content-color":"#fff",
"$carousel-indicator-color":"#fff",
"$show-System_PreContent-only-on-home":"true",
"$side-menu":"false",
"$side-menu-hide-on-home-page":"false",
"$side-menu-hide-on-product-page":"true",
"$side-menu-hide-on-content-page":"true",
"$side-menu-header-font":"\"Open Sans\",Geneva,Verdana,sans-serif",
"$side-menu-items-font":"\"Montserrat\",Geneva,Verdana,sans-serif",
"$side-menu-text-align":"left",
"$button-font-family":"\"Montserrat\",Geneva,Verdana,sans-serif",
"$button-background-color":"#000",
"$button-text-color":"#fff",
"$button-font-size":"1.4rem",
"$button-border-color":"transparent",
"$button-background-color-hover":"#fff",
"$button-text-color-hover":"#1fbbd7",
"$button-border-color-hover":"#1fbbd7",
"$footer-background-color":"#000",
"$footer-title-color":"#fff",
"$footer-text-color":"#fff",
"$footer-link-color":"#fff",
"$order-drop-shadow":"false",
"$order-input-drop-shadow":"false",
"$order-job-specs-color":"#000",
"$order-job-specs-bg-color":"#fff",
"$order-form-bg-color":"#fff"
*/
/* ---- V2 compatibility hooks for Skin 15 (#133) -------------------------- *
 * The legacy V1 Skin 15 CSS does not style these V2 chrome hooks
 * (the V2 chrome / selector contract from #69 / #72 / #103 was
 * introduced after Skin 15), or only styles them via
 * element-qualified forms such as `div#s-header-logo` that do not
 * satisfy the #103 BARE-ID-selector tripwire. Minimal pass-through
 * rules below keep the #103 V2 selector tripwire green for every
 * published V2 skin, including this one. Refinement (typography /
 * spacing / brand polish) is follow-up work.
 * ------------------------------------------------------------------------- */

/* Layout chrome — pass-through display so the V2 layout shell is
 * always present even if the legacy body did not target them. */
#body-wrapper {
  display: block;
}

#s-content {
  display: block;
}

#s-subnav {
  display: block;
}

/* The legacy CSS styles `div#s-header-logo` / `div#s-header-logo-mobile`
 * (element-qualified). Add bare-ID rules so the #103 tripwire (which
 * tests `#s-header-logo` without an element qualifier) holds. */
#s-header-logo {
  display: inline-block;
}

#s-header-logo-mobile {
  display: none;
}

@media (max-width: 767px) {
  #s-header-logo {
    display: none;
  }
  #s-header-logo-mobile {
    display: inline-block;
  }
}

/* Top-right account-menu container the V2 chrome emits inside `#s-menu`. */
#tmenu-account {
  display: inline-block;
}

/* Two-column content layout hooks the V2 chrome emits inside
 * `#container__content`. */
.content__column-left {
  display: block;
}

.content__column-right {
  display: block;
}

/* Mobile nav collapse hook — Bootstrap-3-style. */
.navigation__menu-collapse {
  display: block;
}

.navbar {
  display: block;
}

.dropdown-menu {
  display: none;
}

.dropdown-menu.open,
.open > .dropdown-menu {
  display: block;
}

/* ---- Product detail order panel — Skin 15 V2 (#135) -------------------- *
 * The Storefront V2 product calculator (`ProductOrderPanel`) emits
 * `aside.product-order-panel` inside `.col-md-4.product-detail-aside`
 * with a clean React markup contract (plain `<label>` / `<input>` /
 * `<select>` / `<textarea>` / `<fieldset>` / `<legend>` / `<button
 * type="submit">` and `<p role="alert">` for inline errors). The
 * legacy Skin 15 calculator chrome above (`body.product #order`,
 * `#order .panel-heading`, `#pricingWrapper`, `#btn-submit`, etc.)
 * targets V1 markup that the V2 component no longer emits, so on a
 * Skin-15-equipped tenant the V2 calculator falls back to raw
 * browser styling and overlaps (the same symptom #131 fixed for
 * `skin-v2-default`).
 *
 * This block mirrors the structural intent of the `#131` rules in
 * `skin-v2-default` but is styled in Skin 15's visual language —
 * pulled from this file's own SCSS-variable echo block (lines
 * 1720+): Montserrat headings, the `$base-color` teal `#1fbbd7`
 * accent + `$secondary-color` `#045870` hover, `$link-color`
 * `#337ab7`, and the flat / sharp-corner geometry the existing
 * `#btn-submit` already uses (`border-radius: 0`). No new brand
 * colors are introduced and no runtime / React-component behavior
 * is changed.
 *
 * The panel chrome itself stays white/neutral per the #135 brief
 * (legacy `#order .panel-heading` uses `background-color:
 * transparent`, so a #fafafa card-fill like skin-v2-default would
 * clash with the rest of the Skin 15 page).
 * ------------------------------------------------------------------------- */

.product-detail-main,
.product-detail-aside {
  box-sizing: border-box;
}

.product-detail-main img {
  display: block;
  max-width: 100%;
  height: auto;
}

.product-detail-aside {
  padding-left: 16px;
}

.product-order-panel {
  display: block;
  margin: 0 0 24px;
  padding: 20px;
  border: 1px solid #d0d0d0;
  /* Skin 15 page chrome is white/neutral — keep the panel flush
   * instead of card-fill so it sits cleanly on the page bg. */
  background: #fff;
  /* Skin 15 uses flat geometry — mirrors `#btn-submit border-radius:0`. */
  border-radius: 0;
  box-sizing: border-box;
  max-width: 100%;
  font-family: "Montserrat", Geneva, Verdana, sans-serif;
  color: #333;
  line-height: 1.4;
}

.product-order-panel h2 {
  margin: 0 0 16px;
  /* Mirrors legacy `#order h2.jobspecs { font-size: 24px; }` so the
   * "Order options" heading matches the rest of Skin 15's product
   * panel typography. */
  font-size: 24px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

.product-order-panel h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

.product-order-panel form {
  display: block;
}

.product-order-panel label {
  display: block;
  margin: 16px 0 6px;
  /* Mirrors legacy `#order .job-specification__wrapper label
   * { font-weight: 500; }`. */
  font-weight: 500;
  font-size: 14px;
  color: #333;
}

.product-order-panel input[type="text"],
.product-order-panel input[type="number"],
.product-order-panel input[type="email"],
.product-order-panel input[type="password"],
.product-order-panel select,
.product-order-panel textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  margin: 0 0 10px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  border: 1px solid #ccc;
  /* Flat geometry — mirrors `#order input, #order select
   * { border-radius: 0; }`. */
  border-radius: 0;
  background: #fff;
}

.product-order-panel input[type="text"]:focus,
.product-order-panel input[type="number"]:focus,
.product-order-panel input[type="email"]:focus,
.product-order-panel input[type="password"]:focus,
.product-order-panel select:focus,
.product-order-panel textarea:focus {
  outline: 0;
  /* `$base-color` from the Skin 15 SCSS-variable echo block. */
  border-color: #1fbbd7;
}

/* Long printing / media / proofing option labels can otherwise
 * force the aside column to grow wider than its grid parent. */
.product-order-panel select {
  text-overflow: ellipsis;
}

.product-order-panel textarea {
  min-height: 90px;
  resize: vertical;
}

.product-order-panel fieldset {
  display: block;
  margin: 16px 0;
  padding: 12px 14px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  box-sizing: border-box;
  max-width: 100%;
}

.product-order-panel fieldset legend {
  padding: 0 8px;
  font-size: 14px;
  font-weight: 600;
  /* `$secondary-color` from the Skin 15 SCSS-variable echo block —
   * reads as a grouping heading without competing with the H2. */
  color: #045870;
}

.product-order-panel [role="alert"] {
  display: block;
  margin: 4px 0 10px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.4;
  color: #a02020;
  background: #fff5f5;
  border: 1px solid #e0a8a8;
  border-radius: 0;
}

.product-order-panel ul {
  margin: 4px 0 10px;
  padding-left: 20px;
}

.product-order-panel a {
  /* `$link-color` from the Skin 15 SCSS-variable echo block. */
  color: #337ab7;
  word-break: break-word;
}

.product-order-panel a:hover {
  color: #23527c;
}

.product-order-panel button[type="submit"] {
  display: inline-block;
  margin-top: 20px;
  /* Mirrors legacy `#btn-submit { padding: 12px 50px;
   * border-radius: 0; font-weight: 600; }` so the V2 submit button
   * matches the same visual weight Skin 15 has always used. */
  padding: 12px 50px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: #1fbbd7;
  border: 1px solid #1fbbd7;
  border-radius: 0;
  cursor: pointer;
}

.product-order-panel button[type="submit"]:hover {
  background: #045870;
  border-color: #045870;
}

.product-order-panel button[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: #1fbbd7;
  border-color: #1fbbd7;
}

/* Mobile: Bootstrap 3 collapses both .col-md-* columns to 100%
 * width, so the aside no longer sits beside the main column — drop
 * the desktop separator padding so the panel hits the page edges
 * the same way the main content does. */
@media (max-width: 767px) {
  .product-detail-aside {
    padding-left: 0;
  }
}

/* ============================================================================
 * #159: Skin 15 V2 — /account dashboard cards.
 *
 * Polished, modern styling for the existing V2 account-dashboard
 * markup. The React component (`src/app/account/AccountView.tsx`)
 * already exposes a stable BEM hook chain; this skin layer attaches
 * Skin 15's visual identity to those hooks WITHOUT changing the
 * React tree:
 *
 *   .account-dashboard            page root
 *   .account-dashboard__summary   identity + email panel
 *   .account-dashboard__actions   actions wrapper
 *   .account-dashboard__grid      responsive card grid
 *   .account-action-card          single action article
 *   .account-action-card__link    full-card click target (stretched)
 *   .account-action-card__title   action heading (h3)
 *   .account-action-card__description
 *   .account-action-card__status  small caption / capability hint
 *
 * Visual language reuses what already lives in this skin: Montserrat
 * body type, #333 heading color, and the existing #1fbbd7 brand
 * accent (the same teal used by Skin 15 buttons / active controls)
 * for hover + focus. No probe / debug colors; no global app CSS
 * (this file ships in the installable Skin 15 V2 package the tenant
 * uploads via the File Manager / Custom site skin preference). This
 * slice ONLY styles the `/account` dashboard cards — orders, proofs,
 * quotes, tickets, and upload land separately.
 *
 * #133 invariant: Skin 15 V2 is authored as CSS-compatible SCSS
 * that mirrors `skin-v2-15.css` 1:1 for the rule body. The block
 * below appears in BOTH `main.scss` and `skin-v2-15.css` verbatim
 * until a real Sass build pipeline lands.
 * ============================================================================ */

.account-dashboard {
  padding: 1.5em 0 2.5em;
}

.account-dashboard h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #333;
  margin: 0 0 1em;
}

.account-dashboard__summary {
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 1.25em 1.5em;
  margin: 0 0 2em;
}

.account-dashboard__summary p {
  margin: 0.15em 0;
  line-height: 1.55;
}

.account-dashboard__actions {
  margin: 0 0 1.5em;
}

.account-dashboard__actions h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #333;
  margin: 0 0 1em;
}

.account-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1em;
}

.account-action-card {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 1.15em 1.25em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.account-action-card:hover {
  border-color: #1fbbd7;
  box-shadow: 0 2px 8px rgba(31, 187, 215, 0.18);
}

.account-action-card:focus-within {
  border-color: #1fbbd7;
  box-shadow: 0 0 0 3px rgba(31, 187, 215, 0.25);
}

/* Whole card is a click target: a transparent `::after` pseudo
 * stretches over the article so any pointer in the article area
 * activates the link — the visible link text stays semantic and
 * keyboard-focusable in place. */
.account-action-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.account-action-card__link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
}

.account-action-card__link:hover,
.account-action-card__link:focus {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.account-action-card__title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #333;
  font-size: 1.05em;
  line-height: 1.3;
  margin: 0 0 0.4em;
  transition: color 0.15s ease;
}

.account-action-card:hover .account-action-card__title,
.account-action-card:focus-within .account-action-card__title {
  color: #1fbbd7;
}

.account-action-card__description {
  color: #555;
  font-size: 0.95em;
  line-height: 1.5;
  margin: 0 0 0.6em;
}

.account-action-card__status {
  color: #888;
  font-size: 0.85em;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 480px) {
  .account-dashboard__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
 * #159: Skin 15 V2 — V2 commerce + account saved-data pages.
 *
 * Builds on the same visual language as the /account dashboard
 * block already in this file: Montserrat headings on #333, neutral
 * white cards on light surfaces, Skin 15's #1fbbd7 brand teal for
 * hover / focus / primary controls (the same teal Skin 15 already
 * uses on product-order-form submit), muted state copy. Every
 * selector below already exists as a class hook in the matching
 * View component — pure-CSS slice, no React or global-app-CSS
 * change.
 *
 * Pages styled in this block:
 *   /cart                      (.cart, .cart-item, ...)
 *   /upload                    (.upload, .upload-row, ...)
 *   /checkout                  (.checkout, .checkout-item, ...)
 *   /checkout/confirmation     (.checkout-confirmation, ...)
 *   /account/addresses         (.account-addresses, .account-address, ...)
 *   /account/payment-methods   (.account-payment-methods, .account-payment-method, ...)
 *
 * NOT styled here (separate slices): orders, proofs, quotes,
 * tickets. NO probe / debug colors. NO behavior change.
 *
 * #133 invariant: SCSS source mirrors `skin-v2-15.css` 1:1 byte-
 * for-byte for the rule body. The block below appears in BOTH
 * `main.scss` and `skin-v2-15.css` verbatim.
 * ============================================================================ */

/* Shared heading typography across the six page roots, scoped so
 * other pages still get whatever the cascade gives them. */
.cart h1,
.upload h1,
.checkout h1,
.checkout-confirmation h1,
.account-addresses h1,
.account-payment-methods h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #333;
  margin: 0 0 1em;
}

.cart h2,
.checkout h2,
.checkout-confirmation h2,
.account-addresses h2,
.account-payment-methods h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #333;
  font-size: 1.15em;
  margin: 0 0 0.75em;
}

/* ----------------------------------------------------------------------------
 * /cart — shopping cart list + checkout call-to-action.
 * ---------------------------------------------------------------------------- */

.cart {
  padding: 1.5em 0 2.5em;
}

.cart__summary {
  color: #555;
  font-size: 0.95em;
  margin: 0 0 1.5em;
}

.cart__empty {
  color: #888;
  margin: 1em 0;
}

.cart__error {
  color: #a23838;
  margin: 1em 0;
}

.cart__items {
  list-style: none;
  margin: 0 0 2em;
  padding: 0;
}

.cart__item {
  margin: 0 0 1em;
}

.cart-item {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 1.15em 1.25em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cart-item:hover {
  border-color: #1fbbd7;
  box-shadow: 0 2px 8px rgba(31, 187, 215, 0.18);
}

.cart-item__name {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #333;
  font-size: 1.05em;
  line-height: 1.3;
  margin: 0 0 0.5em;
}

.cart-item__group,
.cart-item__description,
.cart-item__quantity,
.cart-item__pages,
.cart-item__size,
.cart-item__printing {
  color: #555;
  font-size: 0.95em;
  line-height: 1.5;
  margin: 0.15em 0;
}

.cart-item__line-total {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #333;
  font-size: 1.05em;
  margin: 0.5em 0;
}

.cart-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 1em;
  padding-top: 0.8em;
  border-top: 1px solid #f0f0f0;
}

.cart-item__remove,
.cart-item__save,
.cart-item__duplicate {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #333;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9em;
  font-weight: 500;
  padding: 0.5em 1em;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.cart-item__remove:hover,
.cart-item__save:hover,
.cart-item__duplicate:hover {
  border-color: #1fbbd7;
  color: #1fbbd7;
}

.cart-item__remove:disabled,
.cart-item__save:disabled,
.cart-item__duplicate:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.cart-item__error {
  color: #a23838;
  font-size: 0.9em;
  margin: 0.5em 0 0;
}

.cart__checkout-action {
  margin: 1.5em 0 0;
  text-align: right;
}

.cart__checkout-link {
  background: #1fbbd7;
  border: 1px solid #1fbbd7;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  padding: 0.75em 1.5em;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cart__checkout-link:hover,
.cart__checkout-link:focus {
  background: #045870;
  border-color: #045870;
  color: #fff;
  outline: none;
  text-decoration: none;
}

.cart__checkout-not-ready {
  color: #888;
  font-size: 0.9em;
  margin: 0.5em 0 0;
}

.cart__checkout-refresh {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #333;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9em;
  padding: 0.45em 0.9em;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.cart__checkout-refresh:hover {
  border-color: #1fbbd7;
  color: #1fbbd7;
}

/* ----------------------------------------------------------------------------
 * /upload — file picker form + uploaded-row list + product-flow footer.
 * ---------------------------------------------------------------------------- */

.upload {
  padding: 1.5em 0 2.5em;
}

.upload__form {
  align-items: center;
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  margin: 0 0 1.5em;
  padding: 1.25em 1.5em;
}

.upload__input {
  flex: 1 1 240px;
  font-family: "Montserrat", sans-serif;
}

.upload__submit,
.upload__continue {
  background: #1fbbd7;
  border: 1px solid #1fbbd7;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  padding: 0.65em 1.25em;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.upload__submit:hover,
.upload__continue:hover {
  background: #045870;
  border-color: #045870;
}

.upload__submit:disabled,
.upload__continue:disabled {
  background: #1fbbd7;
  border-color: #1fbbd7;
  cursor: not-allowed;
  opacity: 0.55;
}

.upload__error,
.upload__upload-error {
  color: #a23838;
  margin: 0.75em 0;
}

.upload__success {
  color: #2f6f2f;
  margin: 0.75em 0;
}

.upload__empty {
  color: #888;
  margin: 1em 0;
}

.upload__list {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
}

.upload__row {
  margin: 0 0 0.75em;
}

.upload-row {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 1em 1.25em;
}

.upload-row__name {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.25em;
}

.upload-row__size,
.upload-row__note {
  color: #555;
  font-size: 0.9em;
  line-height: 1.4;
  margin: 0.1em 0;
}

.upload__select {
  align-items: center;
  color: #333;
  display: inline-flex;
  font-family: "Montserrat", sans-serif;
  gap: 0.4em;
  margin: 0;
}

.upload__select-required {
  color: #a23838;
  font-size: 0.9em;
  margin: 0;
}

.upload__product-flow-footer {
  align-items: center;
  background: #f7f7f7;
  border-top: 1px solid #e5e5e5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  margin-top: 1em;
  padding: 1em 1.25em;
}

/* ----------------------------------------------------------------------------
 * /checkout — order summary + billing / shipping / details fieldsets.
 * ---------------------------------------------------------------------------- */

.checkout {
  padding: 1.5em 0 2.5em;
}

.checkout__empty {
  color: #888;
  margin: 1em 0;
}

.checkout__error {
  color: #a23838;
  margin: 1em 0;
}

.checkout__summary {
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  margin: 0 0 2em;
  padding: 1.25em 1.5em;
}

.checkout__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checkout__item {
  margin: 0 0 0.75em;
}

.checkout-item {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  padding: 0.85em 1em;
}

.checkout-item__name {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 1em;
  font-weight: 600;
  margin: 0 0 0.25em;
}

.checkout-item__description,
.checkout-item__quantity {
  color: #555;
  font-size: 0.9em;
  margin: 0.1em 0;
}

.checkout-item__line-total {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0.25em 0 0;
}

.checkout__refresh-prompt {
  color: #888;
  font-size: 0.9em;
  margin: 0.5em 0 0;
}

.checkout__form {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
}

.checkout__billing,
.checkout__shipping,
.checkout__details {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  margin: 0;
  padding: 1.25em 1.5em;
}

.checkout__billing legend,
.checkout__shipping legend,
.checkout__details legend {
  border: none;
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 1.05em;
  font-weight: 600;
  margin-bottom: 0.5em;
  padding: 0 0.5em;
  width: auto;
}

.checkout__billing label,
.checkout__shipping label,
.checkout__details label {
  color: #555;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9em;
  font-weight: 500;
  margin: 0.5em 0 0.25em;
}

.checkout__billing input,
.checkout__billing select,
.checkout__billing textarea,
.checkout__shipping input,
.checkout__shipping select,
.checkout__shipping textarea,
.checkout__details input,
.checkout__details select,
.checkout__details textarea {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95em;
  padding: 0.55em 0.75em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

.checkout__billing input:focus,
.checkout__billing select:focus,
.checkout__billing textarea:focus,
.checkout__shipping input:focus,
.checkout__shipping select:focus,
.checkout__shipping textarea:focus,
.checkout__details input:focus,
.checkout__details select:focus,
.checkout__details textarea:focus {
  border-color: #1fbbd7;
  box-shadow: 0 0 0 3px rgba(31, 187, 215, 0.18);
  outline: none;
}

.checkout__notify-client {
  align-items: center;
  color: #333;
  display: flex;
  font-family: "Montserrat", sans-serif;
  gap: 0.4em;
  margin: 0.75em 0;
}

.checkout__notify-client input {
  width: auto;
}

.checkout__submit-error {
  color: #a23838;
  margin: 0.75em 0;
}

.checkout__submit {
  align-self: flex-start;
  background: #1fbbd7;
  border: 1px solid #1fbbd7;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  padding: 0.75em 1.5em;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.checkout__submit:hover,
.checkout__submit:focus {
  background: #045870;
  border-color: #045870;
  outline: none;
}

.checkout__submit:disabled {
  background: #1fbbd7;
  border-color: #1fbbd7;
  cursor: not-allowed;
  opacity: 0.55;
}

.checkout__loading,
.checkout__empty-addresses,
.checkout__empty-payment-methods {
  color: #888;
  font-size: 0.9em;
  margin: 0.5em 0;
}

/* ----------------------------------------------------------------------------
 * /checkout/confirmation — post-submit success page.
 * ---------------------------------------------------------------------------- */

.checkout-confirmation {
  padding: 1.5em 0 2.5em;
}

.checkout-confirmation__heading {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 0 1em;
}

.checkout-confirmation__fallback {
  color: #888;
  font-size: 0.95em;
  margin: 1em 0;
}

.checkout-confirmation__order-id {
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 1.1em;
  font-weight: 600;
  margin: 0 0 1em;
  padding: 1em 1.25em;
}

.checkout-confirmation__purchase-order,
.checkout-confirmation__billed,
.checkout-confirmation__paid {
  color: #555;
  font-size: 0.95em;
  line-height: 1.55;
  margin: 0.25em 0;
}

/* ----------------------------------------------------------------------------
 * /account/addresses + /account/payment-methods — saved-data card grids.
 * ---------------------------------------------------------------------------- */

.account-addresses,
.account-payment-methods {
  padding: 1.5em 0 2.5em;
}

.account-addresses__empty,
.account-payment-methods__empty,
.account-payment-methods__unavailable {
  color: #888;
  font-size: 0.95em;
  margin: 1em 0;
}

.account-addresses__list,
.account-payment-methods__list {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-addresses__item,
.account-payment-methods__item {
  margin: 0;
}

.account-address,
.account-payment-method {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 1em 1.25em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.account-address:hover,
.account-payment-method:hover {
  border-color: #1fbbd7;
  box-shadow: 0 2px 8px rgba(31, 187, 215, 0.18);
}

.account-address__name,
.account-payment-method__label {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.4em;
}

.account-address__line1,
.account-address__line2,
.account-address__city,
.account-address__region,
.account-address__postal-code,
.account-address__country-code,
.account-payment-method__brand,
.account-payment-method__last4,
.account-payment-method__expiration {
  color: #555;
  font-size: 0.92em;
  line-height: 1.5;
  margin: 0.05em 0;
}

/* Small inline badges: neutral for "address on account", skin-
 * accent teal for "default" payment, muted-warn for "expired".
 * All three reuse the same pill shape so the visual rhythm
 * matches across the two saved-data pages. */
.account-address__on-account-badge,
.account-payment-method__default-badge,
.account-payment-method__expired-badge {
  border-radius: 999px;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0.5em;
  padding: 0.2em 0.65em;
}

.account-address__on-account-badge {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  color: #555;
}

.account-payment-method__default-badge {
  background: #e7f6f9;
  border: 1px solid #b6e5ee;
  color: #045870;
}

.account-payment-method__expired-badge {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  color: #a23838;
  margin-left: 0.4em;
}

/* ----------------------------------------------------------------------------
 * Narrow-viewport responsiveness for the commerce + saved-data pages.
 * ---------------------------------------------------------------------------- */

@media (max-width: 480px) {
  .account-addresses__list,
  .account-payment-methods__list {
    grid-template-columns: 1fr;
  }

  .cart__checkout-action {
    text-align: left;
  }

  .cart__checkout-link,
  .checkout__submit {
    display: block;
    text-align: center;
    width: 100%;
  }
}

/* ============================================================================
 * #159: Skin 15 V2 — forms + customer activity lists.
 *
 * Pages styled in this block:
 *   /login                     (form:has(input[id^="login-"]))
 *   /register                  (form:has(input[id^="register-"]))
 *   /quote                     (.quote form)
 *   /tickets/new               (.ticket-new form)
 *   /orders                    (.orders, .orders-row, ...)
 *   /proofs                    (.proofs, .proof-row, ...)
 *   /quotes                    (.quotes, .quotes-row, ...)
 *   /tickets                   (.tickets, .tickets-row, ...)
 *   /quotes/[quoteId]          (.quote-detail, .quote-estimate, ...)
 *   /tickets/[ticketId]        (.ticket-detail, ...)
 *
 * Same visual language as the previous /account, /cart, /checkout,
 * /upload blocks in this file: Montserrat headings on #333,
 * neutral white cards on light surfaces, #1fbbd7 accent for hover/
 * focus/primary, muted state copy. No probe / debug colors;
 * styling lives in this skin package only.
 *
 * CSS-only scoping (no React class hooks needed): /login and
 * /register are matched via a `form:has(input[id^="…"])` parent
 * selector keyed off the input id prefixes the existing forms
 * already emit (`login-username` / `login-password` and
 * `register-email` / `register-password` / `register-…`). /quote
 * and /tickets/new use the already-deployed `.quote` and
 * `.ticket-new` section wrappers. So a tenant who uploads this
 * CSS via File Manager gets the new styling without redeploying
 * the frontend. `:has()` has full support in current Chrome /
 * Safari / Edge / Firefox 121+; older browsers fall back to plain
 * HTML (no card chrome) without breaking behavior.
 *
 * #133 invariant: SCSS source mirrors `skin-v2-15.css` 1:1 byte-
 * for-byte for the rule body. The block below appears in BOTH
 * `main.scss` and `skin-v2-15.css` verbatim.
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * Shared form-card primitive (login / register / quote / new-ticket).
 * Every selector is rooted at the form's own class chain so other
 * pages' labels / inputs / buttons are untouched.
 * ---------------------------------------------------------------------------- */

form:has(input[id^="login-"]),
form:has(input[id^="register-"]),
.quote form,
.ticket-new form {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  font-family: "Montserrat", sans-serif;
  gap: 0.5em;
  margin: 1.5em 0 2.5em;
  max-width: 640px;
  padding: 1.5em 1.75em;
}

form:has(input[id^="login-"]) {
  max-width: 480px;
}

form:has(input[id^="login-"]) h1,
form:has(input[id^="register-"]) h1,
.quote form h1,
.ticket-new form h1 {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 1em;
}

form:has(input[id^="login-"]) label,
form:has(input[id^="register-"]) label,
.quote form label,
.ticket-new form label {
  color: #555;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9em;
  font-weight: 500;
  margin: 0.65em 0 0.25em;
}

form:has(input[id^="login-"]) input,
form:has(input[id^="login-"]) select,
form:has(input[id^="login-"]) textarea,
form:has(input[id^="register-"]) input,
form:has(input[id^="register-"]) select,
form:has(input[id^="register-"]) textarea,
.quote form input,
.quote form select,
.quote form textarea,
.ticket-new form input,
.ticket-new form select,
.ticket-new form textarea {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95em;
  padding: 0.55em 0.75em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

form:has(input[id^="login-"]) input:focus,
form:has(input[id^="login-"]) select:focus,
form:has(input[id^="login-"]) textarea:focus,
form:has(input[id^="register-"]) input:focus,
form:has(input[id^="register-"]) select:focus,
form:has(input[id^="register-"]) textarea:focus,
.quote form input:focus,
.quote form select:focus,
.quote form textarea:focus,
.ticket-new form input:focus,
.ticket-new form select:focus,
.ticket-new form textarea:focus {
  border-color: #1fbbd7;
  box-shadow: 0 0 0 3px rgba(31, 187, 215, 0.18);
  outline: none;
}

/* Checkbox label rows (e.g. register-email-opt-in): the checkbox
 * sits inline with its caption, instead of stacking below an empty
 * label, so the row reads as a single option. */
form:has(input[id^="login-"]) label > input[type="checkbox"],
form:has(input[id^="register-"]) label > input[type="checkbox"],
.quote form label > input[type="checkbox"],
.ticket-new form label > input[type="checkbox"] {
  margin-right: 0.4em;
  vertical-align: middle;
  width: auto;
}

form:has(input[id^="login-"]) button[type="submit"],
form:has(input[id^="register-"]) button[type="submit"],
.quote form button[type="submit"],
.ticket-new form button[type="submit"] {
  align-self: flex-start;
  background: #1fbbd7;
  border: 1px solid #1fbbd7;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: 1em;
  font-weight: 600;
  margin-top: 1em;
  padding: 0.7em 1.5em;
  transition: background 0.15s ease, border-color 0.15s ease;
}

form:has(input[id^="login-"]) button[type="submit"]:hover,
form:has(input[id^="login-"]) button[type="submit"]:focus,
form:has(input[id^="register-"]) button[type="submit"]:hover,
form:has(input[id^="register-"]) button[type="submit"]:focus,
.quote form button[type="submit"]:hover,
.quote form button[type="submit"]:focus,
.ticket-new form button[type="submit"]:hover,
.ticket-new form button[type="submit"]:focus {
  background: #045870;
  border-color: #045870;
  outline: none;
}

form:has(input[id^="login-"]) button[type="submit"]:disabled,
form:has(input[id^="register-"]) button[type="submit"]:disabled,
.quote form button[type="submit"]:disabled,
.ticket-new form button[type="submit"]:disabled {
  background: #1fbbd7;
  border-color: #1fbbd7;
  cursor: not-allowed;
  opacity: 0.55;
}

/* Inline error paragraph the four forms render via <p role="alert">. */
form:has(input[id^="login-"]) p[role="alert"],
form:has(input[id^="register-"]) p[role="alert"],
.quote form p[role="alert"],
.ticket-new form p[role="alert"] {
  color: #a23838;
  font-size: 0.95em;
  margin: 0.75em 0 0;
}

/* /login — forgot-password link below the submit button. */
form:has(input[id^="login-"]) a {
  align-self: flex-start;
  color: #337ab7;
  font-size: 0.9em;
  margin-top: 0.5em;
  text-decoration: none;
}

form:has(input[id^="login-"]) a:hover,
form:has(input[id^="login-"]) a:focus {
  color: #23527c;
  text-decoration: underline;
}

/* Quote-request file picker: keep it consistent with the other
 * inputs but allow the native browser chrome through. */
.quote form input[type="file"] {
  padding: 0.4em 0;
}

/* Success state copy the quote / ticket forms render via
 * <p role="status">. */
.quote p[role="status"],
.ticket-new p[role="status"] {
  background: #f1f8f1;
  border: 1px solid #bcd9bc;
  border-radius: 3px;
  color: #2f6f2f;
  margin: 1em 0;
  padding: 0.75em 1em;
}

/* ----------------------------------------------------------------------------
 * Shared list page typography (orders / proofs / quotes / tickets).
 * Page roots get padding + Montserrat heading; the four list classes
 * stay flat (no bullets) so the row cards can lay out cleanly.
 * ---------------------------------------------------------------------------- */

.orders,
.proofs,
.quotes,
.tickets {
  padding: 1.5em 0 2.5em;
}

.orders h1,
.proofs h1,
.quotes h1,
.tickets h1 {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 0 1em;
}

.orders__error,
.proofs__error,
.quotes__error,
.tickets__error {
  color: #a23838;
  margin: 1em 0;
}

.orders__empty,
.proofs__empty,
.quotes__empty,
.tickets__empty {
  color: #888;
  margin: 1em 0;
}

.proofs__read-only {
  color: #888;
  font-size: 0.95em;
  margin: 0 0 1em;
}

.orders__list,
.proofs__list,
.quotes__list,
.tickets__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.orders__row,
.proofs__row,
.quotes__row,
.tickets__row {
  margin: 0 0 0.75em;
}

/* Shared row-card chrome for the four list pages. */
.orders-row,
.proof-row,
.quotes-row,
.tickets-row {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 1em 1.25em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.orders-row:hover,
.proof-row:hover,
.quotes-row:hover,
.tickets-row:hover {
  border-color: #1fbbd7;
  box-shadow: 0 2px 8px rgba(31, 187, 215, 0.18);
}

/* Row-card primary identifier (h2 inside row articles). */
.orders-row__id,
.proof-row__reference,
.quotes-row__id,
.tickets-row__id {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.35em;
}

/* Row-card secondary metadata. */
.orders-row__po,
.orders-row__created,
.orders-row__billed-cost,
.orders-row__paid,
.orders-row__balance,
.orders-row__flags,
.proof-row__product,
.proof-row__description,
.proof-row__date,
.proof-row__method,
.quotes-row__created,
.quotes-row__expires,
.tickets-row__type,
.tickets-row__opened {
  color: #555;
  font-size: 0.92em;
  line-height: 1.5;
  margin: 0.1em 0;
}

/* Pill-style status / state badges, sized like the saved-data
 * badges from the previous slice for visual consistency. */
.orders-row__status,
.proof-row__proof-state,
.quotes-row__status,
.tickets-row__state {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  color: #555;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0.5em;
  padding: 0.2em 0.65em;
}

/* ----------------------------------------------------------------------------
 * Mode-switch tab rows for /orders and /tickets.
 * ---------------------------------------------------------------------------- */

.orders__mode-switch,
.tickets__mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0 0 1.25em;
}

.orders__mode-link,
.tickets__mode-switch a {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9em;
  font-weight: 500;
  padding: 0.45em 0.95em;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.orders__mode-link:hover,
.orders__mode-link:focus,
.tickets__mode-switch a:hover,
.tickets__mode-switch a:focus {
  border-color: #1fbbd7;
  color: #1fbbd7;
  outline: none;
}

.orders__mode-link[aria-current="page"],
.tickets__mode-switch a[aria-current="page"] {
  background: #1fbbd7;
  border-color: #1fbbd7;
  color: #fff;
}

/* ----------------------------------------------------------------------------
 * /quotes/[quoteId] — quote detail (fields + estimates).
 * ---------------------------------------------------------------------------- */

.quote-detail {
  padding: 1.5em 0 2.5em;
}

.quote-detail h1,
.quote-detail h2 {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 0 0.75em;
}

.quote-detail__fields {
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4em 1em;
  margin: 0 0 1.5em;
  padding: 1em 1.25em;
}

.quote-detail__fields dt {
  color: #555;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9em;
  font-weight: 500;
  margin: 0;
}

.quote-detail__fields dd {
  color: #333;
  font-size: 0.95em;
  margin: 0;
}

.quote-detail__estimates {
  list-style: none;
  margin: 0;
  padding: 0;
}

.quote-estimate {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  margin: 0 0 1em;
  padding: 1em 1.25em;
}

.quote-estimate__options {
  list-style: none;
  margin: 0.5em 0 0;
  padding: 0;
}

.quote-option {
  border-top: 1px solid #f0f0f0;
  color: #555;
  font-size: 0.95em;
  line-height: 1.5;
  margin: 0.4em 0 0;
  padding: 0.5em 0 0;
}

.quote-option:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* ----------------------------------------------------------------------------
 * /tickets/[ticketId] — ticket detail (fields + actions + events).
 * ---------------------------------------------------------------------------- */

.ticket-detail {
  padding: 1.5em 0 2.5em;
}

.ticket-detail h1,
.ticket-detail h2 {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 0 0.75em;
}

.ticket-detail__fields {
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4em 1em;
  margin: 0 0 1.5em;
  padding: 1em 1.25em;
}

.ticket-detail__fields dt {
  color: #555;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9em;
  font-weight: 500;
  margin: 0;
}

.ticket-detail__fields dd {
  color: #333;
  font-size: 0.95em;
  margin: 0;
}

.ticket-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0 0 1.25em;
}

.ticket-detail__events {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ticket-detail__events > li {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  color: #555;
  font-size: 0.95em;
  line-height: 1.5;
  margin: 0 0 0.5em;
  padding: 0.75em 1em;
}

/* ----------------------------------------------------------------------------
 * Narrow-viewport responsiveness.
 * ---------------------------------------------------------------------------- */

@media (max-width: 480px) {
  form:has(input[id^="login-"]),
  form:has(input[id^="register-"]),
  .quote form,
  .ticket-new form {
    padding: 1.25em 1em;
  }

  form:has(input[id^="login-"]) button[type="submit"],
  form:has(input[id^="register-"]) button[type="submit"],
  .quote form button[type="submit"],
  .ticket-new form button[type="submit"] {
    align-self: stretch;
    width: 100%;
  }

  .quote-detail__fields,
  .ticket-detail__fields {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
 * #159: Skin 15 V2 — top navigation polish.
 *
 * Narrow CSS pass against existing legacy hooks emitted by the
 * Storefront V2 layout chrome:
 *
 *   #s-nav, #s-menu, #tmenu-account, .navbar.navbar-default,
 *   .navigation__menu-collapse, .navbar-nav, .dropdown-menu
 *
 * Plus the new mode hooks the layout now emits on the `<nav>`
 * (`site-mega-nav` vs `site-regular-nav`, and `site-mobile-nav`
 * vs `site-standard-mobile-nav`) so the skin can branch without
 * touching React. NO legacy hooks are removed or renamed. NO
 * probe / debug colors; NO logo behavior change — SITE_LOGO and
 * the legacy `#s-header-logo` CSS-default fallback are untouched.
 *
 * #133 invariant: SCSS source mirrors `skin-v2-15.css` 1:1 byte-
 * for-byte for the rule body. The block below appears in BOTH
 * `main.scss` and `skin-v2-15.css` verbatim.
 * ============================================================================ */

/* Regular nav bar typography + spacing. Restricts itself to
 * `#s-menu` so it does not touch product / content menus elsewhere
 * on the page. */
#s-nav .navbar.navbar-default {
  margin-bottom: 0;
}

#s-menu .navbar-nav > li > a {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95em;
  font-weight: 500;
  padding: 0.85em 1em;
  transition: color 0.15s ease, background 0.15s ease;
}

#s-menu .navbar-nav > li > a:hover,
#s-menu .navbar-nav > li > a:focus {
  background: transparent;
  color: #1fbbd7;
}

/* "My Account" dropdown — Bootstrap 3 toggle gets the same hover
 * treatment as a top-level link. */
#tmenu-account > li.dropdown > a.dropdown-toggle {
  color: #333;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95em;
  font-weight: 500;
  padding: 0.85em 1em;
}

#tmenu-account > li.dropdown > a.dropdown-toggle:hover,
#tmenu-account > li.dropdown.open > a.dropdown-toggle {
  background: transparent;
  color: #1fbbd7;
}

/* Dropdown panel inside the account menu. */
#tmenu-account .dropdown-menu {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-top: 0.25em;
  min-width: 220px;
  padding: 0.4em 0;
}

#tmenu-account .dropdown-menu > li > a {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 0.92em;
  padding: 0.55em 1.1em;
  transition: background 0.15s ease, color 0.15s ease;
}

#tmenu-account .dropdown-menu > li > a:hover,
#tmenu-account .dropdown-menu > li > a:focus {
  background: #f5f5f5;
  color: #1fbbd7;
}

/* Regular (non-mega) nav: keep the top-level `<ul>` tidy and let
 * Bootstrap 3 handle dropdown positioning. */
.site-regular-nav #s-menu .navbar-nav {
  margin: 0;
}

/* Mega-nav mode: safety-net layout so the `mega-nav-1-0-0` CDN
 * stylesheet (loaded only when `store.siteMegaNav` is true) has
 * a predictable host to attach to. We deliberately do NOT
 * override the CDN add-on's panel styling — just ensure the host
 * nav row stays a normal flow container without breaking its
 * legacy float / inline-block layout. */
.site-mega-nav #s-menu {
  position: relative;
}

.site-mega-nav #s-menu .dropdown-menu {
  /* When the mega-nav add-on takes over a `.dropdown-menu`, let
   * it size itself to the container rather than the Bootstrap 3
   * default min-width — the add-on's own rules win as long as we
   * don't pin a hard width here. */
  min-width: 0;
}

/* Standard mobile-nav mode (mobile-nav-accordion add-on NOT
 * loaded): keep the Bootstrap 3 collapsed-menu toggle visible
 * and styled consistently with the rest of the header. When the
 * accordion add-on IS loaded its stylesheet supersedes these
 * host rules — these only style the toggle button, never the
 * accordion panel. */
.navbar-toggle {
  border: 1px solid #ddd;
  border-radius: 3px;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
  background: #f5f5f5;
  border-color: #1fbbd7;
}

.navbar-toggle .icon-bar {
  background: #555;
}

/* ============================================================================
 * Skin 15 V2 homepage cleanup (#239) — first pass.
 *
 * Narrow visual polish against the existing V2 chrome / CMS hooks
 * already styled above. NO Bootstrap loading change, NO data-attr
 * change, NO SafeHTML behavior change, NO React component change —
 * just stabilizes four cosmetic regressions visible in the V2 vs V1
 * homepage screenshots:
 *
 *   1. Hero carousel indicators rendered visible list counter
 *      numbers because the `.carousel-indicators.bars li` rules
 *      above set width/height/color but never reset `list-style`.
 *      Whenever the host page's reset CSS didn't already neutralize
 *      `<ol>` counters, the browser-default markers showed through.
 *   2. `#s-header-logo` (desktop) collapsed to ~0 because the
 *      legacy `div#s-header-logo { width:100%; height:100%; }` rule
 *      depends on a sized parent; on desktop `.navbar-brand` only
 *      gets explicit dimensions inside the (max-width:767px) block,
 *      so the brand box was unsized and the logo rendered tiny.
 *      Mobile already had `.navbar-brand { height:60px; width:250px }`.
 *   3. Top sign-in / header strip (`#System_Header` / `#s-user`)
 *      had a late `padding:20px` rule that fought the earlier flex
 *      padding (10px) and pushed the dark band to inconsistent
 *      heights; `#s-user a { font-size:1.4rem }` also read oddly
 *      large at the very top of the page.
 *   4. Featured product titles (`.featured .featured-product-wrapper
 *      .product .title h3`) were `position:absolute; bottom:0` with
 *      no clamp — long product names overflowed the card. The CMS
 *      can also emit empty `.featured-product-wrapper` slots, which
 *      surfaced as a blank tile.
 *
 * #133 invariant: SCSS source mirrors `skin-v2-15.css` 1:1 for the
 * rule body. The block below appears in BOTH `main.scss` and
 * `skin-v2-15.css` verbatim.
 * ============================================================================ */

/* (1) Hero carousel indicators — kill list counters and any text
 *     content so the bars are clean clickable rectangles. Covers
 *     both the legacy `<ol><li>` form and the BS5 `<button>` form
 *     in case CMS markup uses either. */
.carousel-indicators,
.carousel-indicators.bars {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.carousel-indicators li,
.carousel-indicators.bars li,
.carousel-indicators button {
  list-style: none;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
}

.carousel-indicators li::marker,
.carousel-indicators.bars li::marker {
  content: "";
}

/* Stabilize the slide container so the first slide doesn't
 * collapse before its image height is known. */
.carousel-inner > .item {
  min-height: 320px;
}

/* (2) Logo sizing — give the bare `#s-header-logo` a stable desktop
 *     box so the legacy `div#s-header-logo` background-image rule
 *     above has somewhere to render. `<img>` children fill the box
 *     without distortion (the V2 Header component sets
 *     maxHeight/maxWidth:100% on the img). */
@media screen and (min-width: 768px) {
  #s-header-logo {
    min-height: 50px;
    min-width: 200px;
    height: 50px;
  }
  #s-header a.navbar-brand {
    min-height: 50px;
  }
}

#s-header-logo img,
#s-header-logo-mobile img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

/* (3) Top sign-in / header strip polish — consistent vertical
 *     rhythm and a normalized auth-link size. Background / link
 *     color are inherited from the existing #System_Header / #s-user
 *     rules above; this block only tightens spacing + font-size. */
@media screen and (min-width: 768px) {
  #System_Header,
  #s-user {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.4;
  }
  #s-user a,
  #s-user a.btn {
    font-size: 1.2rem;
  }
}

/* (4) Featured product cards — graceful long-title truncation +
 *     hide empty CMS slots. The existing `position:absolute` title
 *     (desktop) is kept but constrained to 2 lines with ellipsis so
 *     long names truncate inside the card instead of overflowing.
 *     `.featured-product-wrapper:empty` removes blank tiles when the
 *     CMS emits an empty slot. */
.featured-product-wrapper:empty {
  display: none;
}

.featured .featured-product-wrapper .product .title h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

@media screen and (min-width: 768px) {
  .featured .featured-product-wrapper .product .title h3 {
    max-height: 60px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* ============================================================================
 * Skin 15 V2 homepage runtime selector follow-up (#239) — second pass.
 *
 * PR #241 added selectors that LOOKED right in the source CSS but
 * did not match (or did not win specificity against) the live V2
 * runtime DOM on dev1. This pass anchors each fix on the EXACT
 * selectors the live homepage emits, so the rule cascade actually
 * fires:
 *
 *   (1) Carousel indicators (#carousel / id="carousel1" / …) still
 *       render `<ol>` markers 1. 2. 3. in the live cascade. Root
 *       cause: the live `<li>` items keep their browser-default
 *       `display: list-item` so a marker box IS generated regardless
 *       of `list-style: none`, and PR #241's `.carousel-indicators
 *       li` rules were beaten on specificity by something else in
 *       the cascade. Fix: scope on the `#carousel` ID for a +1
 *       specificity bump AND ALSO on `.carousel.slide.escape-container`
 *       so the rule matches the local-build variant `id="carousel1"`
 *       (the V2 build emits a numeric suffix while dev1's older
 *       snapshot still says just `id="carousel"` — both must work).
 *       `.escape-container` is a Skin 15-only class so the
 *       class-shape selector stays scoped to this skin. Then switch
 *       the `<li>` `display` off `list-item` so a marker box is
 *       never generated in the first place — the most reliable
 *       cross-browser way to kill `<ol>` markers regardless of
 *       cascade.
 *
 *   (2) Logo / header used `<pc-header>` element-name selectors
 *       earlier in this file (legacy V1 assumption), but the live
 *       V2 markup renders `<div id="s-header" class="pc-header
 *       navbar navbar-default">` — `pc-header` is a CLASS here, not
 *       a tag. PR #241's bare `#s-header-logo { min-height: 50px }`
 *       was also beaten on specificity by the legacy element-
 *       qualified `div#s-header-logo { height: 100%; width: 100% }`
 *       (1 ID + 1 type) so the desktop logo box stayed unsized. Fix:
 *       use the real runtime selector `#s-header.pc-header
 *       #s-header-logo` (2 IDs + 1 class) which beats both the
 *       legacy `div#s-header-logo` and PR #241's bare `#s-header-logo`.
 *
 *   (3) `.featured-product-wrapper:empty` from PR #241 did not hide
 *       the blank Remax Car Magnets tile on dev1 because the wrapper
 *       contains an `<a class="thumbnail product">` with a `<h3>`
 *       title — just no `<img>`. Fix: use modern `:has()` (already
 *       used elsewhere in this file for login/register forms) to
 *       hide ONLY featured wrappers that contain a `.thumbnail.product`
 *       anchor AND have no `<img>` anywhere inside.
 *
 * #133 invariant: SCSS source mirrors `skin-v2-15.css` 1:1 for the
 * rule body. The block below appears in BOTH `main.scss` and
 * `skin-v2-15.css` verbatim.
 * ============================================================================ */

/* (1) Carousel indicators — twin selector covering BOTH the literal
 *     `#carousel` ID (dev1's older snapshot) AND the class-shape
 *     `.carousel.slide.escape-container` (the local V2 build emits
 *     `id="carousel1"`, but the class triplet is stable across
 *     builds). `.escape-container` is a Skin 15-only class so the
 *     class-shape selector stays scoped to this skin and cannot
 *     touch unrelated carousels. Both selectors map to the same
 *     declaration block; the `<li>` `display: inline-block` switch
 *     off `list-item` is what actually kills the `<ol>` marker box.
 *     `::marker` reset is belt-and-braces in case a future browser
 *     keeps generating markers despite the display change. */
#carousel .carousel-indicators,
#carousel .carousel-indicators.bars,
.carousel.slide.escape-container .carousel-indicators,
.carousel.slide.escape-container .carousel-indicators.bars {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

#carousel .carousel-indicators li,
#carousel .carousel-indicators.bars li,
.carousel.slide.escape-container .carousel-indicators li,
.carousel.slide.escape-container .carousel-indicators.bars li {
  display: inline-block;
  list-style: none;
  list-style-type: none;
  list-style-image: none;
  /* Hide any text content the indicator `<li>` might inherit
   * (BS5 button form or future a11y label injection). */
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  text-indent: -9999px;
}

#carousel .carousel-indicators li::marker,
#carousel .carousel-indicators.bars li::marker,
.carousel.slide.escape-container .carousel-indicators li::marker,
.carousel.slide.escape-container .carousel-indicators.bars li::marker {
  content: "";
}

#carousel .carousel-indicators li::before,
#carousel .carousel-indicators.bars li::before,
.carousel.slide.escape-container .carousel-indicators li::before,
.carousel.slide.escape-container .carousel-indicators.bars li::before {
  content: none;
}

/* (2) Header / logo desktop sizing on the real runtime selector
 *     `#s-header.pc-header`. Specificity = 2 IDs + 1 class — beats
 *     the legacy `div#s-header-logo { height: 100%; width: 100% }`
 *     rule earlier in this file (1 ID + 1 type) and the bare
 *     `#s-header-logo` rule PR #241 added (1 ID). */
@media screen and (min-width: 768px) {
  #s-header.pc-header {
    min-height: 80px;
  }
  #s-header.pc-header .navbar-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 80px;
  }
  #s-header.pc-header a.navbar-brand {
    display: inline-block;
    height: 50px;
    min-height: 50px;
    padding: 0;
    width: 250px;
  }
  #s-header.pc-header #s-header-logo {
    display: block;
    height: 50px;
    min-height: 50px;
    width: 100%;
  }
}

/* (3) Hide a featured product wrapper whose anchor exists but
 *     ships with NO `<img>` (the dev1 Remax Car Magnets case). The
 *     `:has()` test scopes the rule to wrappers containing a
 *     `.thumbnail.product` anchor — i.e. real product cards — and
 *     hides only those that lack any image inside. Cards that put
 *     `<img>` directly inside `.thumbnail.product` OR inside a
 *     `.featured-product-thumbnail-wrapper` both pass the check. */
.featured .featured-product-wrapper:has(.thumbnail.product):not(:has(img)) {
  display: none;
}