/** Shopify CDN: Minification failed

Line 236:0 All "@import" rules must come first
Line 783:0 All "@import" rules must come first

**/
/* ============================================================
   CC Card Overrides — Casper-inspired product card typography
   Applied globally across collection and featured product grids
   ============================================================ */

/* ---- Card container ---- */
.card-wrapper {
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  border-radius: 16px;
  overflow: hidden;
}

.card-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26, 46, 68, 0.10);
}

/* ---- Card image ---- */
.card__media .media img {
  transition: transform 0.4s ease;
}

.card-wrapper:hover .card__media .media img {
  transform: scale(1.04);
}

/* ---- Product title ---- */
.card__heading,
.card__heading.h5,
.card__heading a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a2e44 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

.card__heading a:hover {
  color: #4a6580 !important;
  text-decoration: none !important;
}

/* ---- Card information area ---- */
.card__information,
.card-information {
  padding: 12px 4px 4px !important;
}

/* ---- Regular price ---- */
.price__regular .price-item--regular {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a2e44 !important;
}

/* ---- Sale price ---- */
.price--on-sale .price-item--sale {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1a2e44 !important;
}

/* ---- Compare-at / original price ---- */
.price__compare-price .price-item--regular,
.price--on-sale .price__compare-price s {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #8a9bb0 !important;
  text-decoration: line-through !important;
}

/* ---- Price container layout ---- */
.price__container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.price__sale {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* ---- Sale badge pill (% saved) ---- */
.price--on-sale .price__badge-sale,
.badge.badge--sale,
.badge--sale {
  background: #c6dbeb !important;
  color: #1a2e44 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  border: none !important;
}

/* ---- Sold out badge ---- */
.badge--sold-out {
  background: #f0f0f0 !important;
  color: #8a9bb0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
}

/* ---- Quick add button ---- */
.quick-add__submit,
.product-form__submit {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
  background: #c6dbeb !important;
  color: #1a2e44 !important;
  border: none !important;
  letter-spacing: 0.02em !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.quick-add__submit:hover,
.product-form__submit:hover {
  background: #1a2e44 !important;
  color: #ffffff !important;
}

/* ---- Vendor text ---- */
.card__information .caption-with-letter-spacing {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #8a9bb0 !important;
}

/* ---- Color swatches ---- */
.swatch-list {
  gap: 6px !important;
  margin-top: 8px !important;
}

.swatch--small {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(26, 46, 68, 0.15) !important;
}

/* ---- Collection grid spacing ---- */
.collection .products-grid,
.product-grid {
  gap: 20px !important;
}

@media (max-width: 749px) {
  .card__heading,
  .card__heading.h5,
  .card__heading a {
    font-size: 13px !important;
  }

  .price__regular .price-item--regular,
  .price--on-sale .price-item--sale {
    font-size: 14px !important;
  }

  .card-wrapper:hover {
    transform: none;
  }
}

/* ---- Hide quick add / choose options button ---- */
.quick-add,
.quick-add__submit,
.card__footer,
.card-information__button,
.product-form--full-width,
.card .quick-add-modal__toggle,
[class*="quick-add"],
.card__information .button,
.card-information .button {
  display: none !important;
}

/* ---- Ensure card title is clickable and full width ---- */
.card__heading a {
  display: block !important;
  width: 100% !important;
}

/* ---- Clean card bottom spacing ---- */
.card__information {
  padding-bottom: 16px !important;
}

/* ---- Review stars styling ---- */
.rating {
  margin-top: 6px !important;
}

.rating-star {
  color: #f5a623 !important;
}

.rating__count {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #8a9bb0 !important;
}

/*
  cc-pdp-mm-override.css — v2
  CRO Product Page Override — MonoFloral Milk Velvet Bedding (product.mm.json)
  Matches Cozy Cloud homepage design language exactly.
  Uses precise Shrine class names for guaranteed specificity.
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   OVERRIDE SHRINE CSS VARIABLES FOR PRODUCT PAGE
   ============================================================ */

/* Override Shrine button shape + color variables at product level */
.template-product {
  --buttons-radius: 100px;
  --buttons-radius-outset: 100px;
  --buttons-border-width: 0px;
  --buttons-border-opacity: 0;
}

/* Override the Shrine theme button color variables */
.template-product .product-form__buttons,
.template-product .product-form {
  --color-button: 26, 46, 68;
  --color-button-text: 255, 255, 255;
  --alpha-button-background: 1;
  --alpha-button-border: 0;
}

/* Override the Shrine theme variant picker button variables */
.template-product .product-form__input {
  --color-button: 224, 238, 248;
  --color-button-text: 26, 46, 68;
  --alpha-button-background: 1;
}

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --cc-navy: #1a2e44;
  --cc-blue: #c6dbeb;
  --cc-blue-light: #ecf6fd;
  --cc-blue-mid: #ddeef9;
  --cc-font: 'Plus Jakarta Sans', sans-serif;
  --cc-text-muted: #5a7a96;
  --cc-white: #ffffff;
  --cc-bg: #fcfcfc;
  --cc-border: #e0eef8;
  --cc-shadow: 0 8px 32px rgba(26, 46, 68, 0.10);
  --cc-shadow-lg: 0 12px 48px rgba(26, 46, 68, 0.15);
  --cc-radius-card: 20px;
  --cc-radius-btn: 100px;
}

/* ============================================================
   PRODUCT TITLE — exact Shrine class
   ============================================================ */
.product__title,
h1.product__title {
  font-family: var(--cc-font) !important;
  font-size: clamp(22px, 2.8vw, 36px) !important;
  font-weight: 800 !important;
  color: var(--cc-navy) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 8px !important;
}

/* ============================================================
   PRICE BLOCK
   ============================================================ */
/* Product page price — scoped to product-page-price only, NOT collection cards */
.product-page-price .price-item--sale,
.product-page-price .price-item--last {
  font-family: var(--cc-font) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--cc-navy) !important;
}
.price--on-sale .price-item--regular,
.price__compare .price-item--regular {
  font-family: var(--cc-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #aab8c8 !important;
  text-decoration: line-through !important;
}
.price__badge-sale,
.badge--sale,
.price__badge {
  background: var(--cc-blue) !important;
  color: var(--cc-navy) !important;
  font-family: var(--cc-font) !important;
  font-weight: 700 !important;
  border-radius: var(--cc-radius-btn) !important;
  font-size: 11px !important;
  padding: 4px 12px !important;
  letter-spacing: 0.04em !important;
}

/* ============================================================
   VARIANT PICKER — OPTION LABELS (legend)
   ============================================================ */
.product-form__input legend.form__label,
.product-form__input .form__label {
  font-family: var(--cc-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--cc-navy) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  margin-bottom: 10px !important;
  display: block !important;
}

/* ============================================================
   VARIANT PICKER — RADIO BUTTON LABELS (bedding type + size)
   ============================================================ */
.product-form__input label:not([class*="color"]):not([class*="swatch"]) {
  font-family: var(--cc-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cc-navy) !important;
  border: 2px solid var(--cc-border) !important;
  border-radius: 12px !important;
  padding: 9px 16px !important;
  background: var(--cc-white) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  line-height: 1.3 !important;
  margin: 3px !important;
}

/* Selected variant button */
.product-form__input input[type="radio"]:checked + label:not([class*="color"]):not([class*="swatch"]) {
  background: var(--cc-navy) !important;
  color: var(--cc-white) !important;
  border-color: var(--cc-navy) !important;
}

/* Hover state */
.product-form__input label:not([class*="color"]):not([class*="swatch"]):hover {
  border-color: var(--cc-navy) !important;
  background: var(--cc-blue-light) !important;
}

/* ============================================================
   COLOR SWATCHES — keep circular, add ring on selected
   ============================================================ */
.color-swatches-container label,
.product-form__input label.swatch,
[class*="color-swatch"] label {
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  min-height: unset !important;
  padding: 0 !important;
  border: 3px solid transparent !important;
  margin: 4px !important;
}
.color-swatches-container input[type="radio"]:checked + label,
[class*="color-swatch"] input[type="radio"]:checked + label {
  box-shadow: 0 0 0 2px var(--cc-white), 0 0 0 4px var(--cc-navy) !important;
  background: inherit !important;
  color: inherit !important;
  border-color: transparent !important;
}

/* ============================================================
   QUANTITY SELECTOR
   ============================================================ */
.quantity {
  border: 2px solid var(--cc-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--cc-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 44px !important;
}
.quantity__button {
  background: var(--cc-blue-light) !important;
  color: var(--cc-navy) !important;
  border: none !important;
  width: 42px !important;
  height: 44px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  font-family: var(--cc-font) !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
}
.quantity__button:hover {
  background: var(--cc-blue) !important;
}
.quantity__input {
  font-family: var(--cc-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--cc-navy) !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid var(--cc-border) !important;
  border-right: 1px solid var(--cc-border) !important;
  width: 52px !important;
  height: 44px !important;
  background: var(--cc-white) !important;
}

/* ============================================================
   ADD TO CART BUTTON — exact Shrine classes
   .atc-button.product-form__submit.button.button--full-width
   ============================================================ */
button.atc-button,
button.product-form__submit,
.product-form__buttons button[name="add"],
button.button--full-width[name="add"] {
  font-family: var(--cc-font) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  background: var(--cc-navy) !important;
  color: var(--cc-white) !important;
  border: none !important;
  border-radius: var(--cc-radius-btn) !important;
  padding: 18px 32px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 20px rgba(26, 46, 68, 0.25) !important;
  text-transform: none !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 56px !important;
}
button.atc-button:hover,
button.product-form__submit:hover,
.product-form__buttons button[name="add"]:hover {
  background: #243d5a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(26, 46, 68, 0.35) !important;
}
button.atc-button:active,
button.product-form__submit:active {
  transform: translateY(0) !important;
}

/* Shimmer effect on ATC */
button.atc-button::after,
button.product-form__submit::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
button.atc-button:hover::after,
button.product-form__submit:hover::after {
  left: 150%;
}

/* ============================================================
   SHOPIFY PAYMENT BUTTON (Buy Now)
   ============================================================ */
.shopify-payment-button__button {
  border-radius: var(--cc-radius-btn) !important;
  font-family: var(--cc-font) !important;
  font-weight: 700 !important;
}
.shopify-payment-button__more-options,
#more-payment-options-link {
  font-family: var(--cc-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--cc-text-muted) !important;
}

/* ============================================================
   PRODUCT INFO WRAPPER — card style
   ============================================================ */
.product__info-wrapper {
  background: var(--cc-white) !important;
  border-radius: var(--cc-radius-card) !important;
  padding: 28px 28px 24px !important;
  box-shadow: var(--cc-shadow) !important;
  border: 1px solid var(--cc-border) !important;
}

/* ============================================================
   PRODUCT MEDIA — rounded corners
   ============================================================ */
.product__media-wrapper .product__media img,
.product__media-wrapper media-gallery img,
.product__media img {
  border-radius: 16px !important;
}
.product__media-wrapper .thumbnail-list__item button {
  border-radius: 10px !important;
  overflow: hidden !important;
}
.product__media-wrapper .thumbnail-list__item--active button,
.product__media-wrapper .thumbnail-list__item.is-active button {
  border: 2px solid var(--cc-navy) !important;
  border-radius: 10px !important;
}

/* ============================================================
   PRODUCT DESCRIPTION
   ============================================================ */
.product__description,
.product__description p,
.product__description li,
.product__description span {
  font-family: var(--cc-font) !important;
  font-size: 14px !important;
  color: var(--cc-text-muted) !important;
  line-height: 1.7 !important;
}
.product__description h2,
.product__description h3,
.product__description h4,
.product__description strong {
  font-family: var(--cc-font) !important;
  font-weight: 700 !important;
  color: var(--cc-navy) !important;
}

/* ============================================================
   ACCORDION
   ============================================================ */
.product__accordion .accordion__title,
.product__accordion summary {
  font-family: var(--cc-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--cc-navy) !important;
}
.product__accordion .accordion__content,
.product__accordion details > div {
  font-family: var(--cc-font) !important;
  font-size: 13px !important;
  color: var(--cc-text-muted) !important;
  line-height: 1.7 !important;
}

/* ============================================================
   STICKY ATC (Shrine built-in sticky block)
   ============================================================ */
sticky-atc,
[id*="sticky-atc"],
.sticky-atc-bar {
  font-family: var(--cc-font) !important;
  background: var(--cc-white) !important;
  border-top: 2px solid var(--cc-border) !important;
  box-shadow: 0 -4px 20px rgba(26, 46, 68, 0.10) !important;
}
sticky-atc button,
.sticky-atc-bar button,
[id*="sticky-atc"] button {
  font-family: var(--cc-font) !important;
  font-weight: 800 !important;
  background: var(--cc-navy) !important;
  color: var(--cc-white) !important;
  border-radius: var(--cc-radius-btn) !important;
  border: none !important;
  padding: 12px 28px !important;
  font-size: 14px !important;
}
sticky-atc .price,
.sticky-atc-bar .price,
[id*="sticky-atc"] .price {
  font-family: var(--cc-font) !important;
  font-weight: 800 !important;
  color: var(--cc-navy) !important;
}
sticky-atc .product__title,
.sticky-atc-bar .product__title {
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* ============================================================
   JUDGE.ME REVIEWS WIDGET
   ============================================================ */
.jdgm-widget *,
.jdgm-rev-widg *,
.jdgm-rev__body,
.jdgm-rev__author,
.jdgm-rev__timestamp,
.jdgm-summary,
.jdgm-histogram,
.jdgm-paginate {
  font-family: var(--cc-font) !important;
}
.jdgm-rev__title {
  font-family: var(--cc-font) !important;
  font-weight: 700 !important;
  color: var(--cc-navy) !important;
}
.jdgm-rev__body {
  color: var(--cc-text-muted) !important;
  line-height: 1.7 !important;
  font-size: 14px !important;
}
.jdgm-summary__rating {
  font-family: var(--cc-font) !important;
  font-weight: 800 !important;
  color: var(--cc-navy) !important;
  font-size: 36px !important;
}
.jdgm-write-rev-link,
.jdgm-paginate__page {
  font-family: var(--cc-font) !important;
  color: var(--cc-navy) !important;
  font-weight: 600 !important;
}

/* ============================================================
   SECTION HEADINGS BELOW PRODUCT FORM
   ============================================================ */
.shopify-section h2,
.shopify-section h3 {
  font-family: var(--cc-font) !important;
  font-weight: 800 !important;
  color: var(--cc-navy) !important;
  letter-spacing: -0.025em !important;
}

/* ============================================================
   PRODUCT PAGE SPACING — Tighten to bring ATC above fold
   ============================================================ */
.product__info-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.product-form__input {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.product-form__buttons {
  margin-top: 4px !important;
}

/* Reduce padding on product info wrapper */
.product__info-wrapper {
  padding: 20px 22px 18px !important;
}

/* Reduce spacing between blocks inside product-info */
product-info > * {
  margin-bottom: 0 !important;
}
product-info .product__title {
  margin-bottom: 4px !important;
}
product-info .jdgm-preview-badge {
  margin-bottom: 4px !important;
}

/* Tighten the price block */
.price {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Tighten fieldset spacing */
.product-form__input fieldset {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Reduce gap between variant picker groups */
variant-radios fieldset {
  margin-bottom: 8px !important;
}

/* Tighten quantity selector */
.quantity-wrapper,
.product-form__quantity {
  margin-bottom: 0 !important;
}

/* Hide Shop Pay installments — clutters the page, not a CRO element */
.shopify-installments,
.shopify-payment-terms,
[id*='shopify-payment-terms'],
.shopify-cleanslate {
  display: none !important;
}

/* Reduce variant button height slightly */
.product-form__input label:not([class*="color"]):not([class*="swatch"]) {
  min-height: 38px !important;
  padding: 7px 14px !important;
  font-size: 12.5px !important;
}

/* Reduce the legend/label spacing */
.product-form__input legend.form__label,
.product-form__input .form__label {
  margin-bottom: 6px !important;
  margin-top: 4px !important;
}

/* Reduce spacing on the note/urgency blocks */
.product__description {
  margin-bottom: 0 !important;
}

/* Reduce product section padding */
.section-main-product .page-width {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 749px) {
  .product__info-wrapper {
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }
  .product__title {
    font-size: 20px !important;
  }
  button.atc-button,
  button.product-form__submit {
    font-size: 15px !important;
    padding: 16px 24px !important;
    min-height: 52px !important;
  }
}

/*
  cc-pdp-mm-override.css — v2
  CRO Product Page Override — MonoFloral Milk Velvet Bedding (product.mm.json)
  Matches Cozy Cloud homepage design language exactly.
  Uses precise Shrine class names for guaranteed specificity.
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   OVERRIDE SHRINE CSS VARIABLES FOR PRODUCT PAGE
   ============================================================ */

/* Override Shrine button shape + color variables at product level */
.template-product {
  --buttons-radius: 100px;
  --buttons-radius-outset: 100px;
  --buttons-border-width: 0px;
  --buttons-border-opacity: 0;
}

/* Override the Shrine theme button color variables */
.template-product .product-form__buttons,
.template-product .product-form {
  --color-button: 26, 46, 68;
  --color-button-text: 255, 255, 255;
  --alpha-button-background: 1;
  --alpha-button-border: 0;
}

/* Override the Shrine theme variant picker button variables */
.template-product .product-form__input {
  --color-button: 224, 238, 248;
  --color-button-text: 26, 46, 68;
  --alpha-button-background: 1;
}

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --cc-navy: #1a2e44;
  --cc-blue: #c6dbeb;
  --cc-blue-light: #ecf6fd;
  --cc-blue-mid: #ddeef9;
  --cc-font: 'Plus Jakarta Sans', sans-serif;
  --cc-text-muted: #5a7a96;
  --cc-white: #ffffff;
  --cc-bg: #fcfcfc;
  --cc-border: #e0eef8;
  --cc-shadow: 0 8px 32px rgba(26, 46, 68, 0.10);
  --cc-shadow-lg: 0 12px 48px rgba(26, 46, 68, 0.15);
  --cc-radius-card: 20px;
  --cc-radius-btn: 100px;
}

/* ============================================================
   PRODUCT TITLE — exact Shrine class
   ============================================================ */
.product__title,
h1.product__title {
  font-family: var(--cc-font) !important;
  font-size: clamp(22px, 2.8vw, 36px) !important;
  font-weight: 800 !important;
  color: var(--cc-navy) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 8px !important;
}

/* ============================================================
   PRICE BLOCK
   ============================================================ */
/* Product page price — scoped to product-page-price only, NOT collection cards */
.product-page-price .price-item--sale,
.product-page-price .price-item--last {
  font-family: var(--cc-font) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--cc-navy) !important;
}
.price--on-sale .price-item--regular,
.price__compare .price-item--regular {
  font-family: var(--cc-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #aab8c8 !important;
  text-decoration: line-through !important;
}
.price__badge-sale,
.badge--sale,
.price__badge {
  background: var(--cc-blue) !important;
  color: var(--cc-navy) !important;
  font-family: var(--cc-font) !important;
  font-weight: 700 !important;
  border-radius: var(--cc-radius-btn) !important;
  font-size: 11px !important;
  padding: 4px 12px !important;
  letter-spacing: 0.04em !important;
}

/* ============================================================
   VARIANT PICKER — OPTION LABELS (legend)
   ============================================================ */
.product-form__input legend.form__label,
.product-form__input .form__label {
  font-family: var(--cc-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--cc-navy) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  margin-bottom: 10px !important;
  display: block !important;
}

/* ============================================================
   VARIANT PICKER — RADIO BUTTON LABELS (bedding type + size)
   ============================================================ */
.product-form__input label:not([class*="color"]):not([class*="swatch"]) {
  font-family: var(--cc-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cc-navy) !important;
  border: 2px solid var(--cc-border) !important;
  border-radius: 12px !important;
  padding: 9px 16px !important;
  background: var(--cc-white) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  line-height: 1.3 !important;
  margin: 3px !important;
}

/* Selected variant button */
.product-form__input input[type="radio"]:checked + label:not([class*="color"]):not([class*="swatch"]) {
  background: var(--cc-navy) !important;
  color: var(--cc-white) !important;
  border-color: var(--cc-navy) !important;
}

/* Hover state */
.product-form__input label:not([class*="color"]):not([class*="swatch"]):hover {
  border-color: var(--cc-navy) !important;
  background: var(--cc-blue-light) !important;
}

/* ============================================================
   COLOR SWATCHES — keep circular, add ring on selected
   ============================================================ */
.color-swatches-container label,
.product-form__input label.swatch,
[class*="color-swatch"] label {
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  min-height: unset !important;
  padding: 0 !important;
  border: 3px solid transparent !important;
  margin: 4px !important;
}
.color-swatches-container input[type="radio"]:checked + label,
[class*="color-swatch"] input[type="radio"]:checked + label {
  box-shadow: 0 0 0 2px var(--cc-white), 0 0 0 4px var(--cc-navy) !important;
  background: inherit !important;
  color: inherit !important;
  border-color: transparent !important;
}

/* ============================================================
   QUANTITY SELECTOR
   ============================================================ */
.quantity {
  border: 2px solid var(--cc-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--cc-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 44px !important;
}
.quantity__button {
  background: var(--cc-blue-light) !important;
  color: var(--cc-navy) !important;
  border: none !important;
  width: 42px !important;
  height: 44px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  font-family: var(--cc-font) !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
}
.quantity__button:hover {
  background: var(--cc-blue) !important;
}
.quantity__input {
  font-family: var(--cc-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--cc-navy) !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid var(--cc-border) !important;
  border-right: 1px solid var(--cc-border) !important;
  width: 52px !important;
  height: 44px !important;
  background: var(--cc-white) !important;
}

/* ============================================================
   ADD TO CART BUTTON — exact Shrine classes
   .atc-button.product-form__submit.button.button--full-width
   ============================================================ */
button.atc-button,
button.product-form__submit,
.product-form__buttons button[name="add"],
button.button--full-width[name="add"] {
  font-family: var(--cc-font) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  background: var(--cc-navy) !important;
  color: var(--cc-white) !important;
  border: none !important;
  border-radius: var(--cc-radius-btn) !important;
  padding: 18px 32px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 20px rgba(26, 46, 68, 0.25) !important;
  text-transform: none !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 56px !important;
}
button.atc-button:hover,
button.product-form__submit:hover,
.product-form__buttons button[name="add"]:hover {
  background: #243d5a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(26, 46, 68, 0.35) !important;
}
button.atc-button:active,
button.product-form__submit:active {
  transform: translateY(0) !important;
}

/* Shimmer effect on ATC */
button.atc-button::after,
button.product-form__submit::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
button.atc-button:hover::after,
button.product-form__submit:hover::after {
  left: 150%;
}

/* ============================================================
   SHOPIFY PAYMENT BUTTON (Buy Now)
   ============================================================ */
.shopify-payment-button__button {
  border-radius: var(--cc-radius-btn) !important;
  font-family: var(--cc-font) !important;
  font-weight: 700 !important;
}
.shopify-payment-button__more-options,
#more-payment-options-link {
  font-family: var(--cc-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--cc-text-muted) !important;
}

/* ============================================================
   PRODUCT INFO WRAPPER — card style
   ============================================================ */
.product__info-wrapper {
  background: var(--cc-white) !important;
  border-radius: var(--cc-radius-card) !important;
  padding: 28px 28px 24px !important;
  box-shadow: var(--cc-shadow) !important;
  border: 1px solid var(--cc-border) !important;
}

/* ============================================================
   PRODUCT MEDIA — rounded corners
   ============================================================ */
.product__media-wrapper .product__media img,
.product__media-wrapper media-gallery img,
.product__media img {
  border-radius: 16px !important;
}
.product__media-wrapper .thumbnail-list__item button {
  border-radius: 10px !important;
  overflow: hidden !important;
}
.product__media-wrapper .thumbnail-list__item--active button,
.product__media-wrapper .thumbnail-list__item.is-active button {
  border: 2px solid var(--cc-navy) !important;
  border-radius: 10px !important;
}

/* ============================================================
   PRODUCT DESCRIPTION
   ============================================================ */
.product__description,
.product__description p,
.product__description li,
.product__description span {
  font-family: var(--cc-font) !important;
  font-size: 14px !important;
  color: var(--cc-text-muted) !important;
  line-height: 1.7 !important;
}
.product__description h2,
.product__description h3,
.product__description h4,
.product__description strong {
  font-family: var(--cc-font) !important;
  font-weight: 700 !important;
  color: var(--cc-navy) !important;
}

/* ============================================================
   ACCORDION
   ============================================================ */
.product__accordion .accordion__title,
.product__accordion summary {
  font-family: var(--cc-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--cc-navy) !important;
}
.product__accordion .accordion__content,
.product__accordion details > div {
  font-family: var(--cc-font) !important;
  font-size: 13px !important;
  color: var(--cc-text-muted) !important;
  line-height: 1.7 !important;
}

/* ============================================================
   STICKY ATC (Shrine built-in sticky block)
   ============================================================ */
sticky-atc,
[id*="sticky-atc"],
.sticky-atc-bar {
  font-family: var(--cc-font) !important;
  background: var(--cc-white) !important;
  border-top: 2px solid var(--cc-border) !important;
  box-shadow: 0 -4px 20px rgba(26, 46, 68, 0.10) !important;
}
sticky-atc button,
.sticky-atc-bar button,
[id*="sticky-atc"] button {
  font-family: var(--cc-font) !important;
  font-weight: 800 !important;
  background: var(--cc-navy) !important;
  color: var(--cc-white) !important;
  border-radius: var(--cc-radius-btn) !important;
  border: none !important;
  padding: 12px 28px !important;
  font-size: 14px !important;
}
sticky-atc .price,
.sticky-atc-bar .price,
[id*="sticky-atc"] .price {
  font-family: var(--cc-font) !important;
  font-weight: 800 !important;
  color: var(--cc-navy) !important;
}
sticky-atc .product__title,
.sticky-atc-bar .product__title {
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* ============================================================
   JUDGE.ME REVIEWS WIDGET
   ============================================================ */
.jdgm-widget *,
.jdgm-rev-widg *,
.jdgm-rev__body,
.jdgm-rev__author,
.jdgm-rev__timestamp,
.jdgm-summary,
.jdgm-histogram,
.jdgm-paginate {
  font-family: var(--cc-font) !important;
}
.jdgm-rev__title {
  font-family: var(--cc-font) !important;
  font-weight: 700 !important;
  color: var(--cc-navy) !important;
}
.jdgm-rev__body {
  color: var(--cc-text-muted) !important;
  line-height: 1.7 !important;
  font-size: 14px !important;
}
.jdgm-summary__rating {
  font-family: var(--cc-font) !important;
  font-weight: 800 !important;
  color: var(--cc-navy) !important;
  font-size: 36px !important;
}
.jdgm-write-rev-link,
.jdgm-paginate__page {
  font-family: var(--cc-font) !important;
  color: var(--cc-navy) !important;
  font-weight: 600 !important;
}

/* ============================================================
   SECTION HEADINGS BELOW PRODUCT FORM
   ============================================================ */
.shopify-section h2,
.shopify-section h3 {
  font-family: var(--cc-font) !important;
  font-weight: 800 !important;
  color: var(--cc-navy) !important;
  letter-spacing: -0.025em !important;
}

/* ============================================================
   PRODUCT PAGE SPACING — Tighten to bring ATC above fold
   ============================================================ */
.product__info-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.product-form__input {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.product-form__buttons {
  margin-top: 4px !important;
}

/* Reduce padding on product info wrapper */
.product__info-wrapper {
  padding: 20px 22px 18px !important;
}

/* Reduce spacing between blocks inside product-info */
product-info > * {
  margin-bottom: 0 !important;
}
product-info .product__title {
  margin-bottom: 4px !important;
}
product-info .jdgm-preview-badge {
  margin-bottom: 4px !important;
}

/* Tighten the price block */
.price {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Tighten fieldset spacing */
.product-form__input fieldset {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Reduce gap between variant picker groups */
variant-radios fieldset {
  margin-bottom: 8px !important;
}

/* Tighten quantity selector */
.quantity-wrapper,
.product-form__quantity {
  margin-bottom: 0 !important;
}

/* Hide Shop Pay installments — clutters the page, not a CRO element */
.shopify-installments,
.shopify-payment-terms,
[id*='shopify-payment-terms'],
.shopify-cleanslate {
  display: none !important;
}

/* Reduce variant button height slightly */
.product-form__input label:not([class*="color"]):not([class*="swatch"]) {
  min-height: 38px !important;
  padding: 7px 14px !important;
  font-size: 12.5px !important;
}

/* Reduce the legend/label spacing */
.product-form__input legend.form__label,
.product-form__input .form__label {
  margin-bottom: 6px !important;
  margin-top: 4px !important;
}

/* Reduce spacing on the note/urgency blocks */
.product__description {
  margin-bottom: 0 !important;
}

/* Reduce product section padding */
.section-main-product .page-width {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 749px) {
  .product__info-wrapper {
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }
  .product__title {
    font-size: 20px !important;
  }
  button.atc-button,
  button.product-form__submit {
    font-size: 15px !important;
    padding: 16px 24px !important;
    min-height: 52px !important;
  }
}
/* ============================================================
   PRODUCT PAGE: Game-Changer Variant Selector
   ============================================================ */

/* Hide radio inputs */
.cc-bedding-fieldset input[type="radio"],
.cc-size-fieldset input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

.cc-bedding-fieldset,
.cc-size-fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
}

.cc-bedding-fieldset legend,
.cc-size-fieldset legend {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #1a2e44 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 10px !important;
  display: block !important;
  width: 100% !important;
  float: none !important;
}

/* OPTION 1: Bedding Type — 3-column card grid */
.cc-bedding-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
}

.cc-bedding-grid .cc-option-item {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.cc-bedding-grid .cc-option-item label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 14px 8px 12px !important;
  border: 2px solid #e0eef8 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #1a2e44 !important;
  line-height: 1.35 !important;
  min-height: 80px !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(26,46,68,0.06) !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.cc-bedding-grid .cc-option-item label:hover {
  border-color: #1a2e44 !important;
  background: #ecf6fd !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(26,46,68,0.12) !important;
}

.cc-bedding-grid .cc-option-item input[type="radio"]:checked + label {
  border-color: #1a2e44 !important;
  background: #1a2e44 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(26,46,68,0.25) !important;
}

/* OPTION 2: Size — flex wrap pills */
.cc-size-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

.cc-size-flex .cc-option-item {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

.cc-size-flex .cc-option-item label {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 14px !important;
  border: 2px solid #e0eef8 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  min-height: unset !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

.cc-size-flex .cc-option-item label:hover {
  border-color: #1a2e44 !important;
  background: #ecf6fd !important;
}

.cc-size-flex .cc-option-item input[type="radio"]:checked + label {
  background: #1a2e44 !important;
  border-color: #1a2e44 !important;
  color: #ffffff !important;
}

.cc-size-name {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: inherit !important;
}

.cc-size-cm {
  display: block !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: inherit !important;
  opacity: 0.75 !important;
}

/* OPTION 3: Color — larger swatches with labels */
fieldset[data-option-index="3"] .color-swatches-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: flex-start !important;
}

fieldset[data-option-index="3"] .color-swatch {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
}

fieldset[data-option-index="3"] .color-swatch__image {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid #e0eef8 !important;
  transition: all 0.2s ease !important;
}

fieldset[data-option-index="3"] .color-swatch__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

fieldset[data-option-index="3"] .color-swatch__label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  color: #5a7a96 !important;
  text-align: center !important;
  max-width: 50px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
  position: static !important;
  clip: auto !important;
  clip-path: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

fieldset[data-option-index="3"] .color-swatch:has(input:checked) .color-swatch__image {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1a2e44 !important;
  border-color: transparent !important;
}

fieldset[data-option-index="3"] .color-swatch:hover .color-swatch__image {
  border-color: #1a2e44 !important;
  transform: scale(1.08) !important;
}

/* Badges and icons */
.cc-badge {
  display: block !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  background: #c6dbeb !important;
  color: #1a2e44 !important;
  padding: 2px 7px !important;
  border-radius: 100px !important;
  margin-bottom: 5px !important;
  white-space: nowrap !important;
}

.cc-bedding-grid .cc-option-item input[type="radio"]:checked + label .cc-badge {
  background: rgba(198, 219, 235, 0.25) !important;
  color: #ffffff !important;
}

.cc-icon {
  display: block !important;
  font-size: 20px !important;
  margin-bottom: 4px !important;
  line-height: 1 !important;
}

/* ============================================================
   APPLE-STYLE VARIANT SELECTOR — DEFINITIVE v5
   Cozy Cloud Co — Monofloral Milk Velvet Bedding
   Uses exact selectors to beat Shrine's section-main-product.css
   ============================================================ */

/* ── HIDE RADIO INPUTS ── */
.cc-bedding-grid .cc-option-item input[type="radio"],
.cc-size-flex .cc-option-item input[type="radio"] {
  clip: rect(0,0,0,0) !important;
  overflow: hidden !important;
  position: absolute !important;
  height: 1px !important;
  width: 1px !important;
}

/* ============================================================
   OPTION 1 — SET CARDS
   3 large equal cards, full-width grid
   ============================================================ */

/* Grid wrapper */
.cc-bedding-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Card item wrapper */
.cc-bedding-grid .cc-option-item {
  display: block !important;
  position: relative !important;
}

/* THE KEY: beat Shrine's input+label rule with longer selector chain */
.cc-bedding-grid .cc-option-item input[type="radio"] + label,
.product-form__input .cc-bedding-grid .cc-option-item input[type="radio"] + label,
fieldset.product-form__input .cc-bedding-grid .cc-option-item input[type="radio"] + label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  min-height: 88px !important;
  padding: 14px 8px 12px !important;
  margin: 0 !important;
  border: 1.5px solid #dde8f0 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #1a2e44 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 1px 4px rgba(26,46,68,0.07) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Hover state */
.cc-bedding-grid .cc-option-item input[type="radio"] + label:hover,
.product-form__input .cc-bedding-grid .cc-option-item input[type="radio"] + label:hover {
  border-color: #a8c8e0 !important;
  box-shadow: 0 4px 16px rgba(26,46,68,0.12) !important;
  transform: translateY(-1px) !important;
}

/* Selected card — navy fill */
.cc-bedding-grid .cc-option-item input[type="radio"]:checked + label,
.product-form__input .cc-bedding-grid .cc-option-item input[type="radio"]:checked + label,
fieldset.product-form__input .cc-bedding-grid .cc-option-item input[type="radio"]:checked + label {
  background: #1a2e44 !important;
  background-color: #1a2e44 !important;
  border-color: #1a2e44 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(26,46,68,0.28) !important;
  transform: translateY(-1px) !important;
}

/* Override Shrine's checked label background */
.cc-bedding-grid .cc-option-item input[type="radio"]:checked + label::selection {
  background-color: rgba(255,255,255,0.3) !important;
}

/* Disabled */
.cc-bedding-grid .cc-option-item input[type="radio"].disabled + label,
.cc-bedding-grid .cc-option-item input[type="radio"]:disabled + label {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  text-decoration: none !important;
}

/* Hide the ::before pseudo-element Shrine adds (shadow) */
.cc-bedding-grid .cc-option-item input[type="radio"] + label::before {
  display: none !important;
  content: none !important;
}

/* ============================================================
   OPTION 2 — SIZE PILLS
   Compact pill buttons, flex wrap
   ============================================================ */

/* Flex wrapper */
.cc-size-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Item wrapper */
.cc-size-flex .cc-option-item {
  display: block !important;
  position: relative !important;
}

/* Pill label — beat Shrine */
.cc-size-flex .cc-option-item input[type="radio"] + label,
.product-form__input .cc-size-flex .cc-option-item input[type="radio"] + label,
fieldset.product-form__input .cc-size-flex .cc-option-item input[type="radio"] + label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 18px !important;
  margin: 0 !important;
  border: 1.5px solid #dde8f0 !important;
  border-radius: 100px !important;
  background: #ffffff !important;
  color: #1a2e44 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: normal !important;
  box-shadow: 0 1px 3px rgba(26,46,68,0.06) !important;
  box-sizing: border-box !important;
}

/* Hover */
.cc-size-flex .cc-option-item input[type="radio"] + label:hover,
.product-form__input .cc-size-flex .cc-option-item input[type="radio"] + label:hover {
  border-color: #a8c8e0 !important;
  background: #f0f8ff !important;
}

/* Selected pill */
.cc-size-flex .cc-option-item input[type="radio"]:checked + label,
.product-form__input .cc-size-flex .cc-option-item input[type="radio"]:checked + label,
fieldset.product-form__input .cc-size-flex .cc-option-item input[type="radio"]:checked + label {
  background: #1a2e44 !important;
  background-color: #1a2e44 !important;
  border-color: #1a2e44 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(26,46,68,0.22) !important;
}

/* Disabled */
.cc-size-flex .cc-option-item input[type="radio"].disabled + label,
.cc-size-flex .cc-option-item input[type="radio"]:disabled + label {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
}

/* Hide Shrine's ::before shadow */
.cc-size-flex .cc-option-item input[type="radio"] + label::before {
  display: none !important;
  content: none !important;
}

/* ============================================================
   OPTION 3 — COLOR SWATCHES
   Larger circles, navy ring on selected, no labels
   ============================================================ */

/* Swatch container */
.color-swatches-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

/* Each swatch wrapper */
.color-swatch {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  flex-shrink: 0 !important;
}

/* Hide radio */
.color-swatch input[type="radio"] {
  clip: rect(0,0,0,0) !important;
  overflow: hidden !important;
  position: absolute !important;
  height: 1px !important;
  width: 1px !important;
}

/* Swatch image circle */
.color-swatch .color-swatch__image {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid #e0eaf2 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: block !important;
  position: relative !important;
}

.color-swatch .color-swatch__image img,
.color-swatch .color-swatch__image .color-swatch__custom-color {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Hover */
.color-swatch:hover .color-swatch__image {
  border-color: #1a2e44 !important;
  transform: scale(1.08) !important;
}

/* Clickable label overlay */
.color-swatch .color-swatch_hidden-label {
  position: absolute !important;
  inset: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Selected — double ring effect */
.color-swatch:has(input[type="radio"]:checked) .color-swatch__image {
  border-color: #1a2e44 !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1a2e44 !important;
  transform: scale(1.06) !important;
}

/* Checkmark on selected swatch */
.color-swatch:has(input[type="radio"]:checked)::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5L4.5 8.5L11 1.5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  z-index: 3 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)) !important;
}

/* HIDE color text labels — swatches only */
.color-swatch__label,
.color-swatch .color-swatch__label,
span.color-swatch__label {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  opacity: 0 !important;
}

/* ============================================================
   LEGEND LABELS — section headers
   ============================================================ */
fieldset[data-option-index="1"] > legend.form__label,
fieldset[data-option-index="2"] > legend.form__label,
fieldset[data-option-index="3"] > legend.form__label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #8a9bb0 !important;
  margin-bottom: 10px !important;
  display: block !important;
  padding: 0 !important;
}

/* ============================================================
   HIDE QUANTITY LABEL
   ============================================================ */
label.quantity__label,
.quantity__label,
.product-form__quantity > label {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 480px) {
  .cc-bedding-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  .cc-bedding-grid .cc-option-item input[type="radio"] + label,
  .product-form__input .cc-bedding-grid .cc-option-item input[type="radio"] + label {
    min-height: 76px !important;
    padding: 10px 4px 8px !important;
    font-size: 10.5px !important;
    border-radius: 10px !important;
  }

  .cc-size-flex .cc-option-item input[type="radio"] + label,
  .product-form__input .cc-size-flex .cc-option-item input[type="radio"] + label {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  .color-swatch,
  .color-swatch .color-swatch__image {
    width: 34px !important;
    height: 34px !important;
  }
}


/* ============================================================
   TARGETED FIXES v2 — Quantity label + Color swatch labels
   ============================================================ */

/* Hide QUANTITY label completely */
label.quantity__label,
label.quantity__label.form__label,
.product-form__quantity label,
.product-form__quantity > label,
.product-form__input.product-form__quantity label {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  visibility: hidden !important;
}

/* Hide color swatch text labels */
span.color-swatch__label,
.color-swatch span.color-swatch__label,
.color-swatches-container .color-swatch > span,
.color-swatch > span:last-of-type {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Fix custom color swatch background via CSS variable */
.color-swatch__custom-color {
  background-color: var(--bg-color) !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  display: block !important;
}


/* ============================================================
   FIX: PERFECT CIRCLES + HIDE QUANTITY
   ============================================================ */

/* Force color swatches to be perfect circles — not oval */
.color-swatch,
.color-swatches-container .color-swatch {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  flex: 0 0 40px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: visible !important;
  display: block !important;
  position: relative !important;
}

.color-swatch .color-swatch__image,
.color-swatches-container .color-swatch .color-swatch__image {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.color-swatch .color-swatch__custom-color,
.color-swatches-container .color-swatch .color-swatch__custom-color {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background-color: var(--bg-color) !important;
  display: block !important;
}

/* Swatch container — proper flex with no stretching */
.color-swatches-container {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

/* HIDE QUANTITY STEPPER ENTIRELY */
.product-form__input.product-form__quantity,
#Quantity-Form-template--20267444895900__main,
.product-form__quantity,
quantity-input.quantity,
.quantity {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ============================================================
   2-LINE CARD LABELS — .cc-card-name + .cc-card-sub
   ============================================================ */

/* Card label: flex column, center aligned */
.cc-bedding-grid .cc-option-item input[type="radio"] + label,
.product-form__input .cc-bedding-grid .cc-option-item input[type="radio"] + label {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
}

/* Name line — bold, larger */
.cc-card-name {
  display: block !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: inherit !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

/* Sub line — smaller, lighter */
.cc-card-sub {
  display: block !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: inherit !important;
  opacity: 0.75 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

/* When selected — sub line stays white/readable */
.cc-bedding-grid .cc-option-item input[type="radio"]:checked + label .cc-card-name,
.cc-bedding-grid .cc-option-item input[type="radio"]:checked + label .cc-card-sub {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Mobile: slightly smaller text */
@media (max-width: 480px) {
  .cc-card-name {
    font-size: 11.5px !important;
  }
  .cc-card-sub {
    font-size: 9.5px !important;
  }
}

/* === CC BEDDING CARD 2-LINE LABELS === */
.cc-bedding-grid .cc-option-item label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
  padding: 14px 10px !important;
  min-height: 72px !important;
}
.cc-bedding-grid .cc-option-item label .cc-card-name {
  display: block !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: inherit !important;
  line-height: 1.3 !important;
}
.cc-bedding-grid .cc-option-item label .cc-card-sub {
  display: block !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #5a7a96 !important;
  line-height: 1.3 !important;
  opacity: 0.85 !important;
}
/* Selected card: sub text lighter */
.cc-bedding-grid .cc-option-item input[type=radio]:checked + label .cc-card-sub {
  color: rgba(255,255,255,0.75) !important;
  opacity: 1 !important;
}

/* === CC TRUST BADGES — Compact Branded Horizontal Row === */

/* Hide the old Shrine trust-badges block */
.product__info-container .trust-badges,
.product__info-container .trust-badge {
  display: none !important;
}

/* Compact horizontal pill row */
.cc-trust-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 0 4px !important;
  margin-top: 2px !important;
  border-top: 1px solid #e8f0f7 !important;
}

.cc-trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  background: #edf4fb !important;
  border-radius: 100px !important;
  border: none !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #1a2e44 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.cc-trust-check {
  font-size: 10px !important;
  color: #2d7a4f !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
}

/* === CC MOBILE BEDDING CARDS === */

/* On ALL screen sizes: force 3-column horizontal row for bedding cards */
.cc-bedding-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  width: 100% !important;
}

/* Mobile: keep 3-column row but reduce padding and font size */
@media (max-width: 749px) {
  .cc-bedding-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
  }

  .cc-bedding-grid .cc-option-item {
    display: block !important;
    width: 100% !important;
  }

  /* Smaller card padding on mobile */
  .cc-bedding-grid .cc-option-item input[type=radio] + label {
    padding: 10px 6px !important;
    min-height: 70px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Smaller card name on mobile */
  .cc-bedding-grid .cc-option-item input[type=radio] + label .cc-card-name {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  /* Smaller sub-line on mobile */
  .cc-bedding-grid .cc-option-item input[type=radio] + label .cc-card-sub {
    font-size: 9px !important;
    margin-top: 3px !important;
    line-height: 1.2 !important;
  }

  /* Size pills — 2x2 grid on mobile */
  .cc-size-flex {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* Color swatches — wrap nicely on mobile */
  fieldset[data-option-index="3"] {
    display: block !important;
  }

  .cc-swatch-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* Desktop: keep 3-column grid */
@media (min-width: 750px) {
  .cc-bedding-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
}

/* === CC SIZE MOBILE FIX === */

/* Size pills: strict 2-column grid */
.cc-size-flex {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.cc-size-flex .cc-option-item {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Size label: text wraps to 2 lines, no clipping */
.cc-size-flex .cc-option-item input[type=radio] + label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 10px 6px !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: unset !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  border: 2px solid #1a2e44 !important;
  background: #fff !important;
  color: #1a2e44 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  min-height: 48px !important;
  letter-spacing: -0.01em !important;
}

.cc-size-flex .cc-option-item input[type=radio]:checked + label {
  background: #1a2e44 !important;
  color: #fff !important;
  border-color: #1a2e44 !important;
}

/* Mobile: smaller pills */
@media (max-width: 749px) {
  .cc-size-flex {
    gap: 5px !important;
  }
  .cc-size-flex .cc-option-item input[type=radio] + label,
  .product-form__input .cc-size-flex .cc-option-item input[type=radio] + label,
  fieldset.product-form__input .cc-size-flex .cc-option-item input[type=radio] + label {
    font-size: 8px !important;
    padding: 5px 4px !important;
    min-height: 30px !important;
    border-radius: 30px !important;
    line-height: 1.2 !important;
  }
}

/* Desktop: slightly larger */
@media (min-width: 750px) {
  .cc-size-flex .cc-option-item input[type=radio] + label {
    font-size: 13px !important;
    padding: 10px 12px !important;
  }
}

/* ============================================================
   FIX: Hide Shop Pay installment block (element selector)
   The <shopify-payment-terms> custom element was not being
   targeted by the class-based rule above
   ============================================================ */
shopify-payment-terms,
shopify-payment-terms *,
.installment.caption-large {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   FIX: Section labels — bigger, bolder, clear visual weight
   SELECT YOUR BEDDING / SIZE / COLOR
   ============================================================ */
.product-form__input legend.form__label,
.product-form__input .form__label,
.product-form__input > .form__label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #1a2e44 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 10px !important;
  margin-top: 18px !important;
  display: block !important;
  line-height: 1 !important;
}

/* First fieldset gets less top margin (no need for extra space at top) */
.product-form__input:first-of-type legend.form__label,
.product-form__input:first-of-type .form__label {
  margin-top: 8px !important;
}

/* Add spacing between each variant block */
.product-form__input {
  margin-bottom: 14px !important;
}

/* ============================================================
   FIX: Remove gap between product title and Judge.me reviews
   ============================================================ */
.product__title {
  margin-bottom: 2px !important;
  padding-bottom: 0 !important;
}

/* The shopify-app-block wrapper around the reviews badge */
.shopify-block.shopify-app-block,
[id*="judge_me_reviews_preview_badge"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Judge.me preview badge itself */
.jdgm-widget.jdgm-preview-badge,
.jdgm-prev-badge {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================================
   FIX: Remove gap between Judge.me reviews badge and price
   ============================================================ */

/* The reviews badge app block */
#shopify-block-ATVAyam1wQzNrZkRJT__judge_me_reviews_preview_badge_zgJJiD,
.shopify-block.shopify-app-block:has(.jdgm-preview-badge),
.shopify-block.shopify-app-block:has(.jdgm-prev-badge) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* The price wrapper directly after reviews */
.no-js-hidden.product-page-price,
.product-page-price {
  margin-top: 2px !important;
  padding-top: 0 !important;
}

/* Judge.me preview badge bottom spacing */
.jdgm-widget.jdgm-preview-badge,
.jdgm-prev-badge,
.jdgm-preview-badge {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   FIX: Crush all gaps — title → reviews → price
   Shrine sets .product__info-container > * + * { margin: 1.5rem 0 }
   and .product__title { margin-bottom: 1.5rem }
   Override everything here with maximum specificity
   ============================================================ */

/* Kill the blanket 1.5rem spacing on all product-info children */
.product__info-container > * + * {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/* Title: zero bottom margin */
.product__title,
product-info .product__title,
.product__info-container .product__title {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Reviews badge block: zero top and bottom */
.product__info-container .shopify-block.shopify-app-block,
.product__info-container [id*="judge_me_reviews_preview_badge"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Price block: minimal top gap */
.product__info-container .product-page-price,
.product__info-container .no-js-hidden.product-page-price {
  margin-top: 6px !important;
  padding-top: 0 !important;
}

/* ============================================================
   HOMEPAGE BUTTONS — all match "Read all reviews" style
   Light blue bg (#c6dbeb), navy text (#1a2e44), pill shape
   ============================================================ */

/* Hero buttons */
.cc-hero-v2__btn,
.cc-hero-v2__btn--dark,
.cc-hero-v2__btn--outline,
/* Countdown CTA */
.cc-countdown__cta,
/* Social proof / review CTAs */
.cc-proof__cta,
.cc-stats__cta,
.cc-revwall__cta,
/* Category grid CTA */
.cc-catgrid__cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #c6dbeb !important;
  color: #1a2e44 !important;
  border: none !important;
  border-radius: 100px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  outline: none !important;
}

.cc-hero-v2__btn:hover,
.cc-hero-v2__btn--dark:hover,
.cc-hero-v2__btn--outline:hover,
.cc-countdown__cta:hover,
.cc-proof__cta:hover,
.cc-stats__cta:hover,
.cc-revwall__cta:hover,
.cc-catgrid__cta-btn:hover {
  background: #1a2e44 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 749px) {
  .cc-hero-v2__btn,
  .cc-hero-v2__btn--dark,
  .cc-hero-v2__btn--outline,
  .cc-countdown__cta,
  .cc-proof__cta,
  .cc-stats__cta,
  .cc-revwall__cta,
  .cc-catgrid__cta-btn {
    font-size: 14px !important;
    padding: 12px 24px !important;
  }
}

/* ============================================================
   FIX: Native Shrine .button class — make pill style
   Covers "View all", "Load more", and any Shrine default buttons
   EXCLUDES: ATC button (product-form__submit), quick-add
   ============================================================ */

a.button:not(.product-form__submit):not([name="add"]),
button.button:not(.product-form__submit):not([name="add"]):not(.quick-add-modal__toggle),
.collection__view-all .button,
.center.collection__view-all a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #c6dbeb !important;
  color: #1a2e44 !important;
  border: none !important;
  border-radius: 100px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 14px 32px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  outline: none !important;
  min-width: 140px !important;
}

a.button:not(.product-form__submit):hover,
button.button:not(.product-form__submit):not([name="add"]):hover,
.collection__view-all .button:hover,
.center.collection__view-all a:hover {
  background: #1a2e44 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   FIX: Collection card — center-align price to match title
   ============================================================ */

.card-information .price,
.card-information .price--on-sale,
.card-information .price--sold-out,
.card__information .price,
.card__information .price--on-sale {
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.card-information .price__container,
.card__information .price__container {
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.card-information,
.card__information {
  text-align: center !important;
}

/* ============================================================
   FIX v2: Collection card price — center ALL inner elements
   ============================================================ */

/* The price__container holds price__regular and price__sale as flex children */
.card-information .price__container,
.card__information .price__container {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

/* Each price row (sale / regular) should be centered — hide regular when on sale */
.card-information .price--on-sale .price__regular,
.card__information .price--on-sale .price__regular {
  display: none !important;
}

.card-information .price__sale,
.card-information .price__regular,
.card__information .price__sale,
.card__information .price__regular {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
}

/* Individual price items */
.card-information .price-item,
.card__information .price-item {
  text-align: center !important;
}

/* Compare price (strikethrough) */
.card-information .price__compare-price,
.card__information .price__compare-price {
  display: flex !important;
  justify-content: center !important;
}

/* Also center the card title and stars */
.card-information .card__heading,
.card__information .card__heading,
.card-information .rating,
.card__information .rating,
.card-information .rating-count,
.card__information .rating-count {
  text-align: center !important;
  justify-content: center !important;
}

/* ============================================================
   FIX: Kill Shrine's hover arrow on all buttons
   Shrine adds padding-right: 6rem + ::before arrow SVG on hover
   We override this to keep clean pill buttons with no arrow
   ============================================================ */

a.button:not([aria-disabled="true"]):hover,
button.button:not([aria-disabled="true"]):hover {
  padding-right: 32px !important;
  white-space: normal !important;
}

a.button:not([aria-disabled="true"]):hover::before,
button.button:not([aria-disabled="true"]):hover::before,
a.button::before,
button.button::before {
  display: none !important;
  content: none !important;
  transform: none !important;
  opacity: 0 !important;
  width: 0 !important;
}

/* ============================================================
   FIX: White text for dark-background sections
   .shopify-section h2 sets navy color globally — override for
   sections that have dark backgrounds (cc-stats, cc-social-proof, etc.)
   ============================================================ */

.cc-stats h2,
.cc-stats h3,
.cc-stats .cc-stats__title,
.cc-stats .cc-stats__subtitle,
.cc-social-proof h2,
.cc-social-proof h3,
.cc-review-wall h2,
.cc-review-wall h3 {
  color: #ffffff !important;
}

.cc-stats * {
  color: inherit;
}

/* ============================================================
   FIX: Kill Shrine's hover box-shadow border outline on buttons
   Shrine adds a black box-shadow outline via ::after on hover
   ============================================================ */

.button:not([disabled]):hover::after,
.customer button:hover::after,
a.button:not([aria-disabled="true"]):hover::after,
.shopify-challenge__button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.button::after,
a.button::after {
  box-shadow: none !important;
  border: none !important;
}


/* ============================================================
   FAQ SECTION — centered, max-width, minimal flat lines
   ============================================================ */
[class*="ai-faq-section"] {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

[class*="ai-faq-item"] {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #e8ecf0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

[class*="ai-faq-item"]:first-child {
  border-top: 1px solid #e8ecf0 !important;
}

[class*="ai-faq-item"]:hover {
  transform: none !important;
  box-shadow: none !important;
}

[class*="ai-faq-list"] {
  gap: 0 !important;
}

[class*="ai-faq-question"] {
  padding: 18px 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1B2A4A !important;
}

[class*="ai-faq-answer"] {
  padding: 0 0 16px !important;
  color: #5a6a7a !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

[class*="ai-faq-title"] {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #1B2A4A !important;
}

[class*="ai-faq-subtitle"] {
  font-size: 14px !important;
  color: #8a9ab0 !important;
  opacity: 1 !important;
}

/* ============================================================
   JUDGE.ME FEATURED CAROUSEL — center on desktop
   ============================================================ */
.jdgm-featured-carousel,
.jdgm-featured-carousel__wrapper,
.jdgm-featured-carousel__container {
  margin-left: auto !important;
  margin-right: auto !important;
}

.jdgm-featured-carousel__track {
  justify-content: center !important;
}

/* Center the whole apps section that wraps the carousel */
.shopify-section:has(.jdgm-featured-carousel) {
  display: flex !important;
  justify-content: center !important;
}

/* ============================================================
   JUDGE.ME — Write a Review button: white text
   ============================================================ */
.jdgm-write-rev-link,
a.jdgm-write-rev-link,
button.jdgm-write-rev-link,
.jdgm-write-rev-link span,
.jdgm-write-rev-link * {
  color: #ffffff !important;
}

.jdgm-write-rev-link:hover,
a.jdgm-write-rev-link:hover {
  color: #ffffff !important;
  opacity: 0.9 !important;
}


/* ===== FAQ SECTION CENTERING - TARGETED FIX ===== */
#shopify-section-template--20267444142236__1752637107a0bb6113 {
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 20px 0 !important;
}

/* Ensure the faq-accordion custom element is also properly constrained */
[class*="ai-faq-section"] {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 24px !important;
}

/* ===== JUDGE.ME WRITE A REVIEW BUTTON WHITE TEXT ===== */
.jdgm-write-rev-link,
.jdgm-write-rev-link span,
a.jdgm-write-rev-link,
[class*="jdgm"] .write-review,
.jdgm-rev-widg__header .jdgm-write-rev-link {
  color: #ffffff !important;
}


/* ===== CART DRAWER — COMPACT REDESIGN ===== */

/* Hide HulkApps "Edit Options" button — we show qty number instead */
.edit_cart_option,
button.edit_cart_option,
.cart-item .edit_cart_option {
  display: none !important;
}

/* Quantity wrapper: put qty input + trash icon on ONE compact row */
.cart-item__quantity-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 8px !important;
}

/* Compact quantity input — show just the number, no big stepper */
.cart-item__quantity-wrapper .quantity.cart-quantity {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #f4f6f8 !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  height: 28px !important;
  min-width: unset !important;
  width: auto !important;
}

.cart-item__quantity-wrapper .quantity__button {
  width: 20px !important;
  height: 20px !important;
  min-width: unset !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: #1a2340 !important;
  cursor: pointer !important;
}

.cart-item__quantity-wrapper .quantity__input {
  width: 24px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  color: #1a2340 !important;
  -moz-appearance: textfield !important;
}

.cart-item__quantity-wrapper .quantity__input::-webkit-outer-spin-button,
.cart-item__quantity-wrapper .quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Trash icon — small, inline, no big pill button */
.cart-item__quantity-wrapper cart-remove-button,
.cart-item__quantity-wrapper .cart-remove-button {
  display: flex !important;
  align-items: center !important;
}

.cart-item__quantity-wrapper cart-remove-button button,
.cart-item__quantity-wrapper .cart-remove-button button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  min-width: unset !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  color: #8a9ab5 !important;
  cursor: pointer !important;
  transition: color 0.15s !important;
}

.cart-item__quantity-wrapper cart-remove-button button:hover,
.cart-item__quantity-wrapper .cart-remove-button button:hover {
  color: #e74c3c !important;
  background: #fff0ee !important;
}

.cart-item__quantity-wrapper cart-remove-button button svg,
.cart-item__quantity-wrapper .cart-remove-button button svg {
  width: 14px !important;
  height: 14px !important;
}

/* Variant options — separator line between each, not after last */
.cart-item .product-option {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  padding: 5px 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
  color: #5a6a85 !important;
  border-bottom: 1px solid #edf0f4 !important;
}

.cart-item .product-option:last-of-type {
  border-bottom: none !important;
}

.cart-item .product-option dt {
  font-weight: 600 !important;
  color: #1a2340 !important;
  white-space: nowrap !important;
}

.cart-item .product-option dd {
  margin: 0 !important;
  color: #5a6a85 !important;
}

/* Tighten up the overall cart item layout */
.cart-item__details {
  padding-top: 0 !important;
}

.cart-item__name {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}


/* ===== CART DRAWER — COMPACT INLINE QTY + TRASH ===== */

/* Hide original quantity column (4th td) */
.cart-item__quantity {
  display: none !important;
}

/* Hide original large trash button pill */
.cart-item__quantity-wrapper {
  display: none !important;
}

/* Compact qty+trash row inside details cell */
.cc-cart-qty-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

/* Qty stepper container */
.cc-qty-stepper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: #f0f2f5 !important;
  border-radius: 6px !important;
  padding: 2px 4px !important;
  height: 28px !important;
  gap: 2px !important;
}

/* Qty buttons */
.cc-qty-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: unset !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: #1a2340 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}

.cc-qty-btn:hover {
  background: #e0e4ea !important;
}

/* Qty number input */
.cc-qty-number {
  width: 28px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  color: #1a2340 !important;
  -moz-appearance: textfield !important;
  display: inline-block !important;
}

.cc-qty-number::-webkit-outer-spin-button,
.cc-qty-number::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Trash icon — tiny, no pill */
.cc-trash-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  min-width: unset !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  color: #9aa5b8 !important;
  cursor: pointer !important;
  transition: color 0.15s, background 0.15s !important;
  flex-shrink: 0 !important;
}

.cc-trash-btn:hover {
  color: #e74c3c !important;
  background: #fff0ee !important;
}

.cc-trash-btn svg,
.cc-trash-btn .icon {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* Variant option separator lines — LABEL + VALUE STACKED */
.cart-item .product-option {
  display: flex !important;
  flex-direction: column !important;
  padding: 5px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #edf0f4 !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.cart-item .product-option:last-of-type {
  border-bottom: none !important;
}

.cart-item .product-option dt {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #9aa5b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

.cart-item .product-option dd {
  margin: 1px 0 0 0 !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: #1a2340 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.4 !important;
}

/* Ensure the cart item details cell doesn't constrain width */
.cart-item__details {
  overflow: hidden !important;
  min-width: 0 !important;
}

.cart-item__details dl {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  margin: 4px 0 0 0 !important;
}

/* Tighten cart item name */
.cart-item__name {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 2px !important;
}

/* FAQ section — mobile padding fix */
#shopify-section-1752637107a0bb6113 {
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

@media (max-width: 749px) {
  #shopify-section-1752637107a0bb6113 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  [class*="ai-faq-section"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  [class*="ai-faq-section"] .faq-item,
  [class*="ai-faq-section"] details,
  [class*="ai-faq-section"] summary {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Compare-at price — smaller and subordinate to sale price */
.price__compare-price,
.price-item--regular,
s.price-item {
  font-size: 0.75em !important;
  font-weight: 400 !important;
  opacity: 0.55 !important;
  text-decoration: line-through !important;
}

/* Collection card compare-at price */
.card__information .price__compare-price,
.card-wrapper .price__compare-price,
.product-card .price__compare-price {
  font-size: 0.75em !important;
  font-weight: 400 !important;
  opacity: 0.55 !important;
}

/* Ensure sale price stays larger and bold */
.price-item--sale,
.price-item--sale.price-item--last {
  font-size: 1em !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Product page compare-at price */
.price--on-sale .price__compare-price {
  font-size: 0.8em !important;
  font-weight: 400 !important;
  opacity: 0.55 !important;
}

/* Remove black border from product card images */
.card--card,
.card.card--card,
.card--card .card__media,
.card--card .card__inner,
.card--card.color-accent-2 {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove the colored card border/background on collection cards */
.card.card--card.card--media {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Add minimal gap between image and product info below */
.card__media {
  margin-bottom: 8px !important;
}

.card__inner {
  border: none !important;
  box-shadow: none !important;
}

/* ── Product page: compare-at price smaller & faded ── */
.template-product .price__compare-price .price-item,
.template-product .price__compare-price .price-item--regular,
.template-product s.price-item,
.template-product s.price-item--regular,
.template-product .price--on-sale .price__compare-price .price-item {
  font-size: 0.65rem !important;
  font-weight: 400 !important;
  opacity: 0.45 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* ── Product page: remove black border & light-blue background from images ── */
.template-product .product__media-item img,
.template-product .product__media img,
.template-product .product-media-container img,
.template-product media-gallery img,
.template-product .product__media-list img,
.template-product .product__media-wrapper img {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

.template-product .product__media-item,
.template-product .product__media,
.template-product .product-media-container,
.template-product media-gallery,
.template-product .product__media-list,
.template-product .product__media-wrapper,
.template-product .product__media-list li,
.template-product .product__media-list > *,
.template-product .thumbnail-list__item {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Remove the blue/light-blue container background */
.template-product .product__media-gallery,
.template-product .product-single__media-group,
.template-product .product__column-sticky {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Specifically target the slider/carousel wrapper that shows the blue bg */
.template-product slider-component,
.template-product .slider-mobile-gutter,
.template-product .product__media-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Product page: remove border & background from .global-media-settings ── */
/* .global-media-settings in base.css adds border + background-color (light blue) */
.template-product .global-media-settings,
.template-product .product__media-item .global-media-settings,
.template-product .product__media-list .global-media-settings {
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.template-product .global-media-settings:after {
  box-shadow: none !important;
  content: none !important;
}

/* Also kill any rounded border from the media container itself */
.template-product .product__media-item > * {
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ── Mobile product page: reduce gap between image and product info ── */
@media screen and (max-width: 749px) {
  /* Remove top padding on the info wrapper - the image is directly above */
  .product__info-wrapper--top-padding {
    padding-top: 8px !important;
  }

  /* Reduce the section-level padding on mobile for product pages */
  .template-product .section-padding,
  .template-product [class*="-padding"] {
    padding-top: 0 !important;
  }

  /* The product grid itself - kill any row gap */
  .template-product .product.grid {
    gap: 0 !important;
    row-gap: 0 !important;
  }

  /* Tighten the media wrapper bottom */
  .template-product .product__media-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* The page-width section container - reduce top padding */
  .template-product.page-width,
  .template-product .page-width {
    padding-top: 0 !important;
  }
}

/* ── fitted-mono & full-4-mono: Color variant as swatches not big cards ── */
/* Target the SELECT STYLE / Color fieldset on these templates */
.template-product-fitted-mono .product-form__input--pill[data-option-name="Color"] fieldset,
.template-product-full-4-mono .product-form__input--pill[data-option-name="Color"] fieldset,
.template-product-fitted-mono .product-form__input--pill[data-option-name="Style"] fieldset,
.template-product-full-4-mono .product-form__input--pill[data-option-name="Style"] fieldset {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Hide the text label inside the color pill buttons */
.template-product-fitted-mono .product-form__input--pill[data-option-name="Color"] label,
.template-product-full-4-mono .product-form__input--pill[data-option-name="Color"] label,
.template-product-fitted-mono .product-form__input--pill[data-option-name="Style"] label,
.template-product-full-4-mono .product-form__input--pill[data-option-name="Style"] label {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  font-size: 0 !important;
  overflow: hidden !important;
  border: 2px solid #e0e0e0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
}

/* Color mappings via attribute selectors on the label text */
/* We use data-value attribute if available, otherwise target by content */
.template-product-fitted-mono label[for*="Matte-Black"],
.template-product-full-4-mono label[for*="Matte-Black"],
.template-product-fitted-mono label[for*="Matte_Black"],
.template-product-full-4-mono label[for*="Matte_Black"] {
  background-color: #2a2a2a !important;
}

.template-product-fitted-mono label[for*="Earl-Grey"],
.template-product-full-4-mono label[for*="Earl-Grey"],
.template-product-fitted-mono label[for*="Earl_Grey"],
.template-product-full-4-mono label[for*="Earl_Grey"] {
  background-color: #9e9e9e !important;
}

.template-product-fitted-mono label[for*="Beige-Khaki"],
.template-product-full-4-mono label[for*="Beige-Khaki"],
.template-product-fitted-mono label[for*="Beige_Khaki"],
.template-product-full-4-mono label[for*="Beige_Khaki"] {
  background-color: #c8b89a !important;
}

.template-product-fitted-mono label[for*="Faded-Blue"],
.template-product-full-4-mono label[for*="Faded-Blue"],
.template-product-fitted-mono label[for*="Faded_Blue"],
.template-product-full-4-mono label[for*="Faded_Blue"] {
  background-color: #7ea8c4 !important;
}

.template-product-fitted-mono label[for*="Coral-Red"],
.template-product-full-4-mono label[for*="Coral-Red"],
.template-product-fitted-mono label[for*="Coral_Red"],
.template-product-full-4-mono label[for*="Coral_Red"] {
  background-color: #e07060 !important;
}

.template-product-fitted-mono label[for*="Matcha-Green"],
.template-product-full-4-mono label[for*="Matcha-Green"],
.template-product-fitted-mono label[for*="Matcha_Green"],
.template-product-full-4-mono label[for*="Matcha_Green"] {
  background-color: #8aaa6a !important;
}

.template-product-fitted-mono label[for*="Blush-Pink"],
.template-product-full-4-mono label[for*="Blush-Pink"],
.template-product-fitted-mono label[for*="Blush_Pink"],
.template-product-full-4-mono label[for*="Blush_Pink"] {
  background-color: #e8a0b0 !important;
}

/* Selected state: dark ring */
.template-product-fitted-mono .product-form__input--pill[data-option-name="Color"] input:checked + label,
.template-product-full-4-mono .product-form__input--pill[data-option-name="Color"] input:checked + label,
.template-product-fitted-mono .product-form__input--pill[data-option-name="Style"] input:checked + label,
.template-product-full-4-mono .product-form__input--pill[data-option-name="Style"] input:checked + label {
  border: 3px solid #1a2e44 !important;
  box-shadow: 0 0 0 2px #fff inset !important;
}