/** Shopify CDN: Minification failed

Line 214:0 All "@import" rules must come first

**/
/* VELE custom enhancements: scroll reveal + gallery hover zoom */
@media (prefers-reduced-motion: no-preference) {
  .vele-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .vele-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gentle zoom on the Studio to Street gallery images */
[class*='instafeed-card-'] {
  overflow: hidden;
}
[class*='instafeed-image-'] img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[class*='instafeed-image-']:hover img {
  transform: scale(1.045);
}

/* Wishlist: keep the header heart icon, hide the floating bottom-right pill */
.st-wishlist-details-button--bottom_right {
  display: none !important;
}

/* Wishlist: match header heart icon color to the other header icons (search/account/cart) instead of the app's default red, in both the transparent-hero and solid-header states */
.st-wishlist-details-button--header-icon {
  color: inherit !important;
}
.st-wishlist-details-button--header-icon .st-wishlist-icon {
  fill: currentColor !important;
  color: inherit !important;
}

/* ============================================================
   VELE — premium cart drawer
   Quiet-luxury pass: serif accents, uppercase micro-labels,
   hairline dividers, a confident solid checkout button.
   ============================================================ */

/* Header title + count badge */
#cart-drawer #cart-drawer-heading {
  font-family: var(--font-heading--family);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1rem;
}

#cart-drawer .theme-drawer__badge {
  background-color: transparent !important;
  color: var(--color-foreground) !important;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.35);
  font-family: var(--font-body--family);
  font-size: 0.7rem;
}

/* Breathing room */
#cart-drawer .cart-drawer__items {
  padding-top: 24px;
}

/* Line items: quieter, more generous dividers */
#cart-drawer .cart-items__table-row {
  border-bottom-color: rgb(var(--color-foreground-rgb) / 0.08) !important;
  padding-bottom: 28px !important;
  margin-bottom: 28px !important;
}

/* Product image: crisp hairline edge, no heavy rounding */
#cart-drawer .cart-items__media-container {
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
}

/* Product title: quiet serif */
#cart-drawer .cart-items__title {
  font-family: var(--font-heading--family);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

/* Variant / meta text: soft uppercase */
#cart-drawer .cart-items__variants,
#cart-drawer .cart-items__variant {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.55);
}

/* Price: quiet serif emphasis */
#cart-drawer .cart-items__price {
  font-family: var(--font-heading--family);
  font-size: 0.9rem;
}

/* Remove control: quiet text link instead of a bin icon */
#cart-drawer .cart-items__remove {
  width: auto !important;
  height: auto !important;
  padding: 4px 0 !important;
}
#cart-drawer .cart-items__remove svg {
  display: none;
}
#cart-drawer .cart-items__remove .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.5);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
#cart-drawer .cart-items__remove:hover .visually-hidden {
  color: var(--color-foreground);
  text-decoration-color: currentColor;
}

/* Totals: understated label, confident serif total */
#cart-drawer .cart-totals__total-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.6);
  font-weight: 400;
}
#cart-drawer .cart-totals__total-value {
  font-family: var(--font-heading--family);
  font-weight: 400;
  letter-spacing: 0.01em;
}
#cart-drawer .cart-totals__tax-note {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

/* Discount / note accordions: quiet uppercase labels */
#cart-drawer .cart-discount__label,
#cart-drawer .cart-note__label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
}
#cart-drawer .cart-discount__input {
  border-color: rgb(var(--color-foreground-rgb) / 0.2) !important;
}
#cart-drawer .cart-discount__pill {
  background-color: transparent !important;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.2);
  letter-spacing: 0.05em;
}

/* Checkout: solid, confident, quietly luxurious */
#cart-drawer .cart__checkout-button {
  background-color: var(--color-foreground) !important;
  color: var(--color-background) !important;
  border: none !important;
  border-radius: 2px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: opacity 0.25s ease;
}
#cart-drawer .cart__checkout-button:hover {
  opacity: 0.85;
}

/* Empty state */
#cart-drawer .cart-drawer--empty #cart-drawer-heading {
  font-family: var(--font-heading--family);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-transform: none;
}
#cart-drawer .cart-items__empty-button {
  background-color: var(--color-foreground) !important;
  color: var(--color-background) !important;
  border-radius: 2px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* ============================================================
   VELE — Video Hero wordmark: Cormorant Garamond, pure white
   NOTE: Shopify renders block ids with a random per-instance
   prefix (e.g. "text-block--AbC123__text_wordmark"), so we
   match on the stable suffix via [class*=...] instead of an
   exact class name.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap');

[class*="__text_wordmark"],
[class*="__text_slogan"] {
  color: #FFFFFF !important;
}
[class*="__text_wordmark"],
[class*="__text_wordmark"] *,
[class*="__text_slogan"],
[class*="__text_slogan"] * {
  font-family: 'Cormorant Garamond', serif !important;
}

/* ============================================================
   VELE — Join The Wind: fix integrated signup button poking
   past the rounded pill border (button corner radius was too
   small relative to the container's border-radius: 40px)
   ============================================================ */
[class*="__email_signup_join"] {
  border-radius: 999px !important;
  margin: 10px !important;
}

/* ============================================================
   VELE — Video Hero wordmark: wider letter-tracking to match
   the actual VELE logo mark
   ============================================================ */
[class*="__text_wordmark"] {
  letter-spacing: 0.3em !important;
}

/* ============================================================
   VELE — Header divider: only when scrolled
   The header divider (border-bottom) should stay invisible while
   the header is floating transparently over the hero image, and
   only appear once the header goes solid/sticky on scroll.
   #header-component carries [transparent] while transparent-header
   is enabled, and [data-sticky-state] switches to 'active' once the
   solid/sticky state kicks in on scroll.
   ============================================================ */
#header-component[transparent]:not([data-sticky-state='active']) .header__row--top,
#header-component[transparent]:not([data-sticky-state='active']) .header__row--bottom {
  border-bottom-width: 0 !important;
}

/* ============================================================
   VELE — Studio to Street editorial collage: the "hero shot"
   background-image tile should read at roughly the same height
   as the two portrait photos beside it.
   NOTE: group-block wrappers get NO block-id-suffixed class (see
   snippets/group.liquid), and Shopify's block rendering may also
   insert its own wrapper elements around each block, so a direct-
   child/last-child positional selector on the flex container is
   NOT reliable. Instead we use :has() to find the one group-block
   on the page that actually contains a real background image —
   the only block on this whole template using background_media:
   image at the block (not section) level is this one.
   ============================================================ */
.group-block:has(> .group-block__media-wrapper img) {
  aspect-ratio: 4 / 5;
  min-height: 320px;
  height: auto !important;
}
@media screen and (max-width: 749px) {
  .group-block:has(> .group-block__media-wrapper img) {
    min-height: 260px;
  }
}

/* ============================================================
   VELE — Standard page content (FAQ, Shipping & Returns, Size
   Guide, Track My Order, Contact) spacing tightening.
   The theme's global .rte typography (assets/base.css) gives
   every h2–h6 a large top margin — up to clamp(1.5rem, 1em*3.3,
   2.5rem) — designed for long-form editorial content. On these
   dense, table/list-heavy policy pages it reads as an oversized
   gap after a table or list, right before the next heading.
   Scoped to .page-content (the wrapper this theme's page-content
   block renders) so it does not touch blog posts, policy pages,
   or product descriptions that also use the shared .rte styles.
   ============================================================ */
.page-content :is(h2, h3, h4, h5, h6) {
  margin-block-start: 1.25rem;
}
.page-content table {
  margin-block-end: 0.5rem;
}
.page-content :is(ul, ol) {
  margin-block-end: 0.75rem;
}

/* ============================================================
   VELE — Contact form: center the submit button.
   The button block sizes itself fit-content (see
   blocks/contact-form-submit-button.liquid), and the form's
   flex column leaves non-stretched children flush left by
   default. "__submit-button" is this block's stable JSON key
   suffix (stable, unlike the random per-instance prefix in
   front of it), and it only appears on the Contact page.
   ============================================================ */
.contact-form__form [class*="__submit-button"] {
  align-self: center;
  margin-block-start: 0.5rem;
}

/* ============================================================
   VELE — Mobile fit pass (full-site audit)
   ============================================================ */

/* Video Hero wordmark: at font-size 4.5rem plus the 0.3em extra
   letter-tracking above, "V E L E" is wide enough to wrap awkwardly
   (or crowd the section) on phone-width screens — the theme's text
   block has no per-breakpoint font-size setting to catch this.
   Scale it and the slogan below it down under the theme's 750px
   mobile breakpoint so the wordmark reads as one confident line. */
@media screen and (max-width: 749px) {
  [class*="__text_wordmark"] {
    font-size: 2.75rem !important;
    letter-spacing: 0.18em !important;
  }
  [class*="__text_slogan"] {
    font-size: 1.125rem !important;
  }
}

/* ============================================================
   VELE — Welcome popup (10% off first order)
   ============================================================ */
.welcome-popup__content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 460px;
  width: min(92vw, 460px);
  max-height: min(88vh, 640px);
  overflow-y: auto;
  padding: var(--padding-4xl, 48px) var(--padding-xl, 32px);
  background-color: var(--color-background, #F8F6F1);
  border: none;
  text-align: center;
}

.welcome-popup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
}
.welcome-popup__close svg {
  width: 13px;
  height: 13px;
}

.welcome-popup__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.6);
  margin: 0 0 12px;
}

.welcome-popup__heading {
  font-family: var(--font-heading--family);
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: 0.01em;
  margin: 0 0 16px;
}

.welcome-popup__body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgb(var(--color-foreground-rgb) / 0.75);
  margin: 0 0 28px;
}

.welcome-popup__input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.25);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 auto;
  max-width: 380px;
}

.welcome-popup__input {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  padding: 14px 20px;
  font-size: 0.9rem;
  min-width: 0;
}
.welcome-popup__input:focus {
  outline: none;
}

.welcome-popup__submit {
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  margin: 4px;
  padding: 0 22px;
  background-color: var(--color-foreground);
  color: var(--color-background);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}
.welcome-popup__submit:hover {
  opacity: 0.85;
}

.welcome-popup__error {
  margin-top: 12px;
  font-size: 0.8rem;
  color: #B3261E;
}

.welcome-popup__dismiss {
  display: block;
  margin: 20px auto 0;
  border: none;
  background: none;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-color: transparent;
  color: rgb(var(--color-foreground-rgb) / 0.55);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.welcome-popup__dismiss:hover {
  color: var(--color-foreground);
  text-decoration-color: currentColor;
}

.welcome-popup__success-heading {
  font-family: var(--font-heading--family);
  font-size: 1.5rem;
  margin: 0 0 8px;
}
.welcome-popup__success-body {
  font-size: 0.9rem;
  color: rgb(var(--color-foreground-rgb) / 0.75);
  margin: 0 0 16px;
}
.welcome-popup__code {
  display: inline-block;
  border: 1px dashed rgb(var(--color-foreground-rgb) / 0.35);
  border-radius: 4px;
  padding: 10px 24px;
  font-family: var(--font-heading--family);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  margin: 0;
}

@media screen and (max-width: 749px) {
  .welcome-popup__content {
    padding: var(--padding-3xl, 36px) var(--padding-lg, 24px);
  }
  .welcome-popup__input-group {
    flex-direction: column;
    border-radius: 16px;
  }
  .welcome-popup__submit {
    margin: 8px;
  }
}

/* ============================================================
   VELE — Cart PAGE (/cart) parity with the cart drawer
   The drawer already has a premium serif/uppercase treatment
   scoped to #cart-drawer above; the standalone cart page uses
   the exact same component classes but was never covered, so
   it fell back to plain browser styling. This mirrors it.
   ============================================================ */
.cart-page .cart-items__title {
  font-family: var(--font-heading--family);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.cart-page .cart-items__variants,
.cart-page .cart-items__variant {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.55);
}
.cart-page .cart-items__price {
  font-family: var(--font-heading--family);
  font-size: 0.95rem;
}
.cart-page .cart-items__media-container {
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
}
.cart-page .cart-items__table-row {
  border-bottom-color: rgb(var(--color-foreground-rgb) / 0.08) !important;
}
.cart-page .cart-totals__total-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.6);
  font-weight: 400;
}
.cart-page .cart-totals__total-value {
  font-family: var(--font-heading--family);
  font-weight: 400;
}
.cart-page .cart__checkout-button {
  background-color: var(--color-foreground) !important;
  color: var(--color-background) !important;
  border: none !important;
  border-radius: 2px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.cart-page .cart__checkout-button:hover {
  opacity: 0.85;
}

/* Quantity selector on the cart page + drawer: smaller, refined pill
   (was a plain 105x36px box with no radius override for the full page) */
.cart-page .quantity-selector,
#cart-drawer .quantity-selector {
  width: 84px !important;
  height: 32px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.cart-page .quantity-selector input,
#cart-drawer .quantity-selector input {
  font-size: 0.85rem !important;
}
.cart-page .quantity-selector button,
#cart-drawer .quantity-selector button {
  width: 32px !important;
}

/* ============================================================
   VELE — WISHLIST DRAWER FINAL
   (consolidated — this replaces every earlier "wishlist header"
   patch: they were five separate trial-and-error blocks stacked
   on top of each other, each overriding the last. This single
   block is the actual final result, confirmed against the live
   computed styles so nothing is lost or guessed.)
   ============================================================ */

.st-wishlist-details.st-wishlist-details--drawer {
  width: min(100%, 480px) !important;
  max-width: 480px !important;

  display: flex !important;
  flex-direction: column !important;

  background: #F8F6F1 !important;
  color: #242421 !important;
}

/* The main wishlist content comes first */
.st-wishlist-details_wrapper {
  order: 1 !important;

  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;

  background: #F8F6F1 !important;
  color: #242421 !important;
}

/* ============================================================
   LOGIN MESSAGE — MOVE TO BOTTOM
   ============================================================ */

.st-wishlist-save-your-wishlist {
  order: 2 !important;

  margin-top: auto !important;
  padding: 20px 28px !important;

  background: #F8F6F1 !important;
  color: rgb(36 36 33 / 0.68) !important;

  border-top: 1px solid rgb(36 36 33 / 0.10) !important;

  font-family: var(--font-body--family) !important;
  font-size: 0.78rem !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;

  text-align: center !important;
}

.st-wishlist-save-your-wishlist a {
  color: #242421 !important;
  font-weight: 400 !important;
  text-decoration: underline !important;
}

/* ============================================================
   HEADER — final, compact, centered, matching the cart drawer
   ============================================================ */

.st-wishlist-details_header {
  order: 1 !important;
  position: relative !important;

  height: 72px !important;
  min-height: 72px !important;
  padding: 14px 26px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  background: #F8F6F1 !important;
  border-bottom: 1px solid rgb(36 36 33 / 0.10) !important;
}

/* Wishlist title */
.st-wishlist-details_header h2,
.st-wishlist-details_header h3,
.st-wishlist-details_header [class*="title"] {
  margin: 0 !important;

  font-family: var(--font-heading--family) !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;

  color: #242421 !important;
}

/* Main close button — centered on the header, right side, like cart */
.st-wishlist-details_header button,
.st-wishlist-details_header [class*="close"] {
  position: absolute !important;

  top: 50% !important;
  right: 26px !important;
  left: auto !important;
  transform: translateY(-50%) !important;

  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;

  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #F8F6F1 !important;
  color: #242421 !important;

  border: 1px solid rgb(36 36 33 / 0.08) !important;
  border-radius: 50% !important;

  box-shadow: 0 3px 12px rgb(36 36 33 / 0.08) !important;
}

.st-wishlist-details_header button svg,
.st-wishlist-details_header [class*="close"] svg {
  width: 13px !important;
  height: 13px !important;
}

/* ============================================================
   PRODUCTS AREA
   ============================================================ */

.st-wishlist-details_main {
  order: 2 !important;

  padding: 0 28px !important;

  background: #F8F6F1 !important;
}

.st-wishlist-details_products {
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
}

/* ============================================================
   PRODUCT ROW — MATCH CART
   ============================================================ */

.st-product-card.st-product-card--drawer.st-product-card--horizontal {
  position: relative !important;

  display: grid !important;
  grid-template-columns: 100px minmax(0, 1fr) !important;

  column-gap: 18px !important;

  width: 100% !important;
  min-height: 0 !important;

  padding: 22px 0 !important;
  margin: 0 !important;

  background: transparent !important;

  border: 0 !important;
  border-bottom: 1px solid rgb(36 36 33 / 0.10) !important;

  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ============================================================
   PRODUCT IMAGE
   ============================================================ */

.st-product-card_image {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;

  width: 100px !important;
  height: 125px !important;

  margin: 0 !important;
  padding: 0 !important;
}

.st-product-card_image .st-image,
.st-product-card_image a {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
}

.st-product-card_image img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: 0 !important;
}

/* ============================================================
   PRODUCT CONTENT
   ============================================================ */

.st-product-card_form {
  grid-column: 2 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Product title */
.st-product-card_title,
.st-product-card_title a {
  margin: 0 !important;

  font-family: var(--font-heading--family) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;

  color: #242421 !important;

  text-decoration: none !important;
}

/* ============================================================
   PRICE
   ============================================================ */

.st-product-card_group--quantity {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.st-product-card_quantity {
  display: block !important;
  margin-top: 7px !important;
}

.st-product-card_price {
  margin: 0 !important;

  font-family: var(--font-heading--family) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;

  color: rgb(36 36 33 / 0.58) !important;
}

/* Hide "Free" while zero-price placeholders are being used */
.st-product-card_price.st-free-price {
  display: none !important;
}

/* ============================================================
   ADD TO CART — centered, matches cart drawer weight
   ============================================================ */

.st-product-card .st-atc-button {
  width: 180px !important;
  max-width: 100% !important;

  height: 40px !important;
  min-height: 40px !important;

  margin: 14px auto 0 !important;
  padding: 0 18px !important;

  align-self: center !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #242421 !important;
  color: #F8F6F1 !important;

  border: 1px solid #242421 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  font-family: var(--font-body--family) !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;

  letter-spacing: 0.11em !important;
  line-height: 1 !important;

  text-transform: uppercase !important;

  cursor: pointer !important;

  transition:
    background-color 180ms ease,
    color 180ms ease !important;
}

.st-product-card .st-atc-button:hover {
  background: #F8F6F1 !important;
  color: #242421 !important;
}

/* ============================================================
   REMOVE PRODUCT X
   ============================================================ */

.st-product-card_actions {
  position: absolute !important;

  top: 16px !important;
  left: 78px !important;

  z-index: 3 !important;
}

.st-product-card .st-delete-button {
  width: 30px !important;
  height: 30px !important;

  min-width: 30px !important;
  min-height: 30px !important;

  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgb(248 246 241 / 0.94) !important;

  border: 0 !important;
  border-radius: 50% !important;

  box-shadow: 0 2px 8px rgb(36 36 33 / 0.06) !important;
}

.st-product-card .st-delete-button svg {
  width: 12px !important;
  height: 12px !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

.st-wishlist-details_footer_buttons {
  order: 3 !important;

  padding: 0 28px 20px !important;

  background: #F8F6F1 !important;
}

/* ============================================================
   EMPTY WISHLIST — visual style
   ============================================================ */

.st-wishlist-details_empty {
  min-height: 360px !important;
  padding: 48px 28px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;

  background: #F8F6F1 !important;
  color: #242421 !important;
}

/* Main empty-state heading */
.st-wishlist-details_empty h1,
.st-wishlist-details_empty h2,
.st-wishlist-details_empty h3,
.st-wishlist-details_empty [class*="title"] {
  max-width: 320px !important;

  margin: 0 0 16px !important;

  font-family: var(--font-heading--family) !important;
  font-size: 1.35rem !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;

  letter-spacing: 0.01em !important;

  color: #242421 !important;
}

/* Supporting copy */
.st-wishlist-details_empty p,
.st-wishlist-details_empty [class*="description"],
.st-wishlist-details_empty [class*="subtitle"] {
  max-width: 310px !important;

  margin: 0 auto 26px !important;

  font-family: var(--font-body--family) !important;
  font-size: 0.84rem !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;

  color: rgb(36 36 33 / 0.65) !important;
}

/* Empty wishlist CTA */
.st-wishlist-details_empty a,
.st-wishlist-details_empty button {
  width: 190px !important;
  height: 42px !important;
  min-height: 42px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 auto !important;
  padding: 0 18px !important;

  background: #242421 !important;
  color: #F8F6F1 !important;

  border: 1px solid #242421 !important;
  border-radius: 0 !important;

  font-family: var(--font-body--family) !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;

  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

/* ============================================================
   VELE — Wishlist popup: fix "empty" message showing over real
   items. Confirmed live bug in the SWishlist app's own JS: it is
   not toggling .st-wishlist-details_empty off when the wishlist
   actually has products in it — both the real product card AND
   the "Love it? Add to your wishlist" empty-state block render
   at the same time. This is a bug in the app's script (SoluCommerce),
   not something editable at the source from here, but it is
   reliably fixable in CSS: hide the empty-state block whenever
   the products list actually has a child in it.
   ============================================================ */
.st-wishlist-details_main:has(.st-wishlist-details_products:not(:empty)) .st-wishlist-details_empty {
  display: none !important;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width: 749px) {

  .st-wishlist-details.st-wishlist-details--drawer {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
  }

  .st-wishlist-details_header {
    height: 64px !important;
    min-height: 64px !important;
    padding: 12px 20px !important;
  }

  .st-wishlist-details_header h2,
  .st-wishlist-details_header h3,
  .st-wishlist-details_header [class*="title"] {
    font-size: 1rem !important;
  }

  .st-wishlist-details_header button,
  .st-wishlist-details_header [class*="close"] {
    right: 20px !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .st-wishlist-details_main {
    padding-inline: 20px !important;
  }

  .st-product-card.st-product-card--drawer.st-product-card--horizontal {
    grid-template-columns: 90px minmax(0, 1fr) !important;

    column-gap: 14px !important;

    padding: 20px 0 !important;
  }

  .st-product-card_image {
    width: 90px !important;
    height: 112px !important;
  }

  .st-product-card_actions {
    top: 14px !important;
    left: 68px !important;
  }

  .st-product-card_title,
  .st-product-card_title a {
    font-size: 1rem !important;
  }

  .st-product-card .st-atc-button {
    width: 155px !important;

    height: 38px !important;
    min-height: 38px !important;

    font-size: 0.68rem !important;
  }

  .st-wishlist-save-your-wishlist {
    padding: 18px 20px !important;
  }

  .st-wishlist-details_footer_buttons {
    padding: 0 20px 18px !important;
  }
}

/* ============================================================
   VELE — CART DRAWER OVERLAY
   ============================================================ */

html {
  scrollbar-gutter: stable;
}

/* The cart dialog itself stays as a right-side drawer */
dialog.theme-drawer__dialog[open] {
  position: fixed !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;

  width: min(480px, 100vw) !important;
  max-width: 480px !important;
  height: 100dvh !important;
  max-height: 100dvh !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  transform: none !important;
  animation: none !important;

  overflow: hidden !important;

  z-index: 9999 !important;
}

/* Darken the website behind the cart */
dialog.theme-drawer__dialog[open]::backdrop {
  background: rgba(0, 0, 0, 0.42) !important;
  animation: vele-cart-backdrop-in 0.4s ease both !important;
}

/* Only the inner cart slides in */
dialog.theme-drawer__dialog[open] cart-drawer-component {
  width: 100% !important;
  height: 100% !important;

  animation: vele-cart-slide-in 0.65s
    cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* Cart can scroll internally */
dialog.theme-drawer__dialog[open] .cart-drawer__inner {
  height: 100% !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* Stop the website behind the drawer from scrolling */
html:has(dialog.theme-drawer__dialog[open]),
body:has(dialog.theme-drawer__dialog[open]) {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

@keyframes vele-cart-slide-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes vele-cart-backdrop-in {
  from {
    background: rgba(0, 0, 0, 0);
  }

  to {
    background: rgba(0, 0, 0, 0.42);
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog.theme-drawer__dialog[open] cart-drawer-component,
  dialog.theme-drawer__dialog[open]::backdrop {
    animation: none !important;
  }
}
/* ============================================================
   VELE — Wishlist header: match cart drawer
   ============================================================ */
.st-wishlist-details_title > div {
  margin: 0 !important;
  font-family: var(--font-heading--family) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #242421 !important;
}

.st-wishlist-details_header .st-close-button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}
.st-wishlist-details_header .st-close-button svg {
  width: 14px !important;
  height: 14px !important;
}

/* ============================================================
   VELE — Hide "Log in to keep your wishlist and access it
   anytime." from the small "Added to Wishlist" toast that pops
   up when clicking the heart on a product card.
   ============================================================ */
.st-product-toast_sub-message {
  display: none !important;
}
/* ============================================================
   VELE — Cart drawer: divider line under the header.
   ============================================================ */
#cart-drawer .theme-drawer__header {
  border-bottom: 1px solid rgb(36 36 33 / 0.10) !important;
}
/* ============================================================
   VELE — "Log in to save it and sync across devices."
   In the wishlist popup, right below the product list (not
   forced to the very bottom of the drawer via margin-top:auto —
   that only pushes down when there's leftover empty space below
   the content, which isn't guaranteed on every screen size).
   Scoped to the drawer only — the standalone /apps/swishlist
   page keeps its own separate styling for this same message via
   the Global Theme Settings CSS field.
   ============================================================ */
.st-wishlist-details_wrapper .st-wishlist-save-your-wishlist {
  order: 5 !important;
  padding: 20px 28px !important;
  background: #F8F6F1 !important;
  color: rgb(36 36 33 / 0.68) !important;
  border-top: 1px solid rgb(36 36 33 / 0.10) !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.78rem !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  text-align: center !important;
}
.st-wishlist-details_wrapper .st-wishlist-save-your-wishlist a {
  color: #242421 !important;
  font-weight: 400 !important;
  text-decoration: underline !important;
}
/* VELE — מונע דחיסה רגעית של אייקוני ההדר כשהעגלה נפתחת/נסגרת,
   בעיקר בולט במסכים צרים */
.page-wrapper--drawer-open {
  margin-right: 0 !important;
}