/* public/css/products.css */

:root{
  --brand:#1146b8;
  --brand-2:#0b2f86;
  --bg:#f3f7ff;
  --card-border:#dbe7ff;
  --muted:#7b8aa6;
}

.acaps-page{ background: var(--bg); }

/* Top bar */
.acaps-topbar{
  background:#e9f1ff;
  border-bottom:1px solid #d7e6ff;
  padding:10px 0;
}
.acaps-search-wrap{
  display:flex;
  gap:.5rem;
  align-items:center;
  background:#ffffff;
  border:1px solid #d7e6ff;
  border-radius:999px;
  padding:.35rem .6rem;
  min-height:44px;
}
.acaps-search-wrap input{
  border:0;
  outline:0;
  width:100%;
  font-size:.95rem;
  background:transparent;
}

.acaps-pill-btn{
  background:var(--brand);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:.45rem 1.1rem;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}
.acaps-pill-btn:hover{ background:var(--brand-2); color:#fff; }

.acaps-btn-outline{
  border:1px solid #b7ccff;
  color:var(--brand);
  background:#fff;
  border-radius:999px;
  font-weight:800;
  padding:.45rem 1rem;
  white-space:nowrap;
}
.acaps-btn-outline:hover{ background:#f2f7ff; color:var(--brand); }

/* keep text WHITE on hover */
.acaps-btn-brand{
  background:var(--brand);
  color:#fff !important;
  border:0;
  border-radius:999px;
  font-weight:900;
  padding:.45rem 1rem;
  white-space:nowrap;
}
.acaps-btn-brand:hover,
.acaps-btn-brand:focus{
  background:var(--brand-2);
  color:#fff !important;
  text-decoration:none;
}

.acaps-select{ padding-right:2.2rem; }

/* Section header */
.acaps-section-head{ padding:16px 0 10px; }
.acaps-section-head--spaced{ margin-top:12px; margin-bottom:16px; }

.acaps-section-title{
  font-weight:900;
  color:var(--brand);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.acaps-section-sub{
  color:#6a7ea5;
  font-weight:700;
  font-size:.9rem;
  margin-left:.35rem;
}

/* Product card */
.acaps-prod-card{
  border:1px solid var(--card-border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 0 rgba(17,70,184,.05);
  background:#fff;
  height:100%;
  display:flex;
  flex-direction:column;
}

/* ✅ FULL IMAGE (NO CROP) + EDGE-TO-EDGE + CLICKABLE AREA */
.acaps-prod-media{
  position:relative;
  background:#fff;
  overflow:hidden;

  height:260px;
  cursor:pointer;

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

  padding:0; /* edge-to-edge */
}
.acaps-prod-hero{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;

  padding:8px 0; /* only top/bottom breathing */
}

/* Fav button */
.acaps-fav{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid #d7e6ff;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9bb2df;
  cursor:pointer;
  user-select:none;
  z-index:6;
}
.acaps-fav:hover{ color:var(--brand); border-color:#b7ccff; }
.acaps-fav.is-favorite{
  color:#dc2626;
  border-color:#fecaca;
  background:#fff5f5;
}
.acaps-fav.is-loading{
  opacity:.65;
  pointer-events:none;
}

/* ✅ SLIDER ARROWS */
.acaps-img-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border-radius:50%;
  border:0;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:22px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:6;
}
.acaps-img-prev{ left:10px; }
.acaps-img-next{ right:10px; }
.acaps-img-nav:hover{ background:rgba(0,0,0,.85); }

/* Body */
.acaps-prod-body{
  padding:12px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.acaps-partno{
  color:var(--muted);
  font-weight:900;
  font-size:.78rem;
  text-transform:uppercase;
}

.acaps-prod-title{
  font-weight:900;
  color:#0f1f3a;
  font-size:.92rem;
  line-height:1.25;
  text-transform:uppercase;
  min-height:44px;
}

/* Prices */
.acaps-price-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  padding:6px 0 4px;
}
.acaps-price-label{
  color:#8aa0c4;
  font-weight:900;
  font-size:.72rem;
  text-transform:uppercase;
}
.acaps-price{
  font-weight:900;
  color:#1c2e52;
  font-size:.95rem;
}
.acaps-price strong{
  color:var(--brand);
  font-size:1.05rem;
}

/* ================================
   ✅ Select + Qty + Add layout
   ================================ */

/* Labels inside card (Select label) */
.acaps-prod-body .form-label{
  font-weight:800;
  font-size:.75rem;
  color:#7b8aa6;
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* Dropdown styling */
.acaps-prod-body .form-select,
.acaps-prod-body select.form-select{
  border:1px solid #d7e6ff;
  border-radius:12px;
  padding:.55rem .75rem;
  font-weight:800;
  font-size:.9rem;
  background:#f8fbff;
  color:#0f1f3a;
  box-shadow:none;
}
.acaps-prod-body .form-select:focus{
  border-color:#1146b8;
  box-shadow:0 0 0 .2rem rgba(17,70,184,.15);
  outline:0;
}
.acaps-prod-body .form-select:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Cart area:
   - Select stays on top (already in markup above qty/add)
   - Qty (left) + Add (right) INLINE */
.acaps-qty-cart{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  margin-top:auto;
}

/* ✅ INLINE ROW for Qty + Add */
.acaps-qty-cart .acaps-qty{
  width:auto;                 /* don’t force full width */
  flex:0 0 auto;
}
.acaps-qty-cart .add-to-cart-btn{
  width:auto;                 /* inline, not full width */
  flex:1 1 auto;              /* take remaining space */
  min-width:120px;
}

/* Make the last row (qty + add) a proper inline row */
.acaps-qty-cart > .acaps-qty + .acaps-add-btn,
.acaps-qty-cart > .acaps-qty + .add-to-cart-btn{
  margin-left:0;
}
.acaps-qty-cart{
  /* create a dedicated row by wrapping rule using :has if supported? no.
     Instead we set on the direct children order: select block (div) then .acaps-qty then button.
     We'll make the bottom two align inline by turning them into a grid */
  display:grid;
  grid-template-columns: 1fr;  /* default (stack) */
  grid-template-rows:auto;
}

/* When the select exists, it is inside a div.w-100.mb-2, keep it full */
.acaps-qty-cart > .w-100{
  grid-column: 1 / -1;
}

/* ✅ Put qty + add in 2 columns */
.acaps-qty-cart > .acaps-qty{
  grid-column: 1 / 2;
}
.acaps-qty-cart > .acaps-add-btn,
.acaps-qty-cart > .add-to-cart-btn{
  grid-column: 1 / 2;
}

/* Use 2-column layout ONLY when form has both qty and add button (normal case) */
.acaps-qty-cart{
  grid-template-columns: auto 1fr; /* qty left, add right */
  column-gap:10px;
  row-gap:10px;
}
.acaps-qty-cart > .w-100{
  grid-column: 1 / -1;  /* select full width */
}
.acaps-qty-cart > .acaps-qty{
  grid-column: 1 / 2;
}
.acaps-qty-cart > .acaps-add-btn,
.acaps-qty-cart > .add-to-cart-btn{
  grid-column: 2 / 3;
}

/* Qty row */
.acaps-qty{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--brand-2);
  border-radius:12px;
  padding:6px;
}

/* Qty controls */
.acaps-qty .qty-minus,
.acaps-qty .qty-plus{
  width:38px;
  height:38px;
  border-radius:10px;
  border:0;
  background:#072767;
  color:#fff;
  font-weight:900;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.acaps-qty .qty-input{
  width:54px;
  height:38px;
  border-radius:10px;
  border:0;
  text-align:center;
  font-weight:900;
  color:#0f1f3a;
  outline:none;
}
.acaps-qty--compact{ padding:6px; }

/* Add button */
.acaps-add-btn{
  height:42px;
  border-radius:12px;
  border:0;
  background:var(--brand-2);
  color:#fff;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  padding:0 .9rem;
}
.acaps-add-btn:hover{ background:var(--brand); }
.acaps-add-btn--compact{ padding:.5rem .6rem; }

/* Overlay message */
.cart-inline-msg{
  padding:6px 10px;
  border-radius:10px;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
  font-weight:800;
  font-size:.85rem;
}
.cart-inline-msg.is-error{ color:#b02a37; }
.cart-inline-msg.is-success{ color:#146c43; }

.cart-inline-msg--overlay{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:10;
}

/* Helpers */
.acaps-soft-card{
  border:1px solid #d7e6ff;
  background:#ffffff;
  border-radius:14px;
  box-shadow:0 2px 0 rgba(17,70,184,.05);
}

/* highlight for Filters button */
.is-highlight{
  outline:2px solid currentColor;
  outline-offset:2px;
}

/* Appearance toggle: compact grid */
#productsGrid.acaps-grid-compact .acaps-prod-card{ transform:none; }
#productsGrid.acaps-grid-compact .acaps-prod-body{ padding:12px; }
#productsGrid.acaps-grid-compact .acaps-prod-title{
  font-size:14px;
  line-height:1.2;
}
#productsGrid.acaps-grid-compact .acaps-prod-media{ height:180px; }

/* Small screens: stack qty + add for space */
@media (max-width:576px){
  .acaps-prod-media{ height:220px; }

  .acaps-qty-cart{
    grid-template-columns: 1fr; /* stack */
  }
  .acaps-qty-cart > .acaps-qty{
    grid-column: 1 / -1;
  }
  .acaps-qty-cart > .acaps-add-btn,
  .acaps-qty-cart > .add-to-cart-btn{
    grid-column: 1 / -1;
  }

  .acaps-add-btn{ height:44px; }
}