/** Shopify CDN: Minification failed

Line 582:0 Unexpected "{"
Line 582:1 Expected identifier but found "%"
Line 584:18 Unexpected "{"
Line 584:27 Expected ":"
Line 593:18 Unexpected "{"
Line 593:27 Expected ":"
Line 594:18 Unexpected "{"
Line 594:27 Expected ":"
Line 595:18 Unexpected "{"
Line 595:27 Expected ":"
... and 12 more hidden warnings

**/
/* ======================================================================
   GPE Rental – Complete CSS with corner overlay drawer (no push)
   ====================================================================== */

/* ---------- Card header ---------- */
.rental-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .4rem;
  gap: .55rem;
  font-size: .85rem;
  container-type: inline-size;
}

/* Left: "Vendor – Rental code: {SKU}" or SKU */
.rental-meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
}

.rental-sku {
  font-weight: 600;
  font-size: .92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

/* Right: actions cluster */
.rental-actions {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* Availability badge/pill */
.rental-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  line-height: 1.15;
  border-radius: 9999px;
  white-space: nowrap;
  padding: .15rem .55rem;
  max-width: 9rem;
}

.rental-badge.available { background: #e6f7e9; color: #137333; }
.rental-badge.call { background: #fffbe6; color: #8a6d3b; }

/* ===== Single "Add to Cart" pill ===== */
.rental-add-tag { display: none !important; }

.rental-add {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .25rem; /* Tight gap for + icon */
  padding: .42rem .65rem; /* Optimized padding */
  border-radius: 9999px;
  border: 1px solid #ddd;
  background: #fff;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap; /* Force single line */
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.rental-add__icon {
  width: 14px; /* Compact icon */
  height: 14px;
  line-height: 0;
  display: inline-block;
  flex-shrink: 0; /* Prevent icon from shrinking */
}

.rental-add__text {
  white-space: nowrap; /* Force text to stay on one line */
}

/* Availability tints */
.rental-add.avail-ok { background: #e6f7e9; border-color: #bfeac6; color: #137333; }
.rental-add.avail-hold { background: #e6f7e9; border-color: #bfeac6; color: #137333; }

/*.rental-add.avail-hold { background: #fffbe6; border-color: #f2e6bb; color: #8a6d3b; }*/
.rental-add:hover { filter: brightness(.98); }

/* Added state */
.rental-add.is-added { 
  background: #16a34a; 
  border-color: #16a34a; 
  color: #fff; 
}
.rental-add.is-added .rental-add__icon svg { fill: currentColor; }

/* Focus states */
.rental-add:focus,
.rental-add:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit;
}

.rental-add:focus-visible {
  outline: 2px solid rgba(22,163,74,.45) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* Narrow cards - responsive adjustments */
@container (max-width: 230px) {
  .rental-card-header { 
    justify-content: flex-start; 
    flex-wrap: wrap; /* Allow wrapping if needed */
  }
  .rental-meta { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: .2rem; 
    max-width: 100%; 
  }
  .rental-add {
    font-size: .75rem; /* Even smaller in narrow containers */
    padding: .3rem .5rem;
  }
}

/* ---------- Rate strip ---------- */
.rate-strip {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 12px;
  margin-top: .5rem;
  overflow: hidden;
  font-size: .78rem;
}

.rate-strip__cell {
  flex: 1 1 0;
  text-align: center;
  padding: .5rem .2rem;
}

.rate-strip__cell + .rate-strip__cell {
  border-left: 1px solid var(--color-border, #e5e5e5);
}

.rate-strip__price {
  display: block;
  font-weight: 700;
  line-height: 1.1;
}

.rate-strip__label {
  opacity: .72;
  text-transform: capitalize;
  font-size: .7em;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .rate-strip { font-size: .7rem; }
}

/* ---------- Toast (mobile notification) ---------- */
#rental-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  bottom: 0;
  z-index: 1000;
  background: #111;
  color: #fff;
  border-radius: 9999px;
  padding: .55rem .9rem;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}

#rental-toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-12px);
}

/* Toast text truncation for mobile */
#rental-toast .toast-text {
  display: inline-block;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* ---------- Sticky bar (bottom bar when items in cart) ---------- */
#rental-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #0f172a;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.1);
  transform: translateY(100%);
  transition: transform .25s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .9rem;
  gap: .75rem;
}

#rental-sticky.show {
  transform: translateY(0);
}

#rental-sticky .summary {
  font-size: .92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#rental-sticky .preview {
  opacity: .8;
  font-size: .82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%; /* Prevent overflow on mobile */
}

#rental-sticky .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .9rem;
  background: #111;
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Drawer Backdrop ---------- */
#rental-drawer-backdrop {
  display: none; /* Hidden on mobile */
}

/* Desktop only: semi-transparent backdrop */
@media (min-width: 1024px) {
  #rental-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3); /* Light dim for context */
    z-index: 9997;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  
  #rental-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---------- Drawer (Desktop Only - Corner Overlay) ---------- */
#rental-drawer {
  display: none; /* Hidden on mobile */
}

/* Desktop: corner overlay drawer */
@media (min-width: 1024px) {
  #rental-drawer {
    display: flex;
    position: fixed;
    right: 20px; /* Offset from edge */
    top: 80px; /* Below typical header */
    height: auto;
    max-height: calc(100vh - 100px);
    width: 420px; /* Wider for no truncation */
    background: #fff;
    z-index: 9998;
    transform: translateX(calc(100% + 40px)); /* Start off-screen */
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
    border-radius: 12px; /* Rounded corners for overlay */
    flex-direction: column;
    transition: transform .25s ease;
  }
  
  #rental-drawer.open {
    transform: translateX(0);
  }
  
  /* Drawer header */
  #rental-drawer .rd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid #eee;
    background: #fff;
    border-radius: 12px 12px 0 0;
  }
  
  #rental-drawer .rd-head strong {
    font-size: 1.1rem;
  }
  
  #rental-drawer .rd-close {
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s;
  }
  
  #rental-drawer .rd-close:hover {
    opacity: 1;
  }
  
  /* Drawer body - scrollable list */
  #rental-drawer .rd-body {
    flex: 1;
    overflow-y: auto;
    padding: .5rem 0;
    min-height: 150px; /* Show ~3 items minimum */
    max-height: 400px; /* Reasonable max height */
  }
  
  #rental-drawer .rd-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  /* Drawer row - NO TRUNCATION on desktop */
  #rental-drawer .rd-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: .75rem;
    align-items: center;
    padding: .75rem 1.2rem;
    border-bottom: 1px solid #f2f2f2;
    transition: background 0.15s;
  }
  
  #rental-drawer .rd-row:hover {
    background: #f9f9f9;
  }
  
  #rental-drawer .rd-thumb-link {
    display: block;
    width: 56px;
    height: 56px;
  }
  
  #rental-drawer .rd-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    background: #f7f7f7;
  }
  
  #rental-drawer .rd-meta {
    min-width: 0;
  }
  
  #rental-drawer .rd-title {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    color: #333;
    text-decoration: none;
    line-height: 1.3;
    /* NO truncation - full multi-line text */
  }
  
  #rental-drawer .rd-title:hover {
    color: #f97316;
    text-decoration: underline;
  }
  
  #rental-drawer .rd-remove {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: .35rem .7rem;
    cursor: pointer;
    font-size: .85rem;
    white-space: nowrap;
    transition: all 0.15s;
  }
  
  #rental-drawer .rd-remove:hover {
    border-color: #ff4444;
    color: #ff4444;
    background: #fff5f5;
  }
  
  #rental-drawer .rd-empty {
    padding: 2rem;
    color: #666;
    text-align: center;
  }
  
  /* Drawer footer - improved layout */
  #rental-drawer .rd-foot {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem;
    border-top: 1px solid #eee;
    background: #f9f9f9;
    border-radius: 0 0 12px 12px;
  }
  
  /* View Cart button - primary action, full width */
  #rental-drawer .rd-cta {
    width: 100%;
    text-align: center;
    background: #111;
    color: #fff;
    border-radius: 8px;
    padding: .8rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: background 0.15s;
  }
  
  #rental-drawer .rd-cta:hover {
    background: #222;
  }
  
  /* Secondary buttons container - side by side */
  #rental-drawer .rd-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
  }
  
  /* Secondary buttons */
  #rental-drawer .rd-more,
  #rental-drawer .rd-clear {
    padding: .65rem .8rem;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: .85rem;
    transition: all 0.15s;
  }
  
  #rental-drawer .rd-more:hover {
    background: #f0f0f0;
  }
  
  #rental-drawer .rd-clear {
    border-color: #ff4444;
    color: #ff4444;
  }
  
  #rental-drawer .rd-clear:hover {
    background: #fff5f5;
    border-color: #cc0000;
    color: #cc0000;
  }
}

/* ---------- NO CONTENT PUSH - Remove old push styles ---------- */
/* Drawer overlays content instead of pushing */

/* ---------- Card positioning ---------- */
.productitem,
.product-item,
.product-card,
.grid-product,
.card,
article {
  position: relative;
}

/* Full-card click target */
.rental-card-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  cursor: pointer;
}

/* ---------- Color tokens ---------- */
:root {
  --rental-accent: #f97316;
  --rental-added: #16a34a;
}

/* ---------- Hover effects ---------- */
.productitem:hover .productitem--title a,
.product-card:hover .card__heading a,
.card:hover .card__heading a,
article:hover .card__heading a,
.productitem:focus-within .productitem--title a,
.product-card:focus-within .card__heading a,
.card:focus-within .card__heading a,
article:focus-within .card__heading a,
.productitem:hover .rental-sku,
.product-card:hover .rental-sku,
.card:hover .rental-sku,
article:hover .rental-sku {
  color: var(--rental-accent) !important;
}

.productitem:hover .rate-strip,
.product-card:hover .rate-strip,
.card:hover .rate-strip,
article:hover .rate-strip {
  border-color: color-mix(in srgb, var(--rental-accent) 40%, #e5e5e5);
}

/* ---------- Mobile specific adjustments ---------- */
@media (max-width: 1023px) {
  .rental-add {
    font-size: .78rem; /* Smaller text on mobile */
    padding: .35rem .55rem; /* Less padding */
    gap: .2rem; /* Even tighter gap */
  }
  
  .rental-add__icon {
    width: 12px; /* Smaller icon on mobile */
    height: 12px;
  }
  
  /* Ensure drawer is completely hidden on mobile */
  #rental-drawer,
  #rental-drawer-backdrop {
    display: none !important;
  }
  
  /* Mobile toast has truncation */
  #rental-toast {
    max-width: 90vw;
  }
}

{% style %}
/* Force a square frame and neutralize theme/rimg wrappers */
#shopify-section-{{ section.id }} .productitem--image {
  aspect-ratio: 1 / 1 !important;
  display: block;
  overflow: hidden;
  /* If the theme uses the inline custom prop for height, override it: */
  --product-grid-item-image-aspect-ratio: 1 / 1 !important;
}

/* Kill rimg padding-top trick so the wrapper can follow our aspect ratio */
#shopify-section-{{ section.id }} .productitem--image .rimage-outer-wrapper,
#shopify-section-{{ section.id }} .productitem--image .rimage-wrapper,
#shopify-section-{{ section.id }} .productitem--image .rimage-inner {
  padding-top: 0 !important;
  height: 100% !important;
  width: 100% !important;
  position: static !important;
}

/* Make the actual image fit the frame without cropping */
#shopify-section-{{ section.id }} .productitem--image img,
#shopify-section-{{ section.id }} .productitem--image picture,
#shopify-section-{{ section.id }} .productitem--image canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* use 'cover' if you prefer a crop */
  display: block;
}

/* Extra specificity in case theme targets imagestyle--natural/square */
#shopify-section-{{ section.id }} .imagestyle--natural .productitem--image,
#shopify-section-{{ section.id }} .imagestyle--square .productitem--image {
  aspect-ratio: 1 / 1 !important;
}


{% endstyle %}