/* -----------------------------------------
       Product card (Grid view)
    ----------------------------------------- */

.gallery-header {
    margin-bottom: 1rem;
}

.Product.GridMode {
    position: relative;
    /* Fallbacks; your JS overrides these per card */
    --cta-h: 3rem; /* bar height fallback */
    --img-h: 25rem; /* image height fallback */
}

/* Slide panel overlays the image and sizes to content */
.Product.GridMode .Product__slidePanel {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1; /* below the bar */
  bottom: calc(var(--cta-h) + 0.5rem);
  height: auto;
  max-height: var(--img-h);
  overflow-y: auto; /* only if content truly exceeds image */
  overflow-x: hidden;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 0.25rem 0.25rem 0 0;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.25s ease;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Show on hover */
.Product.GridMode .Product__ctaBar:hover + .Product__slidePanel,
.Product.GridMode .Product__slidePanel:hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Keep Bootstrap rows tidy inside the panel */
.Product.GridMode .Product__slidePanel .row {
  margin-left: 0;
  margin-right: 0;
}

.Product.GridMode .Product__slidePanel [class*="col-"] {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.Product.GridMode .Product__slidePanel img,
.Product.GridMode .Product__slidePanel table {
  max-width: 100%;
}

.Product.GridMode .Product__slidePanel table {
  width: 100%;
  table-layout: fixed;
}

.Product.GridMode .Product__slidePanel td,
.Product.GridMode .Product__slidePanel th {
  word-break: break-word;
}

/* -----------------------------------------
       Quantity spinner (fluid; no px)
    ----------------------------------------- */
.Product__ctaBar .qty-spinner,
.Product__ctaBar .input-group {
  width: auto; /* don’t stretch to 100% */
  vertical-align: middle;
  font-size: 0.875rem; /* control overall size (≈14px base) */
  line-height: 1.2;
}

.Product__ctaBar .qty-spinner .form-control,
.Product__ctaBar .input-group .form-control {
  min-inline-size: 3ch; /* room for “999” */
  inline-size: auto;
  text-align: center;
  padding-inline: 0.5em;
  line-height: 1.2;
  box-sizing: border-box;
  border-left-width: 0; /* clean seams with buttons (optional) */
  border-right-width: 0;
}

/* Square +/- buttons sized from font-size (no fixed px) */
.Product__ctaBar .qty-spinner .input-group-btn > .btn,
.Product__ctaBar .input-group .input-group-btn > .btn {
  padding: 0;
  inline-size: 2.25em;
  block-size: 2.25em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Center the icons perfectly; remove stray margins */
.Product__ctaBar .qty-spinner .glyphicon,
.Product__ctaBar .input-group .glyphicon {
  margin: 0;
  line-height: 1;
  position: relative;
  top: 0; /* if needed, nudge -0.0625rem / +0.0625rem */
}

/* Optional: remove inner seams for a one-piece look */
.Product__ctaBar .input-group-btn:first-child > .btn {
  border-right-width: 0;
}

.Product__ctaBar .input-group-btn:last-child > .btn {
  border-left-width: 0;
}

/* Spinner baseline: inline-flex so we can stack the buttons vertically */
.spinner.qty-spinner {
  display: inline-flex;
  align-items: stretch;
  gap: 0; /* seam stays tight */
  width: auto;
  max-width: 100%; /* never exceed its column */
  white-space: nowrap; /* keep on one line */
  vertical-align: middle;
  font-size: 0.875rem; /* overall control size (≈14px base); tweak as needed */
  line-height: 1.2;
}

.spinner.qty-spinner.spinner--compact {
  font-size: 0.875rem;
}
/* already compact */

/* Input: content-based width using character units; no overflow */
.spinner.qty-spinner .form-control {
  width: auto; /* override BS3's width:100% */
  inline-size: clamp(3ch, 4ch, 5ch); /* 3–5 digits wide */
  min-inline-size: 3ch;
  max-inline-size: 5ch;
  text-align: center;
  padding-inline: 0.5em;
  box-sizing: border-box;
  margin: 0;
  border-right-width: 0; /* clean seam against button column */
}

/* Vertical button column */
.spinner.qty-spinner .input-group-btn-vertical {
  display: flex;
  flex-direction: column;
  align-self: stretch; /* match input height */
}

/* Buttons: square(ish), centered icons, no hard px */
.spinner.qty-spinner .input-group-btn-vertical .btn {
  padding: 0;
  min-inline-size: 2.25em; /* width scales with font-size */
  flex: 1 1 0; /* each fills half the input height */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-left-width: 0; /* single-piece look with the input */
}

/* Icons perfectly centered; no stray margins */
.spinner.qty-spinner .input-group-btn-vertical .glyphicon {
  margin: 0;
  line-height: 1;
  position: relative;
  top: 0; /* nudge -0.0625rem / +0.0625rem if your font needs it */
}

/* Make sure the CTA bar row doesn't clip at the edges (BS3 quirk) */
.Product__ctaBar.row {
  margin-left: 0;
  margin-right: 0;
}

.Product__ctaBar > [class*="col-"] {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

/* Compact the price ONLY inside the CTA bar, keep the same visual style */
.Product__ctaBar .Product__price,
.Product__ctaBar .price_small,
.Product__ctaBar .price_xsmall {
  font-size: 3rem !important; /* tweak to taste: 1.0–1.3rem */
  line-height: 1.2;
  margin-right: 0.75rem; /* was 2rem; tighter in the bar */
  /* keep transform, weight, color, etc., from site.css */
}

/* Bar above the panel */
.Product.GridMode .Product__ctaBar {
    position: relative;
    z-index: 5; /* above the panel */
}

/* If the “cols” are wrapped in a .row, neutralize the row margins here */
.Product.GridMode .unit_price_small.row {
  margin-left: 0;
  margin-right: 0;
}


.Product__ctaBar .Product__price::before,
.Product__ctaBar .Product__price::after {
  position: static !important; /* cancel absolute rules from site.css */
  display: inline;
  margin-left: 0.1em; /* small spacing before the cents */
  right: auto;
  left: auto;
  top: auto;
  bottom: auto;
  transform: none; /* they’ll inherit the parent’s skew visually */
}

/* Right column = one-line flex row: [ BIG PRICE | unit price block ] */
.Product__ctaBar .text-right {
  display: flex;
  justify-content: flex-end; /* hug right edge */
  align-items: flex-end; /* bottom-align (works with skewed price) */
  gap: 0.4rem;
  flex-wrap: nowrap; /* single line */
  min-width: 0; /* allow children to shrink */
  overflow: hidden; /* prevent spill that makes cards uneven */
  text-align: right;
  white-space: nowrap;
}

/* Big price: visible in full, never shrinks, never wraps */
.Product__ctaBar .text-right .Product__price {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-right: 0; /* use gap above */
  line-height: 1;
  transform-origin: bottom right;
}

/* Unit-price block: horizontal, shrinkable, ellipsis when tight */
.Product.GridMode .unit_price_small {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  flex: 1 1 auto; /* <-- this part may shrink */
  min-width: 0; /* enable flex shrink */
  overflow: hidden; /* clip if too tight */
  text-overflow: ellipsis; /* … when clipped */
  white-space: nowrap; /* keep on one line */
}

/* If its children are Bootstrap cols, neutralize them here */
.Product.GridMode .unit_price_small > [class^="col-"],
.Product.GridMode .unit_price_small > [class*=" col-"] {
  float: none !important;
  width: auto !important;
  padding-left: 0;
  padding-right: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  min-width: 0;
}

/* 1) Make the whole CTA bar a one-line flex row */
.Product__ctaBar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap; /* keep bar height fixed */
}

/* keep spinner & button tidy */
.Product__ctaBar .qty-spinner,
.Product__ctaBar .btn-product {
  flex: 0 0 auto;
}

/* 2) The price partial’s root (.unit_price_small) becomes the RIGHT group */
.Product__ctaBar .unit_price_small {
  margin-left: auto; /* push price group to the right */
  display: flex;
  flex-wrap: nowrap; /* single line */
  align-items: flex-end; /* bottom-align next to big price */
  gap: 0.5rem;
  min-width: 0; /* allow shrinking */
}

/* 3) Neutralize Bootstrap grid inside the price group and lay out horizontally */
.Product__ctaBar .unit_price_small > [class^="col-"],
.Product__ctaBar .unit_price_small > [class*=" col-"] {
  float: none !important;
  width: auto !important;
  padding: 0;
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  min-width: 0;
}

/* First inner "col": unit/old price bits — allow shrink/ellipsis first */
.Product__ctaBar .unit_price_small > .col-xs-12:first-child {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Last inner "col": the big price — never shrink/wrap */
.Product__ctaBar .unit_price_small > .col-xs-12:last-child {
  flex: 0 0 auto;
}

/* Big price itself: keep current look but behave nicely in flex */
.Product__ctaBar .Product__price {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  line-height: 1;
  transform-origin: bottom right;
}

/* Neutralize global size/margin bumps inside the CTA bar */
.Product__ctaBar .price_small,
.Product__ctaBar .price_xsmall {
  margin: 0 !important;            /* <-- cancels the 10px top margin from site.css */
}

/* Panel: add a 1px cover strip on the right */
.Product.GridMode .Product__slidePanel {
    border-right: 1px solid rgba(255,255,255,0.95); /* match your panel bg */
    margin-right: -1px; /* pull under the image edge */
    right: 0; /* reset any calc(-var(--seam)) if you tried it */
}

/* Ensure no layout quirk from inline images */
.Product__image img { display: block; width: 100%; }

/* Paint over the seam from the image side */
.Product__image {
  position: relative;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.95); /* same as panel bg */
  overflow: hidden; /* clips outer shadow so the inset line is clean */
}

/* allow the price to render beyond the label's box inside the CTA bar */
.Product__ctaBar .unit_price_small { 
  overflow: visible;       /* overrides the global hidden only in the bar */
}

/* prevent the price from shrinking in the flex row */
.Product__ctaBar .unit_price_small > .col-xs-12:last-child {
  flex: 0 0 auto;
  min-width: max-content;  /* reserve space for all 5 digits */
}

/* Force cents to be inline, not absolutely positioned */
.Product__ctaBar .col-xs-8 .unit_price_small .col-xs-12 .Product__price::after {
    content: attr(data-cents);
    position: static !important;
    display: inline !important;
    margin-left: 0.1em;
}


/* Ensure the chain never hides overflow */
.Product__ctaBar .unit_price_small,
.Product__ctaBar .col-xs-8,
.Product__ctaBar .unit_price_small > .col-xs-12:last-child,
.Product__ctaBar .Product__price {
    overflow: visible !important;
}

/* Price itself should not shrink or wrap */
.Product__ctaBar .col-xs-8 .unit_price_small .col-xs-12 .Product__price {
    display: inline-flex;
    white-space: nowrap;
    flex: 0 0 auto;
}

.Product__ctaBar .unit_price_small > .col-xs-12:last-child {
    flex: 0 0 auto;
    min-width: max-content;
}

/* --- LIST VIEW ONLY --- */
.view-list .Product { /* let the card expand uniformly */
    display: flex;
    flex-direction: column;
}

.view-list .Product__content {
    flex: 1;
}

.view-list .Product-buy {
    margin-top: auto;
}
/* button block aligns to bottom */


/* Make the big price behave consistently in list price block too
   (you already do this inside .Product__ctaBar for grid) */
.view-list .Product__price::before,
.view-list .Product__price::after {
    position: static !important;
    display: inline !important;
    margin-left: 0.1em;
}

.view-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.view-list > [class*="col-"] {
    display: flex;
}

.view-list > [class*="col-"] > .Product {
    width: 100%;
}

/* base cushion when there is no discounted_text block */
.Product .Product__slidePanel {
    bottom: var(--panel-gap, 2rem);
}

/* when the WHOLE discounted block exists (and isn't empty/hidden), add space */
.Product:has(.prod_statt.discounted_text:not(:empty):not([hidden]):not(.is-hidden))
.Product__slidePanel {
    /* ~one to two lines of the CTA text; tweak to your design */
    bottom: calc(var(--panel-gap, 1rem) + 1.75lh);
}

/* if your list view tends to wrap more, give it a bit extra there */
.view-list .Product:has(.prod_statt.discounted_text:not(:empty):not([hidden]):not(.is-hidden))
.Product__slidePanel {
    bottom: calc(var(--panel-gap, 1rem) + 2.5lh);
}

.Product.GridMode .Product__ctaBar .qty-spinner {
    width: auto !important;
}

.Product.GridMode .spinner.qty-spinner .form-control {
    inline-size: clamp(2ch, 3ch, 4ch); /* was 3–5ch */
    min-inline-size: 2ch;
    max-inline-size: 4ch;
    padding-inline: 0.25em; /* was 0.5em */
}

.Product.GridMode .spinner.qty-spinner .input-group-btn-vertical .btn {
    min-inline-size: 1.75em; /* was 2.25em */
    inline-size: 1.75em;
}

.Product.GridMode .Product__ctaBar .btn-product {
    flex: 1 1 auto;
    min-inline-size: 1rem;
}

/* Grid mode, one row: make +/- buttons scale with the spinner */
.Product.GridMode .Product__ctaBar .qty-spinner .btn {
    font-size: inherit;
}

/* Optional: if your icons are <i> elements (site.css sets them to 10px) */
.Product.GridMode .qty-spinner .input-group-btn-vertical i {
    font-size: inherit;
}

/* Grid view spinner: let the icons be flex-centered by the button */
.Product.GridMode .qty-spinner .input-group-btn-vertical i,
.Product.GridMode .qty-spinner .input-group-btn-vertical .glyphicon {
    position: static !important;
    top: auto;
    left: auto;
    margin: 0 !important;
    font-size: inherit; /* scale with the control */
    line-height: 1;
}