/* =========================================================
   PAC Catalog Dashboard Theme
   File name: pac-catalog.css
   Matches the Cento Employee Portal dashboard styling.
   ========================================================= */

.pac-catalog,
.pac-catalog *{
  box-sizing:border-box;
}

.pac-catalog{
  --pac-blue:#0757a6;
  --pac-blue-soft:#edf5ff;
  --pac-ink:#1f2937;
  --pac-muted:#687385;
  --pac-faint:#f7f8fa;
  --pac-border:#e1e5ea;
  --pac-card:#ffffff;
  --pac-red:#cc0000;
  width:100%;
  background:#fff !important;
  color:var(--pac-ink) !important;
  font-family:Arial, Helvetica, sans-serif !important;
  padding:24px 28px 34px !important;
}

.pac-wrap{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

.pac-logo{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  margin:0 0 24px !important;
}

.pac-logo a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  max-width:max-content !important;
  padding:0 !important;
  margin:0 auto !important;
  line-height:0 !important;
  text-decoration:none !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.pac-logo img{
  width:190px !important;
  max-width:190px !important;
  min-width:0 !important;
  height:auto !important;
  display:block !important;
  transform-origin:center center !important;
  transition:transform .22s ease, filter .22s ease, opacity .22s ease !important;
}

.pac-logo a:hover img,
.pac-logo a:focus-visible img{
  transform:translateY(-2px) scale(1.035) !important;
  filter:drop-shadow(0 10px 18px rgba(31,41,55,.16)) !important;
}

.pac-logo a:active img{
  transform:scale(.985) !important;
}

/* Breadcrumb mirrors dashboard card controls */
.pac-breadcrumb{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  border:1px solid var(--pac-border) !important;
  background:#fff !important;
  border-radius:16px !important;
  padding:14px 18px !important;
  margin:0 0 18px !important;
  color:var(--pac-muted) !important;
  font-size:14px !important;
  line-height:1.35 !important;
  box-shadow:0 8px 22px rgba(31,41,55,.04) !important;
}

.pac-breadcrumb a,
.pac-breadcrumb strong{
  color:var(--pac-blue) !important;
  font-weight:800 !important;
  text-decoration:none !important;
}

/* Main catalog toolbar */
.pac-title{
  background:linear-gradient(135deg,#ffffff,#f2f6fb) !important;
  border:1px solid var(--pac-border) !important;
  border-radius:22px !important;
  box-shadow:0 10px 24px rgba(31,41,55,.05) !important;
  color:var(--pac-ink) !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:clamp(34px,4.3vw,58px) !important;
  line-height:1 !important;
  letter-spacing:-.045em !important;
  margin:0 0 18px !important;
  padding:28px 30px !important;
  font-weight:900 !important;
}

.pac-title:before{
  content:"PAC Catalog";
  display:block;
  margin:0 0 9px;
  color:var(--pac-blue);
  font-size:12px;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:900;
}

.pac-toolbar{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  background:#fff !important;
  border:1px solid var(--pac-border) !important;
  border-radius:18px !important;
  box-shadow:0 8px 18px rgba(31,41,55,.035) !important;
  padding:16px !important;
  margin:0 0 18px !important;
}

.pac-pill,
.pac-search button,
.pac-pager button,
.pac-filter-actions button{
  min-height:44px !important;
  border:1px solid #b8d8ff !important;
  border-radius:13px !important;
  background:var(--pac-blue-soft) !important;
  color:var(--pac-blue) !important;
  font-size:14px !important;
  font-weight:900 !important;
  padding:0 16px !important;
  line-height:1 !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:background .16s ease,border-color .16s ease,transform .16s ease !important;
}

.pac-pill:hover,
.pac-search button:hover,
.pac-pager button:hover,
.pac-filter-actions button:hover{
  background:#e2f0ff !important;
  border-color:#9fcaff !important;
  transform:translateY(-1px) !important;
}

.pac-search{
  display:flex !important;
  gap:10px !important;
  flex:1 1 520px !important;
}

.pac-search input{
  width:100% !important;
  height:44px !important;
  border:1px solid #cfd6df !important;
  border-radius:13px !important;
  background:#fff !important;
  color:var(--pac-ink) !important;
  padding:0 14px !important;
  font-size:14px !important;
  outline:none !important;
  box-shadow:none !important;
}

.pac-search input:focus{
  border-color:var(--pac-blue) !important;
  box-shadow:0 0 0 4px rgba(7,87,166,.1) !important;
}

.pac-dropdown{
  position:relative !important;
}

.pac-panel{
  display:none;
  position:absolute !important;
  top:calc(100% + 8px) !important;
  left:0 !important;
  z-index:30 !important;
  min-width:260px !important;
  background:#fff !important;
  border:1px solid var(--pac-border) !important;
  border-radius:14px !important;
  box-shadow:0 22px 44px rgba(31,41,55,.14) !important;
  padding:8px !important;
  overflow:hidden !important;
}

.pac-panel.is-open{
  display:block !important;
}

.pac-panel button,
.pac-panel label{
  display:block !important;
  width:100% !important;
  padding:10px 12px !important;
  border:0 !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#374151 !important;
  font-size:14px !important;
  font-weight:800 !important;
  text-align:left !important;
  cursor:pointer !important;
}

.pac-panel button:hover,
.pac-panel button.is-active,
.pac-panel label:hover{
  background:var(--pac-blue-soft) !important;
  color:var(--pac-blue) !important;
}

.pac-filter-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  margin-top:8px !important;
}

/* Catalog grid */
.pac-grid{
  display:grid !important;
  grid-template-columns:repeat(var(--pac-cols,6),minmax(0,1fr)) !important;
  gap:14px !important;
  background:#fff !important;
  border:1px solid var(--pac-border) !important;
  border-radius:22px !important;
  box-shadow:0 10px 24px rgba(31,41,55,.045) !important;
  padding:18px !important;
}

.pac-card{
  min-height:292px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  border:1px solid #e3e9f2 !important;
  border-radius:16px !important;
  background:#fff !important;
  color:var(--pac-ink) !important;
  padding:18px 14px 16px !important;
  text-decoration:none !important;
  box-shadow:none !important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease !important;
}

.pac-card:hover{
  border-color:#bdd8f5 !important;
  box-shadow:0 14px 26px rgba(31,41,55,.07) !important;
  transform:translateY(-2px) !important;
}

.pac-card-media{
  height:170px !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-bottom:12px !important;
}

.pac-card img{
  max-width:100% !important;
  max-height:170px !important;
  object-fit:contain !important;
}

.pac-card-title{
  color:#172033 !important;
  font-size:15px !important;
  line-height:1.22 !important;
  font-weight:900 !important;
  text-align:center !important;
  letter-spacing:-.01em !important;
}

.pac-card-size{
  display:block !important;
  color:#334155 !important;
  font-size:15px !important;
  font-weight:800 !important;
  margin-top:7px !important;
  text-align:center !important;
}

.pac-card-upc{
  display:block !important;
  color:#64748b !important;
  font-size:13px !important;
  font-weight:850 !important;
  margin-top:4px !important;
  text-align:center !important;
  letter-spacing:.02em !important;
}

.pac-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:18px 0 0 !important;
}

.pac-empty{
  color:var(--pac-muted) !important;
  font-weight:800 !important;
}

/* Product detail top row */
.pac-detail-topbar{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:14px !important;
  margin:0 0 18px !important;
  padding:0 !important;
  background:transparent !important;
}

.pac-top-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:0 16px !important;
  border:1px solid #253044 !important;
  border-radius:13px !important;
  background:#253044 !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:900 !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

.pac-top-button:hover{
  background:#111827 !important;
  border-color:#111827 !important;
  color:#fff !important;
}

/* Detail product card, tighter like dashboard panels */
.pac-detail-card{
  margin:0 0 40px !important;
  padding:34px 36px !important;
  border:1px solid var(--pac-border) !important;
  border-radius:22px !important;
  background:#fff !important;
  box-shadow:0 10px 24px rgba(31,41,55,.045) !important;
  overflow:hidden !important;
}

.pac-detail-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(320px,440px) !important;
  gap:38px !important;
  align-items:start !important;
}

.pac-detail-copy{
  min-width:0 !important;
}

/* Important: match dashboard type, not public product display type */
.pac-detail-title{
  margin:0 0 12px !important;
  max-width:720px !important;
  color:var(--pac-ink) !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:clamp(32px,3.3vw,46px) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
  font-weight:900 !important;
}

.pac-meta{
  margin:0 0 16px !important;
  color:#344155 !important;
  font-size:20px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
}

.pac-country{
  margin:0 0 16px !important;
  color:var(--pac-ink) !important;
  font-size:18px !important;
  font-weight:900 !important;
}

.pac-desc{
  max-width:680px !important;
  margin:0 0 18px !important;
  color:#536174 !important;
  font-size:15px !important;
  line-height:1.55 !important;
}

.pac-feature-line{
  margin:12px 0 20px !important;
  color:#536174 !important;
  font-size:14px !important;
  line-height:1.5 !important;
  font-weight:700 !important;
}

/* Detail actions, blue dashboard styling */
.pac-detail-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:10px !important;
  margin:22px 0 22px !important;
  padding:18px 0 0 !important;
  border-top:1px solid var(--pac-border) !important;
}

.pac-detail-action{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:142px !important;
  min-height:46px !important;
  padding:0 16px !important;
  border:1px solid #b8d8ff !important;
  border-radius:13px !important;
  background:var(--pac-blue-soft) !important;
  color:var(--pac-blue) !important;
  font-size:14px !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-decoration:none !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:transform .16s ease,background .16s ease,border-color .16s ease !important;
}

.pac-detail-action:hover{
  transform:translateY(-1px) !important;
  filter:none !important;
  background:#e2f0ff !important;
  border-color:#9fcaff !important;
  color:var(--pac-blue) !important;
}

.pac-detail-action--nutrition{
  background:var(--pac-blue) !important;
  border-color:var(--pac-blue) !important;
  color:#fff !important;
}

.pac-detail-action--nutrition:hover{
  background:#064984 !important;
  color:#fff !important;
}

.pac-detail-action--cert{
  flex-basis:auto !important;
  max-width:none !important;
  min-width:250px !important;
}

/* Badges */
.pac-badges{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:14px !important;
  margin:20px 0 22px !important;
}

.pac-badges img{
  width:52px !important;
  height:52px !important;
  object-fit:contain !important;
}

/* Image switcher */
.pac-detail-image-wrap{
  position:sticky !important;
  top:20px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
  min-width:0 !important;
}

.pac-detail-image{
  width:100% !important;
  min-height:320px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  border:0 !important;
  border-radius:16px !important;
  overflow:hidden !important;
}

.pac-detail-main-image{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:420px !important;
  object-fit:contain !important;
}

.pac-detail-thumbs{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  margin:0 !important;
}

.pac-detail-thumb{
  width:62px !important;
  height:62px !important;
  padding:6px !important;
  border:1px solid var(--pac-border) !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

.pac-detail-thumb.is-active{
  border-color:var(--pac-blue) !important;
  box-shadow:0 0 0 3px rgba(7,87,166,.12) !important;
}

.pac-detail-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

/* Specs */
.pac-spec{
  margin-top:6px !important;
}

.pac-spec h3{
  margin:18px 0 7px !important;
  color:var(--pac-ink) !important;
  font-size:20px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
}

.pac-spec p{
  margin:0 0 12px !important;
  color:#536174 !important;
  font-size:14px !important;
  line-height:1.45 !important;
}

.pac-spec table{
  width:100% !important;
  margin-top:18px !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  overflow:hidden !important;
  border:1px solid var(--pac-border) !important;
  background:#fff !important;
}

.pac-spec th,
.pac-spec td{
  padding:11px 13px !important;
  border:0 !important;
  border-right:1px solid var(--pac-border) !important;
  border-bottom:1px solid var(--pac-border) !important;
  background:#fff !important;
  color:#2d3748 !important;
  font-size:13px !important;
  text-align:left !important;
}

.pac-spec th{
  background:var(--pac-faint) !important;
  color:#657085 !important;
  font-weight:900 !important;
}

.pac-spec tr:last-child td{
  border-bottom:0 !important;
}

.pac-spec th:last-child,
.pac-spec td:last-child{
  border-right:0 !important;
}

/* Modal */
.pac-modal-dialog{
  border-radius:18px !important;
  box-shadow:0 22px 50px rgba(31,41,55,.24) !important;
}

/* Responsive */
@media(max-width:1180px){
  .pac-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  .pac-detail-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .pac-detail-image-wrap{
    position:relative !important;
    top:auto !important;
    order:-1 !important;
  }

  .pac-detail-image{
    min-height:280px !important;
  }

  .pac-detail-main-image{
    max-height:360px !important;
  }
}

@media(max-width:760px){
  .pac-catalog{
    padding:14px !important;
  }

  .pac-wrap{
    width:100% !important;
  }

  .pac-logo{
    padding:0 !important;
    margin-bottom:18px !important;
  }

  .pac-logo img{
    width:150px !important;
    max-width:150px !important;
  }

  .pac-breadcrumb,
  .pac-detail-topbar,
  .pac-detail-card{
    border-radius:16px !important;
  }

  .pac-detail-card{
    padding:24px 20px !important;
  }

  .pac-detail-topbar{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .pac-detail-title{
    font-size:31px !important;
  }

  .pac-meta{
    font-size:17px !important;
  }

  .pac-detail-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .pac-detail-action{
    width:100% !important;
    min-width:0 !important;
  }

  .pac-badges img{
    width:46px !important;
    height:46px !important;
  }

  .pac-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    padding:12px !important;
  }

  .pac-card{
    min-height:245px !important;
  }

  .pac-search{
    flex-basis:100% !important;
  }
}



/* Image downloads dropdown */
.pac-image-download-menu{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.pac-image-download-toggle::after{
  content:"" !important;
  display:inline-block !important;
  margin-left:8px !important;
  border-left:4px solid transparent !important;
  border-right:4px solid transparent !important;
  border-top:5px solid currentColor !important;
}

.pac-image-download-panel{
  display:none !important;
  position:absolute !important;
  top:calc(100% + 8px) !important;
  right:0 !important;
  z-index:90 !important;
  min-width:178px !important;
  padding:6px !important;
  border:1px solid #d7dce5 !important;
  border-radius:8px !important;
  background:#6b7280 !important;
  box-shadow:0 16px 36px rgba(31,41,55,.20) !important;
}

.pac-image-download-menu.is-open .pac-image-download-panel,
.pac-image-download-menu:hover .pac-image-download-panel{
  display:grid !important;
  gap:2px !important;
}

.pac-image-download-panel a{
  display:block !important;
  padding:8px 9px !important;
  border-radius:5px !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}

.pac-image-download-panel a:hover,
.pac-image-download-panel a:focus{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
}

@media(max-width:760px){
  .pac-image-download-menu{
    width:100% !important;
  }

  .pac-image-download-panel{
    left:0 !important;
    right:auto !important;
    width:100% !important;
  }
}


/* PAC pagination display fix */
.pac-card[style*="display: none"]{
  display:none !important;
}