/** Shopify CDN: Minification failed

Line 462:0 Unexpected "}"

**/
/* ============================================
   STAMPS HOME FURNITURE - PRODUCT PAGE STYLES
   Article.com Inspired Design
   Brand Colors: #0D1F4D (olive) #C5D7F7 (sage)

   NOTE: Variant picker styles have been consolidated
   into component-product-variant-picker.css
   ============================================ */

:root {
  /* =============================================
     STAMPS HOME FURNITURE - Global Brand Colors
     These variables are the single source of truth
     for brand colors across all CSS files.
     ============================================= */
  --shf-accent: #0D1F4D;
  --shf-accent-hover: #34528F;
  --shf-accent-light: #C5D7F7;
  --shf-text: #333;
  --shf-text-light: #666;
  --shf-border: #e5e5e5;
}

/* ============================================
   YOTPO BOTTOMLINE — hidden on the PDP right column only.

   Replaced by a custom Article-style row rendered inline with the
   price block (snippets/product-price-block.liquid) that reads from
   the SAME Yotpo metafields. The Yotpo bottomline app block at the
   top of the right column was rendering "★★★★★ 5 | Read Reviews"
   which competed visually.

   Hidden via CSS rather than removed from product.json because the
   app block also anchors Yotpo's data fetch for the product.

   Scoped to .product__info-wrapper so the FULL reviews widget further
   down the page (outside this container) keeps rendering normally.
   ============================================ */
.product__info-wrapper [data-yotpo-instance-id],
.product__info-wrapper .yotpo,
.product__info-wrapper .yotpo-bottomline {
  display: none !important;
}

.product__info-wrapper .yotpo-bottomline .yotpo-stars,
.product__info-wrapper .yotpo-bottomline .star-clickable {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
}

.product__info-wrapper .yotpo-bottomline .yotpo-icon-star,
.product__info-wrapper .yotpo-bottomline .yotpo-icon-empty-star,
.product__info-wrapper .yotpo-bottomline .yotpo-icon-half-star {
  font-size: 14px !important;
}

/* "Read Reviews" / count text */
.product__info-wrapper .yotpo-bottomline .text-m,
.product__info-wrapper .yotpo-bottomline a {
  font-size: 13px !important;
  margin-left: 0 !important;
}

/* ============================================
   PRODUCT TITLE (PDP)
   Larger, bolder serif-leaning treatment to read
   as the page headline. Width naturally constrained
   so longer titles wrap into 2 lines instead of
   one stretched ribbon.
   ============================================ */
.product__info-wrapper .product__title {
  margin: 0 0 12px;
}

.product__info-wrapper .product__title-text {
  font-family: var(--font-heading-family);
  font-size: 32px;
  font-weight: 700;
  color: var(--shf-text);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  text-transform: none;
  max-width: 18ch;
}

@media screen and (min-width: 750px) {
  .product__info-wrapper .product__title-text {
    font-size: 44px;
    max-width: 14ch;
  }
}

/* ============================================
   FEATURE TAGS (Free Shipping, etc.)
   Rendered below the H1 inside .product__title.
   Driven by section.settings.feature_tags textarea;
   colors theme-able via --shf-feature-tag-bg/text.
   ============================================ */
.product__feature-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
}

.product__feature-tag {
  display: inline-block;
  padding: 6px 12px;
  background: var(--shf-feature-tag-bg, #E8D8C7);
  color: var(--shf-feature-tag-text, #5B4736);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 4px;
  line-height: 1.3;
}

/* ============================================
   PRODUCT INFO HUB — DETAILS CONTENT
   Static styling for accordion body text;
   inherits dynamic --pih-text-color from the
   per-block style block above the accordion.
   ============================================ */
.pih-details-content {
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-line;
  color: var(--pih-text-color, #666);
}

.pih-empty-state {
  font-size: 13px;
  color: #666;
}

/* ============================================
   DIVIDER
   ============================================ */
.product-info-divider {
  width: 100%;
  display: block;
  min-height: 1px;
  flex-shrink: 0;
  border: none;
}

hr.product-info-divider {
  border: none;
}

/* ============================================
   DELIVERY INFO
   ============================================ */
/* ============================================
   DELIVERY INFO — brand-aligned: DM Sans, navy icon, 14px label.
   Icons get a soft pastel-blue circle so they read as a clean badge
   instead of a stray glyph, matching the visual language we use in
   the support-tile and value-prop sections.
   ============================================ */
.product-delivery-info {
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-delivery-info__item,
.product-delivery-info__non-us {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading-family);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--shf-text, #1a1a1a);
}

.product-delivery-info__text strong {
  font-weight: 700;
}

.product-delivery-info__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #c5d7f7;
  color: #0d1f4d;
}

.product-delivery-info__icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
}

.product-delivery-info__text {
  flex: 1 1 auto;
  min-width: 0;
}

.product-delivery-info__link {
  color: #0d1f4d;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.product-delivery-info__link:hover {
  text-decoration: none;
}

.delivery-loading {
  color: #888;
  font-style: italic;
  font-weight: 400;
}

/* Non-US message: muted warning. Soft amber tint on the icon badge
   instead of jarring red — still reads as a "heads up" without
   shouting at the customer. */
.product-delivery-info__non-us {
  color: #6b6b6b;
  font-weight: 400;
}

.product-delivery-info__non-us .product-delivery-info__icon {
  background: #fef2e0;
  color: #b25d00;
}

/* ============================================
   TRUST LINE — same visual language as Delivery Info so the strip
   reads as one consistent block of brand reassurance.
   ============================================ */
.product-trust-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  font-family: var(--font-heading-family);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--shf-text, #1a1a1a);
}

.product-trust-line__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #c5d7f7;
  color: #0d1f4d;
}

.product-trust-line__icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
}

.product-trust-line__text {
  flex: 1 1 auto;
  min-width: 0;
}

.product-trust-line__link {
  color: #0d1f4d;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  margin-left: 4px;
}

.product-trust-line__link:hover {
  text-decoration: none;
}

/* ============================================
   SHIPPING INFO BLOCK (Bordered Cards)
   ============================================ */
.shipping-info-block {
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shipping-info__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--shf-border, #e5e5e5);
  border-radius: var(--shipping-info-radius, 8px);
  background: #fff;
}

.shipping-info__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--shf-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.shipping-info__right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.shipping-info__value {
  font-size: 12px;
  color: var(--shf-text);
  text-align: right;
}

.shipping-info__tooltip-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--shipping-icon-color, #c9a66b);
  border-radius: 50%;
  color: var(--shipping-icon-color, #c9a66b);
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.shipping-info__tooltip-trigger:hover,
.shipping-info__tooltip-trigger:focus {
  background-color: var(--shipping-icon-color, #c9a66b);
  color: #ffffff;
  outline: none;
}

.shipping-info__tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 10px);
  right: -10px;
  background-color: #ffffff;
  color: #333333;
  font-size: 11px;
  font-weight: 400;
  padding: 12px 15px;
  border-radius: 6px;
  width: 220px;
  text-align: left;
  line-height: 1.5;
  z-index: 100;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
  pointer-events: none;
}

.shipping-info__tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 18px;
  border-width: 8px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

.shipping-info__tooltip-trigger:hover .shipping-info__tooltip-text,
.shipping-info__tooltip-trigger:focus .shipping-info__tooltip-text,
.shipping-info__tooltip-trigger[aria-expanded="true"] .shipping-info__tooltip-text {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

@media screen and (min-width: 750px) {
  .shipping-info__row {
    padding: 14px 18px;
  }
  .shipping-info__label {
    font-size: 11px;
  }
  .shipping-info__value {
    font-size: 13px;
  }
  .shipping-info__tooltip-trigger {
    width: 20px;
    height: 20px;
    min-width: 20px;
    font-size: 11px;
  }
  .shipping-info__tooltip-text {
    width: 260px;
    font-size: 12px;
  }
}

@media screen and (max-width: 749px) {
  .shipping-info-block {
    gap: 6px;
  }
  .shipping-info__row {
    padding: 12px 14px;
  }
  .shipping-info__label {
    font-size: 10px;
  }
  .shipping-info__value {
    font-size: 11px;
  }
  .shipping-info__right {
    gap: 8px;
  }
  .shipping-info__tooltip-trigger {
    width: 16px;
    height: 16px;
    min-width: 16px;
    font-size: 9px;
  }
  .shipping-info__tooltip-text {
    width: 200px;
    font-size: 10px;
    padding: 10px 12px;
    right: -5px;
  }
  .shipping-info__tooltip-text::after {
    right: 12px;
  }
}
}

/* ============================================
   BNPL OPTIONS BLOCK — brand-aligned typography (DM Sans, navy
   accent, eyebrow-style labels). Everything was previously rendering
   at 8–11px in the body font, way too small to read for a $1k+
   purchase context. Bumped to legible sizes and locked to the same
   visual language as the support tiles, value props, and price block.
   ============================================ */
.bnpl-options-block {
  margin: 20px 0;
  box-sizing: border-box;
  font-family: var(--font-heading-family);
}

.bnpl-options__top {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: stretch;
}

.bnpl-options__card {
  flex: 1;
  min-width: 0;
  border: 1px solid #e0e0e0;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bnpl-options__card:hover {
  border-color: #0d1f4d;
  box-shadow: 0 4px 14px rgba(13, 31, 77, 0.08);
}

/* Eyebrow label above each price tile — same 12px / 500 / 0.15em
   pattern as the value-prop and support-tile sections. */
.bnpl-options__card-label {
  font-family: var(--font-heading-family);
  font-size: 11px;
  font-weight: 500;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
  white-space: nowrap;
  line-height: 1.2;
}

.bnpl-options__card-price {
  font-family: var(--font-heading-family);
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.bnpl-options__card-price span {
  font-size: 12px;
  font-weight: 500;
  color: #6b6b6b;
  margin-left: 2px;
}

/* The "OR" divider between the two price tiles. */
.bnpl-options__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  color: #6b6b6b;
  font-family: var(--font-heading-family);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
  flex-direction: column;
}

.bnpl-options__divider::before,
.bnpl-options__divider::after {
  content: '';
  width: 1px;
  height: 22px;
  background-color: #d4d4d4;
}

.bnpl-options__divider span {
  padding: 5px 0;
}

.bnpl-options__providers {
  display: flex;
  flex-direction: column;
}

.bnpl-options__provider {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid #e5e5e5;
  gap: 14px;
}

.bnpl-options__provider:last-child {
  border-bottom: 1px solid #e5e5e5;
}

.bnpl-options__provider-logo {
  width: 60px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}

.bnpl-options__provider-text {
  flex: 1;
  font-family: var(--font-heading-family);
  font-size: 13px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.4;
  letter-spacing: 0;
  min-width: 0;
}

.bnpl-options__provider-text strong {
  font-weight: 700;
}

/* "Learn more" pill button — same proportions as the support
   tile / trust line links but in pill button form. */
.bnpl-options__provider-btn {
  background-color: transparent;
  color: #0d1f4d;
  border: 1px solid #0d1f4d;
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--font-heading-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
  line-height: 1;
}

.bnpl-options__provider-btn:hover {
  background-color: #0d1f4d;
  color: #ffffff;
}

.bnpl-options__note {
  text-align: center;
  margin-top: 14px;
  font-family: var(--font-heading-family);
  font-size: 12px;
  font-weight: 400;
  color: #6b6b6b;
  line-height: 1.5;
}

.bnpl-options__note a {
  color: #0d1f4d;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.bnpl-options__note a:hover {
  text-decoration: none;
}

@media screen and (min-width: 1200px) {
  .bnpl-options__top {
    gap: 12px;
    margin-bottom: 16px;
  }
  .bnpl-options__card {
    padding: 18px 14px;
  }
  .bnpl-options__card-label {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .bnpl-options__card-price {
    font-size: 24px;
  }
  .bnpl-options__card-price span {
    font-size: 13px;
  }
  .bnpl-options__divider {
    padding: 0 10px;
    font-size: 12px;
  }
  .bnpl-options__divider::before,
  .bnpl-options__divider::after {
    height: 32px;
  }
  .bnpl-options__provider {
    padding: 14px 0;
    gap: 14px;
  }
  .bnpl-options__provider-logo {
    width: 74px;
    height: 28px;
  }
  .bnpl-options__provider-text {
    font-size: 14px;
  }
  .bnpl-options__provider-btn {
    padding: 9px 16px;
    font-size: 12px;
  }
  .bnpl-options__note {
    font-size: 13px;
    margin-top: 16px;
  }
}

/* ============================================
   SMALLER DESKTOP (750–1199px) — the PDP right column is narrow at
   these widths, and the BNPL row was wrapping "Pay with Affirm" into
   three stacked lines because the LEARN MORE button stole all the
   horizontal space. Tighten button + logo + text so the row fits on
   one line. Mobile (≤749px) and large desktop (≥1200px) are unchanged.
   ============================================ */
@media screen and (min-width: 750px) and (max-width: 1199px) {
  .bnpl-options__top {
    gap: 8px;
    margin-bottom: 12px;
  }
  .bnpl-options__card {
    padding: 10px 8px;
  }
  .bnpl-options__card-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
  }
  .bnpl-options__card-price {
    font-size: 16px;
  }
  .bnpl-options__card-price span {
    font-size: 11px;
  }
  .bnpl-options__divider {
    padding: 0 4px;
    font-size: 10px;
  }
  .bnpl-options__divider::before,
  .bnpl-options__divider::after {
    height: 18px;
  }
  .bnpl-options__provider {
    padding: 10px 0;
    gap: 10px;
  }
  .bnpl-options__provider-logo {
    width: 52px;
    height: 22px;
  }
  /* Force the "Pay with X" text onto a single line at this width. */
  .bnpl-options__provider-text {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Tighten the Learn more pill so the provider text has room. */
  .bnpl-options__provider-btn {
    padding: 6px 10px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .bnpl-options__note {
    font-size: 11px;
    margin-top: 12px;
  }
}

/* ============================================
   PRODUCT ACCORDIONS BLOCK
   ============================================ */
.product-accordions-block {
  width: 100%;
  box-sizing: border-box;
  margin-top: 16px;
}

.product-accordion {
  border-top: 1px solid #e0e0e0;
}

.product-accordion:first-child {
  border-top: none;
}

.product-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.product-accordion__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--shf-text);
  font-family: inherit;
}

.product-accordion__icon {
  font-size: 18px;
  font-weight: 300;
  color: var(--shf-text);
  line-height: 1;
}

.product-accordion__content {
  display: none;
  padding: 0 0 12px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--shf-text);
}

.product-accordion.active .product-accordion__content {
  display: block;
}

.product-accordion__text {
  margin: 0 0 10px 0;
}

.product-accordion__text--truncated {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-accordion__text--full {
  display: block;
}

.product-accordion__read-more {
  display: none;
  font-size: 11px;
  font-weight: 500;
  color: var(--shf-text);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  letter-spacing: 0.5px;
}

.product-accordion__read-more.visible {
  display: inline-block;
}

/* Keep button visible when text is expanded */
.product-accordion__text--full + .product-accordion__read-more {
  display: inline-block;
}

.product-accordion__read-more:hover {
  opacity: 0.7;
}

@media screen and (min-width: 1200px) {
  .product-accordion__header {
    padding: 14px 0;
  }
  .product-accordion__title {
    font-size: 15px;
  }
  .product-accordion__content {
    font-size: 14px;
    padding: 0 0 15px 0;
  }
  .product-accordion__read-more {
    font-size: 12px;
  }
}

@media screen and (max-width: 749px) {
  .product-accordion__header {
    padding: 10px 0;
  }
  .product-accordion__title {
    font-size: 13px;
  }
  .product-accordion__content {
    font-size: 12px;
    padding: 0 0 10px 0;
  }
  .product-accordion__icon {
    font-size: 16px;
  }
  .product-accordion__read-more {
    font-size: 10px;
  }
}

/* ============================================
   CONTACT INFO BLOCK
   ============================================ */
.contact-info-block {
  padding: 10px 0;
  margin-top: 10px;
  box-sizing: border-box;
  border-top: 1px solid #e0e0e0;
}

.contact-info__heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--contact-heading-color, #0D1F4D);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
  padding-top: 10px;
}

.contact-info__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.contact-info__row:last-child {
  margin-bottom: 0;
}

.contact-info__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--contact-icon-color, #666666);
}

.contact-info__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.contact-info__text {
  font-size: 13px;
  color: var(--shf-text);
}

.contact-info__text a {
  color: var(--shf-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-info__text a:hover {
  color: var(--contact-heading-color, #0D1F4D);
}

@media screen and (min-width: 1200px) {
  .contact-info__heading {
    font-size: 13px;
    letter-spacing: 3px;
  }
  .contact-info__icon {
    width: 22px;
    height: 22px;
  }
  .contact-info__text {
    font-size: 14px;
  }
}

@media screen and (max-width: 749px) {
  .contact-info-block {
    padding: 8px 0;
    margin-top: 8px;
  }
  .contact-info__heading {
    font-size: 11px;
    margin-bottom: 8px;
    padding-top: 8px;
  }
  .contact-info__icon {
    width: 18px;
    height: 18px;
  }
  .contact-info__text {
    font-size: 12px;
  }
  .contact-info__row {
    gap: 10px;
    margin-bottom: 6px;
  }
}

/* ============================================
   COMPLEMENTARY PRODUCTS - GRID CARDS LAYOUT
   Modern product card grid with hover effects
   ============================================ */

/* Section wrapper */
.complementary-grid-section {
  width: 100%;
}

/* Main grid container */
.complementary-grid {
  --grid-columns-desktop: 4;
  --grid-columns-mobile: 2;
  --grid-gap: 24px;
  --grid-gap-mobile: 16px;
}

/* Header section */
.complementary-grid__header {
  margin-bottom: 40px;
}

.complementary-grid__subheading {
  display: block;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--shf-accent);
  margin-bottom: 8px;
}

.complementary-grid__heading {
  font-family: var(--font-heading-family);
  font-size: 32px;
  font-weight: 600;
  color: var(--shf-text);
  margin: 0 0 12px 0;
  line-height: 1.2;
}

.complementary-grid__description {
  font-size: 16px;
  color: var(--shf-text-light);
  margin: 0;
  max-width: 600px;
  line-height: 1.6;
}

.complementary-grid__header[style*="text-align: center"] .complementary-grid__description {
  margin-left: auto;
  margin-right: auto;
}

/* Product grid — single-row horizontal scroll on all viewports
   (matches sections/category-carousel.liquid). Cards are a fixed
   width per breakpoint; if there are more cards than fit on one
   "page" they scroll horizontally and a segmented progress bar
   below tracks the page. Fewer items than columns still render
   left-aligned within the track. */
.complementary-grid__items {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.complementary-grid__items::-webkit-scrollbar {
  display: none;
}

.complementary-grid__items > .complementary-grid__card {
  flex: 0 0 calc((100% - var(--grid-gap) * (var(--grid-columns-desktop) - 1)) / var(--grid-columns-desktop));
  max-width: calc((100% - var(--grid-gap) * (var(--grid-columns-desktop) - 1)) / var(--grid-columns-desktop));
  scroll-snap-align: start;
}

/* Individual card */
.complementary-grid__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
  position: relative;
}

.complementary-grid__card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Card image/media */
.complementary-grid__card-link {
  display: block;
  text-decoration: none;
  overflow: hidden;
}

.complementary-grid__card-media {
  position: relative;
  overflow: hidden;
  background: #f8f8f8;
}

.complementary-grid__card-media--square {
  aspect-ratio: 1 / 1;
}

.complementary-grid__card-media--portrait {
  aspect-ratio: 3 / 4;
}

.complementary-grid__card-media--landscape {
  aspect-ratio: 4 / 3;
}

.complementary-grid__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badge container ABOVE the image is no longer rendered by the Liquid
   markup (was creating visual misalignment between sale and no-sale
   cards). Kept this rule as `display: none` so any cached/legacy HTML
   that still has the container hides it cleanly. The Save $X badge
   now lives INLINE in .complementary-grid__card-price below the title,
   matching the collection grid card pattern. */
.complementary-grid__card-badges {
  display: none;
}

.complementary-grid__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-family: var(--font-heading-family);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 8px;
  line-height: 1.3;
  white-space: nowrap;
}

/* "Save $X" pill — same navy pastel as collection grid + cart drawer */
.complementary-grid__badge--sale {
  background: #c5d7f7;
  border: 1px solid #aec5f0;
  color: #0d1f4d;
}

.complementary-grid__badge--soldout {
  background: #f3f3f3;
  border: 1px solid #d9d9d9;
  color: #6b6b6b;
  font-weight: 600;
}

/* Card info section */
.complementary-grid__card-info {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.complementary-grid__card-vendor {
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--shf-text-light);
  margin-bottom: 4px;
}

/* Title — pinned to the same spec as the collection grid card title
   (13px mobile / 14px tablet / 15px desktop, weight 600, 0.04em
   tracking, DM Sans). The 600 weight + 0.04em tracking is the brand
   pattern shared with Category Carousel, Featured Products, etc. */
.complementary-grid__card-title {
  display: -webkit-box;
  font-family: var(--font-heading-family);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color 0.2s ease;
}

.complementary-grid__card-title:hover {
  color: var(--shf-accent);
}

/* Price display — sits directly below the title (no auto-stretch) so
   every card uses the same tight title-to-price rhythm. Cards still
   align at the bottom because the title reserves 2 lines via
   min-height: 2.8em above. */
.complementary-grid__card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 0;
}

/* Compare-at strike — light weight so the eye locks on the current
   price. Same pattern as the collection grid + cart drawer. */
.complementary-grid__price-compare {
  color: rgba(0, 0, 0, 0.5);
  font-size: 14px;
  font-weight: 400;
}

.complementary-grid__price-compare s {
  text-decoration: line-through;
}

/* Active / sale price — bold and prominent. Sale variant uses navy
   so it ties to the rest of the brand pricing pattern. */
.complementary-grid__price-current {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}

.complementary-grid__price-current--sale {
  color: #0d1f4d;
}

/* Add to cart button */
.complementary-grid__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  margin: 0 16px 16px;
  width: calc(100% - 32px);
  min-height: 40px;
  background: transparent;
  border: 2px solid var(--shf-accent);
  border-radius: 8px;
  color: var(--shf-accent);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.complementary-grid__add-btn:hover {
  background: var(--shf-accent);
  color: #fff;
}

.complementary-grid__add-btn:active {
  transform: scale(0.98);
}

.complementary-grid__add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: #ccc;
  color: #666;
}

.complementary-grid__add-btn:disabled:hover {
  background: transparent;
  color: #666;
}

.complementary-grid__add-btn.loading {
  pointer-events: none;
}

.complementary-grid__add-btn.loading .complementary-grid__btn-text {
  opacity: 0;
}

.complementary-grid__add-btn.added {
  background: var(--shf-accent);
  color: #fff;
}

/* Button text with icon support */
.complementary-grid__btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.complementary-grid__btn-text svg {
  flex-shrink: 0;
  vertical-align: middle;
}

/* Button spinner */
.complementary-grid__btn-spinner {
  display: none;
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: complementary-grid-spin 0.8s linear infinite;
}

.complementary-grid__add-btn.loading .complementary-grid__btn-spinner {
  display: block;
}

@keyframes complementary-grid-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   COMPLEMENTARY GRID - TABLET STYLES
   ============================================ */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .complementary-grid__items {
    gap: 20px;
  }

  /* Override to 3 columns on tablet */
  .complementary-grid__items > .complementary-grid__card {
    flex: 0 0 calc((100% - 20px * 2) / 3);
    max-width: calc((100% - 20px * 2) / 3);
  }

  .complementary-grid__header {
    margin-bottom: 32px;
  }

  .complementary-grid__heading {
    font-size: 28px;
  }
}

/* ============================================
   COMPLEMENTARY GRID - MOBILE STYLES
   ============================================ */
@media screen and (max-width: 749px) {
  .complementary-grid {
    --grid-gap: var(--grid-gap-mobile);
  }

  .complementary-grid__items {
    gap: var(--grid-gap-mobile);
  }

  /* Mobile column width based on columns_mobile setting */
  .complementary-grid__items > .complementary-grid__card {
    flex: 0 0 calc((100% - var(--grid-gap-mobile) * (var(--grid-columns-mobile) - 1)) / var(--grid-columns-mobile));
    max-width: calc((100% - var(--grid-gap-mobile) * (var(--grid-columns-mobile) - 1)) / var(--grid-columns-mobile));
  }

  .complementary-grid__header {
    margin-bottom: 24px;
  }

  .complementary-grid__subheading {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  .complementary-grid__heading {
    font-size: 24px;
  }

  .complementary-grid__description {
    font-size: 14px;
  }

  .complementary-grid__card {
    border-radius: 10px;
  }

  .complementary-grid__card-info {
    padding: 12px;
  }

  .complementary-grid__card-title {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .complementary-grid__price-current {
    font-size: 15px;
  }

  .complementary-grid__price-compare {
    font-size: 13px;
  }

  .complementary-grid__badge {
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    font-size: 10px;
  }

  .complementary-grid__add-btn {
    padding: 8px 12px;
    margin: 0 12px 12px;
    width: calc(100% - 24px);
    min-height: 36px;
    font-size: 11px;
    border-radius: 6px;
  }
}


/* ============================================
   ARTICLE-STYLE COLLAPSIBLE TABS
   ============================================ */

/* Reset accordion styles */
.product__accordion.accordion {
  border: none;
  background: transparent;
  margin: 0;
  padding: 0;
}

.product__accordion.accordion details {
  border: none;
  background: transparent;
}

/* Summary (closed state) */
.product__accordion.accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--shf-border);
  list-style: none;
}

.product__accordion.accordion summary::-webkit-details-marker {
  display: none;
}

.product__accordion.accordion summary::marker {
  display: none;
}

/* Hide left icon */
.product__accordion.accordion .summary__title .icon-accordion {
  display: none !important;
}

/* Title styling */
.product__accordion.accordion .summary__title {
  display: flex;
  align-items: center;
}

.product__accordion.accordion .accordion__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--shf-text);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

/* Hide default caret */
.product__accordion.accordion summary .svg-wrapper,
.product__accordion.accordion summary > svg {
  display: none !important;
}

/* Add plus/minus icon */
.product__accordion.accordion summary::after {
  content: '+';
  font-size: 24px;
  font-weight: 300;
  color: var(--shf-text);
  line-height: 1;
  transition: transform 0.2s ease;
}

.product__accordion.accordion details[open] summary::after {
  content: '−';
}

/* Content area */
.product__accordion.accordion .accordion__content {
  padding: 16px 0 24px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--shf-text-light);
}

/* Hover state */
.product__accordion.accordion summary:hover .accordion__title {
  color: var(--shf-text-light);
}

/* ============================================
   MOBILE ADJUSTMENTS (Accordion only)
   Variant picker mobile styles are in
   component-product-variant-picker.css
   ============================================ */
@media screen and (max-width: 749px) {
  .product__accordion.accordion summary {
    padding: 16px 0;
  }

  .product__accordion.accordion .accordion__title {
    font-size: 15px;
  }
}

/* ============================================
   PRODUCT GRID — MOBILE PROGRESS BAR
   Segmented progress bar shown below the .complementary-grid__items
   scroll container on mobile. Mirrors category-carousel pattern.
   Hidden on desktop; JS toggles visibility based on overflow.
   ============================================ */
.complementary-grid__progress {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  padding: 0 10%;
}

.complementary-grid__progress.is-hidden {
  display: none;
}

.complementary-grid__progress-segments {
  display: flex;
  gap: 8px;
  width: 100%;
}

.complementary-grid__progress-segment {
  height: 4px;
  flex: 1;
  background: #c4c4c4;
  border-radius: 2px;
  transition: background 0.3s ease;
  cursor: pointer;
  display: block;
}

.complementary-grid__progress-segment[hidden] {
  display: none;
}

.complementary-grid__progress-segment:hover {
  background: #888;
}

.complementary-grid__progress-segment.active {
  background: #0D1F4D;
}

@media (prefers-reduced-motion: reduce) {
  .complementary-grid__progress-segment {
    transition: none;
  }
}

/* Progress bar now shows on all viewports when content overflows
   (JS hides it when everything fits on one page). */