/* clone-overrides.css — static-render fixes for Shopify Horizon custom elements that need JS to
   upgrade (Shadow DOM). Without their JS, light-DOM children fall back to default block layout.
   These rules reproduce the live horizontal layout so the static clone matches the origin baseline.
   (Behavioural JS is re-added as vanilla in js/site.js after the static gate is green.) */

/* ---- Header primary menu: <overflow-list class="overflow-menu"> ---------------------------- */
/* Live site upgrades this custom element (shadow <ul.menu-list__list> flex). Static fallback -> force row. */
overflow-list.overflow-menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--gap-xl, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
overflow-list.overflow-menu > .menu-list__list-item {
  display: flex;
  align-items: center;
  list-style: none;
  white-space: nowrap;
}
/* dropdown submenus are closed by default on a static page */
overflow-list.overflow-menu .menu-list__submenu { display: none; }
/* the overflow "More" clone item only appears when items don't fit; all fit at 1440 -> hide */
overflow-list.overflow-menu .menu-list__list-item[slot="overflow"] { display: none; }

/* ---- Product variant swatches: <overflow-list> inside .variant-option--swatches ------------- */
.variant-option--swatches overflow-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm, .5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.variant-option--swatches overflow-list > li { display: flex; list-style: none; }

/* ---- Generic: any other un-upgraded <overflow-list> that holds <li> -> inline row ----------- */
overflow-list:not(.overflow-menu):not([ref="overflowMenu"]) > li { list-style: none; }


/* ---- Shop Pay widgets reproduced static (instalments text + Buy-with-shop button) ------------- */
.shop-terms { font-size: 14px; line-height: 1.5; color: #4a4a52; text-align: right; margin: 6px 0 0; }
.shop-terms strong { font-weight: 700; color: #1a1a1a; }
.shop-wm { color: #5a31f4; font-weight: 700; font-style: italic; letter-spacing: -.3px; }
.shop-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  border: 1px solid #9a9aa2; border-radius: 50%; font-size: 10px; color: #6a6a72; vertical-align: middle; }
.shop-pay-btn { display: flex; align-items: center; justify-content: center; width: 100%;
  background: #5a31f4; color: #fff; border: 0; border-radius: 8px; height: 48px; margin-top: 12px;
  font-size: 16px; font-weight: 500; cursor: pointer; gap: 5px; font-family: inherit; }
.shop-wm-light { font-weight: 700; font-style: italic; letter-spacing: -.3px; }

.installments { display: block !important; }

/* ---- Related-products card media: force render (origin uses content-visibility + JS slideshow) ---- */
slideshow-slide, .product-media-container { content-visibility: visible !important; }
slideshow-slide[hidden] { display: none !important; }

/* ---- Collection facets bar: force horizontal row (accordion-custom needs JS to upgrade) ---------- */
.facets--horizontal .facets__filters-wrapper { max-width: none !important; width: auto !important;
  flex-wrap: nowrap !important; column-gap: var(--gap-xl, 2rem) !important; }
.facets--horizontal accordion-custom.facets__item { display: inline-block !important; width: auto !important; }
.facets--horizontal .facets__form-wrapper { align-items: center; }

/* ---- Local cart drawer: top-align content + add-to-cart badge bump animation ---- */
.cart-drawer__dialog[open] { display: flex; flex-direction: column; }
.cart-drawer__dialog[open] .cart-drawer__inner, .cart-drawer__dialog[open] .cart-drawer__content { display: flex !important; flex-direction: column; justify-content: flex-start !important; height: 100%; }
.cart-drawer__dialog[open] .cart-drawer__heading { margin: 0 0 8px !important; text-align: left !important; justify-content: flex-start !important; width:100%; }
.cart-drawer__items { flex: 0 0 auto; }
.cart-drawer__local-footer { margin-top: auto; }
.cart-count-badge.bump { animation: cartBump .45s ease; }
@keyframes cartBump { 0%{transform:scale(1)} 30%{transform:scale(1.5)} 60%{transform:scale(.9)} 100%{transform:scale(1)} }
button[name="add"].added, button[ref="addToCartButton"].added { animation: addPulse .4s ease; }
@keyframes addPulse { 0%{transform:scale(1)} 50%{transform:scale(.96)} 100%{transform:scale(1)} }

/* ---- Cart drawer: kill horizontal scroll, keep everything within width ---- */
.cart-drawer__dialog[open] { overflow-x: hidden; }
.cart-drawer__dialog[open] .cart-drawer__inner,
.cart-drawer__dialog[open] .cart-drawer__content,
.cart-drawer__items, .cart-drawer__local-footer { overflow-x: hidden; max-width: 100%; box-sizing: border-box; }
.cart-drawer__items *, .cart-drawer__local-footer * { box-sizing: border-box; max-width: 100%; }
.cart-drawer__local-footer input { min-width: 0; }

/* ---- cart badge bump on the theme's own .cart-bubble + items scroll (not footer) ---- */
.cart-bubble.bump { animation: cartBump .45s ease; }
.cart-drawer__dialog[open] .cart-drawer__items { flex: 1 1 auto; overflow-y: auto; }
.cart-drawer__local-footer { flex: 0 0 auto; overflow: visible; }


/* ---- Cart drawer: match the original'''s clean, consistent block spacing ---- */
.cart-drawer__dialog[open] .cart-drawer__content { padding-inline: var(--padding-xl, 28px); }
.cart-drawer__dialog[open] .cart-drawer__heading { padding-inline: 0 !important; margin-top: 4px !important; }
.cart-drawer__items { padding-inline: 0 !important; }
.cart-drawer__local-footer { padding-inline: var(--padding-xl, 28px) !important; }
.cart-drawer__dialog[open] .cart-drawer__items { padding-block: 4px 0; }