/* =============================================================================
   Quick view modal — premium layer  (v10, 2026-09-02)

   Additive stylesheet, loaded site-wide from templates/layouts/layout-both-columns.tpl
   because the quick view can be opened from any page that renders a product
   miniature (home, category, search, manufacturer, and the product page itself).
   The base theme keeps working if this file is removed.

   Direction matches the product page rebuild: "Minimalism & Swiss Style" —
   bounded proportions, hairline structure, high-contrast type, restrained depth.
   Brand tokens (pink #d50075, Inter) come from the site-wide system in theme.css.

   Typography note: this component deliberately stays on Inter and does NOT use
   'Playfair Display'. That face is only @font-face'd in product-premium.css, which
   is not loaded on the pages where the quick view is actually used — a serif here
   would silently fall back to generic `serif` everywhere except the product page.

   Selector note: every rule is prefixed `.quickview.qv` (both classes sit on the
   modal root). On the product page product-premium.css loads *after* this file and
   targets `.page-product`, which the modal body also carries; the doubled root
   class keeps this layer winning on specificity rather than on load order.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. Tokens + focus
   Same names/values as the product page layer so markup copied from it (the
   stock pill, price block) resolves identically inside the modal.
   ------------------------------------------------------------------------ */
.quickview.qv {
  --sk-brand: #d50075;
  --sk-brand-dark: #9e0056;
  --sk-brand-tint: #fef0f7;
  --sk-brand-tint-2: #fce7f2;
  --sk-ink: #1a0010;
  --sk-body: #4b4550;
  --sk-muted: #756e7d;
  --sk-border: #ebe5ed;
  --sk-border-strong: #ddd3e0;
  --sk-surface: #ffffff;
  --sk-surface-2: #faf7fa;
  --sk-ok: #0f7a45;
  --sk-ok-tint: #eaf6ef;
  --sk-warn: #9a6400;
  --sk-warn-tint: #fdf5e3;

  --sk-2: 8px;   --sk-3: 12px;  --sk-4: 16px;  --sk-5: 24px;
  --sk-6: 32px;  --sk-7: 48px;

  --sk-r-sm: 10px; --sk-r-md: 14px; --sk-r-lg: 20px; --sk-r-pill: 999px;

  --sk-shadow-sm: 0 1px 2px rgba(26, 0, 16, .05);
  --sk-shadow-md: 0 2px 6px rgba(26, 0, 16, .06), 0 10px 28px rgba(26, 0, 16, .05);
  --sk-shadow-cta: 0 6px 18px rgba(213, 0, 117, .26);

  --sk-dur: 220ms;
  --sk-ease: cubic-bezier(.2, .7, .3, 1);
}

/* One visible focus treatment for every control in the dialog.
   (UX priority 1/2: never rely on the UA default being visible over a tinted panel.) */
.quickview.qv a:focus-visible,
.quickview.qv button:focus-visible,
.quickview.qv input:focus-visible,
.quickview.qv select:focus-visible,
.quickview.qv [tabindex]:focus-visible {
  outline: 2px solid var(--sk-brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   1. Backdrop + shell
   ------------------------------------------------------------------------ */
.modal-backdrop.show {
  background-color: #1a0010;
  opacity: .55;
}

@supports (backdrop-filter: blur(2px)) {
  .modal-backdrop.show {
    backdrop-filter: blur(3px);
  }
}

.quickview.qv .modal-dialog {
  max-width: 1000px;
  margin: var(--sk-5) auto;
}

.quickview.qv .modal-content {
  position: relative;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-r-lg);
  background: var(--sk-surface);
  box-shadow: 0 24px 70px rgba(26, 0, 16, .22), 0 4px 14px rgba(26, 0, 16, .08);
  overflow: hidden;
}

/* Softer, less "dropped-in" entrance than Bootstrap's default -50px slide. */
.quickview.qv.fade .modal-dialog {
  transform: scale(.97) translateY(12px);
  transition: transform 260ms var(--sk-ease), opacity 260ms var(--sk-ease);
  opacity: 0;
}

.quickview.qv.show .modal-dialog {
  transform: none;
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   2. Close button
   The stock markup was a bare 24px glyph in an otherwise empty 32px header strip.
   It is now a real 44x44 target floating over the top-right corner.
   ------------------------------------------------------------------------ */
.quickview.qv .qv__close {
  position: absolute;
  top: var(--sk-3);
  right: var(--sk-3);
  z-index: 5;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--sk-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--sk-ink);
  box-shadow: var(--sk-shadow-sm);
  transition: background var(--sk-dur) var(--sk-ease),
              color var(--sk-dur) var(--sk-ease),
              border-color var(--sk-dur) var(--sk-ease);
}

.quickview.qv .qv__close svg {
  width: 18px;
  height: 18px;
  display: block;
}

@media (hover: hover) {
  .quickview.qv .qv__close:hover {
    background: var(--sk-brand);
    border-color: var(--sk-brand);
    color: #fff;
  }
}

/* ---------------------------------------------------------------------------
   3. Body grid
   ------------------------------------------------------------------------ */
.quickview.qv .modal-body {
  padding: 0;
}

.quickview.qv .qv__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 992px) {
  .quickview.qv .qv__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  }
}

.quickview.qv .qv__media {
  padding: var(--sk-5);
  background: linear-gradient(160deg, #fffdfe 0%, var(--sk-brand-tint) 100%);
  border-bottom: 1px solid var(--sk-border);
}

@media (min-width: 992px) {
  .quickview.qv .qv__media {
    padding: var(--sk-6) var(--sk-5) var(--sk-5);
    border-bottom: 0;
    border-right: 1px solid var(--sk-border);
  }
}

.quickview.qv .qv__buy {
  /* Inherited by the sticky action bar below `lg`, so it can bleed to the exact
     edge of this column at whatever padding the current breakpoint uses. */
  --qv-pad: var(--sk-5);
  padding: var(--qv-pad);
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .quickview.qv .qv__buy {
    --qv-pad: var(--sk-6);
    padding: var(--qv-pad) var(--qv-pad) var(--sk-5);
  }
}

/* ---------------------------------------------------------------------------
   4. Gallery
   The stage is a fixed square. That is what caps the dialog height: the stock
   modal was sized by a 649px-tall raw image, which is why short-description
   products left ~350px of empty column beside it.
   ------------------------------------------------------------------------ */
.quickview.qv .qv__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--sk-r-md);
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  overflow: hidden;
}

.quickview.qv .qv__slides {
  position: absolute;
  inset: 0;
}

.quickview.qv .qv__slide {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sk-4);
}

.quickview.qv .qv__slide.is-active {
  display: flex;
}

.quickview.qv .qv__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Flags ("New", "On sale!") */
.quickview.qv .qv__stage .product-flags {
  position: absolute;
  top: var(--sk-3);
  left: var(--sk-3);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quickview.qv .qv__stage .product-flags .badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--sk-r-pill);
  background: var(--sk-ink);
  color: #fff;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.quickview.qv .qv__stage .product-flags .badge.on-sale,
.quickview.qv .qv__stage .product-flags .badge.discount,
.quickview.qv .qv__stage .product-flags .badge.discount-percentage,
.quickview.qv .qv__stage .product-flags .badge.discount-amount {
  background: var(--sk-brand);
}

.quickview.qv .qv__stage .product-flags .badge.new {
  background: var(--sk-ink);
}

.quickview.qv .qv__stage .product-flags .badge.out_of_stock {
  background: #6f6675;
}

/* Prev / next */
.quickview.qv .qv__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--sk-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--sk-ink);
  box-shadow: var(--sk-shadow-sm);
  opacity: 0;
  transition: opacity var(--sk-dur) var(--sk-ease),
              background var(--sk-dur) var(--sk-ease),
              color var(--sk-dur) var(--sk-ease);
}

.quickview.qv .qv__nav svg {
  width: 18px;
  height: 18px;
  display: block;
}

.quickview.qv .qv__nav--prev { left: var(--sk-3); }
.quickview.qv .qv__nav--next { right: var(--sk-3); }

/* Revealed on hover, but always present for keyboard and touch users —
   a control that only exists on hover is unreachable on a phone. */
.quickview.qv .qv__stage:hover .qv__nav,
.quickview.qv .qv__nav:focus-visible {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .quickview.qv .qv__nav {
    opacity: 1;
  }
}

@media (hover: hover) {
  .quickview.qv .qv__nav:hover {
    background: var(--sk-brand);
    border-color: var(--sk-brand);
    color: #fff;
  }
}

/* Thumbnails — the row is only rendered when there is more than one image. */
.quickview.qv .qv__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-2);
  margin: var(--sk-3) 0 0;
  padding: 0;
  list-style: none;
}

.quickview.qv .qv__thumb {
  width: 62px;
  height: 62px;
  padding: 4px;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-r-sm);
  background: var(--sk-surface);
  cursor: pointer;
  transition: border-color var(--sk-dur) var(--sk-ease),
              box-shadow var(--sk-dur) var(--sk-ease);
}

.quickview.qv .qv__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (hover: hover) {
  .quickview.qv .qv__thumb:hover {
    border-color: var(--sk-border-strong);
  }
}

.quickview.qv .qv__thumb.is-active {
  border-color: var(--sk-brand);
  box-shadow: 0 0 0 1px var(--sk-brand);
}

/* ---------------------------------------------------------------------------
   5. Buy column
   ------------------------------------------------------------------------ */
.quickview.qv .qv__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-2) var(--sk-3);
  margin: 0 0 var(--sk-2);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sk-muted);
}

.quickview.qv .qv__eyebrow-brand {
  color: var(--sk-brand);
}

.quickview.qv .qv__eyebrow-ref {
  position: relative;
  padding-left: var(--sk-3);
}

.quickview.qv .qv__eyebrow-ref::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 11px;
  transform: translateY(-50%);
  background: var(--sk-border-strong);
}

.quickview.qv .qv__name {
  margin: 0 0 var(--sk-3);
  font-family: Inter, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--sk-ink);
  text-wrap: balance;
}

@media (min-width: 992px) {
  .quickview.qv .qv__name {
    font-size: 1.625rem;
  }
}

/* Stock pill — same classes and markup as the product page. */
.quickview.qv .product__stock {
  display: inline-flex;
  align-items: center;
  gap: var(--sk-2);
  margin: 0 0 var(--sk-4);
  padding: 6px 14px 6px 12px;
  border-radius: var(--sk-r-pill);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.quickview.qv .product__stock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.quickview.qv .product__stock--in_stock {
  background: var(--sk-ok-tint);
  color: var(--sk-ok);
}

.quickview.qv .product__stock--last_remaining_items {
  background: var(--sk-warn-tint);
  color: var(--sk-warn);
}

.quickview.qv .product__stock--out_of_stock,
.quickview.qv .product__stock--available_later {
  background: #f6f4f7;
  color: var(--sk-muted);
}

/* ---- Price panel ---- */
.quickview.qv .product__prices {
  margin: 0 0 var(--sk-4);
  padding: var(--sk-4);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-r-md);
  background: var(--sk-surface-2);
}

.quickview.qv .prices__wrapper {
  gap: 4px !important;
  margin-bottom: 0 !important;
}

.quickview.qv .product__current-price {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--sk-ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.quickview.qv .product__discount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-2);
}

.quickview.qv .product__price-regular {
  color: var(--sk-muted);
  font-size: 1rem;
  text-decoration: line-through;
}

.quickview.qv .product__discount-percentage,
.quickview.qv .product__discount-amount {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--sk-r-pill);
  background: var(--sk-brand-tint);
  color: var(--sk-brand-dark);
  font-size: .75rem;
  font-weight: 600;
}

.quickview.qv .product__tax-info,
.quickview.qv .product__tax-label,
.quickview.qv .product__unit-price,
.quickview.qv .product__pack-price,
.quickview.qv .product__price-taxless {
  font-size: .8125rem;
  color: var(--sk-muted);
  margin-bottom: 0;
}

/* The stock alert from product-add-to-cart.tpl repeats the pill above it. */
.quickview.qv .product-availability {
  display: none;
}

.quickview.qv .product__add-to-cart > .mb-3 {
  margin-bottom: 0 !important;
}

.quickview.qv .product__delivery__information {
  display: inline-block;
  margin-bottom: var(--sk-3);
  font-size: .8125rem;
  color: var(--sk-muted);
}

/* ---- Short description ----
   Clamped: the quick view is a preview, and the full copy is one click away via
   "All details". This is also what keeps the two columns balanced regardless of
   how long or short a given product's copy is. */
.quickview.qv .qv__desc {
  position: relative;
  margin: 0 0 var(--sk-5);
  color: var(--sk-body);
  font-size: .9375rem;
  line-height: 1.65;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

.quickview.qv .qv__desc > *:first-child { margin-top: 0; }
.quickview.qv .qv__desc > *:last-child { margin-bottom: 0; }

.quickview.qv .qv__desc p {
  margin: 0 0 .6em;
}

.quickview.qv .qv__desc b,
.quickview.qv .qv__desc strong {
  color: var(--sk-ink);
  font-weight: 600;
}

.quickview.qv .qv__desc ul,
.quickview.qv .qv__desc ol {
  margin: 0 0 .6em;
  padding-left: 1.15em;
}

.quickview.qv .qv__desc img,
.quickview.qv .qv__desc table {
  display: none;
}

/* ---- Variants ---- */
.quickview.qv .product-variants {
  margin-bottom: var(--sk-4);
}

.quickview.qv .product-variants .form-label,
.quickview.qv .product-variants label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sk-muted);
}

/* ---- Actions ----
   Pushed to the bottom of the column so the CTA sits on a consistent baseline
   whatever the copy length. */
.quickview.qv .product-actions {
  margin-top: auto;
}

.quickview.qv .product-actions .row.g-2 {
  align-items: center;
  row-gap: var(--sk-3) !important;
}

/* `displayProductActions` renders a `.wishlist-button` column into this row. It
   comes back empty on this shop but still claims a full Bootstrap column
   (width:100% below `md`), which starved the CTA down to a few pixels wide.
   Every child sizes to its content; only the CTA column grows. */
.quickview.qv .product-actions .row.g-2 > * {
  flex: 0 0 auto;
  width: auto;
}

.quickview.qv .product-actions .row.g-2 > .wishlist-button:empty {
  display: none;
}

/* Matched through the same `> ` chain as the rule above, otherwise that one wins
   on specificity and the CTA never grows. */
.quickview.qv .product-actions .row.g-2 > .product-actions__button.add {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.quickview.qv .product-actions__quantity .input-group {
  margin-bottom: 0 !important;
  border: 1px solid var(--sk-border-strong);
  border-radius: var(--sk-r-pill);
  overflow: hidden;
  background: var(--sk-surface);
}

.quickview.qv .product-actions__quantity .input-group .btn {
  border: 0;
  background: transparent;
  width: 42px;
  height: 52px;
  color: var(--sk-ink);
}

@media (hover: hover) {
  .quickview.qv .product-actions__quantity .input-group .btn:hover {
    background: var(--sk-brand-tint);
    color: var(--sk-brand-dark);
  }
}

.quickview.qv .product-actions__quantity .input-group input.form-control {
  border: 0;
  height: 52px;
  width: 46px;
  min-width: 0;
  padding: 0;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  background: transparent;
  box-shadow: none;
}

.quickview.qv .product-actions__button.add {
  min-width: 0;
}

.quickview.qv .add-to-cart {
  width: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sk-2);
  padding: 0 var(--sk-5);
  border: 0;
  border-radius: var(--sk-r-pill);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: var(--sk-shadow-cta);
  transition: transform var(--sk-dur) var(--sk-ease),
              box-shadow var(--sk-dur) var(--sk-ease),
              background-color var(--sk-dur) var(--sk-ease);
}

@media (hover: hover) {
  .quickview.qv .add-to-cart:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(213, 0, 117, .32);
  }
}

.quickview.qv .add-to-cart:not(:disabled):active {
  transform: translateY(0);
  box-shadow: var(--sk-shadow-sm);
}

.quickview.qv .add-to-cart:disabled {
  box-shadow: none;
  opacity: .55;
}

/* Busy state while the cart request is in flight (UX priority 2: never leave a
   submit looking idle). Width is held steady so the row cannot reflow. */
.quickview.qv .add-to-cart.is-busy {
  pointer-events: none;
  opacity: .85;
}

.quickview.qv .add-to-cart.is-busy .material-icons {
  display: none;
}

.quickview.qv .add-to-cart.is-busy::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  animation: qv-spin .7s linear infinite;
}

@keyframes qv-spin {
  to { transform: rotate(360deg); }
}

.quickview.qv .product__minimal-quantity {
  margin: var(--sk-3) 0 0;
  font-size: .8125rem;
  color: var(--sk-muted);
}

.quickview.qv .product__minimal-quantity:empty {
  display: none;
}

/* ---- Trust row (blockreassurance, displayReassurance hook) ---- */
.quickview.qv .qv__trust {
  margin-top: var(--sk-4);
  padding-top: var(--sk-4);
  border-top: 1px solid var(--sk-border);
}

.quickview.qv .blockreassurance_product {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--sk-3);
}

.quickview.qv .blockreassurance_product > div {
  display: flex;
  align-items: center;
  gap: var(--sk-2);
  min-width: 0;
}

.quickview.qv .blockreassurance_product .item-product {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The module ships its icons as <img class="svg invisible"> and un-hides them
   with its own script, which never runs for markup injected after page load.
   Un-hiding them here keeps the icons visible with no JS at all. */
.quickview.qv .blockreassurance_product .item-product img.svg,
.quickview.qv .blockreassurance_product .item-product img.invisible {
  visibility: visible !important;
  opacity: 1 !important;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.quickview.qv .blockreassurance_product .block-title {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sk-body) !important;
}

.quickview.qv .blockreassurance_product p:not(.block-title) {
  margin: 0;
  font-size: .6875rem;
  color: var(--sk-muted);
}

/* ---------------------------------------------------------------------------
   6. Footer
   ------------------------------------------------------------------------ */
.quickview.qv .modal-footer {
  gap: var(--sk-3);
  padding: var(--sk-3) var(--sk-5);
  border-top: 1px solid var(--sk-border);
  background: var(--sk-surface-2);
}

@media (min-width: 992px) {
  .quickview.qv .modal-footer {
    padding: var(--sk-3) var(--sk-6);
  }
}

.quickview.qv .social-sharing {
  display: flex;
  align-items: center;
  gap: var(--sk-3);
  margin: 0;
}

.quickview.qv .social-sharing > span {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sk-muted);
}

.quickview.qv .social-sharing ul {
  display: flex;
  align-items: center;
  gap: var(--sk-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The theme paints each network glyph as a background-image on the <li>, so only
   background-color may be set here — the `background` shorthand blanks the icon. */
.quickview.qv .social-sharing ul li {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--sk-surface);
  border: 1px solid var(--sk-border);
  background-size: 18px 18px;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color var(--sk-dur) var(--sk-ease),
              border-color var(--sk-dur) var(--sk-ease),
              transform var(--sk-dur) var(--sk-ease);
}

@media (hover: hover) {
  .quickview.qv .social-sharing ul li:hover {
    background-color: var(--sk-brand-tint);
    border-color: var(--sk-brand);
    transform: translateY(-1px);
  }
}

.quickview.qv .social-sharing ul li a {
  display: block;
  width: 100%;
  height: 100%;
}

.quickview.qv .qv__details {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--sk-4);
  border: 1px solid var(--sk-brand);
  border-radius: var(--sk-r-pill);
  color: var(--sk-brand);
  background: transparent;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--sk-dur) var(--sk-ease),
              color var(--sk-dur) var(--sk-ease);
}

.quickview.qv .qv__details svg {
  width: 16px;
  height: 16px;
}

@media (hover: hover) {
  .quickview.qv .qv__details:hover {
    background: var(--sk-brand);
    color: #fff;
  }
}

/* ---------------------------------------------------------------------------
   7. Mobile — bottom sheet
   ------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .quickview.qv .modal-dialog {
    align-items: flex-end;
    margin: 0;
    max-width: none;
    min-height: 100%;
  }

  .quickview.qv .modal-content {
    border-radius: var(--sk-r-lg) var(--sk-r-lg) 0 0;
    border-bottom: 0;
    max-height: 94vh;
  }

  /* BUG FIX: this used to read `.quickview.qv.fade .modal-dialog`. Bootstrap
     keeps `.fade` on the modal permanently, and this block sits AFTER the global
     `.quickview.qv.show .modal-dialog { transform: none }` at equal specificity —
     so the sheet stayed translated 32px down even while open. Measured on a
     390x844 phone: the sheet's bottom edge landed at 876px, i.e. 32px BELOW the
     viewport, which is what cut the buy bar off. `:not(.show)` keeps it as the
     entrance offset it was meant to be. */
  .quickview.qv.fade:not(.show) .modal-dialog {
    transform: translateY(32px);
  }

  .quickview.qv .qv__media {
    padding: var(--sk-4);
  }

  /* Wide products read better than tall ones on a phone; the square stage would
     otherwise eat most of the sheet before any copy is visible. */
  .quickview.qv .qv__stage {
    aspect-ratio: 4 / 3;
  }

  .quickview.qv .qv__buy {
    --qv-pad: var(--sk-4);
  }

  .quickview.qv .qv__name {
    font-size: 1.25rem;
  }

  .quickview.qv .product__current-price {
    font-size: 1.625rem;
  }

  .quickview.qv .modal-footer {
    padding: var(--sk-3) var(--sk-4);
  }

  .quickview.qv .qv__details {
    flex: 1;
    justify-content: center;
  }

}

/* Below `lg` the grid is a single column, so the image and the copy push the
   primary action below the fold. Sticking it to the bottom of the scroll port
   keeps "Add to cart" reachable without scrolling first.
   `.modal-body` is the scroll container (Bootstrap's modal-dialog-scrollable);
   nothing between it and this element establishes its own scroll context. */
@media (max-width: 991.98px) {
  .quickview.qv .product-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 calc(var(--qv-pad) * -1);
    padding: var(--sk-3) var(--qv-pad);
    background: var(--sk-surface);
    border-top: 1px solid var(--sk-border);
  }
}

/* ---------------------------------------------------------------------------
   Bottom of the sheet on phones and tablets.

   The modal footer is a second bar under the sticky buy bar: a 34px share strip
   plus the "All details" link, 73px in total. That left the buy bar floating
   73px above the bottom edge with a detached strip beneath it — the buy bar is
   the primary action and should be the last thing in the sheet.

   The footer is hidden here and the product title carries the link to the full
   page instead (see quickview.tpl), so nothing becomes unreachable. Sharing
   stays available on the product page itself, where it belongs on a phone.
   Above 992px the footer is untouched.
   ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .quickview.qv .modal-footer {
    display: none;
  }

  /* Anchored to the sheet, not sticky inside the scroll port.
     `position: sticky; bottom: 0` only ever pulls an element UP — it never
     pushes one down. So whenever the copy above it was short enough that the bar
     already sat clear of the bottom edge, it just stayed there: measured 22px
     short of the sheet on a 430px phone at scroll-top, dropping to flush only
     once you scrolled. Absolute positioning puts it on the bottom edge at every
     scroll position, and `.modal-body` reserves its height so nothing hides
     behind it. --qv-bar-h is measured by quickview-premium.js; the fallback
     covers the common one-row stepper + CTA layout until it runs. */
  .quickview.qv .product-actions {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 3;
    margin: 0;
    border-radius: 0;
    padding-bottom: calc(var(--sk-3) + env(safe-area-inset-bottom, 0px));
  }

  /* Bootstrap makes `.modal-body` `position: relative`, and here it is also the
     scroll container — so an absolutely positioned child resolves `bottom: 0`
     against its PADDING BOX, which scrolls with the content. The bar duly slid
     up the sheet as you scrolled. Making the body static hands the containing
     block to `.modal-content`, which does not scroll, so the bar stays welded to
     the sheet's bottom edge.

     Safe here: every other absolutely positioned element in the modal resolves
     against a nearer positioned ancestor — the gallery's slides, flags and nav
     against `.qv__stage`, and `.qv__close` against `.modal-content` (it is not
     inside the body at all). */
  .quickview.qv .modal-body {
    position: static;
    padding-bottom: var(--qv-bar-h, 132px);
  }
}

/* Keep the stepper and the CTA on one row below the `md` grid breakpoint, where
   Bootstrap's `col-md-auto` stops applying. Stacked, they make the sticky action
   bar tall enough to cover the price. */
@media (min-width: 360px) and (max-width: 767.98px) {
  .quickview.qv .product-actions .row.g-2 {
    flex-wrap: nowrap;
  }
}

/* Very small screens: the qty stepper and CTA stop competing for one row. */
@media (max-width: 359.98px) {
  .quickview.qv .product-actions .row.g-2 > .product-actions__quantity,
  .quickview.qv .product-actions .row.g-2 > .product-actions__button.add {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* The product title is a link to the full page (quickview.tpl). It should read
   as the heading it is, not as body-copy link chrome. */
.quickview.qv .qv__name-link {
  color: inherit;
  text-decoration: none;
  transition: color .2s var(--sk-ease);
}

@media (hover: hover) {
  .quickview.qv .qv__name-link:hover {
    color: var(--sk-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.quickview.qv .qv__name-link:focus-visible {
  outline: 3px solid var(--sk-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   8. Reduced motion
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .quickview.qv,
  .quickview.qv *,
  .quickview.qv.fade .modal-dialog {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .quickview.qv .add-to-cart.is-busy::before {
    animation: none;
  }

  .quickview.qv.fade .modal-dialog {
    transform: none;
  }
}

/* =============================================================================
   Booking price panel  (2026-08-30)

   Mirrors product-premium.css §16 so the modal and the product page state the
   two figures identically. It is repeated here rather than shared because
   product-premium.css only loads on the product page, and the quick view is
   opened from listings and the homepage where that file is absent.

   Deliberately NO serif on the figure: 'Playfair Display' is only @font-face'd
   in product-premium.css, so a serif here would fall back to generic `serif`
   everywhere the modal is actually used. Same reasoning as the rest of this file.

   Selector prefix is the doubled `.quickview.qv` — product-premium.css loads
   after this file on the product page and targets `.page-product`, which the
   modal body also carries, so specificity has to win rather than load order.
   ========================================================================== */
.quickview.qv .sk-book {
  margin: 0 0 var(--sk-4);
  padding: var(--sk-4);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-r-md);
  background: linear-gradient(180deg, var(--sk-brand-tint) 0%, var(--sk-surface) 100%);
}

.quickview.qv .sk-book__label {
  margin: 0 0 4px;
  color: var(--sk-brand);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.quickview.qv .sk-book__figure {
  margin: 0;
  color: var(--sk-ink);
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.quickview.qv .sk-book__note {
  margin: 4px 0 0;
  color: var(--sk-muted);
  font-size: .75rem;
  font-weight: 500;
}

/* Machine price "On request" — the compact twin of the PDP rule. Same reason:
   the phrase must not wear a price's weight. See product-premium.css. */
.quickview.qv .sk-book__figure--quote {
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--sk-body);
  letter-spacing: -.01em;
}

.quickview.qv .sk-book--quote .sk-book__split { margin-top: var(--sk-2); }
.quickview.qv .sk-book--quote .sk-book__amount { font-size: 1.25rem; }

.quickview.qv .sk-book__split {
  display: flex;
  align-items: center;
  gap: var(--sk-3);
  margin-top: var(--sk-3);
  padding-top: var(--sk-3);
  border-top: 1px solid var(--sk-border);
}

.quickview.qv .sk-book__split-text { flex: 1 1 auto; min-width: 0; }

.quickview.qv .sk-book__split-label {
  margin: 0;
  color: var(--sk-ink);
  font-size: .875rem;
  font-weight: 600;
}

.quickview.qv .sk-book__split-note {
  margin: 1px 0 0;
  color: var(--sk-muted);
  font-size: .6875rem;
  line-height: 1.4;
}

.quickview.qv .sk-book__amount {
  flex: 0 0 auto;
  margin: 0;
  color: var(--sk-brand);
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}

/* A `.sk-hilite` strip still authored inside a stored `description_short` is
   suppressed: the figures are rendered from data in the media column now (see
   below), and `.qv__desc` is a `-webkit-box` clamp that would slice a grid
   part-way through a row anyway. This is the guard for products not yet
   migrated off the old markup — it stops the strip appearing twice. */
.quickview.qv .qv__desc .sk-hilite { display: none; }

/* ---- Media column ------------------------------------------------------
   The column is sized by a square photograph; the buy column runs on to the
   reassurance strip and is taller. On a single-image product that left ~200px
   of empty ground under the picture, all of it pooled at the bottom.

   The column is now a flex stack: the gallery takes the free space and centres
   itself in it, and the figures sit at the foot as a real base for it. Above
   `lg` only — below that the columns stack and the media panel is sized by its
   own contents, so there is no slack to distribute. */
@media (min-width: 992px) {
  .quickview.qv .qv__media {
    display: flex;
    flex-direction: column;
  }

  .quickview.qv .qv__media .qv__gallery {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
  }
}

.quickview.qv .qv__figures {
  flex: 0 0 auto;
  margin-top: var(--sk-5);
  /* The media panel already sits on a tint, so the strip drops its own white
     ground and reads as part of the panel rather than a card floating on it. */
  background: rgba(255, 255, 255, .55);
}

.quickview.qv .qv__figures > li {
  background: transparent;
  padding: 12px 14px;
}

.quickview.qv .qv__figures > li > b { font-size: 1.0625rem; }
.quickview.qv .qv__figures > li > span { font-size: .6875rem; }

@media (max-width: 991.98px) {
  .quickview.qv .qv__figures { margin-top: var(--sk-4); }
}

/* ---- Add-to-cart success ------------------------------------------------
   Third restatement of the same state, and the reason is worth recording:
   theme.css forces `.btn-primary` to brand pink with `!important`, so the
   shared success rule in theme-premium.css (`.sk-added [data-button-action]`,
   0,2,0) loses the BACKGROUND while still winning the colour — the button
   rendered green text on a pink ground, which is unreadable. The product page
   lost the same fight to its own outline rule.

   So: any new surface that renders an add-to-cart must restate this, or check
   that it does not carry a `.btn-primary` override. `.quickview.qv .sk-added`
   is (0,4,0), which clears both.

   `.sk-added` is set by theme-premium.js on `.js-product-actions`. */
.quickview.qv .sk-added .add-to-cart,
.quickview.qv .sk-added .add-to-cart:not(:disabled):hover {
  background-color: var(--sk-ok-tint) !important;
  border: 1px solid var(--sk-ok) !important;
  color: var(--sk-ok) !important;
  box-shadow: none !important;
  transform: none !important;
}

.quickview.qv .sk-added .add-to-cart .material-icons { color: var(--sk-ok) !important; }

/* =============================================================================
   Enquiry-only action bar  (2026-09-07)

   For a product with no catalogue price the modal renders two links in place
   of the qty stepper + Add to cart (quickview.tpl, `product_buy`): WhatsApp
   primary, Call secondary — the PDP's enquiry panel, compacted to one row so
   the bar stays as short as the cart row it replaces (the phone layout pins it
   to the bottom of the sheet and reserves its height; see `--qv-bar-h`).

   Same tokens, same 52px control height and same pill radius as `.add-to-cart`
   above, so a shopper moving between a consumable and a machine sees one
   system. Colour carries the hierarchy: filled brand for the primary, brand
   outline for the secondary. Hover is guarded — :hover latches on touch.

   Wrapped in `.product-actions` so every placement rule for the cart row also
   places this bar; only the row-internal `.row.g-2` rules do not apply.
   ========================================================================== */
.quickview.qv .qv__enq {
  display: flex;
  align-items: stretch;
  gap: var(--sk-3);
}

.quickview.qv .qv__enq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sk-2);
  min-height: 52px;
  padding: 0 var(--sk-4);
  border-radius: var(--sk-r-pill);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--sk-dur) var(--sk-ease),
              border-color var(--sk-dur) var(--sk-ease),
              color var(--sk-dur) var(--sk-ease);
}

.quickview.qv .qv__enq-btn--primary {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--sk-brand);
  border: 1.5px solid var(--sk-brand);
  color: #fff;
  box-shadow: var(--sk-shadow-cta);
}

.quickview.qv .qv__enq-btn--ghost {
  flex: 0 0 auto;
  background: var(--sk-surface);
  border: 1.5px solid var(--sk-brand);
  color: var(--sk-brand);
}

.quickview.qv .qv__enq-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.quickview.qv .qv__enq-num {
  font-variant-numeric: lining-nums tabular-nums;
}

@media (hover: hover) {
  .quickview.qv .qv__enq-btn--primary:hover { background: var(--sk-brand-dark); border-color: var(--sk-brand-dark); color: #fff; }
  .quickview.qv .qv__enq-btn--ghost:hover { background: var(--sk-brand); border-color: var(--sk-brand); color: #fff; }
}

.quickview.qv .qv__enq-btn--primary:active { background: var(--sk-brand-dark); border-color: var(--sk-brand-dark); }
.quickview.qv .qv__enq-btn--ghost:active { background: var(--sk-brand-tint-2); }

/* The sticky bar on a 360–430px phone is ~330px wide. "Enquire on WhatsApp"
   plus "Call +91 98216 12340" does not fit on one row at 52px, and stacking
   would double the bar's height over the price. The number is dropped from the
   label there — the link still dials it, and the full number is one tap away
   on the product page and in the header. */
@media (max-width: 479.98px) {
  .quickview.qv .qv__enq-num { display: none; }
}