/* VeraGloss Aurora v1.0.244 — category-style product-image zoom.
   The photo (not the card, frame, wishlist, button or text) scales within the
   clipped square viewport, including AJAX-loaded catalog cards and carousel cards.
   Uses the same easing/duration as the Shop by Category mosaic. */
body ul.products li.product.vg-product-card .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail):not(.vg-card-photo-outgoing) {
  transform: scale(1.003) !important;
  transform-origin: center center !important;
  transition: transform .7s cubic-bezier(.16,1,.3,1) !important;
  backface-visibility: hidden;
}
/* Only real hover-capable pointers receive persistent zoom, avoiding sticky
   hover on touch devices. Keep page-transition snapshots motion-free. */
@media (hover:hover) and (pointer:fine) {
  body ul.products li.product.vg-product-card:not(.vg-product-opening):not(.vg-product-motion-surface):hover .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail):not(.vg-card-photo-outgoing),
  body ul.products li.product.vg-product-card:not(.vg-product-opening):not(.vg-product-motion-surface):has(:focus-visible) .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail):not(.vg-card-photo-outgoing) {
    transform: scale(1.055) !important;
  }
}
/* Physical touch only: JS adds the class on press and holds it briefly after
   release. Do not tie this to :active, which disappears on a fast tap; the
   class also supports hybrid devices that report hover:hover. */
body ul.products li.product.vg-product-card.vg-photo-pressed:not(.vg-product-opening):not(.vg-product-motion-surface) .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail):not(.vg-card-photo-outgoing) {
  transform: scale(1.05) !important;
  transition-duration: .30s !important;
  transition-timing-function: cubic-bezier(.22,1,.36,1) !important;
}
/* The product open/return animation controls its own image geometry. */
html[data-vg-product-motion] body ul.products li.product.vg-product-card .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail):not(.vg-card-photo-outgoing) {
  transform: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion:reduce) {
  html body ul.products li.product.vg-product-card .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail):not(.vg-card-photo-outgoing),
  html body ul.products li.product.vg-product-card:not(.vg-product-opening):not(.vg-product-motion-surface):is(:hover,:focus-within,:active,.vg-photo-pressed) .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail):not(.vg-card-photo-outgoing) {
    transform: none !important;
    transition: none !important;
  }
}

/* VeraGloss Aurora v1.0.253: ensure the Best Sellers card perimeter is
   visibly warm taupe on desktop. The inset outline follows the existing 1px
   border without affecting layout or interfering with the navy hover glow. */
@media (min-width:761px){
  body.home .aurora-section.aurora-soft .aurora-product-carousel
  ul.products li.product.vg-product-card:not(:hover):not(:has(:focus-visible)):not(:active):not(.vg-card-touched){
    border:1px solid #BBAA94!important;
    outline:1px solid #BBAA94!important;
    outline-offset:-1px!important;
  }
}

/* Aurora v1.0.254 — clear mobile touch feedback on the two homepage
   product carousels. No (hover:none) gate: hybrid mobile WebViews can report
   hover:hover even for physical touchscreen taps. The touch listener owns the
   active class and removes it after a different tap, scroll, or 3 seconds. */
@media (max-width:760px) {
  body.home .aurora-product-carousel ul.products li.product.vg-product-card.vg-home-touch-glow,
  body.home .aurora-auto-carousel ul.products li.product.vg-product-card.vg-home-touch-glow {
    border:1px solid #172D38!important;
    outline:1px solid #172D38!important;
    outline-offset:-1px!important;
    box-shadow:inset 0 0 0 1px rgba(23,45,56,.36),
               0 5px 14px rgba(23,45,56,.18),
               0 0 0 2px rgba(23,45,56,.34),
               0 0 12px rgba(23,45,56,.36)!important;
    z-index:3!important;
    transition:border-color .08s ease, box-shadow .12s ease!important;
  }
  body.home .aurora-product-carousel ul.products li.product.vg-product-card.vg-home-touch-glow::after,
  body.home .aurora-auto-carousel ul.products li.product.vg-product-card.vg-home-touch-glow::after {
    opacity:1!important;
    border-color:#172D38!important;
    box-shadow:inset 0 0 0 1px rgba(23,45,56,.25)!important;
  }
  /* Reset touch-only glow explicitly, including on sticky-hover WebViews. */
  body.home .aurora-product-carousel ul.products li.product.vg-product-card:not(.vg-home-touch-glow):not(:focus-visible):not(.vg-card-touched),
  body.home .aurora-auto-carousel ul.products li.product.vg-product-card:not(.vg-home-touch-glow):not(:focus-visible):not(.vg-card-touched) {
    border:1px solid #C9BBA7!important;
    outline:none!important;
    box-shadow:0 3px 10px rgba(23,45,56,.045)!important;
  }
  body.home .aurora-product-carousel ul.products li.product.vg-product-card:not(.vg-home-touch-glow):not(:focus-visible):not(.vg-card-touched)::after,
  body.home .aurora-auto-carousel ul.products li.product.vg-product-card:not(.vg-home-touch-glow):not(:focus-visible):not(.vg-card-touched)::after {
    opacity:0!important;
    border-color:transparent!important;
    box-shadow:none!important;
  }
}

/* v1.0.269 — one touch-feedback state: avoid a second inherited card lift.
   Homepage glow holds 3 seconds and catalogue glow 850ms; photo zoom remains
   paired with the corresponding navy outline until both fade together. */
@media (max-width:760px) {
  body ul.products li.product.vg-product-card.vg-card-touched,
  body.home .aurora-product-carousel ul.products li.product.vg-product-card.vg-home-touch-glow,
  body.home .aurora-auto-carousel ul.products li.product.vg-product-card.vg-home-touch-glow {
    transform:none!important;
  }
  /* Touch browsers may retain :hover after release: the explicit card class,
     not an emulated hover state, controls the navy outline. */
  @media (hover:none) {
    body ul.products li.product.vg-product-card:not(.vg-card-touched):not(.vg-home-touch-glow):hover:not(:focus-visible),
    body ul.products li.product.vg-product-card:not(.vg-card-touched):not(.vg-home-touch-glow):active:not(:focus-visible){
      transform:none!important;
    }
  }
}
/* Physical-touch browsers can keep :hover/:focus-within latched after a tap.
   Return grid cards to their normal border when the single controller expires;
   retain a visible outline for genuine keyboard focus-visible. */
@media (hover:none) and (max-width:1024px) {
  body ul.products li.product.vg-product-card.vg-card-touched:not(.vg-home-touch-glow) {
    border-color:#172D38!important;
    box-shadow:0 5px 14px rgba(23,45,56,.14),0 0 0 2px rgba(23,45,56,.20)!important;
  }
  body ul.products li.product.vg-product-card:not(.vg-card-touched):not(.vg-home-touch-glow):not(.vg-product-opening):not(.vg-product-motion-surface):not(:has(:focus-visible)) {
    border-color:var(--line)!important;
    box-shadow:0 5px 18px rgba(23,45,56,.045)!important;
  }
  body ul.products li.product.vg-product-card:not(.vg-card-touched):not(.vg-home-touch-glow):not(.vg-product-opening):not(.vg-product-motion-surface):not(:has(:focus-visible))::after {
    opacity:0!important;
    border-color:transparent!important;
    box-shadow:none!important;
  }
}

/* v1.0.268 — deterministic first-touch outline. On a touch or hybrid
   viewport, stale :hover/:focus-within styles must never keep the previous
   product selected. Real :focus-visible keyboard navigation is preserved. */
@media (max-width:760px) {
  html.vg-touch-card-mode body ul.products li.product.vg-product-card.vg-card-touched,
  html.vg-touch-card-mode body.home .aurora-product-carousel ul.products li.product.vg-product-card.vg-home-touch-glow,
  html.vg-touch-card-mode body.home .aurora-auto-carousel ul.products li.product.vg-product-card.vg-home-touch-glow {
    border-color:#172D38!important;
    outline:1px solid #172D38!important;
    outline-offset:-1px!important;
    box-shadow:inset 0 0 0 1px rgba(23,45,56,.25),
               0 5px 14px rgba(23,45,56,.18),
               0 0 0 2px rgba(23,45,56,.34),
               0 0 12px rgba(23,45,56,.32)!important;
    transform:none!important;
    transition:border-color .06s ease,box-shadow .08s ease!important;
    z-index:3!important;
  }
  html.vg-touch-card-mode body ul.products li.product.vg-product-card:is(.vg-card-touched,.vg-home-touch-glow)::after {
    opacity:1!important;
    border-color:#172D38!important;
    transition:opacity .08s ease,border-color .08s ease!important;
  }
  html.vg-touch-card-mode body ul.products li.product.vg-product-card:not(.vg-card-touched):not(.vg-home-touch-glow):not(:has(:focus-visible)) {
    border-color:var(--line,#E7E0D4)!important;
    outline:none!important;
    box-shadow:0 5px 18px rgba(23,45,56,.045)!important;
    transform:none!important;
    z-index:auto!important;
  }
  html.vg-touch-card-mode body.home :is(.aurora-product-carousel,.aurora-auto-carousel) ul.products li.product.vg-product-card:not(.vg-card-touched):not(.vg-home-touch-glow):not(:has(:focus-visible)) {
    border-color:#C9BBA7!important;
    box-shadow:0 3px 10px rgba(23,45,56,.045)!important;
  }
  html.vg-touch-card-mode body ul.products li.product.vg-product-card:not(.vg-card-touched):not(.vg-home-touch-glow):not(:has(:focus-visible))::after {
    opacity:0!important;
    border-color:transparent!important;
    box-shadow:none!important;
  }
}

/* v1.0.269 — synchronize navy-glow fade and image zoom-out for touch.
   Exiting the state takes .7s (matching the existing photo zoom-out easing).
   Entrance retains the fast navy response from v1.0.268. A sticky hybrid
   :hover must not keep the photo magnified after its touch state expires. */
html.vg-touch-card-mode body ul.products li.product.vg-product-card:not(.vg-photo-pressed):not(.vg-product-opening):not(.vg-product-motion-surface):not(:has(:focus-visible))
  .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail):not(.vg-card-photo-outgoing) {
  transform:scale(1.003)!important;
}
@media (max-width:760px) {
  html.vg-touch-card-mode body ul.products li.product.vg-product-card:not(.vg-card-touched):not(.vg-home-touch-glow):not(:has(:focus-visible)) {
    outline:1px solid transparent!important;
    outline-offset:-1px!important;
    /* Use compatible four-layer shadows so the navy halo interpolates rather
       than snapping off when its first (inset) layer disappears. */
    box-shadow:inset 0 0 0 1px rgba(23,45,56,0),
               0 5px 18px rgba(23,45,56,.045),
               0 0 0 2px rgba(23,45,56,0),
               0 0 12px rgba(23,45,56,0)!important;
    transition:border-color .7s cubic-bezier(.16,1,.3,1),
               outline-color .7s cubic-bezier(.16,1,.3,1),
               box-shadow .7s cubic-bezier(.16,1,.3,1)!important;
  }
  html.vg-touch-card-mode body.home :is(.aurora-product-carousel,.aurora-auto-carousel) ul.products li.product.vg-product-card:not(.vg-card-touched):not(.vg-home-touch-glow):not(:has(:focus-visible)) {
    box-shadow:inset 0 0 0 1px rgba(23,45,56,0),
               0 3px 10px rgba(23,45,56,.045),
               0 0 0 2px rgba(23,45,56,0),
               0 0 12px rgba(23,45,56,0)!important;
  }
  html.vg-touch-card-mode body ul.products li.product.vg-product-card:not(.vg-card-touched):not(.vg-home-touch-glow):not(:has(:focus-visible))::after {
    transition:opacity .7s cubic-bezier(.16,1,.3,1),
               border-color .7s cubic-bezier(.16,1,.3,1),
               box-shadow .7s cubic-bezier(.16,1,.3,1)!important;
  }
}
@media (prefers-reduced-motion:reduce) {
  html.vg-touch-card-mode body ul.products li.product.vg-product-card:not(.vg-photo-pressed):not(.vg-product-opening):not(.vg-product-motion-surface):not(:has(:focus-visible))
    .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail):not(.vg-card-photo-outgoing) {
    transform:none!important;
    transition:none!important;
  }
  html.vg-touch-card-mode body ul.products li.product.vg-product-card:is(.vg-card-touched,.vg-home-touch-glow),
  html.vg-touch-card-mode body ul.products li.product.vg-product-card:is(.vg-card-touched,.vg-home-touch-glow)::after,
  html.vg-touch-card-mode body ul.products li.product.vg-product-card:not(.vg-card-touched):not(.vg-home-touch-glow),
  html.vg-touch-card-mode body ul.products li.product.vg-product-card:not(.vg-card-touched):not(.vg-home-touch-glow)::after {
    transition:none!important;
  }
}

/* v1.0.392 — simple-product vertical preview reveal.
   Non-variation product cards now swap gallery photo #2 from bottom-to-top
   instead of right-to-left. Reversing the preview naturally hides the image
   in the opposite direction. Variable-product transitions are unchanged. */
/* v1.0.355 — ivory-backed silk reveal for transparent product photos.
   Plain opacity blending leaks the previous product through clear PNG pixels.
   A fully opaque stage matching the gallery background and an eased moving
   clipping boundary reveal one photo at a time, without double exposure.
   No changes to variable-product animation, image geometry, or gestures. */
body ul.products li.product.vg-product-card[data-vg-card-gallery] .vg-card-photo-frame > img.vg-lux-preview-layer{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  z-index:2!important;
  width:100%!important;
  height:100%!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  background:var(--ivory,#F7F4EE)!important;
  /* Always isolate clear pixels of the alternate PNG from the primary photo. */
  -webkit-clip-path:inset(100% 0 0 0);
  clip-path:inset(100% 0 0 0);
  transform:scale(1.003)!important;
  transform-origin:center center!important;
  transition:clip-path 500ms cubic-bezier(.16,1,.3,1),transform 700ms cubic-bezier(.16,1,.3,1)!important;
  backface-visibility:hidden;
}
body ul.products li.product.vg-product-card[data-vg-card-gallery] .vg-card-photo-frame > img.vg-lux-preview-layer.is-visible{
  -webkit-clip-path:inset(0 0 0 0);
  clip-path:inset(0 0 0 0);
}
@media (hover:hover) and (pointer:fine){
  body ul.products li.product.vg-product-card[data-vg-card-gallery]:not(.vg-product-opening):not(.vg-product-motion-surface):is(:hover,:has(:focus-visible)) .vg-card-photo-frame > img.vg-lux-preview-layer{
    transform:scale(1.055)!important;
  }
}
body ul.products li.product.vg-product-card[data-vg-card-gallery].vg-photo-pressed:not(.vg-product-opening):not(.vg-product-motion-surface) .vg-card-photo-frame > img.vg-lux-preview-layer{
  transform:scale(1.05)!important;
}
html[data-vg-product-motion] body ul.products li.product.vg-product-card[data-vg-card-gallery] .vg-card-photo-frame > img.vg-lux-preview-layer{
  transform:none!important;
  transition:none!important;
}
@media (prefers-reduced-motion:reduce){
  body ul.products li.product.vg-product-card[data-vg-card-gallery] .vg-card-photo-frame > img.vg-lux-preview-layer{
    transition:none!important;
    will-change:auto;
    transform:none!important;
  }
}

/* v1.0.357 — real-touch hit testing for simple-product photo preview.
   style.css sets pointer-events:none on ALL card photo viewports to protect
   variable-product transitions. That inherited value prevented pointerup,
   click and long-press handlers attached by card-variations.js from ever
   receiving mobile touches. Desktop card hover still worked, masking the bug.
   Restore hit testing only on simple cards with 2+ WooCommerce gallery images.
   The frame decorations and silk-reveal layer remain non-interactive. */
body ul.products li.product.vg-product-card[data-vg-card-gallery] .vg-card-photo-viewport.vg-card-photo-frame {
  pointer-events:auto!important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
body ul.products li.product.vg-product-card[data-vg-card-gallery] .vg-card-photo-frame > img.vg-lux-preview-layer {
  pointer-events:none!important;
}


/* v1.0.360 — restore the premium card hover/touch lift and navy glow
   that were disabled in v1.0.359. Keep the title color from 1.0.359.
   The product photo stays independently controlled by the gallery preview. */
html body ul.products li.product.vg-product-card[data-vg-card-gallery]:not([data-vg-card-variations]):not(.vg-product-opening):not(.vg-product-motion-surface) .woocommerce-loop-product__title {
  color:var(--ink,#172D38)!important;
}
/* The second PNG was missing the original photo's inner-frame padding,
   making its content draw across the thin sage/gold frame line. The overlay
   needs identical padded containment while retaining its opaque ivory backing
   so two transparent product photos never show through one another. */
html body ul.products li.product.vg-product-card[data-vg-card-gallery]:not([data-vg-card-variations]) .vg-card-photo-frame > img.vg-lux-preview-layer {
  box-sizing:border-box!important;
  padding:calc(var(--vg-photo-frame-inset, 12px) + 8px)!important;
  aspect-ratio:1 / 1!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}
/* Keep previews physically clipped to the existing square stage; the
   decorative ::after outline is layered above both photos. */
html body ul.products li.product.vg-product-card[data-vg-card-gallery]:not([data-vg-card-variations]) .vg-card-photo-viewport.vg-card-photo-frame {
  overflow:hidden!important;
  isolation:isolate;
}

/* Phone-specific density CSS has a high-specificity 11px image-padding rule.
   Reinstate identical, safe insets for both primary and secondary images on
   simple-product cards only, so the photo zoom cannot cross the outline. */
@media (max-width:760px){
  html body :is(.aurora-product-carousel,.aurora-auto-carousel,.vg-all-products-grid,#vg-shop-products)
    ul.products li.product.vg-product-card[data-vg-card-gallery]:not([data-vg-card-variations])
    .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail,.vg-card-photo-outgoing) {
    padding:calc(var(--vg-photo-frame-inset, 8px) + 8px)!important;
  }
}

/* v1.0.361 — SIMPLE PRODUCT: only the photo zone controls photo zoom.
   Card hover still owns its independent navy glow, lift and wishlist effects.
   Variation previews retain all previous CSS. */
@media (hover:hover) and (pointer:fine) {
  html body ul.products li.product.vg-product-card[data-vg-card-gallery]:not([data-vg-card-variations]):not(.vg-product-opening):not(.vg-product-motion-surface)
  .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail):not(.vg-card-photo-outgoing) {
    transform:scale(1.003)!important;
  }
  html body ul.products li.product.vg-product-card[data-vg-card-gallery]:not([data-vg-card-variations]):not(.vg-product-opening):not(.vg-product-motion-surface)
  .vg-card-photo-frame:is(:hover,:focus-visible) > img:is(.wp-post-image,.attachment-woocommerce_thumbnail):not(.vg-card-photo-outgoing) {
    transform:scale(1.055)!important;
  }
  html body ul.products li.product.vg-product-card[data-vg-card-gallery]:not([data-vg-card-variations]):not(.vg-product-opening):not(.vg-product-motion-surface)
  .vg-card-photo-frame > img.vg-lux-preview-layer {
    transform:scale(1.003)!important;
  }
  html body ul.products li.product.vg-product-card[data-vg-card-gallery]:not([data-vg-card-variations]):not(.vg-product-opening):not(.vg-product-motion-surface)
  .vg-card-photo-frame:is(:hover,:focus-visible) > img.vg-lux-preview-layer {
    transform:scale(1.055)!important;
  }
}

/* v1.0.362 — fixed, always-taupe INNER photo frame for simple products.
   The outer li.product is deliberately NOT selected: its premium lift and
   navy halo on hover/touch remain separate. Lock the inner decorative border
   during first/second picture, reveal clipping, focus, and carousel clones.
   Variable product frames are unchanged. */
html body ul.products li.product.vg-product-card[data-vg-card-gallery]:not([data-vg-card-variations])
.vg-card-photo-frame::before,
html body ul.products li.product.vg-product-card[data-vg-card-gallery]:not([data-vg-card-variations])
.vg-card-photo-frame::after {
  border-style:solid!important;
  border-width:1px!important;
  border-color:#E7E0D4!important;
  transition-property:none!important;
}
html body ul.products li.product.vg-product-card[data-vg-card-gallery]:not([data-vg-card-variations])
.vg-card-photo-frame::after {
  /* Stationary matte line; don't let glowing-card rules recolor the ring. */
  box-shadow:0 0 0 3px var(--ivory,#F7F4EE),0 0 0 4px #E7E0D4!important;
}
html body ul.products li.product.vg-product-card[data-vg-card-gallery]:not([data-vg-card-variations])
> .vg-card-media {
  border-bottom-color:#E7E0D4!important;
}


/* v1.0.363 — badges deliberately INSET from the stationary photo-frame line.
 * The border itself is NOT changed; badges are positioned 8px inward from
 * --vg-card-frame-inset on both phone and desktop, including carousel clones.
 * Applies to all card product types; no single-product/gallery rules touched.
 */
html body ul.products li.product.vg-product-card .onsale,
html body :is(.aurora-product-carousel,.aurora-auto-carousel,.vg-all-products-grid,#vg-shop-products) ul.products li.product.vg-product-card .onsale {
  top:calc(var(--vg-card-frame-inset, 10px) + 8px)!important;
  left:calc(var(--vg-card-frame-inset, 10px) + 8px)!important;
}
html body ul.products li.product.vg-product-card > .vg-wishlist,
html body :is(.aurora-product-carousel,.aurora-auto-carousel,.vg-all-products-grid,#vg-shop-products) ul.products li.product.vg-product-card > .vg-wishlist {
  top:calc(var(--vg-card-frame-inset, 10px) + 8px)!important;
  right:calc(var(--vg-card-frame-inset, 10px) + 8px)!important;
  transition:opacity .22s ease,visibility .22s ease,
    transform .22s cubic-bezier(.22,.8,.22,1),
    color .22s ease,background-color .22s ease,
    border-color .22s ease,box-shadow .22s ease!important;
  -webkit-tap-highlight-color:transparent;
}
/* Color-feedback only when the user directly hovers the heart, not the card. */
@media (hover:hover) and (pointer:fine) {
  html body ul.products li.product.vg-product-card > .vg-wishlist:hover:not(.active) {
    color:#916D35!important;
    background:#FFF7E8!important;
    border-color:#B59A67!important;
    box-shadow:0 3px 10px rgba(181,154,103,.2)!important;
    transform:translateY(-1px)!important;
  }
  html body ul.products li.product.vg-product-card > .vg-wishlist.active:hover {
    color:#78582B!important;
    background:#F6E8CD!important;
    border-color:#B59A67!important;
    box-shadow:0 3px 10px rgba(181,154,103,.24)!important;
  }
}
/* 'Saved' is an explicit visual state, not just a hover color.
 * Existing wishlist JS already persists/toggles .active and aria-pressed. */
html body ul.products li.product.vg-product-card > .vg-wishlist.active {
  color:#916D35!important;
  background:#FFF4DB!important;
  border-color:#B59A67!important;
  box-shadow:0 2px 8px rgba(181,154,103,.16)!important;
}
html body ul.products li.product.vg-product-card > .vg-wishlist.active::before {
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.8 4.6a5.4 5.4 0 0 0-7.6 0L12 5.8l-1.2-1.2a5.4 5.4 0 0 0-7.6 7.6L12 21l8.8-8.8a5.4 5.4 0 0 0 0-7.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.8 4.6a5.4 5.4 0 0 0-7.6 0L12 5.8l-1.2-1.2a5.4 5.4 0 0 0-7.6 7.6L12 21l8.8-8.8a5.4 5.4 0 0 0 0-7.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* A keyboard-only ring remains visible independently of the photo border. */
html body ul.products li.product.vg-product-card > .vg-wishlist:focus-visible {
  outline:2px solid #B59A67!important;
  outline-offset:2px!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
/* Active favorites remain identifiable even before moving a mouse over card. */
@media (min-width:701px) and (hover:hover) and (pointer:fine) {
  html body ul.products li.product.vg-product-card > .vg-wishlist.active {
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }
}
/* Touch feedback is not a sticky :hover; selected state survives release. */
html body ul.products li.product.vg-product-card > .vg-wishlist:active {
  color:#78582B!important;
  border-color:#B59A67!important;
  background:#F6E8CD!important;
}
@media (prefers-reduced-motion:reduce) {
  html body ul.products li.product.vg-product-card > .vg-wishlist {
    transition:none!important;
  }
}

/* v1.0.364: VARIABLE-CARD IMAGE TRANSITION ONLY.
   Full opaque stage snapshot underneath the wipe protects transparent PNGs.
   Scoped to the transient layer; no card, badge, wishlist or simple-photo rules. */
body ul.products li.product.vg-product-card[data-vg-card-variations] .vg-card-photo-viewport > .vg-variation-silk-outgoing {
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  box-sizing:border-box;
  pointer-events:none;
  isolation:isolate;
  background:var(--vg-card-photo,var(--sand,#E7E0D4));
  clip-path:inset(0 0 0 0);
}
body ul.products li.product.vg-product-card[data-vg-card-variations] .vg-card-photo-viewport > .vg-variation-silk-outgoing::before {
  content:'';
  position:absolute;
  inset:var(--vg-card-frame-inset,10px);
  z-index:0;
  border:1px solid rgba(247,244,238,.8);
  border-radius:3px;
  background:linear-gradient(145deg,var(--ivory) 0%,var(--vg-card-circle-top,var(--ivory)) 48%,var(--vg-card-circle-bottom,var(--sand)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -16px 24px rgba(83,109,96,.065);
  pointer-events:none;
}
body ul.products li.product.vg-product-card[data-vg-card-variations] .vg-variation-silk-outgoing > .vg-variation-silk-old-image {
  display:block;
  pointer-events:none;
}


/* v1.0.365 — STAGING. Keep the THICK photo-frame ring a single, immutable
   #E7E0D4 taupe on the first photo, alternate photo, during carousel reveals,
   mouse hover, keyboard focus, and physical touch. The old 3px ivory +
   4px taupe double-ring looked like a color/weight change depending on the
   photo underneath. Both frame pseudo-layers now share the same geometry.
   Outer LI card navy halo is intentionally untouched. */
html body ul.products li.product.vg-product-card .vg-card-photo-frame::before,
html body ul.products li.product.vg-product-card .vg-card-photo-frame::after {
  inset:var(--vg-photo-frame-inset,12px)!important;
  border:1px solid #E7E0D4!important;
  border-radius:3px!important;
  transition:none!important;
}
html body ul.products li.product.vg-product-card .vg-card-photo-frame::after,
html body ul.products li.product.vg-product-card[data-vg-card-gallery]:not([data-vg-card-variations]) .vg-card-photo-frame::after {
  background:transparent!important;
  box-shadow:0 0 0 3px #E7E0D4!important;
}
html body ul.products li.product.vg-product-card > .vg-card-media {
  border-bottom-color:#E7E0D4!important;
}

/* Sale badge is intentionally closer to the stationary inner frame: 4 CSS px
   INSIDE its 12px desktop / 8px phone inset. This does not move the wishlist.
   Existing gold/ivory brand styles and accessible hit targets are preserved. */
html body ul.products li.product.vg-product-card .onsale,
html body :is(.aurora-product-carousel,.aurora-auto-carousel,.vg-all-products-grid,#vg-shop-products) ul.products li.product.vg-product-card .onsale {
  top:16px!important;
  left:16px!important;
  padding:3px 5px!important;
}
@media(max-width:760px){
  html body ul.products li.product.vg-product-card .onsale,
  html body :is(.aurora-product-carousel,.aurora-auto-carousel,.vg-all-products-grid,#vg-shop-products) ul.products li.product.vg-product-card .onsale {
    top:12px!important;
    left:12px!important;
    padding:2px 4px!important;
  }
}


/* v1.0.366 — STAGING ONLY: Champagne Stone frame / stable transparent stage.
   The product card image backdrop is soft taupe (#E7E0D4), but the transparent
   simple-image overlay in v1.0.355 was opaque IVORY (#F7F4EE). When the image
   changed it recolored the OUTER gutter of the thick photo ring. Keep the
   fixed stage, inner backdrop and transient variation snapshot aligned.
   Only photo-stage colors and frame decoration are modified here.
   Card lift, navy halo, card/badge geometry and gallery timings are unchanged. */
html body ul.products li.product.vg-product-card {
  --vg-luxe-photo-ring:#D2C1A4; /* Champagne Stone, between taupe and brand gold */
  --vg-luxe-photo-stage:#E7E0D4;
}
/* Preserve one identical color behind the ring during every frame of preview.
   No hover/focus/touch selector should alter this solid outer photo stage. */
html body ul.products li.product.vg-product-card > .vg-card-media,
html body ul.products li.product.vg-product-card .vg-card-photo-viewport.vg-card-photo-frame,
html body ul.products li.product.vg-product-card[data-vg-card-variations] .vg-card-photo-viewport > .vg-variation-silk-outgoing {
  background-color:var(--vg-luxe-photo-stage,#E7E0D4)!important;
}
/* Champagne-Stone ring: thick outer 3px halo and fine inner 1px stroke have
   identical color, position and width at rest, hover and during transitions. */
html body ul.products li.product.vg-product-card .vg-card-photo-frame::before,
html body ul.products li.product.vg-product-card .vg-card-photo-frame::after {
  inset:var(--vg-photo-frame-inset,12px)!important;
  border:1px solid var(--vg-luxe-photo-ring,#D2C1A4)!important;
  border-radius:3px!important;
  transition:none!important;
}
html body ul.products li.product.vg-product-card .vg-card-photo-frame::after,
html body :is(.aurora-product-carousel,.aurora-auto-carousel,.vg-all-products-grid,#vg-shop-products) ul.products li.product.vg-product-card .vg-card-photo-frame::after {
  background:transparent!important;
  box-shadow:0 0 0 3px var(--vg-luxe-photo-ring,#D2C1A4)!important;
  border-color:var(--vg-luxe-photo-ring,#D2C1A4)!important;
}
/* The previous release included an ID-weight :is(...) selector for the thick
   ring. Match that specificity so the new champagne color wins in both grids. */
html body :is(.aurora-product-carousel,.aurora-auto-carousel,.vg-all-products-grid,#vg-shop-products) ul.products li.product.vg-product-card .vg-card-photo-frame::before,
html body :is(.aurora-product-carousel,.aurora-auto-carousel,.vg-all-products-grid,#vg-shop-products) ul.products li.product.vg-product-card .vg-card-photo-frame::after {
  border-color:var(--vg-luxe-photo-ring,#D2C1A4)!important;
}
/* Keep the old full-opaque reveal needed for TRANSPARENT PNGs, but match both
   regions of the normal photo stage: solid taupe exterior + inset gradient.
   Transparent pixels therefore never reveal the previous product, while the
   surrounding gutter remains visually identical in first/second photo. */
html body ul.products li.product.vg-product-card[data-vg-card-gallery] .vg-card-photo-frame > img.vg-lux-preview-layer {
  background-color:var(--vg-luxe-photo-stage,#E7E0D4)!important;
  background-image:linear-gradient(145deg,var(--vg-card-circle-top,var(--ivory,#F7F4EE)),var(--vg-card-circle-bottom,var(--sand,#E7E0D4)))!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:calc(100% - var(--vg-photo-frame-inset,12px) - var(--vg-photo-frame-inset,12px)) calc(100% - var(--vg-photo-frame-inset,12px) - var(--vg-photo-frame-inset,12px))!important;
}
/* Variable-card outgoing photo snapshot reproduces the same stationary inner
   panel geometry as the underlying frame, preventing a different backdrop
   from flashing during its 720ms masked reveal. */
html body ul.products li.product.vg-product-card[data-vg-card-variations] .vg-card-photo-viewport > .vg-variation-silk-outgoing::before {
  inset:var(--vg-photo-frame-inset,12px)!important;
  border-color:var(--vg-luxe-photo-ring,#D2C1A4)!important;
  background:linear-gradient(145deg,var(--vg-card-circle-top,var(--ivory,#F7F4EE)),var(--vg-card-circle-bottom,var(--sand,#E7E0D4)))!important;
}

/* v1.0.367 — Thin Champagne frame + stationary transparent image backing.
   Retain the 1px (#D2C1A4) premium outline and REMOVE the 3px solid halo:
   that halo made a 4px-wide rim which looked like an unwanted thick border.
   The main photo frame stays in the same place and outer-card navy hover glow
   is deliberately not modified. Only the image-area pseudo-elements change. */
html body ul.products li.product.vg-product-card .vg-card-photo-frame::before,
html body :is(.aurora-product-carousel,.aurora-auto-carousel,.vg-all-products-grid,#vg-shop-products) ul.products li.product.vg-product-card .vg-card-photo-frame::before {
  border:0!important;
  box-shadow:none!important;
  inset:var(--vg-photo-frame-inset,12px)!important;
  transition:none!important;
}
html body ul.products li.product.vg-product-card .vg-card-photo-frame::after,
html body :is(.aurora-product-carousel,.aurora-auto-carousel,.vg-all-products-grid,#vg-shop-products) ul.products li.product.vg-product-card .vg-card-photo-frame::after {
  inset:var(--vg-photo-frame-inset,12px)!important;
  border:1px solid var(--vg-luxe-photo-ring,#D2C1A4)!important;
  border-radius:3px!important;
  box-shadow:none!important;
  background:transparent!important;
  transition:none!important;
}
/* The transparent PNG is revealed with an opaque backing. Previously the
   preview <img> itself zoomed to 105.5%, carrying its BACKGROUND with it.
   This visibly dragged the inner cream gradient across the fixed 1px frame.
   Keep that preview stage stationary; the 500ms clip-path reveal continues.
   Source photos, touch handlers, carousel clock and variable-image swipe are
   not changed. Match the original ::before gradient stops exactly. */
html body ul.products li.product.vg-product-card[data-vg-card-gallery] .vg-card-photo-frame > img.vg-lux-preview-layer {
  background-color:var(--vg-luxe-photo-stage,#E7E0D4)!important;
  background-image:linear-gradient(145deg,var(--vg-card-circle-top,var(--ivory,#F7F4EE)),var(--vg-card-circle-bottom,var(--sand,#E7E0D4)))!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:calc(100% - var(--vg-photo-frame-inset,12px) - var(--vg-photo-frame-inset,12px)) calc(100% - var(--vg-photo-frame-inset,12px) - var(--vg-photo-frame-inset,12px))!important;
  transform:none!important;
  transition:clip-path 500ms cubic-bezier(.16,1,.3,1)!important;
}
@media (hover:hover) and (pointer:fine){
  html body ul.products li.product.vg-product-card[data-vg-card-gallery]:not(.vg-product-opening):not(.vg-product-motion-surface):is(:hover,:has(:focus-visible)) .vg-card-photo-frame > img.vg-lux-preview-layer,
  html body ul.products li.product.vg-product-card[data-vg-card-gallery]:not([data-vg-card-variations]):not(.vg-product-opening):not(.vg-product-motion-surface) .vg-card-photo-frame:is(:hover,:focus-visible) > img.vg-lux-preview-layer {
    transform:none!important;
  }
}
html body ul.products li.product.vg-product-card[data-vg-card-gallery].vg-photo-pressed:not(.vg-product-opening):not(.vg-product-motion-surface) .vg-card-photo-frame > img.vg-lux-preview-layer {
  transform:none!important;
}
@media (prefers-reduced-motion:reduce) {
  html body ul.products li.product.vg-product-card[data-vg-card-gallery] .vg-card-photo-frame > img.vg-lux-preview-layer {
    transition:none!important;
  }
}


/* v1.0.404-rc2 — Keep zoomed product artwork inside the INNER photo outline.
 * The square viewport already clips at its outer edge, but the inset picture
 * border is nearer the centre. Fixed 11px/16px padding was insufficient when
 * a wide product image scaled to 105.5%, allowing opaque artwork across that
 * stationary border. A proportional safety inset covers hover, focus and
 * 105% touch zoom at every card width. Does not change animation geometry,
 * card halo, picture frame decoration, or variable image-transition logic.
 */
html body ul.products li.product.vg-product-card .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail,.vg-card-photo-outgoing),
html body :is(.aurora-product-carousel,.aurora-auto-carousel,.vg-all-products-page .vg-all-products-grid,.vg-shop-page #vg-shop-products,.vg-all-products-grid,#vg-shop-products) ul.products li.product.vg-product-card .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail,.vg-card-photo-outgoing) {
  box-sizing:border-box!important;
  padding:calc(var(--vg-photo-frame-inset,12px) + 2px + 3%)!important;
  object-fit:contain!important;
  object-position:center!important;
}
/* Match the variable-only mobile padding selector without changing its
 * slideshow, label, or touch logic. */
html body :is(.aurora-product-carousel,.aurora-auto-carousel,.vg-all-products-page .vg-all-products-grid,.vg-shop-page #vg-shop-products,.vg-all-products-grid,#vg-shop-products) ul.products li.product.vg-product-card[data-vg-card-variations] .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail,.vg-card-photo-outgoing) {
  padding:calc(var(--vg-photo-frame-inset,12px) + 2px + 3%)!important;
}

/* Older gallery-image padding selectors remain in the theme for backwards
 * compatibility although simple-card picture swapping was disabled in rc31.
 * Match their specificity so the original photo stays within its line too. */
html body :is(.aurora-product-carousel,.aurora-auto-carousel,.vg-all-products-page .vg-all-products-grid,.vg-shop-page #vg-shop-products,.vg-all-products-grid,#vg-shop-products) ul.products li.product.vg-product-card[data-vg-card-gallery]:not([data-vg-card-variations]) .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail,.vg-card-photo-outgoing) {
  padding:calc(var(--vg-photo-frame-inset,12px) + 2px + 3%)!important;
}

/* On roomy cards retain the bottom name-preview clearance for variations.
 * On phones the existing compact equal inset remains in effect. */
@media (min-width:761px) {
  html body ul.products li.product.vg-product-card[data-vg-card-variations] .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail,.vg-card-photo-outgoing),
  html body :is(.aurora-product-carousel,.aurora-auto-carousel,.vg-all-products-page .vg-all-products-grid,.vg-shop-page #vg-shop-products,.vg-all-products-grid,#vg-shop-products) ul.products li.product.vg-product-card[data-vg-card-variations] .vg-card-photo-frame > img:is(.wp-post-image,.attachment-woocommerce_thumbnail,.vg-card-photo-outgoing) {
    padding-bottom:max(36px,calc(var(--vg-photo-frame-inset,12px) + 2px + 3%))!important;
  }
}