/** Shopify CDN: Minification failed

Line 697:10 Expected identifier but found whitespace
Line 697:11 Unexpected "2rem"
Line 790:0 Expected "}" to go with "{"

**/
/* ===== Your existing Dawn rules (cleaned) ===== */

.complementary-products__container {
display: flex;
flex-direction: column;
gap: 1.3rem;
}

product-recommendations:not(.is-accordion) .complementary-products__container {
margin-top: 1.5rem;
}

.complementary-products__container > details[open] {
padding-bottom: 1.5rem;
}

.complementary-slider {
margin-top: 0;
gap: 0;
}

.complementary-slide {
--shadow-padding-sides: calc((var(--shadow-horizontal-offset) + var(--shadow-blur-radius)) * var(--shadow-visible));
--shadow-padding-sides-negative: calc((var(--shadow-horizontal-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible));
}

.complementary-slide > ul {
display: flex;
flex-direction: column;
gap: var(--grid-mobile-vertical-spacing);
}

.complementary-slide.complementary-slide--standard > ul {
gap: calc(var(--grid-mobile-vertical-spacing) + 8px);
}

@media screen and (min-width: 750px) {
.complementary-slide > ul {
gap: var(--grid-desktop-vertical-spacing);
}
.complementary-slide.complementary-slide--standard > ul {
gap: calc(var(--grid-desktop-vertical-spacing) + 8px);
}
}

.complementary-slide.grid__item {
width: 100%;
padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
padding-right: max(var(--focus-outline-padding), var(--shadow-padding-sides));
padding-left: max(var(--focus-outline-padding), var(--shadow-padding-sides-negative));
}

.complementary-slide .card-wrapper {
height: auto;
}

.complementary-products > .summary__title {
display: flex;
line-height: 1;
padding: 1.5rem 0;
}

.accordion + product-recommendations .accordion,
product-recommendations.is-accordion + .accordion {
margin-top: 0;
border-top: none;
}

.complementary-products > .summary__title .icon-accordion {
fill: rgb(var(--color-foreground));
height: calc(var(--font-heading-scale) * 2rem);
margin-right: calc(var(--font-heading-scale) * 1rem);
width: calc(var(--font-heading-scale) * 2rem);
}

.complementary-products__container .card--card .card__content,
.complementary-products__container .card--vertical .card__information {
padding: 0;
}

.complementary-slide .card--text .card__content {
grid-template-rows: minmax(0, 1fr) max-content auto;
}

.complementary-products__container .card--card.card--media > .card__content {
margin-top: 0;
}

.complementary-products-contains-quick-add .underline-links-hover:hover a {
text-decoration: initial;
}

.complementary-products-contains-quick-add .card__heading:hover a {
text-decoration: underline;
}

.complementary-products__container .card--card .card__inner .card__media {
border-radius: calc(var(--corner-radius) - var(--border-width) - var(--image-padding));
}

.complementary-products__container .card--horizontal .quick-add {
margin: 0;
max-width: 20rem;
}

.complementary-products__container .quick-add__submit {
padding: 1.5rem 0;
min-height: inherit;
}

.complementary-products__container .quick-add__submit .icon-plus {
width: 1.2rem;
}

.complementary-products__container .icon-wrap {
display: flex;
}

.complementary-products .sold-out-message:not(.hidden) + .icon-wrap {
display: none;
}

.complementary-products__container .quick-add__submit:not(.animate-arrow) .icon-wrap {
transition: transform var(--duration-short) ease;
}

.complementary-products__container .quick-add__submit:not(.animate-arrow):hover .icon-wrap {
transform: rotate(90deg);
}

.complementary-products__container .quick-add__submit:after,
.complementary-products__container .quick-add__submit:hover:after {
box-shadow: none;
}

.complementary-products__container .card--horizontal .quick-add,
.complementary-products__container .card__badge {
justify-self: var(--text-alignment);
}

.product--no-media .complementary-products__container .price {
text-align: var(--text-alignment);
}

@media screen and (min-width: 750px) {
.complementary-products__container .price--on-sale .price-item--regular {
font-size: 1.3rem;
}
}

/* Media polish (kept once) */
.complementary-products__container .card__media .media { 
overflow: hidden; 
border-radius: 14px; 
}
.complementary-products__container .card__media img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}

/* Force Dawn cards to be vertical (if you still use .card--vertical) */
.complementary-products__container .card--vertical .card__inner{
display: grid !important;
grid-template-columns: 1fr !important;   /* single column */
width: 100% !important;
max-width: none !important;
}
.complementary-products__container .card--vertical .card__media{
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: none !important;
}
.complementary-products__container .card--vertical .card__content,
.complementary-products__container .card--vertical .card__information{
grid-column: 1 !important;
grid-row: 2 !important;
width: 100% !important;
margin-top: .0rem !important;
white-space: normal !important;
}

/* Removed:
- the 2-up grid override on .complementary-slide > ul (conflicted with new layout)
- both square aspect-ratio duplicates (.ratio::before { padding-bottom:100% })
- placeholder blocks with "..." which are invalid CSS
*/

/* ===== New Complementary “Pair it with” layout ===== */
/* Namespaced and safe to live alongside Dawn classes */

.complementary-products {
--cp-gap: 12px;
--cp-radius: 12px;
--cp-shadow: 0 2px 10px rgba(0,0,0,.06);
--cp-border: 1px solid rgba(0,0,0,.06);
--cp-btn-size: 36px;
--cp-btn-shadow: 0 2px 8px rgba(0,0,0,.12);
--cp-arrow-offset: 8px; /* distance from card edge on mobile */
}

.complementary-products__header {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 16px;
}

.complementary-products__title {
font-size: 22px;
line-height: 1.2;
font-weight: 700;
margin: 0;
}

/* Track / list */
.complementary-products__track {
/* mobile: horizontal scroll with snap */
display: flex;
gap: var(--cp-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px; /* space for shadow to render */
}

.complementary-products__track::-webkit-scrollbar {
height: 8px;
}
.complementary-products__track::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.15);
border-radius: 10px;
}
.complementary-products__track::-webkit-scrollbar-track {
background: transparent;
}

/* Card */
.complementary-products__item {
scroll-snap-align: start;
flex: 0 0 78%; /* ~1.25 cards visible on small screens */
max-width: 420px;
}

@media (min-width: 480px) {
.complementary-products__item { flex-basis: 65%; }
}

/* Desktop switches to grid (no horizontal scroll) */
@media (min-width: 990px) {
.complementary-products__track {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--cp-gap);
overflow: visible;
}
.complementary-products__item {
flex: 0 0 auto;
}
}

/* Card inner */
.cp-card {
border: var(--cp-border);
border-radius: var(--cp-radius);
box-shadow: var(--cp-shadow);
background: #fff;
overflow: hidden;
height: 100%;
display: grid;
grid-template-rows: auto 1fr;
}

.cp-card__media {
position: relative;
aspect-ratio: 4 / 5; /* portrait like the screenshot */
overflow: hidden;
}

.cp-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.cp-card__add {
position: absolute;
right: 12px;
bottom: 12px;
width: var(--cp-btn-size);
height: var(--cp-btn-size);
border-radius: 50%;
background: #fff;
box-shadow: var(--cp-btn-shadow);
display: grid;
place-items: center;
border: 0;
cursor: pointer;
}

.cp-card__add:after {
content: "+";
font-size: 20px;
line-height: 1;
font-weight: 600;
}

.cp-card__body {
padding: 12px 12px 16px;
}

.cp-card__title {
font-weight: 700;
margin: 0 0 4px;
font-size: 15px;
}

.cp-card__subtitle {
color: rgba(0,0,0,.65);
font-size: 13px;
margin: 0 0 10px;
}

.cp-card__price {
font-weight: 700;
font-size: 16px;
}

/* Arrows */
.complementary-products__controls {
position: relative;
}

.complementary-products__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: var(--cp-btn-size);
height: var(--cp-btn-size);
border-radius: 50%;
border: 0;
background: #fff;
box-shadow: var(--cp-btn-shadow);
display: grid;
place-items: center;
cursor: pointer;
z-index: 2;
}

.complementary-products__btn--prev { left: var(--cp-arrow-offset); }
.complementary-products__btn--next { right: var(--cp-arrow-offset); }

.complementary-products__btn:before {
content: "‹";
font-size: 20px;
line-height: 1;
}
.complementary-products__btn--next:before { content: "›"; }

@media (min-width: 990px) {
.complementary-products__controls { position: static; }
.complementary-products__btn { position: absolute; top: calc(50% - 8px); }
}

/* Tighten spacing when used full-width */
.section + .complementary-products,
.complementary-products + .section {
margin-top: 0;
}
/* Target the complementary product card container */
.complementary-products__card {
display: flex;
flex-direction: column; /* stack items vertically instead of side by side */
align-items: center; /* center image and text */
text-align: center; /* center text below image */
}

/* Ensure the image takes priority at the top */
.complementary-products__card img {
order: -1; /* makes sure the image always comes first */
margin-bottom: 0.25rem; /* space between image and title */
}

/* Style the product title */
.complementary-products__card .product-title {
margin-top: 0.5rem;
font-size: 1rem;
font-weight: 600;
}
/* Stack complementary product cards vertically and put the image first */
.complementary-products .card,
.complementary-products .grid__item .card,
.complementary-products .slider__slide .card {
display: flex !important;
flex-direction: column !important;   /* image -> text -> price */
align-items: left;
text-align: left;
}

/* Image container (card__inner/media) should come first */
.complementary-products .card .card__inner,
.complementary-products .card .card__media {
order: -1 !important;
width: 100%;
max-width: 260px;
margin: 0 0 0.15rem 0 !important;                              
}

/* Text/content area under the image */
.complementary-products .card .card__content,
.complementary-products .card .card__information {
order: 0 !important;
width: 100%;
}

/* Optional: keep prices/badges below the title neatly */
.complementary-products .card .price,
.complementary-products .card .badge {
margin-top: 0.35rem;
}

/* =========================================
Dawn — Complementary Products (2-up w/ peek)
========================================= */

/* Card: image on top, text left */
.complementary-products .card,
.complementary-products__card,
.complementary-products .slider__slide .card {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
}

/* Headline under image */
.complementary-products .card .card__heading,
.complementary-products .card .product-title,
.complementary-products .card .card__information .full-unstyled-link {
display: block;
margin-top: 0rem;
width: 100%;
text-align: left !important;

/* add/adjust these to change size */
font-size: 1.50rem;     /* try 1.05–1.20rem */
line-height: 1.28;      /* keeps two-line titles tidy */
font-weight: 700;       /* optional: make bolder */
}

/* Keep text block and button the same width as the image (200px) */
.complementary-products .card .card__content,
.complementary-products .card .card__information,
.complementary-products .quick-add,
.complementary-products .quick-add__submit{
max-width: 260px !important;  /* ← match the image width above */
width: 100% !important;
}

/* Image size (adjust to taste) */
.complementary-products .card .card__inner,
.complementary-products .card .card__media {
order: -1 !important;
max-width: 260px;          /* ← change this number to grow/shrink images */
width: 100%;
margin: 0 0 0.15rem 0 !important;
}

/* Track: single horizontal row everywhere */
.complementary-products .slider__slides,
.complementary-products .grid {
display: flex !important;
flex-wrap: nowrap !important;     /* no second row */
overflow-x: auto;
gap: 12px;                        /* ← space between cards */
padding: 0 16px;                  /* side gutters */
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
justify-content: flex-start !important;   /* ← add this */
}

/* Slides: 2 visible, 3rd peeks */
.complementary-products .slider__slide,
.complementary-products .grid__item {
/* Two-up width, minus a little to let the next item peek in */
flex: 0 0 calc(50% - 16px) !important;
max-width: calc(50% - 16px) !important;
width: calc(50% - 16px) !important;

scroll-snap-align: start;
margin: 0 !important;
box-sizing: border-box;
}
/* Desktop-only: tighten spacing and control card width */
@media (min-width: 750px) {
.complementary-products .slider__slides,
.complementary-products .grid {
gap: 0px;                 /* adjust this for the space between cards */
padding: 0 22px;          /* optional: edge gutters */
justify-content: flex-start !important; /* ← add this */
}

.complementary-products .slider__slide,
.complementary-products .grid__item {
/* use !important so this beats the earlier rule */
flex: 0 0 calc(50% - 44px) !important;
max-width: calc(50% - 44px) !important;
width: calc(50% - 44px) !important;
}
}
/* Fix first-card clipping when sliding: align snap with gutters */
.complementary-products .slider__slides,
.complementary-products .grid {
/* keep your existing layout values, just ensure these are present */
padding: 0 22px !important;         /* your side gutters */
scroll-snap-type: x mandatory;      /* already set in your block, safe to repeat */
scroll-padding-left: 22px;          /* match the left padding */
scroll-padding-right: 22px;         /* match the right padding */
}
/* Slides: make snapping respect the gutters (prevents first-card clipping) */
.complementary-products .slider__slide,
.complementary-products .grid__item {
/* keep your widths as-is, just add this: */
scroll-margin-left: 22px;
scroll-margin-right: 22px;

/* --- Complementary Products: 2-up with tiny gap & no clipping (all viewports) --- */

/* Track: no padding, no gap; let slides supply the gutters */
.complementary-products .slider__slides,
.complementary-products .grid {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto;
gap: 0 !important;                 /* spacing comes from slide margins */
padding: 0 !important;             /* remove track padding to fix clipping */
justify-content: flex-start !important;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-left: 0;            /* padding is 0, so snap padding is 0 */
scroll-padding-right: 0;
}

/* Slides: two visible, third peeks; margins create gutters & between-space */
.complementary-products .slider__slide,
.complementary-products .grid__item {
margin: 0 6px !important;         /* ← controls left/right gutters & between gap */
scroll-snap-align: start;
box-sizing: border-box;

/* For two-up:
width = 50% minus (left+right margins per slide) = 50% - 20px
Use a bit MORE than 20px to create a small peek of the next card. */
flex: 0 0 calc(50% - 14px) !important;  /* ← desktop+mobile; adjust for more/less peek */
max-width: calc(50% - 14px) !important;
width: calc(50% - 14px) !important;
}
/* ===== Complementary Products — make Add to Cart visible & clickable ===== */

/* Show the quick-add as an inline button (not a hover overlay) */
.complementary-products .quick-add {
position: static !important;
inset: auto !important;
opacity: 1 !important;
transform: none !important;
display: block !important;
margin-top: 0.5rem;
pointer-events: auto !important;
}

/* Ensure the button is clickable and sized nicely */
.complementary-products .quick-add__submit,
.complementary-products .product-form__submit {
width: 100%;
pointer-events: auto !important;
z-index: 3;
}

/* Prevent any card/slider layer from sitting on top of the button */
.complementary-products .card .card__content { z-index: 2; }
.complementary-products .card .card__inner   { z-index: 1; }

/* On desktop, don't let the track clip or eat clicks from inline buttons */
@media (min-width: 750px) {
.complementary-products .slider__slides { overflow: visible !important; }
}

/* If theme arrows overlay the cards, only the arrow itself should catch clicks */
.complementary-products .slider-buttons { pointer-events: none; }
.complementary-products .slider-buttons button { pointer-events: auto; }

}
/* === Complementary products: visibility + slimmer quick-add === */

/* Make the quick-add pill a bit slimmer */
.complementary-products .quick-add__submit.button,
.complementary-products .product-form__submit.button {
padding: 0.25rem 0.75rem !important;
min-height: 32px !important;
font-size: 0.9rem !important;
line-height: 1.1 !important;
border-radius: 9999px !important;
width: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}

/* MOBILE: stop the slide from clipping the price/save pill */
@media (max-width: 749px) {
/* give each slide a hair more room and let content be visible */
.complementary-products .slider__slide,
.complementary-products .grid__item {
flex: 0 0 calc(50% - 4px) !important;
max-width: calc(50% - 4px) !important;
width: calc(50% - 4px) !important;
padding-right: 6px !important;
box-sizing: border-box !important;
overflow: visible !important;
}

/* ensure inner blocks don't hide overflow */
.complementary-products .card-wrapper,
.complementary-products .card,
.complementary-products .card .card__content,
.complementary-products .card .card__information,
.complementary-products .card .card-information {
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
}

/* allow the save pill to wrap instead of being cut */
.complementary-products .card .save-pill {
white-space: normal !important;
}
}
/* === Complementary: control price + Save pill sizes & keep on one line === */

/* Keep the price block and the green pill on one row */
.complementary-products .card-information .price {
display: inline-flex !important;
align-items: center;
gap: .35rem;
margin: 0 !important;
}

/* Save pill size (EDIT THESE NUMBERS) */
.complementary-products .card-information .save-pill {
display: inline-flex !important;
align-items: center;
white-space: nowrap !important;
padding: .14rem .50rem !important;   /* thickness & length */
font-size: 1.3rem !important;        /* text size */
line-height: 1 !important;
border-radius: 9999px !important;
margin-left: .2rem;
}

/* Price sizes (EDIT THESE NUMBERS) */
.complementary-products .card-information .price .price-item--regular { /* crossed-out */
font-size: 1rem !important;
line-height: 1.1 !important;
}
.complementary-products .card-information .price .price-item--sale,
.complementary-products .card-information .price .price-item--last {   /* current price */
font-size: 1.5rem !important;
font-weight: 700;
line-height: 1.1 !important;
}

/* Optional: larger on desktop */
@media (min-width: 990px){
.complementary-products .card-information .save-pill { font-size: 2rem !important; }
.complementary-products .card-information .price .price-item--regular { font-size: 1.5rem !important; }
.complementary-products .card-information .price .price-item--sale,
.complementary-products .card-information .price .price-item--last { font-size: 2rem !important; }
}

/* Price sizes (EDIT THESE NUMBERS) */
.complementary-products .card-information .price .price-item--regular { /* crossed-out */
font-size: 2rem !important;
line-height: 1.1 !important;
}
.complementary-products .card-information .price .price-item--sale,
.complementary-products .card-information .price .price-item--last,
font-size: 2rem !important;   /* match your main price */
font-weight: 700;
line-height: 1.1 !important;
}


/* Mobile: adjust complementary product price sizes */
@media screen and (max-width: 749px) {
/* current price (sale or regular when no sale) */
.complementary-products .card-information .price .price-item--sale,
.complementary-products .card-information .price .price-item--last,
.complementary-products .card__information .price .price-item--sale,
.complementary-products .card__information .price .price-item--last {
font-size: 1.5rem !important; /* tweak to taste */
font-weight: 700;
line-height: 1.1 !important;
}

/* crossed-out compare-at price */
.complementary-products .card-information .price .price-item--regular,
.complementary-products .card__information .price .price-item--regular {
font-size: 1.5rem !important;
line-height: 1.1 !important;
}
}


/* Complementary: Quick-Add button typography */
.complementary-products .quick-add__submit.button,
.complementary-products .product-form__submit.button {
font-size: 1.3rem !important;   /* ← change size */
font-weight: 700 !important;      /* ← make bold */
letter-spacing: .02em;            /* optional: a touch tighter */
}

/* Some Dawn builds put the text inside a span – force that bold too */
.complementary-products .quick-add__submit.button > span,
.complementary-products .product-form__submit.button > span {
font-weight: 700 !important;
}

/* Optional: different size on desktop */
@media (min-width: 990px){
.complementary-products .quick-add__submit.button,
.complementary-products .product-form__submit.button {
font-size: 1.5rem !important;     /* desktop size */
}
/* Complementary products: remove Dawn's mobile gutter that offsets slide #1 */
.complementary-products .slider-mobile-gutter { 
margin-left: 0 !important;
padding-left: 0 !important;
}

/* Remove per-slide injected margins that push the first card off-screen */
.complementary-products .slider--mobile .slider__slide,
.complementary-products .slider--tablet .slider__slide {
margin-left: 0 !important;
margin-right: 0 !important;
}

/* Ensure snapping starts at the very first slide */
.complementary-products .slider { 
scroll-padding-left: 0 !important;
scroll-snap-type: x mandatory !important;
}
.complementary-products .slider__slide { 
scroll-snap-align: start !important;
}

/* Some Dawn builds add a special first/last margin; zero those too */
.complementary-products .slider--mobile .slider__slide:first-child,
.complementary-products .slider--tablet .slider__slide:first-child { margin-left: 0 !important; }
.complementary-products .slider--mobile .slider__slide:last-child,
.complementary-products .slider--tablet .slider__slide:last-child  { margin-right: 0 !important; }

/* Close the image → text gap (covers both markup patterns) */
.complementary-products .card__media + .card__content,
.complementary-products .card__media + .card__information {
margin-top: 0 !important;
padding-top: 0 !important;
}
.complementary-products__container .card__information {
  padding-top: 0 !important;
}
/* Reduce space under the image itself */
.complementary-products .card__media {
  margin-bottom: 0.05rem !important;  /* or 0 */
}

/* Ensure the info block itself has no top padding in this component */
.complementary-products__container .card__information {
  padding-top: 0 !important;
  }