/* The parts of Shopyflow's stylesheet the Webflow markup relies on */

/* First item of a list is the template; the cart script clones it */
[sf-cart-item]:first-of-type,
[sf-discount-code-item]:first-of-type,
[sf-hide] {
  display: none !important;
}

[sf-cart-empty],
body[_sf-logged-out] [sf-logout] {
  display: none;
}

/* Closed cart drawer stays transparent (Webflow CSS) but must not catch clicks */
.cart-popup:not(.sf-cart-opened) {
  pointer-events: none;
}

/* Buy once / rent to own: slim segmented toggle above the product page buttons (src/lib/webflow.ts
   planPicker); the note below shows the checked option's terms */
.mf-plans { width: 100%; margin-top: 1rem; }
.mf-plan-options { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--black, #000); }
.mf-plan {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0;
  padding: 11px 14px 10px; cursor: pointer; font-family: var(--arlo-sans); font-size: 1rem; line-height: 1.2rem; color: #000;
  transition: background-color .2s ease, color .2s ease;
}
.mf-plan + .mf-plan { border-left: 1px solid var(--black, #000); }
.mf-plan:hover { background: rgba(0, 0, 0, .06); }
.mf-plan:has(input:checked) { background: var(--black, #000); color: var(--white, #fff); }
.mf-plan:has(input:focus-visible) { outline: 2px solid var(--black, #000); outline-offset: 2px; }
.mf-plan input { position: absolute; opacity: 0; pointer-events: none; }
.mf-plan-price { font-weight: 500; white-space: nowrap; }
.mf-plan-interval { font-weight: 400; font-size: .85rem; opacity: .75; }
.mf-plan-note { display: none; margin: 8px 0 0; font-family: var(--arlo-sans); font-size: .9rem; line-height: 1.3rem; color: rgba(0, 0, 0, .7); }
.mf-plans:has(.mf-plan:nth-child(1) input:checked) .mf-plan-note:nth-of-type(1),
.mf-plans:has(.mf-plan:nth-child(2) input:checked) .mf-plan-note:nth-of-type(2),
.mf-plans:has(.mf-plan:nth-child(3) input:checked) .mf-plan-note:nth-of-type(3) { display: block; }
@media screen and (max-width: 479px) { .mf-plan { flex-direction: column; gap: 2px; } }

/* Rent to own note under a cart line (src/scripts/cart.ts render) */
.cart-item-plan { font-family: var(--arlo-sans); font-size: .85rem; line-height: 1.15rem; color: rgba(0, 0, 0, .65); margin-top: 4px; }

/* Products the logged-in customer owns (src/scripts/owned.ts): badge, faded artwork, download button.
   What they don't own keeps full colour and the hover glow, so it stands out. */
.listview-image-wrapper { position: relative; }
.mf-owned-badge {
  position: absolute; top: 16px; left: 16px; z-index: 3; padding: 7px 11px 5px;
  background: var(--black, #000); color: var(--white, #fff); font-family: var(--zigzag); font-size: 0.8rem;
  line-height: 1; letter-spacing: 0.02em; text-decoration: none; border: 1px solid var(--black, #000);
}
a.mf-owned-badge { cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
a.mf-owned-badge::after { content: " \2192"; }
a.mf-owned-badge:hover { background: var(--white, #fff); color: var(--black, #000); }
span.mf-owned-badge { pointer-events: none; }
.mf-partly-owned .mf-owned-badge { background: var(--white, #fff); color: var(--black, #000); box-shadow: inset 0 0 0 1px var(--black, #000); }
.mf-owned .listview-image { opacity: 0.55; filter: grayscale(0.5); transition: opacity 0.3s ease, filter 0.3s ease; }
/* Hover: only a hint (stays clearly faded, unlike the full-colour cards for things not owned yet) */
.mf-owned:hover .listview-image { opacity: 0.62; filter: grayscale(0.45); }
.product-list-item.mf-owned::before { display: none; }
.mf-owned .listview-producttitle { opacity: 0.7; }

/* Cursor label over owned cards (src/scripts/owned.ts) */
.mf-cursor-label {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; padding: 6px 10px 4px;
  background: var(--black, #000); color: var(--white, #fff); font-family: var(--zigzag); font-size: 0.8rem;
  line-height: 1; opacity: 0; transition: opacity 0.15s ease;
}
.mf-cursor-label.is-visible { opacity: 1; }

/* Product page note for a bundle the customer partly owns */
.mf-partly-note { width: 100%; margin: 0.75rem 0 0; font-family: var(--arlo-sans); font-size: 0.95rem; line-height: 1.3rem; color: rgba(0, 0, 0, 0.75); }

/* Bundle the customer partly owns: the longer "Buy remaining N for $X" gets the full width (the two
   buttons stack instead of sitting side by side) and stays on one line */
.add-to-cart-wrapper:has([data-mf-remaining]) { flex-direction: column; align-items: stretch; }
.add-to-cart-wrapper:has([data-mf-remaining]) > * { flex: none; width: 100%; }
[data-mf-remaining] { white-space: nowrap; }