/*
 * Layout polish layer (wholesale_ui_polish_assets(), prints after typography.css).
 *
 *   1. Category product cards (home.php listing for every category except channel letters)
 *   2. Shop page cards (inc/shop-catalog.php)
 *   3. Product page: price, options form, description, related products
 *   4. Guide and location pages (inc/guide-pages.php, page-location.php)
 *   5. Small text floor on phones
 *
 * Card language follows the Shop page cards: square photo, two-line title,
 * "Starting at" label over a bold price, quiet unit text.
 */

/* ---------- 1. Category product cards ---------- */
.product-listing-container:not(.product-listing-container--cl) .product-box-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
  padding: 4px 0 0;
  overflow: visible;
}

.product-listing-container:not(.product-listing-container--cl) .product-box-container .product-box,
.product-listing-container:not(.product-listing-container--cl) .product-box-container .product-box:last-child {
  width: auto;
  float: none;
  clear: none;
  margin: 0;
  border: 1px solid #e3e9ef;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.product-listing-container:not(.product-listing-container--cl) .product-box-container .product-box:hover,
.product-listing-container:not(.product-listing-container--cl) .product-box-container .product-box:focus-within {
  float: none;
  margin-top: 0;
  border-color: rgba(31, 168, 222, 0.4);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06), 0 18px 40px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.product-listing-container:not(.product-listing-container--cl) .product-box .pb-image-top {
  aspect-ratio: 1 / 1;
  background: #f3f8fb;
}

.product-listing-container:not(.product-listing-container--cl) .product-box .pb-image-top img {
  object-fit: cover;
}

/* The card body link fills the rest of the card so the price row sits at the bottom. */
.product-listing-container:not(.product-listing-container--cl) .product-box > a:not(.pb-image-top) {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.product-listing-container:not(.product-listing-container--cl) .product-box .pb-details {
  padding: 14px 16px 16px;
}

.product-listing-container:not(.product-listing-container--cl) .product-box .pb-details .pb-title {
  display: -webkit-box;
  margin: 0 0 6px;
  overflow: hidden;
  color: #172027;
  font-size: 1rem !important;
  font-weight: 650;
  line-height: 1.35;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-listing-container:not(.product-listing-container--cl) .product-box .product-rating {
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: 0 0 10px;
}

.product-listing-container:not(.product-listing-container--cl) .product-box .pb-details .pb-description-list {
  color: #5b6b7b;
  font-size: 0.86rem;
  line-height: 1.45;
}

.product-listing-container:not(.product-listing-container--cl) .product-box .pb-details .pb-description-list ul {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.product-listing-container:not(.product-listing-container--cl) .product-box .pb-details .pb-description-list ul li {
  display: none;
}

.product-listing-container:not(.product-listing-container--cl) .product-box .pb-details .pb-description-list ul li:nth-child(-n + 3) {
  position: relative;
  display: block;
  padding-left: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-listing-container:not(.product-listing-container--cl) .product-box .pb-details .pb-description-list ul li:nth-child(-n + 3)::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(31, 168, 222, 0.55);
}

.product-listing-container:not(.product-listing-container--cl) .product-box .pb-details .start-at-pricing {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-height: 0;
  padding-top: 12px;
  border-top-color: #e3e9ef;
  color: #5b6b7b;
}

.product-listing-container:not(.product-listing-container--cl) .product-box .pb-title-short {
  color: #5b6b7b;
  font-size: 0.78rem !important;
  font-weight: 500;
}

.product-listing-container:not(.product-listing-container--cl) .product-box .pb-price {
  color: #5b6b7b;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}

.product-listing-container:not(.product-listing-container--cl) .product-box .pb-price strong {
  color: #172027;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.product-listing-container:not(.product-listing-container--cl) .product-box .pb-price del {
  margin-right: 2px;
  color: #8a99a8;
  font-size: 0.85rem;
}

.product-listing-container:not(.product-listing-container--cl) .product-box .pb-price sup {
  font-size: 0.65em;
}

/* Size tables (flags, fabric displays): the table on wide cards, one price line on phones. */
.product-box .start-at-pricing--table {
  display: block !important;
}

.product-box .start-at-pricing--table .table {
  margin: 0;
  font-size: 0.86rem;
}

.product-box .start-at-pricing--table .table th,
.product-box .start-at-pricing--table .table td {
  padding: 5px 0;
  border-color: #eef2f6;
}

.product-box .start-at-pricing--table .table td {
  color: #172027 !important;
  font-weight: 700;
}

.product-box .pb-price-summary {
  display: none;
  margin: 0;
}

.product-box .pb-shop-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: #1287b5;
  font-size: 0.86rem;
  font-weight: 700;
}

.product-box .pb-shop-cta .cl-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.product-box:hover .pb-shop-cta .cl-icon {
  transform: translateX(3px);
}

@media (max-width: 767.98px) {
  .product-listing-container:not(.product-listing-container--cl) .product-box-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 8px 0 0;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box-container .product-box {
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 3px 10px rgba(15, 23, 42, 0.05);
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box-container .product-box:hover {
    transform: none;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box .pb-details {
    padding: 10px 12px 12px;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box .pb-details .pb-title {
    min-height: 0;
    margin-bottom: 4px;
    font-size: 0.92rem !important;
    line-height: 1.3;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box .product-rating {
    flex-wrap: nowrap;
    gap: 4px;
    margin-bottom: 6px;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box .product-rating-stars {
    font-size: 12px;
    letter-spacing: 0;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box .product-rating-word {
    display: none;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box .pb-description-list,
  .product-box .pb-shop-cta {
    display: none;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box .pb-details .start-at-pricing {
    display: block;
    padding-top: 8px;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box .pb-title-short {
    display: block;
    font-size: 0.72rem !important;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box .pb-price {
    display: block;
    font-size: 0.74rem;
    white-space: normal;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box .pb-price strong {
    font-size: 1.05rem;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box .pb-price del {
    font-size: 0.78rem;
  }

  .product-box .start-at-pricing--table .table {
    display: none;
  }

  .product-box .pb-price-summary {
    display: block;
  }

  /* Half-width cards: swipe the photo (js/main.js); the counter shows there are more. */
  .product-listing-container:not(.product-listing-container--cl) .product-box .pb-image-top.has-gallery .pb-gallery-arrow {
    display: none;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box .pb-gallery-count {
    bottom: 6px;
    padding: 3px 7px;
    font-size: 10.5px;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box .sale-badge {
    top: 6px;
    left: 6px;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box .sale-badge__label,
  .product-listing-container:not(.product-listing-container--cl) .product-box .sale-badge__value {
    padding: 5px 6px;
  }

  .product-listing-container:not(.product-listing-container--cl) .product-box .sale-badge__label svg {
    display: none;
  }
}

/* Category sidebar: clears the sticky site header and scrolls on its own when it is
   taller than the window (otherwise its last links are unreachable). */
@media (min-width: 768px) {
  .product-listing-container .category-filter-menu-wrapper {
    top: 160px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* Tablets: the 1/6 sidebar column was ~100px and wrapped every word. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .product-listing-container:not(.product-listing-container--cl) > .row > .col-md-2 {
    flex: 0 0 auto;
    width: 30%;
  }

  .product-listing-container:not(.product-listing-container--cl) > .row > .col-md-10 {
    flex: 0 0 auto;
    width: 70%;
  }
}

/* ---------- 2. Shop page cards ---------- */
.sc-card-cat {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .sc-card-cat {
    margin-bottom: 3px;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
  }

  .sc-card-rating {
    margin-bottom: 6px;
    font-size: 0.76rem;
  }

  .sc-card-price-label {
    font-size: 0.7rem;
  }
}

/* ---------- 3. Product page ---------- */
.product-details .product-price-per-sqft {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 14px;
  padding: 14px 16px !important;
  border: 1px solid #d3ecf7;
  border-radius: 12px;
  background: #f3fafd;
  color: #475569 !important;
  font-size: 0.95rem;
  text-align: left !important;
}

.product-details .product-price-label {
  flex-basis: 100%;
  color: #5b6b7b;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-details .product-price-value strong {
  color: #172027;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.product-details .product-price-value del {
  margin-right: 4px;
  color: #8a99a8;
  font-size: 1rem;
}

.product-details .product-price-value sup {
  font-size: 0.65em;
}

/* Product description (tabs for channel letters, plain content otherwise): steady heading rhythm. */
.product-details .product-main-desc h1,
.product-details .product-main-desc h2:not(.fs-3) {
  margin: 1.6em 0 0.5em;
  color: #172027;
  font-size: 1.55rem;
  line-height: 1.25;
}

.product-details .product-main-desc h3 {
  margin: 1.5em 0 0.45em;
  color: #172027;
  font-size: 1.25rem;
  line-height: 1.3;
}

.product-details .product-main-desc h4,
.product-details .product-main-desc h5 {
  margin: 1.4em 0 0.4em;
  color: #172027;
  font-size: 1.08rem !important;
  line-height: 1.35;
}

.product-details .product-main-desc .tab-content .tab-pane > :first-child,
.product-details .product-main-desc .tab-content .tab-pane > div > :first-child,
.product-details .product-main-desc > h2.fs-3 + * {
  margin-top: 0;
}

.product-details .product-main-desc p {
  margin: 0 0 1em;
}

.product-details .product-main-desc ul:not(.nav),
.product-details .product-main-desc ol {
  margin: 0 0 1.1em;
  padding-left: 1.25em;
}

.product-details .product-main-desc li:not(.nav-item) {
  margin-bottom: 0.35em;
}

/* Related products */
.related-product-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.related-product-price {
  margin-top: auto;
  color: #172027;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  /* style.css turns off the sticky photo box on phones (position: static), which left the
     sale badge placed against the page, under the header; keep it on the photo.
     top: auto clears style.css's sticky offset (top: 24px), which otherwise
     pushes the photo box down over its thumbnails. */
  .product-details .thumbnail-container {
    position: relative;
    top: auto;
  }

  /* Clear space between the main photo and its thumbnails. */
  .product-details .product-gallery-container {
    margin-top: 16px !important;
    gap: 10px;
  }

  .product-details .product-title {
    font-size: 26px !important;
    line-height: 1.18;
  }

  .product-details .product-intro {
    margin-bottom: 18px !important;
    font-size: 15px;
  }

  .product-details .product-main-desc {
    margin-top: 32px;
    padding-top: 24px;
  }

  .product-details .product-main-desc > h2 {
    margin-bottom: 12px !important;
    font-size: 1.4rem !important;
  }

  .product-details .product-main-desc {
    font-size: 15.5px;
  }

  .product-details .product-main-desc .tab-content {
    padding: 18px 0;
    font-size: 15.5px;
  }

  .product-details .product-main-desc h1,
  .product-details .product-main-desc h2:not(.fs-3) {
    font-size: 1.3rem;
  }

  .product-details .product-main-desc h3 {
    font-size: 1.12rem;
  }

  .product-details .product-main-desc h4,
  .product-details .product-main-desc h5 {
    font-size: 1rem !important;
  }

  .related-products {
    margin-top: 32px;
  }

  .related-products-head h2 {
    font-size: 1.25rem;
  }

  .related-product-name {
    padding: 10px 12px 2px;
    font-size: 0.9rem;
  }

  .related-product-price {
    padding: 0 12px 12px;
    font-size: 0.9rem;
  }
}

/* Phones: option labels sit above full-width controls instead of a cramped 1/3 column. */
@media (max-width: 575.98px) {
  .product-details .product-attibute-box,
  .product-details .product-pricing-box {
    padding: 18px 16px;
  }

  .product-details .product-attibute-box .row > .col-4,
  .product-details .product-attibute-box .row > .col-8 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .product-details .product-attibute-box .row > .offset-4 {
    margin-left: 0;
  }

  .product-details .product-attibute-box .row.align-items-center + .row.align-items-center {
    margin-top: 14px !important;
  }

  .product-details .product-attibute-box .row > .col-4 > label,
  .product-details .product-attibute-box .row > .col-4 > .dim-label {
    display: inline-block;
    margin-bottom: 6px;
  }

  .product-details .product-attibute-box .form-control,
  .product-details .product-attibute-box .form-select {
    min-height: 46px;
    font-size: 16px;
  }

  .product-details .product-price-value strong {
    font-size: 1.45rem;
  }
}

/* ---------- 4. Guide and location pages ---------- */
/* Hero buttons: one shared top margin (each button had its own, which doubled the
   gap once they stack) and matching corners. */
.sf-hero-actions {
  margin-top: 24px;
}

.sf-hero-actions > a {
  margin-top: 0;
}

.sf-hero-actions .sf-button-outline {
  border-radius: 6px;
}

.sf-type-card {
  position: relative;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.sf-type-card:hover,
.sf-type-card:focus-within {
  border-color: rgba(31, 168, 222, 0.4);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
}

/* The whole card opens the product. */
.sf-type-body h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sf-type-body p a {
  position: relative;
  z-index: 2;
}

.sf-type-price del {
  color: #8a99a8;
  font-weight: 500;
}

@media (max-width: 575.98px) {
  /* Compact row cards: photo on the left, details on the right. */
  .sf-type-grid {
    gap: 12px;
    margin-top: 22px;
  }

  .sf-type-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  }

  .sf-type-image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 112px;
  }

  .sf-type-body {
    padding: 12px 14px;
  }

  .sf-type-body h3 {
    margin-bottom: 4px;
    font-size: 1rem;
    line-height: 1.3;
  }

  .sf-type-body p {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .sf-type-body p:not(.sf-type-price) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .sf-type-body .sf-type-price {
    padding-top: 8px;
    font-size: 0.95rem;
  }

  .sf-type-price small {
    font-size: 0.68rem;
  }

  /* Key facts: one card with divided rows instead of four tall cards. */
  .gd-facts {
    gap: 0;
    margin-top: 24px;
    overflow: hidden;
    border: 1px solid #e6ebf1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  }

  .gd-facts li {
    padding: 12px 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .gd-facts li + li {
    border-top: 1px solid #eef2f6;
  }

  .gd-facts strong {
    font-size: 0.72rem;
  }

  /* Two-column fact tables (no header row) read as stacked label/value pairs. */
  .gd-table:not(:has(thead)),
  .gd-table:not(:has(thead)) tbody,
  .gd-table:not(:has(thead)) tr,
  .gd-table:not(:has(thead)) th,
  .gd-table:not(:has(thead)) td {
    display: block;
    width: 100%;
  }

  .gd-table:not(:has(thead)) tr {
    padding: 12px 0;
    border-bottom: 1px solid #e6ebf1;
  }

  .gd-table:not(:has(thead)) th,
  .gd-table:not(:has(thead)) td {
    padding: 0;
    border: 0;
  }

  .gd-table:not(:has(thead)) th {
    margin-bottom: 2px;
    font-size: 0.9rem;
  }

  .gd-table:has(thead) {
    font-size: 0.88rem;
  }

  .gd-table:has(thead) th,
  .gd-table:has(thead) td {
    padding: 10px 8px;
  }

  .gd-note {
    padding: 14px 16px;
  }

  .sf-hero-title {
    font-size: 1.85rem;
  }

  .sf-prose p {
    font-size: 1rem;
    line-height: 1.65;
  }
}

/* ---------- 5. Small text floor on phones ---------- */
@media (max-width: 767.98px) {
  .home-hero--cl .home-hero-eyebrow,
  .home-hero-eyebrow {
    font-size: 11.5px;
  }

  .home-types-text small {
    font-size: 11.5px;
  }

  .sale-badge {
    font-size: 11px;
  }

  .product-rating-value,
  .product-rating-count {
    font-size: 12px;
  }
}

/* ---------- 6. Category page hero: 200px taller ----------
   100px more space above and below the copy, and every minimum height raised by
   200px, so the hero grows by exactly 200px whether its copy or its minimum sets
   the height (old minimums: 430px desktop, 400px tablet, none on phones). */
.home-hero--category .home-hero-content {
  min-height: 630px;
  padding-top: 100px;
  padding-bottom: 100px;
}

@media only screen and (max-width: 991px) {
  .home-hero--category .home-hero-content {
    min-height: 600px;
  }
}

@media only screen and (max-width: 767px) {
  .home-hero--category .home-hero-content {
    min-height: 0;
  }

  /* Phones (2026-10-27): the hero and the "Shop by sign type" rail filled the first
     screen and pushed the first product to ~1,370px, and Ads visitors on category
     pages left without opening one (/trade-show-products/: 57% bounce, 0 product
     views). Keep the copy in the page, show the products. The header's All Products
     menu and "Browse categories" still link every other type. */
  .home-hero--category .home-hero-content {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .home-hero--category .home-hero-lead p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .home-hero--category .home-hero-lead p ~ p,
  .home-hero--category ~ .home-types,
  .home-hero--category:has(~ .product-listing-container .category-listing-header) .home-hero-lead {
    display: none; /* the last one: "Shop {category}" right below says the same */
  }

  .home-hero--category .home-hero-actions {
    margin-top: 16px;
  }
}

/* ---------- 7. Image skeletons ----------
   Every product thumbnail frame shows a grey placeholder with a moving shine
   while its photo loads. js/main.js (skeleton block at the end) adds .sk-done
   once the visible photo has loaded or failed.

   First load: the placeholder sits behind the image (isolation + z-index -1),
   so a photo always paints over it, even before the script runs.
   Photo change (card gallery arrow/swipe, product page thumbnail): the script
   adds .sk-swap and the placeholder covers the old photo until the new one has
   loaded. Sale badges and gallery controls stay on top. */
:is(.pb-image-top, .sc-card-media, .sf-type-image, .related-product-image, .home-types-image, .product-image-zoom, .gallery-image-item, .srp-card__media, .cla-style-image, .bd-product-image, .sc-cat-tile-img, .cart-line-image) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

:is(.pb-image-top, .sc-card-media, .sf-type-image, .related-product-image, .home-types-image, .product-image-zoom, .gallery-image-item, .srp-card__media, .cla-style-image, .bd-product-image, .sc-cat-tile-img, .cart-line-image):not(.sk-done) {
  background-color: #e9eff4;
}

/* Moving shine. */
:is(.pb-image-top, .sc-card-media, .sf-type-image, .related-product-image, .home-types-image, .product-image-zoom, .gallery-image-item, .srp-card__media, .cla-style-image, .bd-product-image, .sc-cat-tile-img, .cart-line-image):not(.sk-done)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 80%);
  transform: translateX(-100%);
  animation: sk-shine 1.4s ease-in-out infinite;
  pointer-events: none;
}

/* Solid fill that hides the previous photo during a change. */
:is(.pb-image-top, .sc-card-media, .sf-type-image, .related-product-image, .home-types-image, .product-image-zoom, .gallery-image-item, .srp-card__media, .cla-style-image, .bd-product-image, .sc-cat-tile-img, .cart-line-image).sk-swap:not(.sk-done)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #e9eff4;
  pointer-events: none;
}

:is(.pb-image-top, .sc-card-media, .sf-type-image, .related-product-image, .home-types-image, .product-image-zoom, .gallery-image-item, .srp-card__media, .cla-style-image, .bd-product-image, .sc-cat-tile-img, .cart-line-image).sk-swap:not(.sk-done)::after {
  z-index: 1;
}

@keyframes sk-shine {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.pb-image-top, .sc-card-media, .sf-type-image, .related-product-image, .home-types-image, .product-image-zoom, .gallery-image-item, .srp-card__media, .cla-style-image, .bd-product-image, .sc-cat-tile-img, .cart-line-image):not(.sk-done)::after {
    animation: none;
    transform: none;
    background: none;
  }
}

/* Text contrast (WCAG AA, 4.5:1), from PageSpeed's accessibility audit.
   The brand blue #1fa8de is 2.72:1 against white, so text and the white
   text on the main hero button use a darker shade of the same blue. */
.home-hero-shop-button {
	background-color: #0b74a3;
	border-color: #0b74a3;
}
.cl-kicker,
.cl-shop-header-help a,
.skip-link,
.product-box-container .product-box .pb-price span {
	color: #0b74a3 !important;
}
.pb-title-short,
.pb-price del {
	color: #666;
}
/* Small text under the hero feature strip (#7a8797 was 3.4:1 on its tint) and
   the product tags on the banners & displays and home pages (#1a8fbd, 3.7:1). */
.home-hero-feature small {
	color: #52616f;
}
.bd-product-tag {
	color: #0b74a3;
}
/* Same darker blue for the other brand-blue buttons and links in page
   sections (white on #1fa8de is 2.7:1), the review dates and struck prices. */
.cl-button,
.cl-help-action--primary {
	border-color: #0b74a3;
	background: #0b74a3;
}
.cl-button:hover,
.cl-button:focus-visible,
.cl-help-action--primary:hover,
.cl-help-action--primary:focus-visible {
	background: #095f86;
}
.cl-steps-list p a,
.cl-faq-note a {
	color: #0b74a3;
}
.review-author small {
	color: #5b6878;
}
.sf-type-price del {
	color: #64748b;
}

/* Stock status notice under the product price (inc/stock-status.php). */
.product-stock {
	margin: 0 0 8px;
	font-weight: 700;
}
.product-stock--out {
	color: #b32d2e;
}
.product-stock--backorder {
	color: #9a6700;
}

/* Price line under the product title (single-product.php). On phones the price
   box is under the photo, a full screen down; this shows the price right away.
   Desktop shows it too (2026-10-26): there the price box sat under the photo
   and thumbnails, below the first screen, so the first screen had no price. */
.product-mobile-price {
	display: none;
}
@media (min-width: 768px) {
	.product-details .product-mobile-price {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 4px 20px;
		width: fit-content;
		max-width: 100%;
		margin: -6px 0 24px;
		padding: 10px 18px;
		border: 1px solid #d3ecf7;
		border-radius: 12px;
		background: #f3fafd;
		color: #475569;
		font-size: 1rem;
	}
	.product-details .product-mobile-price .product-price-label {
		margin-right: 4px;
	}
	.product-details .product-mobile-price strong {
		color: #172027;
		font-size: 1.35rem;
	}
	.product-details .product-mobile-price a {
		font-weight: 700;
		white-space: nowrap;
	}
}
@media (max-width: 767.98px) {
	.product-details .product-mobile-price {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 6px 12px;
		margin: -6px 0 16px;
		padding: 10px 14px;
		border: 1px solid #d3ecf7;
		border-radius: 12px;
		background: #f3fafd;
		color: #475569;
		font-size: 0.95rem;
	}
	.product-details .product-mobile-price .product-price-label {
		margin-right: 2px;
		font-size: 0.72rem;
	}
	.product-details .product-mobile-price strong {
		color: #172027;
		font-size: 1.15rem;
	}
	.product-details .product-mobile-price a {
		font-weight: 700;
		white-space: nowrap;
	}
	/* Clears the sticky phone header when the link above jumps here. */
	.product-details #product-options {
		scroll-margin-top: 90px;
	}
}

/* ---------- 8. UI/UX pass (2026-10-26) ---------- */

/* 8a. Product page photo column (desktop). style.css made only the photo sticky
   (top: 24px), so on scroll it slid over its own thumbnails and price box, and
   its top went under the sticky header. js/ui-polish.js sticks the whole column
   below the header instead, and only when the column fits in the window. */
@media (min-width: 768px) {
  .product-details .thumbnail-container {
    position: relative;
    top: auto;
  }

  .product-details form > .row > .col-md-4.pd-col-sticky {
    position: sticky;
    top: var(--pd-sticky-top, 160px);
  }
}

/* 8b. Product page buy bar (phones, js/ui-polish.js): live Grand Total and
   Add To Cart while the pricing box is off screen. */
.pd-buy-bar {
  display: none;
}

@media (max-width: 767.98px) {
  .pd-buy-bar:not([hidden]) {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.1);
    animation: pd-bar-in 0.2s ease-out;
  }

  .pd-buy-bar__price {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    line-height: 1.25;
  }

  .pd-buy-bar__label {
    color: #5b6b7b;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .pd-buy-bar__total {
    overflow: hidden;
    color: #172027;
    font-size: 1.2rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.15s ease;
  }

  .pd-buy-bar.is-updating .pd-buy-bar__total {
    opacity: 0.45;
  }

  .pd-buy-bar__button {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: #0b74a3;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
  }

  .pd-buy-bar__button:active {
    background: #095f86;
  }

  .pd-buy-bar__button:disabled {
    background: #94a3b8;
  }

  body.has-pd-buy-bar {
    padding-bottom: 72px;
  }
}

@keyframes pd-bar-in {
  from {
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-buy-bar:not([hidden]) {
    animation: none;
  }
}

/* 8c. Channel letter style cards: the price is the card's anchor (it was the
   same grey regular text as "Starting at"), and on a row of cards the price and
   button line up even when one card has a longer feature list (phones too, since
   9b puts them two to a row). */
.product-listing-container--cl .product-box .start-at-pricing .pb-price {
  color: #172027;
  font-weight: 700;
}

.product-listing-container--cl .product-box-container .product-box {
  display: flex;
  flex-direction: column;
}

.product-listing-container--cl .product-box > a:not(.pb-image-top) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.product-listing-container--cl .product-box > a:not(.pb-image-top) > .pb-details {
  flex: 1 1 auto;
}

.product-listing-container--cl .product-box .pb-details .start-at-pricing {
  margin-top: auto;
}

/* 8d. "Browse categories" toggle on category pages (phones). style.css gave the
   chevron a 30px bordered box meant for an old design; the .home routes already
   override it, other category routes did not. */
@media (max-width: 991.98px) {
  .category-filter-menu-wrapper .category-filter-toggler i {
    padding: 0;
    border: 0;
    color: #1fa8de;
    font-size: 13px;
  }

  .category-filter-menu-wrapper .category-filter-toggler-label {
    color: #0b74a3;
  }
}

/* 8e. Phones: room under the legal line so the chat button doesn't cover it. */
@media (max-width: 767.98px) {
  .footer .sf-bottom {
    padding-bottom: 92px;
  }
}

/* ---------- 9. Shorter phone pages (2026-10-26) ---------- */

/* 9a. Phone/tablet header (.ssx-legacy, < 992px) slides away while the visitor
   scrolls down and comes back on scroll up (js/ui-polish.js part 1). It was a
   sticky 123px block on every page but home. A transform, so nothing below moves. */
@media (max-width: 991.98px) {
  .main-header.ssx-legacy {
    transition:
      transform 0.25s ease,
      padding 180ms ease,
      box-shadow 180ms ease,
      background-color 180ms ease;
  }

  .main-header.ssx-legacy.is-tucked {
    box-shadow: none;
    transform: translateY(calc(-100% - 24px));
  }

  /* Bars that sit under the header follow it up. */
  .sc-page .sc-toolbar {
    transition: top 0.25s ease;
  }

  html.sh-tucked .sc-page .sc-toolbar {
    top: 0;
  }

  html.sh-tucked .product-details form > .row > .col-md-4.pd-col-sticky {
    top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-header.ssx-legacy,
  .sc-page .sc-toolbar {
    transition: none;
  }
}

/* 9b. Channel letter style cards two to a row on phones (each card was a full
   screen tall: 7 cards came to about 5,600px). The feature list is on the
   product page; the card keeps the photo, name, rating, price and button. */
@media (max-width: 767.98px) {
  .product-listing-container--cl .product-box-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .product-listing-container--cl .product-box-container .product-box,
  .product-listing-container--cl .product-box-container .product-box:last-child {
    width: auto;
    margin: 0;
    float: none;
  }

  .product-listing-container--cl .product-box-container .cl-help-card {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .product-listing-container--cl .product-box .pb-details,
  .home .product-listing-container--cl .product-box .pb-details {
    padding: 12px 12px 14px;
  }

  .product-listing-container--cl .product-box .pb-details .pb-title,
  .home .product-listing-container--cl .product-box .pb-details .pb-title {
    min-height: 3.9em;
    margin-bottom: 6px;
    font-size: 15px !important;
    line-height: 1.3;
    -webkit-line-clamp: 3;
  }

  .product-listing-container--cl .product-box .product-rating-word,
  .product-listing-container--cl .product-box .pb-description-list {
    display: none;
  }

  .product-listing-container--cl .product-box .pb-details .start-at-pricing {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 10px;
  }

  .product-listing-container--cl .product-box .start-at-pricing .pb-title-short {
    font-size: 12px !important;
  }

  .product-listing-container--cl .product-box .start-at-pricing .pb-price {
    font-size: 15px;
  }

  .product-listing-container--cl .product-box .pb-cta {
    gap: 4px;
    margin-top: 10px;
    padding: 9px 6px;
    font-size: 13.5px;
  }

  /* Half-width photos: swipe them (js/main.js); the counter shows there are more. */
  .product-listing-container--cl .product-box .pb-image-top.has-gallery .pb-gallery-arrow {
    display: none;
  }

  .product-listing-container--cl .product-box .pb-gallery-count {
    bottom: 8px;
    padding: 2px 8px;
    font-size: 10.5px;
  }
}

/* 9c. Home page guide ("What Are Channel Letters?", about 2,200px on a phone):
   the first part shows, the rest opens with a button (js/ui-polish.js part 2).
   The text stays in the page. */
.cl-guide-toggle {
  display: none;
}

@media (max-width: 767.98px) {
  .cl-guide .sf-prose.is-collapsible:not(.is-expanded) {
    position: relative;
    max-height: 560px;
    overflow: hidden;
  }

  .cl-guide .sf-prose.is-collapsible:not(.is-expanded)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 140px;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--cl-guide-bg, #fff) 85%);
    pointer-events: none;
  }

  .cl-guide-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 32px);
    min-height: 48px;
    margin: 4px auto 0;
    border: 1px solid #0b74a3;
    border-radius: 10px;
    background: #fff;
    color: #0b74a3;
    font-size: 15px;
    font-weight: 700;
  }

  .cl-guide-toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .cl-guide-toggle[aria-expanded="true"]::after {
    margin-top: 4px;
    transform: rotate(225deg);
  }
}

/* 9d. "How ordering works" steps on phones: the number beside the step
   instead of above it. */
@media (max-width: 767.98px) {
  .cl-steps-list {
    gap: 10px;
    margin-top: 22px;
  }

  .cl-steps-list li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 14px;
    padding: 16px;
  }

  .cl-steps-list .cl-step-number {
    grid-row: 1 / span 2;
    margin: 0;
  }

  .cl-steps-list h3 {
    align-self: center;
    margin: 0 0 4px;
  }

  .cl-steps-list p {
    grid-column: 2;
  }
}

/* 9e. Home page "More for your storefront": two tiles to a row on phones
   (eight full-width rows were 1,300px). The same list, with descriptions, is
   on each product's own page; "Shop by sign type" at the top covers it too. */
@media (max-width: 575.98px) {
  .home .sf-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .home .sf-type-card {
    display: flex;
    flex-direction: column;
  }

  .home .sf-type-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .home .sf-type-body {
    padding: 10px 12px 12px;
  }

  .home .sf-type-body h3 {
    font-size: 0.95rem;
  }

  .home .sf-type-body p:not(.sf-type-price) {
    display: none;
  }

  .home .sf-type-body .sf-type-price {
    padding-top: 6px;
  }
}

/* 9f. Channel letter Grand Total before the sign text is typed: the starting
   price (single-product.php .price-total-from) instead of $0.00.
   js/ui-polish.js keeps .pd-total-empty in step with the price. */
.product-pricing-box .price-total-from {
  display: none;
}

.product-pricing-box.pd-total-empty .price-total-container > .fs-4 {
  display: none !important;
}

.product-pricing-box.pd-total-empty .price-total-from {
  display: block;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.3;
  text-align: right;
}

.product-pricing-box .price-total-from strong {
  color: #172027;
  font-size: 1.35rem;
  font-weight: 800;
  white-space: nowrap;
}

/* 9g. Background upload status under a file field (js/async-upload.js). A file
   that was too large showed its reason as plain grey small text, easy to miss
   before tapping Add To Cart. */
.async-upload-status {
  display: block;
  margin-top: 4px;
  font-size: .85rem;
  color: #5b6770;
}
.async-upload-status.is-done { color: #1d7a3a; }
.async-upload-status.is-error {
  color: #b42318;
  font-weight: 600;
}

/* 9h. Main product photo opens full size on click or tap (js/main.js). */
.product-details .product-image-zoom { cursor: zoom-in; }
.pd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 20, 25, .9);
  cursor: zoom-out;
}
.pd-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}
.pd-lightbox__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 30px;
  line-height: 1;
}
html.pd-lightbox-open { overflow: hidden; }

/* ---------- 10. Size boxes on narrow screens (2026-11-01) ----------
   Width/height are number inputs; the browser's spin arrows took the room the
   digits need, so "33" showed as "3" in the Height box at phone widths. */
.product-details .product-attibute-box .dim-group .dim-input {
  -moz-appearance: textfield;
}
.product-details .product-attibute-box .dim-group .dim-input::-webkit-outer-spin-button,
.product-details .product-attibute-box .dim-group .dim-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
@media (max-width: 400px) {
  .product-details .product-attibute-box .dim-group .dim-input {
    padding-right: 6px;
    padding-left: 6px;
  }
}

/* Feet-and-inches size boxes (meta _size_unit = ftin, like B2Sign's banner page): "Width [2] ft [6] in". */
.product-details .product-attibute-box .dim-group--ftin .dim-part {
  min-width: 3.2em;
  padding-right: 6px;
  padding-left: 6px;
  text-align: right;
  -moz-appearance: textfield;
}
.product-details .product-attibute-box .dim-group--ftin .dim-part::-webkit-outer-spin-button,
.product-details .product-attibute-box .dim-group--ftin .dim-part::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.product-details .product-attibute-box .dim-group--ftin .input-group-text + .dim-part {
  border-left: 0;
}

/* ---------- 11. Kits and partial items, delivered price (2026-11-02) ----------
   inc/product-kit.php: a graphic-only / flag-only item says what it lacks and
   links to its kit; kits list what they include; the kit/partial toggle shows
   each option's starting price with the kit as the primary option. */
.product-details .product-kit-note {
  margin: -0.4rem 0 0.75rem;
  color: #9a3412;
  font-weight: 700;
}

.product-details .product-kit-link {
  margin: 0.25rem 0 0.5rem;
  text-align: right;
}

.product-details .product-kit-link a {
  font-weight: 700;
}

.product-details .product-kit-included {
  margin: 0.25rem 0 0.75rem;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.product-details .product-kit-included__title {
  margin: 0 0 4px;
  font-weight: 700;
}

.product-details .product-kit-included ul {
  margin: 0;
  padding-left: 1.1rem;
}

.product-attibute-box .product-group-container .product-group-item .product-group-item-price {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
}

.product-attibute-box .product-group-container .product-group-item.current .product-group-item-link {
  border-color: #1fa8de;
  background-color: #e0f4fc;
}

.product-details .pd-delivered {
  margin: 4px 0 0;
  color: #334155;
  font-size: 14px;
  text-align: right;
}

.pd-buy-bar__delivered {
  color: #475569;
  font-size: 11.5px;
  line-height: 1.2;
}

/* ---------- 12. One-tap size chips (2026-11-02) ----------
   inc/size-chips.php + js/ui-polish.js section 5. Chips are at least 44px tall
   and wrap; on banner stands the size chips replace the dropdown on phones only. */
.pb-size-chips,
.pb-option-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.pb-size-chip {
  display: inline-flex;
  flex: 1 1 calc(50% - 8px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 10px;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #172027;
  font-weight: 700;
  line-height: 1.2;
}

.pb-size-chip__price {
  color: #475569;
  font-size: 13px;
  font-weight: 600;
}

.pb-size-chip.is-selected {
  border-color: #1fa8de;
  background: #e0f4fc;
}

.pb-size-chip--custom .pb-size-chip__size {
  font-weight: 600;
}

@media (min-width: 768px) {
  .pb-size-chip {
    flex: 0 1 auto;
  }

  .pb-option-chips {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .select-row .col:has(> .pb-option-chips) > select {
    display: none;
  }
}

/* ---------- 13. Size boxes on small phones (2026-11-03) ----------
   On 320-360px phones, or with a larger phone text size, the "Width"/"inch"
   labels left the typing area 13-33px wide, so customers could not tap it and
   only saw the dropdowns below. Phones get the size box at full width with
   Width above Height. */
@media (max-width: 575.98px) {
  .product-details .product-attibute-box .pb-size-b2 > .col-4,
  .product-details .product-attibute-box .pb-size-b2 > .col-8,
  .product-details .product-attibute-box .pb-size-b2 + .row > .offset-4 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .product-details .product-attibute-box .pb-size-b2 > .col-4 {
    margin-bottom: 6px;
  }

  .product-details .product-attibute-box .dim-fields {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .product-details .product-attibute-box .dim-group .dim-input {
    min-width: 4.5em;
  }
}

/* ---------- 14. Buy box: Buy Now, quantity stepper, delivery estimate (2026-11-05) ----------
   inc/product-buy-box.php + js/ui-polish.js sections 3, 6 and 7, js/mini-cart.js.
   Desktop: quantity | Add To Cart | Buy Now on one row. Phones: quantity and
   Add To Cart, then Buy Now across the full width. */
.product-details .pd-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  margin-top: 4px;
}

.product-details .pd-actions .form-label {
  margin-bottom: 6px;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
}

.product-details .pd-qty__box {
  display: flex;
  align-items: stretch;
  height: 46px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
}

.product-details .pd-qty__box:focus-within {
  border-color: #1fa8de;
  box-shadow: 0 0 0 3px rgba(31, 168, 222, 0.18);
}

.product-details .pd-qty__btn {
  display: grid;
  place-items: center;
  width: 40px;
  padding: 0;
  border: 0;
  background: #f1f5f9;
  color: #172027;
  cursor: pointer;
  touch-action: manipulation;
}

.product-details .pd-qty__btn:hover:not(:disabled) {
  background: #e2e8f0;
}

.product-details .pd-qty__btn:focus-visible {
  outline: 2px solid #1fa8de;
  outline-offset: -2px;
}

.product-details .pd-qty__btn:disabled {
  color: #a5b1bf;
  cursor: default;
}

.product-details .pd-qty__box #productQuantity {
  width: 3.2em;
  min-width: 0;
  height: 100%;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.product-details .pd-qty__box #productQuantity::-webkit-outer-spin-button,
.product-details .pd-qty__box #productQuantity::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.product-details .pd-actions #addToCartBtn,
.product-details .pd-actions .buy-now-btn {
  min-height: 46px;
  margin: 0;
}

.product-details .buy-now-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: #172027;
  color: #fff;
  box-shadow: 0 6px 14px rgba(23, 32, 39, 0.2);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.product-details .buy-now-btn:hover,
.product-details .buy-now-btn:focus-visible {
  background: #000;
  color: #fff;
  box-shadow: 0 9px 18px rgba(23, 32, 39, 0.26);
  transform: translateY(-1px);
}

.product-details .buy-now-btn:disabled {
  background: #172027;
  color: #fff;
  opacity: 0.55;
}

.product-details .buy-now-btn.is-adding svg {
  visibility: hidden;
}

.product-details .pd-actions__hint {
  margin: 8px 0 0;
  color: #52616f;
  font-size: 13px;
  text-align: right;
}

.product-details .pd-eta:not([hidden]) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 14px;
  padding: 10px 12px;
  border: 1px solid #cdebd9;
  border-radius: 8px;
  background: #f1faf5;
  color: #1d3a2b;
  font-size: 14px;
  line-height: 1.4;
}

.product-details .pd-eta__icon {
  flex: 0 0 auto;
  margin-top: 1px;
  color: #117a4c;
}

.product-details .pd-eta p {
  margin: 0;
}

.product-details .pd-eta strong {
  color: #0d5a37;
  font-weight: 700;
}

.product-details .pd-eta__arrive {
  margin-top: 2px !important;
  color: #3b5247;
  font-size: 13px;
}

/* "Secure checkout" left, "We accept" + card marks right (inc/product-buy-box.php). */
.product-details .pd-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e6ebf0;
  color: #52616f;
  font-size: 12.5px;
}

.product-details .pd-pay__secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1d3a2b;
  font-weight: 600;
}

.product-details .pd-pay__lock {
  flex: 0 0 auto;
  color: #117a4c;
}

.product-details .pd-pay__accept {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.product-details .pd-pay__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-details .pd-pay__cards li {
  display: flex;
  margin: 0;
  padding: 0;
}

.product-details .pd-pay__cards svg {
  display: block;
  width: 38px;
  height: 24px;
}

@media (max-width: 767.98px) {
  .product-details .pd-actions {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .product-details .pd-actions .buy-now-btn {
    grid-column: 1 / -1;
    min-height: 50px;
    font-size: 17px;
  }

  .product-details .pd-actions__hint,
  .product-details .pd-pay {
    justify-content: center;
    text-align: center;
  }
}

/* Phone buy bar with Buy Now (js/ui-polish.js section 3): cart icon + Buy Now. */
@media (max-width: 767.98px) {
  .pd-buy-bar__actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
  }

  .pd-buy-bar__cart {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1.5px solid #0b74a3;
    border-radius: 10px;
    background: #fff;
    color: #0b74a3;
  }

  .pd-buy-bar__cart[hidden] {
    display: none;
  }

  .pd-buy-bar__cart:disabled {
    border-color: #cbd5e1;
    color: #94a3b8;
  }

  .pd-buy-bar--buy .pd-buy-bar__button {
    padding: 0 18px;
    background: #172027;
  }

  .pd-buy-bar--buy .pd-buy-bar__button:active {
    background: #000;
  }

  .pd-buy-bar--buy .pd-buy-bar__button:disabled {
    background: #94a3b8;
  }
}

/* Phone numbers in the assurance list stay on one line. */
.product-pricing-box .product-assurance a[href^="tel:"],
.product-pricing-box .product-assurance a[href^="sms:"] {
  white-space: nowrap;
}

/* ---------- 15. Product hero (2026-11-05) ----------
   single-product.php: .pd-hero holds the title block (.pd-hero__top), the photo
   column (.col-md-4), the highlights (.pd-hero__info) and the options. Phones stack
   them in that order, so the photo comes right after the title instead of a screen
   of text. 768px and up puts the photo column on the left beside the title, so the
   first screen shows the photo, rating, price and highlights together.
   inc/product-hero.php prints the rating / perks row and the "Great for" chips. */
@media (min-width: 768px) {
  .product-details > main > article > form > .row.pd-hero {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "gallery top"
      "gallery info"
      "gallery options";
    column-gap: 32px;
    row-gap: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 12px;
  }
  .product-details .pd-hero > * {
    width: auto;
    max-width: none;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .product-details .pd-hero > .col-md-4 {
    grid-area: gallery;
    align-self: start;
  }
  .product-details .pd-hero > .pd-hero__top {
    grid-area: top;
  }
  .product-details .pd-hero > .pd-hero__info {
    grid-area: info;
  }
  .product-details .pd-hero > #product-options {
    grid-area: options;
    align-self: start;
  }
  /* The title shares the row with the photo now, so it is a little smaller. */
  .product-details .pd-hero .product-title {
    margin-top: 4px !important;
    font-size: clamp(26px, 2.5vw, 36px) !important;
  }
  .product-details .pd-hero .product-mobile-price {
    margin: 0 0 18px;
  }
}
/* Tablets (768-991px): the options column is narrow beside the photo, so the size
   box stacks like on phones (section 13) and the Width/Height fields stay typeable. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .product-details > main > article > form > .row.pd-hero {
    column-gap: 20px;
  }
  .product-details .pd-hero .product-attibute-box .pb-size-b2 > .col-4,
  .product-details .pd-hero .product-attibute-box .pb-size-b2 > .col-8,
  .product-details .pd-hero .product-attibute-box .pb-size-b2 + .row > .offset-4 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
  }
  .product-details .pd-hero .product-attibute-box .pb-size-b2 > .col-4 {
    margin-bottom: 6px;
  }
}
@media (min-width: 992px) {
  .product-details > main > article > form > .row.pd-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 40px;
  }
}

/* Rating + perks row. */
.pd-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 16px;
}
.pd-proof__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #243746;
  font-size: 0.92rem;
  text-decoration: none;
}
.pd-proof__rating:hover .pd-proof__count,
.pd-proof__rating:focus-visible .pd-proof__count {
  text-decoration: underline;
}
.pd-proof__stars {
  display: inline-flex;
  letter-spacing: 1px;
  color: #d9e2e8;
  font-size: 1.05rem;
  line-height: 1;
}
.pd-proof__star.is-full {
  color: #f5ad27;
}
.pd-proof__star.is-half {
  background: linear-gradient(90deg, #f5ad27 50%, #d9e2e8 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pd-proof__rating strong {
  color: #172027;
}
.pd-proof__count {
  color: #0b74a3;
  font-weight: 600;
}
.pd-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-perk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #edf7f1;
  color: #166534;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
}
.pd-perk__icon {
  flex: none;
}

/* Highlights: check marks instead of plain grey bullets. */
.product-details .pd-hero .product-intro {
  margin-bottom: 16px !important;
  color: #334155;
}
.product-details .pd-hero .product-intro ul,
.product-details .product-intro--below-gallery ul {
  display: grid;
  gap: 7px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-details .pd-hero .product-intro li,
.product-details .product-intro--below-gallery li {
  position: relative;
  padding-left: 27px;
  line-height: 1.45;
}
.product-details .pd-hero .product-intro li::before,
.product-details .product-intro--below-gallery li::before {
  content: "";
  position: absolute;
  top: 0.18em;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
@media (min-width: 1200px) {
  .product-details .pd-hero .product-intro ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* "Great for" chips. */
.pd-uses {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0 0 20px;
}
.pd-uses__label {
  color: #475569;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pd-uses__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-uses__list li {
  padding: 4px 11px;
  border: 1px solid #d3ecf7;
  border-radius: 999px;
  background: #f3fafd;
  color: #1e3a4c;
  font-size: 0.82rem;
  line-height: 1.35;
}

@media (max-width: 767.98px) {
  .product-details .pd-hero > .pd-hero__top .product-title {
    margin-bottom: 6px !important;
  }
  .pd-proof {
    gap: 6px 10px;
    margin-bottom: 12px;
  }
  .pd-perk {
    font-size: 0.75rem;
    padding: 3px 9px;
  }
  .product-details > main > article > form > .row.pd-hero {
    row-gap: 16px;
  }
  .product-details .pd-hero .product-mobile-price {
    margin-bottom: 0;
  }
  /* Photo right after the title and price, then the highlights, then the options. */
  .product-details .pd-hero > .col-md-4 {
    order: 1;
  }
  .product-details .pd-hero > .pd-hero__info {
    order: 2;
  }
  .product-details .pd-hero > #product-options {
    order: 3;
  }
  .product-details .pd-hero .product-intro {
    font-size: 15px;
  }
}

/* ---------- 16. B2Sign-style Size selector (2026-11-05) ----------
   single-product.php + js/main.js, products with preset sizes (_size_presets).
   One Size dropdown: preset sizes "24" x 18" (w x h) Vertical Flutes", then
   "More Sizes > Custom Sizes", which shows the Width/Height boxes. A preset keeps
   the boxes hidden (they still hold and post its size). */
.product-details .product-attibute-box .pb-size-select {
  position: relative;
  margin-bottom: 10px;
}

.product-details .product-attibute-box .pb-size-select__button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  background-color: #fff;
  color: #172027;
  text-align: left;
  cursor: pointer;
}

.product-details .product-attibute-box .pb-size-select.is-open .pb-size-select__button {
  border-color: #1fa8de;
  box-shadow: 0 0 0 3px rgba(31, 168, 222, 0.15);
}

.product-details .product-attibute-box .pb-size-select__value {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.product-details .product-attibute-box .pb-size-opt__size {
  color: #172027;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.product-details .product-attibute-box .pb-size-opt__wh {
  color: #94a3b8;
  font-size: 13px;
  white-space: nowrap;
}

.product-details .product-attibute-box .pb-size-opt__note {
  color: #334155;
  font-size: 14px;
}

/* Closed: the chosen size's note sits on the right, grey and small. */
.product-details .product-attibute-box .pb-size-select__value .pb-size-opt__note {
  overflow: hidden;
  min-width: 0;
  margin-left: auto;
  color: #94a3b8;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-details .product-attibute-box .pb-size-select__list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: min(380px, 60vh);
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  list-style: none;
  outline: none;
}

.product-details .product-attibute-box .pb-size-select__list[hidden] {
  display: none;
}

.product-details .product-attibute-box .pb-size-opt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  min-height: 36px;
  padding: 7px 12px;
  cursor: pointer;
}

/* Sizes line up, so "(w x h)" and the notes form columns. */
.product-details .product-attibute-box .pb-size-select__list .pb-size-opt__size {
  min-width: 5.2em;
}

.product-details .product-attibute-box .pb-size-opt.is-active {
  background: #f1f5f9;
}

.product-details .product-attibute-box .pb-size-opt[aria-selected="true"] {
  background: #e0f4fc;
}

.product-details .product-attibute-box .pb-size-opt[aria-selected="true"].is-active {
  background: #cdeaf7;
}

.product-details .product-attibute-box .pb-size-select__list:focus-visible .pb-size-opt.is-active {
  box-shadow: inset 3px 0 0 #1fa8de;
}

.product-details .product-attibute-box .pb-size-select__group {
  margin-top: 4px;
  padding: 10px 12px 2px;
  border-top: 1px solid #e2e8f0;
  color: #172027;
  font-size: 14px;
  font-weight: 600;
}

.product-details .product-attibute-box .pb-size-opt--custom {
  padding-left: 26px;
}

.product-details .product-attibute-box .pb-size-opt--custom .pb-size-opt__size {
  min-width: 0;
}

.product-details .product-attibute-box .pb-size-b2.is-preset .dim-fields {
  display: none;
}

@media (max-width: 575.98px) {
  .product-details .product-attibute-box .pb-size-opt {
    min-height: 44px;
  }
}

/* B2Sign quantity pricing note under the quantity box (inc/product-buy-box.php). */
.pd-qty__note{display:block;margin-top:4px;color:#5b6d75;font-size:12px;line-height:1.35;max-width:220px}

/* 2026-11-09: the note is its own grid row (.pd-actions--note), under the buttons on
   desktop and between Add To Cart and Buy Now on phones. In the quantity column it
   stretched the stepper to 220px and pushed Add To Cart onto two lines. */
.product-details .pd-actions--note {
  grid-template-areas:
    "qty cart buy"
    "note note note";
}

.product-details .pd-actions--note > .pd-qty {
  grid-area: qty;
}

.product-details .pd-actions--note > #addToCartBtn {
  grid-area: cart;
}

.product-details .pd-actions--note > .buy-now-btn {
  grid-area: buy;
}

.product-details .pd-actions--note > .pd-qty__note {
  grid-area: note;
  max-width: none;
  margin-top: -4px;
}

@media (max-width: 767.98px) {
  .product-details .pd-actions--note {
    grid-template-areas:
      "qty cart"
      "note note"
      "buy buy";
  }
}

/* The divider above Grand Total separates it from the Regular price / sale /
   same-day rows. Without any of them showing it sat alone at the top of the box,
   with an empty band above it (2026-11-09). */
.product-details .product-pricing-box > .container > hr {
  display: none;
}

.product-details .product-pricing-box > .container > .subtotal-container:not([hidden]) ~ hr,
.product-details .product-pricing-box > .container > .totalSaving-container ~ hr,
.product-details .product-pricing-box > .container > .price-turnaround-row:not([hidden]) ~ hr {
  display: block;
}

/* Wide spec tables (e.g. flags: 6 columns) scroll inside their own box
   (wholesale_product_info_wrap_tables()) instead of widening the whole page,
   which let phones pan sideways (2026-11-09). */
.product-info .product-info-table {
  max-width: 100%;
  margin: 10px 0 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.product-info .product-info-table > table {
  margin: 0;
}

@media (max-width: 575.98px) {
  .product-info .product-info-table th,
  .product-info .product-info-table td {
    padding: 7px 8px;
    font-size: 14px;
  }

  /* Size charts (5+ columns) keep each value on one line and scroll,
     instead of breaking 44.95" x 140.75" over three lines. */
  .product-info .product-info-table table:has(tr > :nth-child(5)) td {
    white-space: nowrap;
  }
}

/* ---------- 17. Card photos fill their thumbnail (2026-11-08) ----------
   Product card photos cover the whole thumbnail, edge to edge, on every
   screen size. style.css switches listing cards (channel letter cards too)
   to object-fit: contain below 573px; that rule stays in style.css so the
   home page keeps its critical CSS subset, and this one wins by load order. */
.product-box-container .product-box .pb-image-top img {
  object-fit: cover;
  object-position: center;
}

/* ---------- 18. Visitor Insights fixes (2026-11-09) ----------
   Contact page: the call/text line in the intro, and on phones a shorter intro
   so the first form field shows without scrolling (it started at 968px; 13 visits
   ended on /contact/ on Nov 8 with no request sent). */
/* Beats style.css .contact-hero-copy > p:not(.contact-eyebrow). */
.contact-hero .contact-hero-copy > p.contact-hero-call {
  margin: 12px 0 0;
  color: #334155;
  font-size: 15px;
  font-weight: 600;
}

.contact-hero .contact-hero-call a {
  color: #0a6f9a;
  white-space: nowrap;
}

.contact-card-heading.is-tappable {
  cursor: pointer;
}

@media (max-width: 575.98px) {
  .contact-page .contact-hero {
    min-height: 0;
    margin: 10px 0 14px;
    padding: 22px 18px 18px;
  }

  .contact-page .contact-hero::before {
    left: 18px;
  }

  .contact-page .contact-hero h1 {
    margin-bottom: 8px;
    font-size: 1.65rem;
  }

  .contact-page .contact-hero-copy > p:not(.contact-eyebrow):not(.contact-hero-call) {
    font-size: 15px;
    line-height: 1.5;
  }

  .contact-page .contact-trust-row {
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
  }

  .contact-page .contact-trust-row span {
    padding: 4px 9px;
  }

  .contact-page .contact-form-card {
    padding-top: 18px;
  }

  .contact-page .contact-card-heading .contact-eyebrow {
    display: none;
  }

  .contact-page .contact-card-heading h2 {
    margin-bottom: 4px;
    font-size: 21px;
  }

  .contact-page .contact-card-heading > p:last-child {
    margin-bottom: 14px;
    font-size: 14px;
  }
}

/* Product page: a too-big size links to the quote form (js/main.js). */
.product-details .product-attibute-box .pb-dim-help {
  display: inline-block;
  margin-top: 4px;
  color: #0a6f9a;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The whole "Starting at ... Get your price" box is a tap target (js/ui-polish.js 8). */
.product-details .product-mobile-price.is-tappable {
  cursor: pointer;
}

/* ---------- 19. Size boxes: professional Width / Height fields (2026-11-09) ----------
   "Width" / "Height" sit as a small caption above; each number gets its own
   rounded box with the unit (ft / in / inch) inside on the right. Fits the
   column (no overflow past the card edge). Markup: single-product.php. */
.product-details .product-attibute-box .pb-size-b2 .dim-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.product-details .product-attibute-box .pb-size-b2 .dim-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  row-gap: 6px;
  column-gap: 0;
  width: 100%;
  min-width: 0;
}
/* Caption: "Width" / "Height" */
.product-details .product-attibute-box .pb-size-b2 .dim-group > .input-group-text:first-child {
  flex: 0 0 100%;
  justify-content: flex-start;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: none;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Number boxes */
.product-details .product-attibute-box .pb-size-b2 .dim-group .dim-input,
.product-details .product-attibute-box .pb-size-b2 .dim-group--ftin .dim-part {
  flex: 1 1 0;
  width: auto;
  min-width: 0 !important;
  height: 46px;
  min-height: 46px;
  margin: 0 !important;
  padding: 0 4px 0 12px;
  border: 1px solid #cbd5e1 !important;
  border-right: 0 !important;
  border-radius: 10px 0 0 10px !important;
  background: #fff;
  box-shadow: none;
  color: #0f172a;
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, box-shadow .15s;
}
/* Unit suffix inside the box */
.product-details .product-attibute-box .pb-size-b2 .dim-group > .input-group-text:not(:first-child) {
  flex: 0 0 auto;
  justify-content: center;
  min-width: 0;
  min-height: 46px;
  margin: 0 !important;
  padding: 0 12px 0 4px;
  border: 1px solid #cbd5e1 !important;
  border-left: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  background: #fff;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .15s, box-shadow .15s;
}
/* Gap between the ft box and the in box */
.product-details .product-attibute-box .pb-size-b2 .dim-group--ftin .dim-part[data-part="in"] {
  margin-left: 8px !important;
}
.product-details .product-attibute-box .pb-size-b2 .dim-group .dim-input:hover,
.product-details .product-attibute-box .pb-size-b2 .dim-group .dim-part:hover,
.product-details .product-attibute-box .pb-size-b2 .dim-group .dim-input:hover + .input-group-text,
.product-details .product-attibute-box .pb-size-b2 .dim-group .dim-part:hover + .input-group-text {
  border-color: #94a3b8 !important;
}
.product-details .product-attibute-box .pb-size-b2 .dim-group .dim-input:focus,
.product-details .product-attibute-box .pb-size-b2 .dim-group .dim-part:focus,
.product-details .product-attibute-box .pb-size-b2 .dim-group .dim-input:focus + .input-group-text,
.product-details .product-attibute-box .pb-size-b2 .dim-group .dim-part:focus + .input-group-text {
  border-color: #1fa8de !important;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(31, 168, 222, .18);
  clip-path: inset(-4px 0 -4px -4px);
}
.product-details .product-attibute-box .pb-size-b2 .dim-group .dim-input:focus + .input-group-text,
.product-details .product-attibute-box .pb-size-b2 .dim-group .dim-part:focus + .input-group-text {
  clip-path: inset(-4px -4px -4px 0);
  color: #1287b5;
}
.product-details .product-attibute-box .pb-size-b2 .dim-group:focus-within > .input-group-text:first-child {
  color: #1287b5;
}
/* Summary panel under the boxes */
.product-details .product-attibute-box .pb-size-b2 + .row .pb-size-summary {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
@media (max-width: 575.98px) {
  .product-details .product-attibute-box .pb-size-b2 .dim-fields {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ---- Production-time choices mirrored from B2Sign (inc/product-buy-box.php, B2Sign Sync 1.9.1) ----
   Laid out like B2Sign: "Same Day" / "Next Day" headings, one row per choice with its cut-off and price.
   Closed choices (Pacific clock, size over 120" on both sides) are greyed out, as on B2Sign. */
.product-details [data-turnaround-choices] .pb-turn-section + .pb-turn-section {
  margin-top: 10px;
}
.product-details [data-turnaround-choices] .pb-turn-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.product-details [data-turnaround-choices] .pb-turn-choice {
  padding: 4px 0 4px 1.6em;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.product-details [data-turnaround-choices] .pb-turn-choice:last-child {
  border-bottom: 0;
}
.product-details [data-turnaround-choices] .pb-turn-choice .form-check-label {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-weight: 400;
}
.product-details [data-turnaround-choices] .pb-turn-price {
  font-weight: 600;
}
.product-details [data-turnaround-choices] .pb-turn-choice.is-closed .form-check-label {
  opacity: 0.45;
}

/* Contact form Submit button (11-12): full width, clear label, polished look.
   Short "All done? Press Submit" line above it; paper-plane icon inside. */
.contact-form .contact-submit-hint {
  margin: 8px 0 -8px;
  color: #55606b;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}
.contact-form .contact-submit-hint strong {
  color: #0b2a3c;
  font-weight: 600;
}
.contact-form .contact-submit {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 54px;
  gap: 10px;
  padding: 0 28px;
  border: 1px solid #08608a;
  border-radius: 10px;
  background: linear-gradient(180deg, #1083b8 0%, #0b6f9d 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(15, 35, 52, 0.12),
    0 6px 16px rgba(11, 111, 157, 0.22);
  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}
.contact-form .contact-submit:hover,
.contact-form .contact-submit:focus-visible {
  background: linear-gradient(180deg, #0d76a7 0%, #095d84 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 4px rgba(15, 35, 52, 0.14),
    0 10px 22px rgba(11, 111, 157, 0.28);
  transform: translateY(-1px);
}
.contact-form .contact-submit:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.16),
    0 1px 2px rgba(15, 35, 52, 0.12);
}
.contact-form .contact-submit:focus-visible {
  outline: 3px solid rgba(16, 131, 184, 0.35);
  outline-offset: 3px;
}
.contact-form .contact-submit .contact-submit-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.contact-form .contact-submit .contact-submit-icon svg {
  display: block;
}
/* While sending, the icon slot becomes the spinner (style.css .is-loading span). */
.contact-form .contact-submit.is-loading .contact-submit-icon svg {
  display: none;
}
.contact-form .contact-form-note {
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .contact-form .contact-submit {
    transition: none;
  }
  .contact-form .contact-submit:hover,
  .contact-form .contact-submit:focus-visible {
    transform: none;
  }
}
/* Thank-you panel shown in place after the background send (page-contact.php). */
.contact-form-card.is-sent .contact-sent {
  animation: contact-sent-in 260ms ease-out both;
}
@keyframes contact-sent-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-form-card.is-sent .contact-sent {
    animation: none;
  }
}