/* Additions for the Stripe-backed store. Everything else uses the site's own Webflow styles. */
html.sf-cart-open { overflow: hidden; }

/* Order page: Webflow's layout stays hidden until cart.js has filled it in. */
.sf-loading { visibility: hidden; }
/* Expired / not-found message: the order area is a grid; span all of it. */
.order-confirmation .sf-order-message { grid-column: 1 / -1; }

/* Order page fade-up, matching the site's Webflow interaction. Heading and order
   start hidden from first paint, so the transition has a real starting point. */
.div-block-10:has(+ .order-confirmation), .order-confirmation, .sf-fade-up { opacity: 0; transform: translate3d(0, 20px, 0); }
.sf-fade-up { transition: opacity 1s cubic-bezier(.42, 0, .58, 1) .1s, transform 1s cubic-bezier(.42, 0, .58, 1) .1s; }
.div-block-10.sf-fade-up.sf-in, .sf-fade-up.sf-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sf-fade-up { transition: none; } }
.sf-order-status { padding: 24px 0; opacity: .7; }


/* Free downloads (Trial Fonts, Voyager): after the email is sent, the files replace the button. */
.sf-trial-form .w-input[readonly] { background: transparent; cursor: default; }
.sf-trial-done .sf-trial-download { display: inline-block; text-decoration: none; }
.sf-trial-done .sf-trial-download + .sf-trial-download { margin-left: 8px; }
.sf-gap-above { margin-top: 24px; }

/* Order page Downloads block: an even 16px between every line and row
   (block's top line, rows, invoice divider, bottom line). Buttons keep their size. */
.w-commerce-commercedownloadslist .download-item { margin-top: 16px; margin-bottom: 16px; }
.block-content-12 { padding-top: 0; padding-bottom: 0; }
.sf-invoice-sep { margin: 16px 0; }
/* Same width for "Download" and "View" so their edges line up. */
.download-item .button-small.downloads { min-width: 112px; box-sizing: border-box; text-align: center; }
/* Order page: each item's price with its Download button(s) under it, on the right. */
/* Same 20px under it as the item image has, so a tall price + button column
   (narrow screens) doesn't sit on the divider. */
.sf-item-side { margin-left: auto; margin-bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; align-self: flex-start; gap: 16px; flex: none; }
.sf-item-side .button-small.downloads { min-width: 112px; height: auto; flex: none; box-sizing: border-box; text-align: center; }
/* Order page: plain underlined text link under the heading. */
.sf-home { display: inline-block; margin-top: 8px; margin-bottom: 32px; font-size: 14px; line-height: 22px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Order page: "Items in order" sits in the main column under the customer
   (and payment) block, whose closing divider already opens it, so drop its
   own opening divider. The Invoice block heads the right-hand column. */
.order-confirmation .order-items-2 > .separator:first-child { display: none; }
/* Webflow stacks the order page below 992px; the last item's divider then
   already opens the Invoice block, so drop its own and the extra padding. */
@media screen and (max-width: 991px) {
  .order-confirmation .order-summary-wrap { padding-top: 0; }
  .order-confirmation .order-summary-wrap .w-commerce-commercedownloadswrapper > .separator:first-child { display: none; }
}

/* Cart remove (X): Webflow offset the icon with its own margins and gave it
   cursor:auto, so the pointer showed on a strip beside the icon, not on it.
   Move the offset to the link so link and icon are the same 24px box, in the
   same place. */
.remove-button { align-self: flex-start; margin-left: 12px; margin-top: -3px; cursor: pointer; }
.remove-button .image-7 { display: block; margin: 0; cursor: pointer; }

/* Webflow hid product images on phones (cart under 768px, order page under 480px).
   Keep them, smaller. */
@media screen and (max-width: 767px) {
  .cart-product-image { display: block; width: 72px; height: auto; margin-right: 12px; flex: none; }
}
@media screen and (max-width: 479px) {
  .item-image { display: block; width: 72px; min-width: 72px; height: auto; align-self: flex-start; margin-right: 12px; }
  .sf-item-side { gap: 12px; }
}

/* Order page options set like the cart's: 12px caps, label black, value light grey. */
.order-confirmation .option-list-3 { margin: 8px 0 0; padding: 0; list-style: none; }
.order-confirmation .option-list-3 li { margin: 0; font-size: 12px; line-height: 24px; font-weight: 400; letter-spacing: .1px; text-transform: uppercase; color: #000; }
.order-confirmation .option-list-3 li span:last-child { color: #bbb; }
.order-confirmation .w-commerce-commercecheckoutorderitemquantitywrapper { text-transform: uppercase; }

/* Page headings for search engines and screen readers on pages without a visible title. */
.sf-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Keyboard focus: a clear ring for keyboard users only (mouse clicks don't show it).
   Webflow removed the outline on some controls (e.g. the licence dropdowns). */
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible,
input[type="submit"]:focus-visible, input[type="range"]:focus-visible, input[type="checkbox"]:focus-visible,
[role="button"]:focus-visible, [role="combobox"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid #18181d !important; outline-offset: 2px;
}
.sf-skip { position: absolute; left: 16px; top: -100px; z-index: 10000; padding: 12px 16px; background: #000; color: #fff;
  font-size: 14px; line-height: 22px; border-radius: 6px; text-decoration: none; }
.sf-skip:focus { top: 16px; }
#sf-main:focus { outline: none; }

/* People who ask their device to reduce motion get no fade/slide-in animations. */
@media (prefers-reduced-motion: reduce) {
  [data-w-id] { opacity: 1 !important; transform: none !important; }
  .div-block-10:has(+ .order-confirmation), .order-confirmation, .sf-fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Footer links: 24px-tall tap targets (WCAG 2.5.8) without moving anything. */
.footer1-link { display: inline-block; padding: 2px 0; margin: -2px 0; }
.link-11, .link-12 { display: inline-block; padding: 4px 0; margin: -4px 0; } /* licence switcher links */