/*
 * Enhanced front-end stylesheet for Ebramus Product View.
 *
 * This file is based on the original frontend.css shipped with the plugin but
 * extended to support grouped category views, pagination controls and other
 * UI refinements. All original rules are preserved to maintain visual
 * consistency with earlier versions. Custom rules are appended at the end.
 */

/* Isolation & layout width */
.epv * { pointer-events:auto; }
.epv-container { max-width: var(--epv-max-w, 1200px); margin: 0 auto; padding: 0 16px; }
.epv.epv-search, .epv.epv-search .epv-row, .epv .epv-control, .epv .epv-btn { position:relative; z-index:10; }
/* spacing */
.epv.epv-search { margin-top: var(--epv-search-mt, 0px); margin-bottom: var(--epv-search-mb, 16px); }
.epv.epv-view { margin-top: var(--epv-view-mt, 16px); }
/* controls */
/*
  The height, spacing and border of the search controls are driven by CSS variables so that
  admin settings can adjust their appearance on different devices. A thicker border and
  generous padding improve legibility on mobile. Buttons use variables for background
  and text colours.
*/
.epv .epv-row { display:flex; gap:var(--epv-gap,10px); align-items:center; }
.epv .epv-control,
.epv .epv-btn { height:var(--epv-control-h,44px); border-radius:12px; }
.epv .epv-control {
  min-width:0;
  flex:1;
  padding:0 10px;
  -webkit-tap-highlight-color: transparent;
  border:1px solid #ccc;
  background:#fff;
  color:#333;
  font-size:14px;
  line-height:1;
}
.epv .epv-btn {
  padding:0 18px;
  cursor:pointer;
  border:none;
  font-size:14px;
  line-height:1;
}
/* search submit button inherits colours from variables */
.epv .epv-btn.epv-submit {
  background:var(--epv-search-btn-bg, #1e73be);
  color:var(--epv-search-btn-color, #fff);
}
.epv .epv-btn[disabled] { opacity:0.6; cursor:not-allowed; }
/* search styles */
.epv-search .epv-search-toggle { margin-bottom:8px; }
.epv-search[data-style='dropdown'] .epv-search-toggle { display:block; }
.epv-search[data-style='dropdown'] .epv-search-panel { display:none; }
.epv-search[data-style='dropdown'].open .epv-search-panel { display:block; }
/* 2+2 grid */
.epv-search[data-style='two_by_two'] .epv-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--epv-gap,10px); }
/* table view */
.epv-table-wrap { overflow:auto; position:relative; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,0.06); background:#fff; }
.epv-table { border-collapse:collapse; width:100%; background:#fff; }
.epv-table th, .epv-table td { padding:10px 12px; border-bottom:1px solid #f0f0f0; text-align:left; }
.epv-table thead th { position:sticky; top:0; background:#fafafa; z-index:2; }
.epv-table tbody tr:nth-child(odd){ background:#fff; }
.epv-table tbody tr:nth-child(even){ background:#fcfcfc; }
.epv .epv-thumb { width:var(--epv-img,64px); height:var(--epv-img,64px); object-fit:cover; border-radius:10px; cursor:zoom-in; }
/* list view */
.epv-list { background:#fff; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.epv-list .epv-item { display:flex; gap:10px; padding:12px; border-bottom:1px solid #f0f0f0; }
.epv-list .epv-item:last-child{ border-bottom:0; }
.epv-list .epv-l1 { flex:0 0 auto; }
.epv-list .epv-l2 { flex:1 1 auto; }
.epv-list .epv-actions { display:flex; gap:8px; align-items:center; margin-top:6px; }
.epv .epv-qty { width:68px; }
/* Wishlist icon centering */
.epv .epv-wish { display:flex; align-items:center; justify-content:center; }
/* Align list image vertically center */
.epv-list .epv-l1 { display:flex; align-items:center; }
/* Align list row items vertically */
.epv-list .epv-item { align-items:center; }
/* Custom list styling options */
.epv-list.price-bold .epv-price { font-weight:600; }
.epv-list.list-border .epv-item { border:1px solid #eaeaea; border-radius:12px; margin:8px 0; }
.epv-list.image-border .epv-thumb { border:1px solid #eaeaea; }
.epv-list.icon-add .epv-add { display:none !important; }
.epv-list.icon-add .epv-add-icon { display:inline-flex; align-items:center; justify-content:center; background:none; border:none; font-size:18px; cursor:pointer; color:#1e73be; }
/* General styling for add-to-cart icon buttons (list and table) */
.epv-add-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--epv-add-icon-bg, #1e73be);
  color:#fff;
  border:none;
  padding:6px 12px;
  border-radius:8px;
  font-size:18px;
  cursor:pointer;
  line-height:1;
  transition:background 0.2s ease;
}
.epv-add-icon:hover { filter:brightness(1.1); }
.epv-add-icon:disabled { opacity:0.6; cursor:not-allowed; }
/* Saved/active state for wishlist icons */
.epv .epv-wish.saved {
  background:#ffe6ea;
  color:#d1006c;
  border-color:#d1006c;
}
/* Vertical (stacked) search style for dropdown: show panel, hide toggle */
.epv-search[data-style='dropdown'] .epv-search-toggle { display:none; }
.epv-search[data-style='dropdown'] .epv-search-panel { display:block !important; }
.epv-search[data-style='dropdown'] .epv-row {
  flex-direction:column;
  align-items:stretch;
  gap:var(--epv-gap,10px);
}
.epv-search[data-style='dropdown'] .epv-btn.epv-submit { width:100%; }
/* Larger card styling for list items */
.epv-list .epv-item {
  padding:16px;
  border-bottom:1px solid #f0f0f0;
  align-items:center;
}
.epv-list .epv-name { font-weight:600; font-size:1.1em; margin-bottom:4px; }

/* Display product names in uppercase for both table and list views. This
   ensures model/vehicle names are always shown consistently regardless
   of punctuation or hyphens. */
.epv-table td.col-name,
.epv-list .epv-name {
  text-transform: uppercase;
}
.epv-list .epv-meta span { color:#555; font-size:0.9em; }
.epv-list .epv-price { font-weight:600; font-size:1.1em; }
.epv-list .epv-status { font-size:0.95em; color:#28a745; }
@media (max-width:767px){
  .epv-lightbox-content { width:85vw; height:85vw; }
  .epv-lightbox-close { width:28px; height:28px; font-size:16px; line-height:28px; top:6px; right:6px; }
}
/* Meta and price gaps controlled via CSS variables */
.epv-list .epv-meta { display:flex; gap:var(--epv-meta-gap,6px); align-items:center; }
.epv-list .epv-price-status { display:flex; gap:var(--epv-price-gap,6px); align-items:center; }
/* Spread price and status across row */
.epv-list .epv-price-status { justify-content:space-between; }
/* Table column width variables */
.epv-table th.col-image, .epv-table td.col-image { width:var(--epv-col-image, auto); }
.epv-table th.col-name,  .epv-table td.col-name  { width:var(--epv-col-name, auto); }
.epv-table th.col-sku,   .epv-table td.col-sku   { width:var(--epv-col-sku, auto); }
.epv-table th.col-oem,   .epv-table td.col-oem   { width:var(--epv-col-oem, auto); }
.epv-table th.col-status,.epv-table td.col-status{ width:var(--epv-col-status, auto); }
.epv-table th.col-qty,   .epv-table td.col-qty   { width:var(--epv-col-qty, auto); }
.epv-table th.col-wishlist,.epv-table td.col-wishlist{ width:var(--epv-col-wishlist, auto); }
.epv-table th.col-price, .epv-table td.col-price { width:var(--epv-col-price, auto); }
.epv-table th.col-add,   .epv-table td.col-add   { width:var(--epv-col-add, auto); }
/* wishlist */
.epv .epv-wish { width:36px; height:36px; border-radius:50%; border:1px solid #eee; background:#fff; cursor:pointer; }
.epv .epv-wish.saved { background:#ffe6ea; }

/* No results message styling: center text and provide generous padding
   so that the empty state feels intentional and consistent with
   surrounding card layouts. */
.epv-no-results {
  text-align: center;
  padding: 40px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: #555;
}
/* hero */
.epv-hero { position:relative; height:var(--epv-hero-h,520px); display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:16px; }
.epv-hero-bg { position:absolute; inset:0; }
.epv-hero-bg .epv-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity var(--epv-hero-t,600ms) ease; }
.epv-hero-bg .epv-slide.active { opacity:1; }
.epv-hero-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.35); }
.epv-hero-inner { position:relative; width:100%; max-width:var(--epv-hero-w,1100px); padding:0 16px; }
.epv-hero-inner[data-pos="left"] { margin-left: clamp(0px, var(--epv-off-x,0px), 200px); }
.epv-hero-inner[data-pos="right"] { margin-left:auto; margin-right: clamp(0px, var(--epv-off-x,0px), 200px); }
.epv-hero-inner[data-pos="center"] { margin: 0 auto; }
.epv-hero-dots { position:absolute; bottom:16px; left:0; right:0; text-align:center; z-index:3; }
.epv-hero-dot { width:10px; height:10px; border-radius:50%; border:none; margin:0 4px; background:#fff; opacity:0.6; cursor:pointer; }
.epv-hero-dot.active { opacity:1; }
/* lightbox */
.epv-lightbox { position:fixed; inset:0; z-index:9999; display:block; }
.epv-lightbox[hidden]{ display:none; }
.epv-lightbox-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.6); }
.epv-lightbox-content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:var(--epv-popup,520px); height:var(--epv-popup,520px); background:#fff; border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.epv-lightbox-content img { width:100%; height:100%; object-fit:cover; }
.epv-lightbox-close { position:absolute; top:8px; right:10px; width:36px; height:36px; border-radius:18px; border:none; background:#000; color:#fff; font-size:20px; line-height:36px; text-align:center; cursor:pointer; opacity:0.85; }
.epv-lightbox-close:hover { opacity:1; }
/* hide titles */
body.epv-shop-hide-title .woocommerce-products-header,
body.epv-shop-hide-title .woocommerce-products-header__title,
body.epv-shop-hide-title .page-title { display:none !important; }

/* -------------------------------------------------------------------------- */
/* Custom enhancements for EPV v0.0.5 */

/* Header for grouped view: align title and toggle links */
.epv-grouped-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:8px 0 12px;
}
.epv-grouped-header .button {
  margin-right:6px;
  background:#f7f7f7;
  border:1px solid #ddd;
  padding:6px 12px;
  border-radius:6px;
  text-decoration:none;
  font-size:14px;
  color:#333;
  transition:background 0.2s ease;
}
.epv-grouped-header .button:hover {
  background:#e5e5e5;
}
.epv-grouped-header .button.is-active {
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.epv-grouped-title {
  margin:0;
  font-size:1.25rem;
  font-weight:600;
}
/* Pagination styling */
.epv-pagination {
  display:flex;
  justify-content:center;
  margin:18px 0;
}
.epv-pagination ul {
  list-style:none;
  display:flex;
  gap:6px;
  margin:0;
  padding:0;
}
.epv-pagination a,
.epv-pagination span {
  display:inline-block;
  padding:6px 10px;
  border:1px solid #e5e7eb;
  border-radius:6px;
  text-decoration:none;
  color:#333;
}
.epv-pagination a:hover {
  background:#f7f7f7;
}
.epv-pagination .current {
  background:#111827;
  color:#fff;
  border-color:#111827;
}
/* Grouped products grid */
.epv-categorized-results {
  display:block;
  gap:1.25rem;
}
.epv-category-block {
  margin-bottom:1.5rem;
}
.epv-category-title {
  font-size:1rem;
  font-weight:600;
  margin-bottom:.75rem;
  display:flex;
  gap:.35rem;
  align-items:center;
}
.epv-products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:.75rem;
}
.epv-product-card {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:.75rem;
  padding:.75rem;
}
.epv-product-title {
  font-size:.92rem;
  margin:.35rem 0 .25rem;
}
.epv-price {
  font-weight:600;
  margin-bottom:.5rem;
}
@media (max-width:768px){
  .epv-products-grid {
    grid-template-columns:1fr 1fr;
  }
}

/*
 * Category header row styling for grouped table mode. Provides a
 * light background and bold text so category separators stand out.
 */
.epv-table tr.epv-cat-header td{
  font-weight:bold;
  background-color:#f5f5f5;
  padding-top:6px;
  padding-bottom:6px;
}