/* ============================================================
   PRIMZO REFERENCE IMAGE UI — 2026-09-06
   Original Core PHP markup preserved.
   Visual target: compact marketplace UI shown in supplied
   reference image (orange / white / charcoal, dense product cards).
   ============================================================ */

:root{
  --ref-orange:#ff6a00;
  --ref-orange-2:#ff8a00;
  --ref-dark:#202124;
  --ref-ink:#171717;
  --ref-muted:#6b7280;
  --ref-bg:#f5f6f7;
  --ref-border:#e3e6e8;
  --ref-card:#fff;
  --ref-radius:8px;
  --ref-shadow:0 2px 10px rgba(20,24,28,.07);
}

/* Base */
html{background:var(--ref-bg)}
body.reference-store-body{
  background:var(--ref-bg)!important;
  color:var(--ref-ink)!important;
  font-size:13px;
}
.reference-store-body main#mainContent{background:var(--ref-bg)!important}
.reference-store-body a{color:inherit}

/* Announcement bar */
.reference-topbar{
  background:var(--ref-orange)!important;
  color:#fff!important;
  min-height:25px!important;
  font-size:10px!important;
}
.reference-topbar a,.reference-topbar span{color:#fff!important}

/* Main header */
.reference-main-header{
  background:#fff!important;
  border-bottom:1px solid var(--ref-border)!important;
  box-shadow:0 1px 5px rgba(0,0,0,.04)!important;
}
.ref-main-grid{
  min-height:68px!important;
  max-width:1500px;
  margin:auto;
  gap:18px!important;
}
.reference-logo img{max-height:40px!important}
.reference-search-box{
  height:40px!important;
  border:1px solid #d8dce0!important;
  border-radius:5px!important;
  background:#fff!important;
}
.reference-search-box input{font-size:12px!important}
.reference-search-box button{
  background:var(--ref-orange)!important;
  border-color:var(--ref-orange)!important;
  color:#fff!important;
  border-radius:0 5px 5px 0!important;
  font-size:11px!important;
}
.ref-action-icon{
  color:var(--ref-ink)!important;
}
.ref-action-icon b{
  background:var(--ref-orange)!important;
  color:#fff!important;
}

/* Dark category/navigation row */
.reference-nav{
  background:var(--ref-dark)!important;
  border:0!important;
}
.reference-nav-inner{
  max-width:1500px;
  margin:auto;
  min-height:36px!important;
}
.reference-nav-inner>a{
  color:#fff!important;
  font-size:11px!important;
  font-weight:600!important;
  padding:10px 13px!important;
}
.reference-nav-inner>a:hover,
.reference-nav-inner>a.active{
  background:var(--ref-orange)!important;
  color:#fff!important;
}

/* Global content width */
.reference-store-body .container-fluid{
  max-width:1500px;
  margin-left:auto;
  margin-right:auto;
}
.home-reference-shell{
  max-width:1500px!important;
  margin:0 auto!important;
  padding:12px 10px 30px!important;
  background:transparent!important;
}

/* Homepage: category rail + hero + right promos */
.home-reference-top{
  display:grid!important;
  grid-template-columns:190px minmax(0,1fr) 190px!important;
  gap:10px!important;
  align-items:stretch!important;
}
.home-cat-panel{
  background:#fff!important;
  border:1px solid var(--ref-border)!important;
  border-radius:var(--ref-radius)!important;
  box-shadow:var(--ref-shadow)!important;
  overflow:hidden!important;
}
.home-cat-title{
  background:var(--ref-orange)!important;
  color:#fff!important;
  font-size:10px!important;
  padding:11px 10px!important;
}
.home-cat-list a{
  min-height:28px!important;
  padding:7px 10px!important;
  border-bottom:1px solid #f0f1f2!important;
  color:#4b5563!important;
  font-size:10px!important;
}
.home-cat-list a:hover{
  background:#fff4ec!important;
  color:var(--ref-orange)!important;
}
.home-cat-list a i{color:var(--ref-orange)!important;width:17px}

/* Hero */
.home-hero{
  min-height:295px!important;
  border-radius:var(--ref-radius)!important;
  background:#222!important;
  box-shadow:var(--ref-shadow)!important;
  overflow:hidden!important;
}
.home-hero-slide{min-height:295px!important}
.home-hero-copy{padding:25px!important}
.home-hero-copy small{
  color:#ffd8bd!important;
  font-size:10px!important;
}
.home-hero-copy h1{
  font-size:30px!important;
  line-height:1.08!important;
}
.home-hero-copy h1 span{color:#ff8b3d!important}
.home-shop-btn{
  background:var(--ref-orange)!important;
  border-color:var(--ref-orange)!important;
  border-radius:5px!important;
  padding:9px 15px!important;
  font-size:11px!important;
}
.home-hero-product img{max-height:245px!important}
.home-sale-circle{
  background:var(--ref-orange)!important;
  border:4px solid #fff!important;
}

/* Right promo cards */
.home-side-promos{gap:8px!important}
.home-side-card{
  min-height:92px!important;
  border-radius:var(--ref-radius)!important;
  border:1px solid var(--ref-border)!important;
  background:#fff!important;
  box-shadow:var(--ref-shadow)!important;
}
.home-side-card h4{font-size:12px!important}
.home-side-card strong{color:var(--ref-orange)!important;font-size:13px!important}

/* Trust strip */
.reference-trust{
  margin:10px 0!important;
  background:#fff!important;
  border:1px solid var(--ref-border)!important;
  border-radius:var(--ref-radius)!important;
  box-shadow:var(--ref-shadow)!important;
}
.reference-trust-item{
  padding:11px 12px!important;
  border-right:1px solid #eef0f1!important;
}
.reference-trust-item i{
  color:var(--ref-orange)!important;
  border-color:var(--ref-orange)!important;
}
.reference-trust-item b{font-size:10px!important}
.reference-trust-item span{font-size:9px!important;color:#73777d!important}

/* Homepage sections */
.reference-section{
  background:#fff!important;
  border:1px solid var(--ref-border)!important;
  border-radius:var(--ref-radius)!important;
  box-shadow:var(--ref-shadow)!important;
  padding:16px!important;
  margin:10px 0!important;
}
.reference-section-head{
  margin-bottom:12px!important;
  padding-bottom:8px!important;
  border-bottom:1px solid #eef0f1!important;
}
.reference-section-head h2{
  font-size:18px!important;
  color:#1f2937!important;
  font-weight:800!important;
}
.reference-section-head h2:before{
  background:var(--ref-orange)!important;
  width:4px!important;
  height:18px!important;
}
.reference-section-head h2 span{
  font-size:9px!important;
  color:#8a9097!important;
}
.reference-section-head>a{
  color:var(--ref-orange)!important;
  font-size:10px!important;
}

/* Category circles */
.reference-category-card{
  background:#fff!important;
  border-color:var(--ref-border)!important;
  box-shadow:none!important;
}
.category-carousel-card .cat-icon,
.reference-category-card .cat-icon.cat-image{
  box-shadow:0 0 0 2px #fff,0 0 0 3px #e6e8ea!important;
}
.category-carousel-card:hover .cat-icon,
.reference-category-card:hover .cat-icon{
  box-shadow:0 0 0 2px #fff,0 0 0 3px var(--ref-orange)!important;
}
.category-carousel-card strong{font-size:10px!important}
.category-sub-links em{font-size:8px!important}

/* Product cards — fixed image area, equal cards */
.product-grid{
  gap:10px!important;
}
.product-card{
  height:100%!important;
  background:#fff!important;
  border:1px solid var(--ref-border)!important;
  border-radius:7px!important;
  box-shadow:0 1px 6px rgba(20,24,28,.05)!important;
  overflow:hidden!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.product-card:hover{
  transform:translateY(-2px)!important;
  border-color:#ffb27c!important;
  box-shadow:0 6px 18px rgba(0,0,0,.09)!important;
}
.product-image-wrapper{
  height:170px!important;
  min-height:170px!important;
  padding:8px!important;
  background:#fff!important;
}
.product-image-wrapper img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
.product-name{font-size:11px!important;line-height:1.35!important}
.product-category{font-size:8px!important}
.price-current{color:var(--ref-orange)!important;font-size:13px!important;font-weight:800!important}
.price-original{font-size:9px!important;color:#9ca3af!important}
.product-rating .stars{color:#ff9d00!important;font-size:9px!important}
.btn-add-cart,.btn-primary,.btn-checkout,.btn-submit,.home-shop-btn,.btn-shop{
  background:var(--ref-orange)!important;
  border-color:var(--ref-orange)!important;
  border-radius:4px!important;
}
.btn-add-cart{font-size:10px!important;padding:7px 9px!important}

/* Shop / category layout */
.products-layout{
  gap:12px!important;
}
.products-filters-column{
  background:#fff!important;
  border:1px solid var(--ref-border)!important;
  border-radius:7px!important;
  box-shadow:var(--ref-shadow)!important;
}
.filters-box{font-size:11px!important}
.filters-box h4,.filters-box h5{font-size:12px!important}
.products-toolbar{
  background:#fff!important;
  border:1px solid var(--ref-border)!important;
  border-radius:7px!important;
  padding:10px 12px!important;
}
.category-page-banner{
  border-radius:7px!important;
  height:150px!important;
}

/* Product details */
.product-marketplace-layout{
  background:#fff!important;
  border:1px solid var(--ref-border)!important;
  border-radius:8px!important;
  box-shadow:var(--ref-shadow)!important;
  padding:16px!important;
}
.product-gallery-main{
  background:#fff!important;
  border:1px solid #eef0f2!important;
  border-radius:7px!important;
}
.product-gallery-main img{
  height:360px!important;
  object-fit:contain!important;
}
.product-info-column h1{font-size:22px!important}
.product-side-card,.affiliate-product-box{
  border:1px solid var(--ref-border)!important;
  border-radius:7px!important;
  background:#fff!important;
}
.qty-selector{border-color:#d9dde0!important}
.btn-wishlist{
  color:var(--ref-orange)!important;
  border-color:var(--ref-orange)!important;
  background:#fff!important;
}

/* Cart / checkout / account / static pages */
.cart-table,.data-table{
  background:#fff!important;
  border:1px solid var(--ref-border)!important;
  border-radius:7px!important;
  overflow:hidden!important;
}
.cart-table th,.data-table th{
  background:#f7f7f8!important;
  color:#34383d!important;
  font-size:10px!important;
}
.cart-summary-box,.checkout-section{
  background:#fff!important;
  border:1px solid var(--ref-border)!important;
  border-radius:7px!important;
  box-shadow:var(--ref-shadow)!important;
}
.checkout-section h3,.checkout-section h4{font-size:14px!important}
.auth-wrapper{
  background:#fff!important;
  border:1px solid var(--ref-border)!important;
  border-radius:8px!important;
  box-shadow:var(--ref-shadow)!important;
}
.auth-card{border:0!important}
.auth-wrapper .btn-primary{background:var(--ref-orange)!important}
.status-pill{border-radius:20px!important}

/* Inputs */
.reference-store-body input,
.reference-store-body select,
.reference-store-body textarea,
.form-control,.form-select{
  border:1px solid #d9dde1!important;
  border-radius:5px!important;
  font-size:11px!important;
  background:#fff!important;
}
.reference-store-body input:focus,
.reference-store-body select:focus,
.reference-store-body textarea:focus{
  border-color:var(--ref-orange)!important;
  box-shadow:0 0 0 2px rgba(255,106,0,.10)!important;
}

/* Breadcrumb */
.breadcrumb{
  font-size:9px!important;
  margin-bottom:8px!important;
}
.breadcrumb a{color:#7a8087!important}
.breadcrumb .active{color:var(--ref-orange)!important}

/* Footer */
.prime-footer,.footer-top,.footer-bottom{
  background:var(--ref-dark)!important;
  color:#d8dadd!important;
}
.prime-footer h5{color:#fff!important;font-size:12px!important}
.prime-footer a,.footer-bottom *{color:#c7c9cc!important}
.prime-footer a:hover{color:#ff8b3d!important}
.footer-logo,.social-links a{color:var(--ref-orange)!important}
.social-links a{
  background:transparent!important;
  border-color:#4a4d51!important;
}

/* Mobile — reference image has compact 2-column shopping */
@media(max-width:767px){
  body.reference-store-body{font-size:12px}
  .reference-main-header{position:sticky!important;top:0!important;z-index:1000!important}
  .reference-nav{display:none!important}
  .home-reference-shell{padding:8px!important}
  .home-reference-top{grid-template-columns:1fr!important}
  .home-cat-panel{display:none!important}
  .home-hero{min-height:220px!important}
  .home-hero-slide{min-height:220px!important}
  .home-hero-copy{padding:18px!important}
  .home-hero-copy h1{font-size:23px!important}
  .home-hero-product img{max-height:175px!important}
  .home-side-promos{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:6px!important;
  }
  .home-side-card{min-height:74px!important}
  .home-side-card h4{font-size:9px!important}
  .home-side-card p,.home-side-card strong{font-size:8px!important}
  .reference-trust{grid-template-columns:repeat(2,1fr)!important}
  .reference-trust-item{padding:8px!important}
  .reference-section{padding:10px!important;margin:8px 0!important}
  .reference-section-head h2{font-size:15px!important}
  .product-grid{grid-template-columns:repeat(2,1fr)!important;gap:7px!important}
  .product-image-wrapper{height:135px!important;min-height:135px!important}
  .product-card{border-radius:6px!important}
  .product-name{font-size:10px!important}
  .price-current{font-size:12px!important}
  .product-card .btn-add-cart{font-size:9px!important}
  .products-filters-column{display:none!important}
  .products-results-column{width:100%!important}
  .products-toolbar{margin-bottom:8px!important}
  .product-marketplace-layout{padding:9px!important}
  .product-gallery-main img{height:270px!important}
  .product-info-column h1{font-size:18px!important}
}

/* Small desktop reference density */
@media(min-width:1200px){
  .product-grid{grid-template-columns:repeat(4,1fr)!important}
}