/** Shopify CDN: Minification failed

Line 704:0 Unexpected "}"

**/
/* ============================================================
   UX FIX REPORT — Headpointe Product Page (All Products)
   Applied: June 2026
   Fixes: 8 issues — CTA visibility, sticky mobile bar, typography,
          gallery, rating position, swatches, images, section hierarchy
   ============================================================ */

/* ----------------------------------------------------------
   FIX 1 — Above-the-fold CTA
   Product info sticks so price + Add to Cart stay in first viewport
   ---------------------------------------------------------- */
.product-single {
  align-items: start;
}

@media screen and (min-width: 750px) {
  .product-single__meta {
    position: sticky;
    top: 20px;
  }
}

.product-form__cart-submit.btn--primary {
  background-color: var(--color-btn-primary) !important;
  color: var(--color-btn-primary-text) !important;
  font-size: 16px !important;
  padding: 14px 32px !important;
  border: none !important;
  border-radius: 50px !important;
  width: 100% !important;
  cursor: pointer !important;
  margin-top: 16px !important;
  letter-spacing: 0.02em;
  transition: background 0.2s ease;
}

.product-form__cart-submit.btn--primary:hover {
  background-color: var(--color-btn-primary-focus) !important;
}

/* ----------------------------------------------------------
   FIX 2 — Sticky Mobile CTA Bar
   Fixed bottom bar on mobile once user scrolls past main CTA
   ---------------------------------------------------------- */
.sticky-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #e0e0e0;
  padding: 12px 16px;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}

@media screen and (max-width: 749px) {
  .sticky-mobile-cta.is-visible {
    display: flex;
  }
  .product-single__meta {
    padding-bottom: 80px;
  }
}

.sticky-mobile-cta__price {
  font-size: 16px;
  font-weight: 700;
  color: #222222;
}

.sticky-mobile-cta__btn {
  background: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
  border: none;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.sticky-mobile-cta__btn:hover {
  background: var(--color-btn-primary-focus);
}

/* ----------------------------------------------------------
   FIX 3 — Typography & Contrast (WCAG AA)
   Min 14px body text, color contrast 4.5:1+
   ---------------------------------------------------------- */
body,
p,
li,
td,
.rte p,
.rte li,
.product-single__description,
.product-single__description p,
.product-single__description li {
  font-size: 14px;
  line-height: 1.7;
  color: #222222;
}

.feature-text,
.spec-text,
.product-features p {
  font-size: 14px;
  color: #444444;
}

.label,
.tag,
figcaption,
.product__policies,
.variant-sku {
  font-size: 12px;
  color: #555555;
}

/* ----------------------------------------------------------
   FIX 4 — Image Gallery Thumbnails
   Grid layout, square crops, active/hover border
   ---------------------------------------------------------- */
.product-single__thumbnails {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.product-single__thumbnail-item img,
.product-single__thumbnail img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  transition: border-color 0.15s ease;
  width: 100% !important;
}

.product-single__thumbnail-item.active-thumb img,
.product-single__thumbnail-item img:hover,
.product-single__thumbnail.active-thumb img,
.product-single__thumbnail img:hover {
  border-color: #222222 !important;
}

.product-single__media__slide img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 4px;
}

@media screen and (max-width: 749px) {
  .product-single__thumbnails {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ----------------------------------------------------------
   FIX 5 — Star Rating directly under product title
   ---------------------------------------------------------- */
.product-single__title {
  margin-bottom: 6px !important;
}

.rating {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

.rating-text,
.rating-count {
  font-size: 13px !important;
  color: #555555 !important;
  margin-bottom: 12px !important;
}

/* ----------------------------------------------------------
   FIX 6 — Color Swatches — 32×32px minimum + label
   ---------------------------------------------------------- */
.swatch-element,
.swatch__item {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

.swatch-element label,
.swatch__item label {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  outline-offset: 3px;
  transition: border-color 0.15s ease;
  display: block !important;
}

.swatch-element input[type="radio"]:checked + label,
.swatch-element label:hover,
.swatch__item input[type="radio"]:checked + label,
.swatch__item label:hover {
  border-color: #222222 !important;
  outline: 2px solid #222222 !important;
}

.product_swatches .swatch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.swatch-selected-label {
  font-size: 13px;
  color: #555555;
  margin-top: 4px;
  display: block;
}

/* ----------------------------------------------------------
   FIX 7 — Image Performance
   Reserve space to prevent layout shift (CLS)
   Lazy loading is applied via HTML attribute in template
   ---------------------------------------------------------- */
.product-single__media__slide:not(:first-child) img {
  content-visibility: auto;
}

/* ----------------------------------------------------------
   FIX 8 — Section Visual Hierarchy
   Alternating backgrounds so users can scan the page
   ---------------------------------------------------------- */
.product-single__description {
  background: #f8f8f6;
  padding: 20px 24px;
  border-radius: 4px;
  margin-top: 16px;
}

#shopify-product-reviews,
.jdgm-widget,
.spr-container {
  background: #ffffff;
  padding: 40px 24px;
}

.complementary-products {
  background: #f8f8f6;
  padding: 32px 24px;
  border-radius: 4px;
  margin-top: 24px;
}

/* ----------------------------------------------------------
   PRODUCT FORM — variant option boxes (size, etc.)
   Prevent text wrapping in variant buttons; keep compact
   ---------------------------------------------------------- */
.product-form__option .swatch-element label,
.single-option-selector__radio + label,
.variant-input-wrap label,
.product-form__option label.color,
.product-form__option label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 44px !important;
  max-width: 120px !important;
  height: auto !important;
  min-height: 36px !important;
  padding: 6px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  border: 1px solid #cccccc !important;
  cursor: pointer;
}

/* Color swatch labels (circles) — keep circular, override above for color type */
.swatch-element.color label,
.product-form__option .swatch-element.color label {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  border-radius: 50% !important;
  padding: 0 !important;
}

/* Variant image swatches (image-type variants) — cap size */
.swatch-element.variant label,
.product-form__option .swatch-element.variant label,
.swatch-element[class*="swatch_"] label {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.swatch-element[class*="swatch_"] label img,
.swatch-element.variant label img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 3px !important;
}

/* Swatch container — allow wrap, prevent full-width stretch */
.swatch-element {
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
}

.product-form__option .swatch,
.product_swatches {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Selected radio variant button highlight */
.swatch-element input[type="radio"]:checked + label {
  border-color: #222222 !important;
  outline: 2px solid #222222 !important;
}

/* ----------------------------------------------------------
   THUMBNAIL GRID — max 5 per row, constrain height on mobile
   ---------------------------------------------------------- */
[class*="product-single__thumbnails"] {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

[class*="product-single__thumbnails"] .product-single__thumbnail-item,
[class*="product-single__thumbnails"] .grid-item {
  margin: 0 !important;
}

[class*="product-single__thumbnails"] img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  width: 100% !important;
  border-radius: 3px !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
}

[class*="product-single__thumbnails"] img:hover,
[class*="product-single__thumbnails"] .active-thumb img {
  border-color: #222222 !important;
}

@media screen and (max-width: 749px) {
  [class*="product-single__thumbnails"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ----------------------------------------------------------
   PRODUCT DESCRIPTION — hide inline images
   Images inside the product description content are hidden;
   only text content is displayed.
   ---------------------------------------------------------- */
.product-single__description img,
.product-single__description .rte img,
[class*="main-product-description"] img,
.rte.product-single__description img {
  display: none !important;
}

/* ==========================================================
   SITEWIDE UX IMPROVEMENTS — June 2026
   ========================================================== */

/* ----------------------------------------------------------
   FIX A — Hide "Generic" vendor label on product cards
   ---------------------------------------------------------- */
.product-card__vendor,
.product__vendor,
.grid-product__vendor,
.price__vendor,
.product-item__vendor,
.vendor {
  display: none !important;
}

/* ----------------------------------------------------------
   FIX B — Consistent product card image aspect ratio
   Force all product card images to 1:1 square — no more
   mixed portrait/landscape broken grids
   ---------------------------------------------------------- */
.grid-product__image-wrap,
.card__media,
.product-card__image,
.grid__image-ratio,
.grid-product__image-container,
[class*="product-card"] .image-wrap,
[class*="grid-product"] .image-wrap {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

.grid-product__image-wrap img,
.card__media img,
.product-card__image img,
[class*="product-card"] .image-wrap img,
[class*="grid-product"] .image-wrap img,
.grid-product__image {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* ----------------------------------------------------------
   FIX C — Product card CTAs — clean up double button stack
   Keep Add to Cart always visible; Quick View shown on hover only
   ---------------------------------------------------------- */
.open-quick-view--btn,
.grid-product .btn--quick-view,
[class*="quick-view-button"],
.quick_view_btn {
  opacity: 0 !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
  visibility: hidden !important;
}

.grid-product:hover .open-quick-view--btn,
.grid-product:hover .btn--quick-view,
.grid-product:hover [class*="quick-view-button"],
.grid-product:hover .quick_view_btn,
[class*="product-item"]:hover .open-quick-view--btn {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ----------------------------------------------------------
   FIX D — REVERTED Jul 2026
   This originally forced primary buttons to dark gray (#222222),
   overriding the theme's native orange button color. Removed at
   Kirk's request to restore the original orange, rounded buttons.
   Sale badges keep their orange accent (which now matches buttons).
   ---------------------------------------------------------- */
.badge--sale,
.product__badge--sale,
.grid-product__tag--sale,
.AnnouncementBar {
  background-color: #bf370e !important;
}

/* Secondary / outline buttons — kept as outline style, color now
   matches the theme's text color rather than a hardcoded dark value */
.btn--secondary,
.btn--outline,
a.btn--secondary {
  background-color: transparent !important;
  color: var(--color-text) !important;
  border: 2px solid var(--color-text) !important;
}

.btn--secondary:hover,
a.btn--secondary:hover {
  background-color: var(--color-text) !important;
  color: #ffffff !important;
}

/* ----------------------------------------------------------
   FIX E — Slim down header: hide the contact info top bar
   on desktop to reduce the 4-row header to 2 rows
   ---------------------------------------------------------- */
@media screen and (min-width: 750px) {
  .site-header__email,
  .site-header__phone,
  .header__top-bar,
  .header_top_line,
  [class*="header__email"],
  [class*="header__phone"],
  .top-line-contact {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   FIX F — Trust badges in footer
   Adds a visual trust row above the footer links
   ---------------------------------------------------------- */
.site-footer {
  position: relative;
}

.trust-badges-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding: 24px 16px;
  background: #f8f8f6;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

.trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #444444;
  text-align: center;
  min-width: 80px;
}

.trust-badge svg {
  width: 28px;
  height: 28px;
  color: #222222;
}

/* ----------------------------------------------------------
   FIX G — Collection page hero: hide "0% Off" broken badge
   ---------------------------------------------------------- */
.collection-hero .badge,
.collection-hero [class*="percent"],
.collection__banner .badge {
  display: none !important;
}

/* ----------------------------------------------------------
   FIX H — Homepage hero: make CTA buttons more prominent
   ---------------------------------------------------------- */
.slideshow__text-content .btn,
.slideshow__text-content a.btn {
  font-size: 15px !important;
  padding: 14px 28px !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

/* ----------------------------------------------------------
   FIX I — Mobile responsive improvements
   ---------------------------------------------------------- */
@media screen and (max-width: 749px) {
  /* Larger tap targets for nav links */
  .nav-bar__link,
  .mobile-nav__link {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Product grid: 2 columns on mobile, not 1 */
  .grid--uniform .grid__item.small--one-whole {
    width: 50% !important;
  }

  /* Footer: stack cleanly */
  .site-footer__item {
    margin-bottom: 24px !important;
  }
}

/* ==========================================================
   FIX J — Breadcrumb styling + "you are here" nav state
   Applied: Jul 2026 (CRO/UX navigation audit)
   The theme's Liquid already marks the current page (aria-current,
   .site-nav--active, .site-nav__link--active) but no CSS gave those
   states any visible treatment, so breadcrumbs rendered as a bare
   unstyled <ol> and the active nav item looked identical to the rest.
   ========================================================== */
.breadcrumbs {
  margin: 16px 0;
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  color: #767676;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
}

.breadcrumbs__item:not(:last-child)::after {
  content: "/";
  margin: 0 8px;
  color: #cccccc;
}

.breadcrumbs__link {
  color: #767676;
  text-decoration: none;
}

.breadcrumbs__link:hover {
  text-decoration: underline;
}

.breadcrumbs__link[aria-current="page"] {
  color: #232323;
  font-weight: 600;
  pointer-events: none;
  text-decoration: none;
}

.site-nav--active > .site-nav__link,
.site-nav__link--active,
.site-nav__link[aria-current="page"] {
  font-weight: 600;
  border-bottom: 2px solid #bf370e;
}

/* ==========================================================
   FIX K — Restore original rounded button corners (Jul 2026)
   The theme's base .btn class ships with square (0) corners.
   Buttons were originally rounded; this restores that shape
   sitewide, including the homepage hero and product CTAs.
   ========================================================== */
.btn,
.btn--primary,
.btn--secondary,
.btn--transparent_primary,
.btn--transparent_secondary,
.btn--white,
.shopify-payment-button .shopify-payment-button__button--unbranded {
  border-radius: 50px !important;
}

/* ==========================================================
   FIX L — Hero Slider (Slideshow) Text — Remove Line-Wrapping
   Applied: Jul 2026
   Keeps the hero title and subheading on a single line instead
   of breaking across two or more lines. Font size scales down
   fluidly with viewport width so longer headlines still fit
   without wrapping. Wrapping is restored below 480px, where a
   single-line long headline would otherwise force the text too
   small to read comfortably.
   ========================================================== */
.slideshow__title,
.slideshow__subtitle {
  white-space: nowrap !important;
  overflow: visible !important;
  max-width: 100%;
}

.slideshow__title.mega-title,
.slideshow__title {
  font-size: clamp(20px, 4vw, 48px) !important;
  line-height: 1.2 !important;
}

.slideshow__subtitle.mega-subtitle,
.slideshow__subtitle {
  font-size: clamp(13px, 1.6vw, 20px) !important;
}

@media screen and (max-width: 480px) {
  .slideshow__title,
  .slideshow__subtitle {
    white-space: normal !important;
  }
}
/* Charcoal logo on product pages only */
body.template-product .header__heading-logo {
  filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) brightness(40%);
}


}

}