.mcc-shop-rows{--pink:#ff0a78;--teal:#08e3df;width:min(1420px,96%);margin:18px auto;display:grid;gap:12px}
.mcc-shop-row{--row-accent:var(--pink);display:grid;grid-template-columns:230px minmax(0,1fr) 250px;gap:9px;padding:10px;background:#050505;border:2px solid var(--row-accent);border-radius:8px;align-items:stretch}
.mcc-teal{--row-accent:var(--teal)}
.mcc-collection-copy{display:flex;flex-direction:column;justify-content:center;padding:8px 12px;color:#fff}
.mcc-collection-copy h3{margin:0;font-family:"Playfair Display",serif;font-size:clamp(38px,3.7vw,58px);line-height:.88;color:#fff}
.mcc-collection-copy p{margin:8px 0 14px;max-width:160px;font:500 14px/1.15 "DM Sans",sans-serif}
.mcc-outline-btn{width:max-content;min-width:165px;padding:10px 12px;border:2px solid var(--row-accent);border-radius:4px;background:#050505;color:var(--row-accent);display:flex;justify-content:space-between;gap:10px;cursor:pointer;text-transform:uppercase;font:800 11px/1 "DM Sans",sans-serif}
.mcc-product-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mcc-product-card{overflow:hidden;border-radius:5px;background:#fff;color:#111;display:flex;flex-direction:column;min-width:0}
.mcc-product-photo{width:100%;aspect-ratio:1.35/1;overflow:hidden;background:#eee}
.mcc-product-photo img{width:100%;height:100%;display:block;object-fit:cover}
.mcc-product-info{padding:7px 8px 8px;display:flex;flex-direction:column;flex:1}
.mcc-product-info h4{margin:0;font:800 12px/1.1 "DM Sans",sans-serif}
.mcc-price{margin:2px 0 7px;font:800 12px/1 "DM Sans",sans-serif}
.mcc-feature-card{position:relative;overflow:hidden;padding:0;border:0;border-radius:4px;background:#111;cursor:pointer}
.mcc-feature-card img{width:100%;height:100%;min-height:210px;object-fit:cover;display:block}
.mcc-feature-card span{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 9px;background:linear-gradient(transparent,rgba(0,0,0,.95));color:var(--row-accent);text-align:center;text-transform:uppercase;font:800 11px/1 "DM Sans",sans-serif}

/* quantity controls */
.mcc-buy-row{margin-top:auto;display:grid;grid-template-columns:74px minmax(0,1fr);gap:6px}
.mcc-qty{min-height:31px;border:1px solid #d5d5d5;border-radius:3px;background:#f4f4f4;display:grid;grid-template-columns:22px 1fr 22px;align-items:center;overflow:hidden}
.mcc-qty-btn{height:100%;border:0;background:#e9e9e9;color:#111;cursor:pointer;font-size:16px;font-weight:800}
.mcc-qty-value{text-align:center;font:800 11px/1 "DM Sans",sans-serif;color:#111}
.mcc-add-btn{margin:0;width:100%;min-height:31px;padding:7px 8px;border:0;border-radius:3px;background:#050505;color:#fff;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font:800 9px/1 "DM Sans",sans-serif;text-transform:uppercase}
.mcc-add-btn i{color:var(--row-accent)}
.mcc-add-btn.added{background:var(--row-accent);color:#050505}

/* expanded collection */
.mcc-expander{--panel-accent:#ff0a78;position:relative;padding:26px;margin:-2px 0 12px;border:2px solid var(--panel-accent);border-radius:10px;background:#070707;color:#fff;box-shadow:0 18px 45px rgba(0,0,0,.45)}
.mcc-expander[data-expanded-collection="dresses"]{--panel-accent:#08e3df}
.mcc-expander[hidden]{display:none}
.mcc-expander h3{margin:0 55px 22px 0;font-family:"Playfair Display",serif;font-size:clamp(34px,4vw,52px)}
.mcc-close{position:absolute;top:14px;right:18px;width:42px;height:42px;border:1px solid var(--panel-accent);border-radius:50%;background:#050505;color:var(--panel-accent);font-size:30px;cursor:pointer}
.mcc-expanded-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}

/* header cart */
.cart-button{position:relative}
#cart-count{display:grid!important;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#ff0a78;color:#fff;font:800 11px/1 "DM Sans",sans-serif;transition:.18s ease}
#cart-count.mcc-count-pop{transform:scale(1.5);box-shadow:0 0 20px rgba(255,10,120,.8)}
.cart-button.mcc-has-items{animation:mccBagNudge .35s ease}
@keyframes mccBagNudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}65%{transform:translateX(4px)}}

/* cart drawer */
#cart-drawer{position:fixed!important;z-index:100001!important;top:0!important;right:0!important;width:min(430px,92vw)!important;height:100dvh!important;background:#090909!important;color:#fff!important;transform:translateX(105%)!important;transition:transform .28s ease!important;overflow-y:auto!important;box-shadow:-18px 0 55px rgba(0,0,0,.55)!important}
#cart-drawer.mcc-open{transform:translateX(0)!important}
#drawer-backdrop{position:fixed!important;z-index:100000!important;inset:0!important;background:rgba(0,0,0,.62)!important;opacity:0!important;visibility:hidden!important;transition:.25s ease!important}
#drawer-backdrop.mcc-open{opacity:1!important;visibility:visible!important}
body.mcc-cart-open{overflow:hidden}
.mcc-cart-item{display:grid;grid-template-columns:72px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);align-items:center}
.mcc-cart-item-img{width:72px;height:72px;object-fit:cover;border-radius:7px;background:#fff}
.mcc-cart-item-copy>strong{display:block;margin-bottom:3px;font-size:13px}
.mcc-cart-item-copy>span{color:#bbb;font-size:12px}
.mcc-cart-item-controls{margin-top:8px;display:flex;align-items:center;gap:6px}
.mcc-cart-item-controls button{min-width:26px;height:26px;border:1px solid rgba(255,255,255,.2);border-radius:4px;background:#151515;color:#fff;cursor:pointer}
.mcc-cart-item-controls .mcc-cart-remove{width:auto;padding:0 7px;border-color:#ff0a78;color:#ff0a78;font-size:10px}
.mcc-cart-line-total{font-size:12px;color:#ff0a78}

/* toast */
.mcc-cart-toast{position:fixed;z-index:100002;top:88px;right:24px;width:min(360px,calc(100vw - 30px));padding:14px 16px;border:1px solid #ff0a78;border-radius:10px;background:#050505;color:#fff;display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(-12px);pointer-events:none;transition:.22s ease;box-shadow:0 16px 45px rgba(0,0,0,.5)}
.mcc-cart-toast.show{opacity:1;transform:translateY(0)}
.mcc-cart-toast-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#ff0a78}
.mcc-cart-toast-copy strong{display:block;color:#ff0a78;text-transform:uppercase;font-size:12px}
.mcc-cart-toast-copy span{display:block;margin-top:3px;font-size:12px}

@media(max-width:1200px){.mcc-shop-row{grid-template-columns:200px minmax(0,1fr) 210px}.mcc-product-track{grid-template-columns:repeat(4,170px);overflow-x:auto}.mcc-expanded-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:860px){.mcc-shop-row{grid-template-columns:1fr}.mcc-product-track{grid-template-columns:repeat(4,165px);overflow-x:auto}.mcc-expanded-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ==========================================
   SHOP SECTION HEADING
   ========================================== */

.shop-section {
  padding-top: 55px;
}

.shop-heading {
  text-align: center;
  margin: 0 auto 28px;
}

.shop-heading .section-kicker {
  margin-bottom: 4px;
  color: #08e3df;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.shop-heading h2 {
  margin: 0;
  color: #ffffff;
  font-family: "Playfair Display", serif;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1;
}

.shop-heading h2::first-letter {
  /* intentionally inherits white */
}

.shop-heading-copy {
  max-width: 600px;
  margin: 12px auto 0;
  color: #bdbdbd;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   JADORE — COMPACT SHOWCASE ROWS
   Match No Shade + Curves in Color closer to Lash Out height
   ========================================================= */

.mcc-shop-row[data-category-row="sunglasses"],
.mcc-shop-row[data-category-row="dresses"] {
  min-height: 0 !important;
  height: 330px !important;
  padding: 12px 18px !important;
  gap: 18px !important;
}

/* LEFT COLLECTION COLUMN */
.mcc-shop-row[data-category-row="sunglasses"] .mcc-collection-copy,
.mcc-shop-row[data-category-row="dresses"] .mcc-collection-copy {
  padding: 10px 4px !important;
}

.mcc-shop-row[data-category-row="sunglasses"] .mcc-collection-copy h3,
.mcc-shop-row[data-category-row="dresses"] .mcc-collection-copy h3 {
  font-size: clamp(42px, 4vw, 62px) !important;
  line-height: .82 !important;
  margin-bottom: 12px !important;
}

.mcc-shop-row[data-category-row="sunglasses"] .mcc-collection-copy p,
.mcc-shop-row[data-category-row="dresses"] .mcc-collection-copy p {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

/* MAIN SHOWCASE */
.mcc-showcase-card {
  min-height: 0 !important;
  height: 304px !important;
  grid-template-columns: minmax(300px, 1.3fr) minmax(245px, .9fr) !important;
  gap: 22px !important;
}

/* PRODUCT IMAGE */
.mcc-showcase-card .mcc-product-photo {
  min-height: 0 !important;
  height: 304px !important;
}

.mcc-showcase-card .mcc-product-photo img {
  min-height: 0 !important;
  height: 304px !important;
}

/* RIGHT PRODUCT DETAILS */
.mcc-showcase-card .mcc-product-info {
  padding: 4px 0 !important;
}

.mcc-showcase-card .mcc-product-info h4 {
  font-size: clamp(25px, 2.2vw, 34px) !important;
}

.mcc-showcase-card .mcc-price {
  margin: 5px 0 9px !important;
  font-size: 21px !important;
}

.mcc-showcase-rule {
  margin-bottom: 9px !important;
}

/* DROPDOWNS */
.mcc-options {
  gap: 6px !important;
}

.mcc-option-label {
  gap: 4px !important;
  font-size: 10px !important;
}

.mcc-option-select {
  min-height: 36px !important;
  height: 36px !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
}

/* COLOR SWATCHES */
.mcc-variant-swatches {
  gap: 6px !important;
  margin-top: 7px !important;
}

.mcc-swatch {
  width: 38px !important;
  height: 38px !important;
}

/* SIZE CHART */
.mcc-size-chart-btn {
  font-size: 10px !important;
}

.mcc-size-chart {
  margin-top: 2px !important;
  padding: 6px 10px !important;
}

.mcc-size-chart-grid {
  gap: 3px 12px !important;
  font-size: 9px !important;
}

/* QUANTITY + ADD TO CART */
.mcc-showcase-card .mcc-buy-row {
  margin-top: 8px !important;
  gap: 8px !important;
}

.mcc-showcase-card .mcc-add-btn {
  min-height: 38px !important;
  height: 38px !important;
}

/* LEFT BUTTON + HANDWRITTEN COPY */
.mcc-shop-row[data-category-row="sunglasses"] .mcc-outline-btn,
.mcc-shop-row[data-category-row="dresses"] .mcc-outline-btn {
  margin-top: 12px !important;
}

.mcc-showcase-note {
  margin-top: 16px !important;
  font-size: 15px !important;
}

/* =========================================================
   JADORE — SHOWCASE FINAL CLEANUP
   ========================================================= */

/* ---------------------------------------------------------
   1. REMOVE EXTRA HANDWRITTEN TAGLINES
   --------------------------------------------------------- */

.mcc-shop-row[data-category-row="sunglasses"] .mcc-showcase-note,
.mcc-shop-row[data-category-row="dresses"] .mcc-showcase-note {
  display: none !important;
}


/* ---------------------------------------------------------
   2. CURVES IN COLOR — JUST A LITTLE SMALLER
   --------------------------------------------------------- */

.mcc-shop-row[data-category-row="dresses"] .mcc-collection-copy h3 {
  font-size: clamp(40px, 3.8vw, 59px) !important;
}


/* ---------------------------------------------------------
   3. SHOW THE ENTIRE DRESS — NO CROPPING
   --------------------------------------------------------- */

.mcc-showcase-card[data-product-card="mones-maxis"] .mcc-product-photo {
  background: #f4f4f4 !important;
}

.mcc-showcase-card[data-product-card="mones-maxis"] .mcc-product-photo img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
}


/* ---------------------------------------------------------
   4. GIVE PRODUCT CONTROLS MORE ROOM
   --------------------------------------------------------- */

.mcc-showcase-card {
  grid-template-columns:
    minmax(280px, 1.18fr)
    minmax(300px, 1fr) !important;

  gap: 18px !important;
}


/* ---------------------------------------------------------
   5. KEEP EVERYTHING INSIDE RIGHT COLUMN
   --------------------------------------------------------- */

.mcc-showcase-card .mcc-product-info {
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden;
  padding-right: 8px !important;
}


/* ---------------------------------------------------------
   6. TIGHTEN BUY ROW
   --------------------------------------------------------- */

.mcc-showcase-card .mcc-buy-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 7px !important;
}

.mcc-showcase-card .mcc-qty {
  flex: 0 0 auto !important;
}

.mcc-showcase-card .mcc-add-btn {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 180px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
}


/* ---------------------------------------------------------
   7. KEEP COLOR SWATCHES COMPACT
   --------------------------------------------------------- */

.mcc-showcase-card .mcc-variant-swatches {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  width: 100% !important;
  overflow: visible !important;
}

.mcc-showcase-card .mcc-swatch {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
}


/* ---------------------------------------------------------
   8. DRESS CONTROLS EXTRA-COMPACT
   --------------------------------------------------------- */

.mcc-shop-row[data-category-row="dresses"] .mcc-options {
  gap: 5px !important;
}

.mcc-shop-row[data-category-row="dresses"] .mcc-option-select {
  height: 34px !important;
  min-height: 34px !important;
}

.mcc-shop-row[data-category-row="dresses"] .mcc-size-chart-btn {
  margin-top: 0 !important;
}
/* =========================================================
   JADORE — SHOWCASE HEIGHT / SIZE CHART FIX
   KEEP THIS AT THE VERY BOTTOM
   ========================================================= */

/* Let both showcase rows size naturally */
.mcc-shop-row[data-category-row="sunglasses"],
.mcc-shop-row[data-category-row="dresses"] {
  height: auto !important;
  min-height: 330px !important;
}

/* Let the showcase card grow with its controls */
.mcc-showcase-card {
  height: auto !important;
  min-height: 304px !important;
}

/* Keep the PHOTO at the compact size */
.mcc-showcase-card .mcc-product-photo {
  height: 304px !important;
  min-height: 304px !important;
  align-self: start !important;
}

.mcc-showcase-card .mcc-product-photo img {
  height: 304px !important;
  min-height: 304px !important;
}

/* Right column is now allowed to grow */
.mcc-showcase-card .mcc-product-info {
  height: auto !important;
  min-height: 304px !important;
  overflow: visible !important;
  align-self: start !important;
}

/* Dress image still shows the WHOLE dress */
.mcc-showcase-card[data-product-card="mones-maxis"]
.mcc-product-photo img {
  object-fit: contain !important;
  object-position: center !important;
}

/* ---------------------------------------------------------
   SIZE CHART CLOSED
   --------------------------------------------------------- */

.mcc-size-chart[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------
   SIZE CHART OPEN
   Give ONLY the dress row extra breathing room
   --------------------------------------------------------- */

.mcc-shop-row[data-category-row="dresses"]:has(
  .mcc-size-chart:not([hidden])
) {
  min-height: 370px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.mcc-shop-row[data-category-row="dresses"]:has(
  .mcc-size-chart:not([hidden])
) .mcc-showcase-card {
  min-height: 344px !important;
}

/* Make sure the buttons never get clipped */
.mcc-shop-row[data-category-row="dresses"] .mcc-buy-row {
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: 4px !important;
  overflow: visible !important;
}

/* =========================================================
   JADORE — FINAL MOBILE SHOP SHOWCASE FIX
   Stack No Shade + Mone's Maxi's vertically on phones.
   Lash Out is intentionally untouched.
   ========================================================= */
@media (max-width: 860px) {
  .mcc-shop-rows {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
  }

  .mcc-shop-row[data-category-row="sunglasses"],
  .mcc-shop-row[data-category-row="dresses"] {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px !important;
    gap: 20px !important;
    overflow: hidden !important;
  }

  .mcc-shop-row[data-category-row="sunglasses"] .mcc-collection-copy,
  .mcc-shop-row[data-category-row="dresses"] .mcc-collection-copy {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 4px !important;
  }

  .mcc-shop-row[data-category-row="sunglasses"] .mcc-collection-copy h3,
  .mcc-shop-row[data-category-row="dresses"] .mcc-collection-copy h3 {
    font-size: clamp(42px, 13vw, 58px) !important;
    line-height: .88 !important;
  }

  .mcc-shop-row[data-category-row="sunglasses"] .mcc-collection-copy p,
  .mcc-shop-row[data-category-row="dresses"] .mcc-collection-copy p {
    max-width: 290px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .mcc-shop-row[data-category-row="sunglasses"] .mcc-outline-btn,
  .mcc-shop-row[data-category-row="dresses"] .mcc-outline-btn {
    width: min(100%, 310px) !important;
    min-width: 0 !important;
    padding: 14px 18px !important;
  }

  /* Kill the desktop split-card layout that was pushing details off-screen. */
  .mcc-shop-row[data-category-row="sunglasses"] .mcc-showcase-card,
  .mcc-shop-row[data-category-row="dresses"] .mcc-showcase-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  .mcc-shop-row[data-category-row="sunglasses"] .mcc-showcase-card .mcc-product-photo,
  .mcc-shop-row[data-category-row="dresses"] .mcc-showcase-card .mcc-product-photo {
    width: 100% !important;
    height: clamp(260px, 82vw, 430px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    align-self: auto !important;
  }

  .mcc-shop-row[data-category-row="sunglasses"] .mcc-showcase-card .mcc-product-photo img,
  .mcc-shop-row[data-category-row="dresses"] .mcc-showcase-card .mcc-product-photo img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-position: center !important;
  }

  .mcc-shop-row[data-category-row="sunglasses"] .mcc-showcase-card .mcc-product-photo img {
    object-fit: contain !important;
  }

  .mcc-shop-row[data-category-row="dresses"] .mcc-showcase-card .mcc-product-photo img {
    object-fit: contain !important;
  }

  .mcc-shop-row[data-category-row="sunglasses"] .mcc-showcase-card .mcc-product-info,
  .mcc-shop-row[data-category-row="dresses"] .mcc-showcase-card .mcc-product-info {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 4px 4px !important;
    overflow: visible !important;
  }

  .mcc-showcase-card .mcc-product-info h4 {
    font-size: clamp(24px, 8vw, 32px) !important;
  }

  .mcc-showcase-card .mcc-price {
    font-size: 20px !important;
  }

  .mcc-showcase-card .mcc-options,
  .mcc-showcase-card .mcc-option-label,
  .mcc-showcase-card .mcc-option-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .mcc-showcase-card .mcc-variant-swatches {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .mcc-showcase-card .mcc-buy-row {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .mcc-showcase-card .mcc-qty {
    width: 92px !important;
    max-width: 92px !important;
  }

  .mcc-showcase-card .mcc-add-btn {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 7px 10px !important;
  }

  /* An opened dress size chart may grow naturally instead of clipping. */
  .mcc-shop-row[data-category-row="dresses"]:has(.mcc-size-chart:not([hidden])),
  .mcc-shop-row[data-category-row="dresses"]:has(.mcc-size-chart:not([hidden])) .mcc-showcase-card {
    min-height: 0 !important;
    height: auto !important;
  }
}

@media (max-width: 430px) {
  .mcc-shop-rows {
    width: calc(100% - 18px) !important;
  }

  .mcc-shop-row[data-category-row="sunglasses"],
  .mcc-shop-row[data-category-row="dresses"] {
    padding: 14px !important;
  }

  .mcc-showcase-card .mcc-buy-row {
    grid-template-columns: 86px minmax(0, 1fr) !important;
  }

  .mcc-showcase-card .mcc-qty {
    width: 86px !important;
  }
}