/* ============================================================
   ex-display.co.uk  -  brand theme layer
   Loaded AFTER modern.css. Remove the <link> to revert.
   Palette: deep indigo + gold + coral. Font: Open Sans.
   Header DOM:  #header > .exd-trust | .top-bar | .main-menu(.nav-top + .nav-main)
   ============================================================ */
:root{
  --brand:#2c3265; --brand-2:#31329d; --brand-dark:#20264a;
  --accent:#3564cb; --accent-dark:#294fa4; --accent-tint:rgba(53,100,203,.10);
  --gold:#f6cc68; --gold-2:#f0be44; --gold-soft:#fff7e0;
  --price:#e0483f; --price-dark:#c62020; --line:#e5e6ee; --ink:#22242c;
}

/* ---- Top strips (indigo) ------------------------------------------ */
.exd-trust{ background:var(--brand-dark) !important; }
.exd-trust-inner span{ color:#fff !important; } .exd-trust-inner i{ color:var(--gold) !important; }
#header .top-bar{ background:var(--brand) !important; }
#header .top-bar .nav-link,#header .top-bar a{ color:#ffffff !important; opacity:.92; }
#header .top-bar .nav-link:hover,#header .top-bar a:hover{ color:var(--gold) !important; opacity:1; }

/* ---- Logo + search row (make it indigo, like OnBuy) --------------- */
#header .main-menu .nav-top{ background:var(--brand) !important; }
#header .nav-top .logo img,.nav-mobile-header .logo img{ filter:brightness(0) invert(1); }
#header .nav-top .nav-top-right a,#header .nav-top .nav-top-right,
#header .nav-top .nav-top-right i,#header .nav-top .nav align-items-center a{ color:#ffffff !important; }
#header .nav-top .nav-top-right a:hover{ color:var(--gold) !important; }
body.exd-scrolled #header .main-menu .nav-top{ box-shadow:0 4px 18px rgba(20,24,60,.28); }

/* ---- Search bar: clean white field, minimal magnifier icon ------- */
#header .form_search_main,.top-search-bar .form_search_main{
  position:relative !important; background:#fff !important; border:1px solid #d3d5e2 !important;
  border-radius:10px !important; overflow:visible !important; box-shadow:0 1px 2px rgba(20,24,60,.08) !important;
  display:block !important; height:46px !important; padding:0 !important; margin:0 !important;
}
#header .form_search_main:focus-within{ border-color:#aeb2c8 !important; box-shadow:0 0 0 3px rgba(53,100,203,.15) !important; }
#header .form_search_main > .left{ display:none !important; }   /* only the search-type selector, not autocomplete .left cells */
#header .form_search_main > .right{ display:block !important; height:100% !important; position:static !important; }
#header .form-control.input-search,#header #input_search{
  border:none !important; box-shadow:none !important; background:transparent !important;
  height:100% !important; width:100% !important; padding:0 48px 0 18px !important;
  font-size:15px !important; color:var(--ink) !important;
}
#header .form-control.input-search::placeholder,#header #input_search::placeholder{ color:#8b8e9d !important; opacity:1 !important; }
#header .form_search_main .btn-search,#header .form_search_main .btn.btn-search,.top-search-bar .btn-search{
  position:absolute !important; top:0 !important; right:0 !important; bottom:0 !important; left:auto !important;
  width:46px !important; height:auto !important; margin:0 !important; padding:0 !important;
  background:transparent !important; background-color:transparent !important; border:none !important;
  box-shadow:none !important; border-radius:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important; z-index:3 !important;
}
#header .form_search_main .btn-search .icon-search,#header .form_search_main .btn-search i,.top-search-bar .btn-search .icon-search{
  color:var(--brand) !important; font-size:19px !important; line-height:1 !important; margin:0 !important;
}
#header .form_search_main .btn-search:hover .icon-search,#header .form_search_main .btn-search:hover i{ color:var(--accent) !important; }
#header .form_search_main .search-results-ajax{
  position:absolute !important; top:calc(100% + 6px) !important; left:0 !important; right:0 !important; width:100% !important;
  z-index:120 !important; background:#fff !important; border:1px solid var(--line) !important; border-radius:10px !important;
  box-shadow:0 16px 40px rgba(20,24,60,.16) !important; overflow:hidden !important;
}
#header .form_search_main .search-results-ajax:empty{ display:none !important; border:none !important; box-shadow:none !important; }

/* ---- Category bar (white, DARK links) ----------------------------- */
#header .main-menu .nav-main{ background:#ffffff !important; border-bottom:1px solid var(--line); }
#header .nav-main .navbar-nav.mega-menu>a.nav-main-category,
#header .nav-main a.nav-link.nav-main-category{
  color:var(--ink) !important; font-weight:600 !important; text-decoration:none !important;
}
#header .nav-main .navbar-nav.mega-menu>a.nav-main-category:hover,
#header .nav-main a.nav-link.nav-main-category:hover{ color:var(--brand) !important; }

/* ---- Dropdown / mega-menu panels ---------------------------------- */
#header .dropdown-menu{
  background:#fff !important; border:1px solid var(--line) !important; border-radius:12px !important;
  box-shadow:0 16px 40px rgba(20,24,60,.16) !important; padding:.75rem 1rem !important;
}
#header .dropdown-menu .card,#header .mega-menu .card{
  background:transparent !important; border:none !important; box-shadow:none !important;
  border-radius:8px !important; margin:0 !important; overflow:visible !important;
}
#header .dropdown-menu .card:hover,#header .mega-menu .card:hover{ transform:none !important; box-shadow:none !important; }
#header .dropdown-menu a,#header .dropdown-menu .nav-main-category,#header .dropdown-menu .second-category,
#header .dropdown-item{
  color:#2b2c33 !important; font-weight:500 !important; text-decoration:none !important;
  border-radius:8px !important; display:block; padding:6px 10px !important;
}
#header .dropdown-menu a:hover,#header .dropdown-menu .second-category:hover,#header .dropdown-item:hover{
  color:var(--brand) !important; background:var(--gold-soft) !important;
}
#header .first_depth,#header .first_depth a{ color:var(--brand) !important; font-weight:700 !important; }
#header .mega-menu .link-view-all{ color:var(--accent) !important; font-weight:600 !important; }
/* hide the empty right-hand image column, let links use the full width */
#header .nav-category-image,#header .col-category-images{ display:none !important; }
#header .menu-subcategories.col-category-links{ flex:0 0 100% !important; max-width:100% !important; }

/* ---- Buttons ------------------------------------------------------ */
.btn-custom,.btn-primary,.btn-black,.btn-dark{ background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important; }
.btn-custom:hover,.btn-primary:hover,.btn-black:hover,.btn-dark:hover{ background:var(--brand-2) !important; border-color:var(--brand-2) !important; color:#fff !important; }
.btn-sell-now{ background:var(--gold) !important; border-color:var(--gold) !important; color:var(--brand-dark) !important; }
.btn-sell-now:hover{ background:var(--gold-2) !important; color:var(--brand-dark) !important; }
.btn-default,.btn-outline-dark,.btn-outline-secondary{ border-color:var(--line) !important; color:var(--brand) !important; background:#fff !important; }
.btn-default:hover,.btn-outline-dark:hover{ background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important; }

/* ---- Product cards ------------------------------------------------ */
.product-item,.card{ border:1px solid var(--line) !important; border-radius:12px !important; background:#fff !important; box-shadow:0 1px 2px rgba(20,24,60,.05) !important; overflow:hidden; }
.product-item:hover,.card:hover{ box-shadow:0 10px 26px rgba(20,24,60,.12) !important; border-color:#d3d5e6 !important; transform:translateY(-3px); }
.product-title,.product-title a{ color:var(--ink) !important; font-weight:600 !important; }
.product-title a:hover{ color:var(--accent) !important; }
.price,.product-item .price{ color:var(--brand) !important; font-weight:800 !important; font-size:1.06rem !important; }
.rating i,.product-item-rating i,.icon-star,.icon-star-o,.rating .fa-star,.rating .fa-star-o{ color:var(--gold) !important; }
.product-user{ color:#7b7e8c !important; }
.badge-discount,.discount,.badge-danger{ background:var(--price) !important; color:#fff !important; }

/* ---- Section headers / footer ------------------------------------- */
.section-header h2,.section-header h3,.section-header .title{ color:var(--brand) !important; font-weight:700 !important; letter-spacing:-.02em; }
.section-categories .card,.category-slider-container .card{ border-radius:12px !important; }
#footer{ background:var(--brand-dark) !important; }
#footer,#footer a,#footer p,#footer li{ color:rgba(255,255,255,.78) !important; }
#footer a:hover{ color:var(--gold) !important; }
#footer h5,#footer .title,#footer .first_depth>h5{ color:#fff !important; }
a:hover{ color:var(--accent); }
.cat-intro{ border-left:3px solid var(--gold); padding-left:14px; }

/* ---- Homepage hero banner (3 image tiles) ------------------------- */
.exd-hero{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0 32px; }
.exd-hero-tile{
  position:relative; display:block; min-height:310px; border-radius:14px; overflow:hidden;
  background-size:cover; background-position:center; text-decoration:none !important;
  box-shadow:0 2px 8px rgba(20,24,60,.08); transition:transform .25s ease, box-shadow .25s ease;
}
.exd-hero-tile:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(20,24,60,.18); }
.exd-hero-tile::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,24,60,0) 28%,rgba(20,24,60,.55) 66%,rgba(16,18,40,.82) 100%); }
.exd-hero-overlay{ position:absolute; left:0; right:0; bottom:0; padding:22px 22px 24px; z-index:1; }
.exd-hero-eyebrow{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:9px; }
.exd-hero-title{ display:block; color:#fff; font-size:1.3rem; font-weight:800; line-height:1.22; letter-spacing:-.01em; margin-bottom:7px; }
.exd-hero-sub{ display:block; color:rgba(255,255,255,.92); font-size:.94rem; line-height:1.45; }
@media (max-width:900px){ .exd-hero{ grid-template-columns:1fr; gap:14px; } .exd-hero-tile{ min-height:210px; } }

/* ---- Blog cards: hero-style image tiles (home + blog listing) ----- */
.blog-item{
  position:relative !important; display:flex !important; flex-direction:column !important; justify-content:flex-end !important;
  height:300px !important; border-radius:14px !important; overflow:hidden !important; margin-bottom:24px !important;
  box-shadow:0 2px 8px rgba(20,24,60,.08) !important; transition:transform .25s ease, box-shadow .25s ease !important;
}
.blog-item:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(20,24,60,.18) !important; }
.blog-item .blog-item-img{ position:absolute !important; inset:0 !important; margin:0 !important; padding:0 !important; z-index:0 !important; border-radius:0 !important; order:0 !important; }
.blog-item .blog-item-img a{ display:block !important; width:100% !important; height:100% !important; }
.blog-item .blog-item-img img{ width:100% !important; height:100% !important; object-fit:cover !important; border-radius:0 !important; }
.blog-item::after{ content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important;
  background:linear-gradient(180deg,rgba(20,24,60,0) 30%,rgba(20,24,60,.55) 62%,rgba(16,18,40,.88) 100%) !important; }
.blog-item .blog-post-meta{ position:relative !important; z-index:2 !important; order:2 !important; padding:0 20px !important; margin:0 0 7px !important; display:flex !important; gap:14px !important; flex-wrap:wrap !important; }
.blog-item .blog-post-meta a,.blog-item .blog-post-meta span{ color:var(--gold) !important; font-size:11.5px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.05em !important; display:inline-flex !important; align-items:center !important; gap:5px !important; }
.blog-item .blog-post-meta i{ color:var(--gold) !important; margin:0 4px 0 0 !important; }
.blog-item .blog-post-title{ position:relative !important; z-index:2 !important; order:3 !important; padding:0 20px 22px !important; margin:0 !important; }
.blog-item .blog-post-title a{ color:#fff !important; font-size:1.16rem !important; font-weight:800 !important; line-height:1.24 !important; }
.blog-item .blog-post-title a:hover{ color:var(--gold) !important; }
.blog-item .blog-post-description{ display:none !important; }
@media (max-width:600px){ .blog-item{ height:220px !important; } }
/* homepage blog slider: gutters between cards (slick sets them edge-to-edge) */
#blog-slider .blog-item{ border:10px solid transparent !important; background-clip:padding-box !important; margin-bottom:0 !important; }

/* ============================================================
   UNIFIED POLISH PASS
   One spacing system (8px grid), one card language, one type
   rhythm — applied to every main page type.
   ============================================================ */

/* ---- 1. Global rhythm --------------------------------------------- */
#wrapper{ padding-top:8px; }
#wrapper .section{ margin-top:48px !important; margin-bottom:0 !important; }
#wrapper .section:first-child{ margin-top:24px !important; }
.row-custom{ margin-bottom:0; }

/* section headers: title + sub as one consistent unit */
.section h3.title,.section-header h3,.blog-section-title{
  color:var(--ink) !important; font-size:1.45rem !important; font-weight:800 !important;
  letter-spacing:-.02em !important; margin:0 0 4px !important; line-height:1.25 !important;
}
.section h3.title a{ color:inherit !important; }
.section h3.title a:hover{ color:var(--brand) !important; }
.title-exp{ color:#7b7e8c !important; font-size:.95rem !important; margin:0 0 18px !important; display:block; }

/* ---- 2. Breadcrumbs: quiet, consistent ---------------------------- */
.nav-breadcrumb{ margin:18px 0 6px !important; }
.breadcrumb,.breadcrumb-products{
  background:transparent !important; padding:0 !important; margin:0 !important; font-size:13px !important;
}
.breadcrumb-item,.breadcrumb-item a{ color:#8b8e9d !important; font-weight:500; }
.breadcrumb-item a:hover{ color:var(--brand) !important; }
.breadcrumb-item.active{ color:var(--ink) !important; font-weight:600; }
.breadcrumb-item+.breadcrumb-item::before{ content:"\203A" !important; color:#c2c4d2 !important; padding:0 2px !important; }

/* ---- 3. Page titles ------------------------------------------------ */
h1.page-title,.product-list-title{
  font-size:1.75rem !important; font-weight:800 !important; letter-spacing:-.02em !important;
  color:var(--ink) !important; margin:6px 0 18px !important; line-height:1.2 !important;
}

/* ---- 4. Product cards: one tile system ----------------------------- */
.row-product{ margin-left:-10px !important; margin-right:-10px !important; }
.col-product{ padding:0 10px !important; margin-bottom:20px !important; }
.product-item{
  height:100%; display:flex; flex-direction:column;
  border:1px solid var(--line) !important; border-radius:12px !important; background:#fff !important;
  box-shadow:0 1px 2px rgba(20,24,60,.05) !important; overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.product-item:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(20,24,60,.13) !important; border-color:#d3d5e6 !important; }
.img-product-container{
  aspect-ratio:4/3 !important; background:#fff !important; overflow:hidden; position:relative;
  border-bottom:1px solid #f0f1f5 !important; display:flex; align-items:center; justify-content:center;
}
.img-product-container a{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
.img-product,.img-product-container img{
  width:100% !important; height:100% !important; object-fit:cover !important; transition:transform .35s ease;
}
.product-item:hover .img-product{ transform:scale(1.04); }
.item-details{ padding:14px 16px 16px !important; display:flex; flex-direction:column; flex:1 1 auto; }
.product-title{ margin:0 0 6px !important; }
.product-title,.product-title a{
  font-size:.95rem !important; font-weight:600 !important; line-height:1.35 !important; color:var(--ink) !important;
}
.product-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.product-title a:hover{ color:var(--brand) !important; }
.product-user{ font-size:12.5px !important; color:#8b8e9d !important; margin-bottom:4px; }
.product-user a{ color:#8b8e9d !important; }
.item-meta{ margin-top:auto !important; padding-top:8px !important; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.price,.item-meta .price{ color:var(--brand) !important; font-weight:800 !important; font-size:1.08rem !important; letter-spacing:-.01em; }
.product-item-rating{ line-height:1; }

/* ---- 5. Category sidebar filters ----------------------------------- */
.col-sidebar-products{ padding-right:22px !important; }
.product-filters{ position:sticky; top:96px; }
.filter-item{
  background:#fff !important; border:1px solid var(--line) !important; border-radius:12px !important;
  padding:16px 18px !important; margin-bottom:16px !important; box-shadow:0 1px 2px rgba(20,24,60,.04);
}
.filter-item h4.title{
  font-size:.82rem !important; font-weight:700 !important; text-transform:uppercase !important;
  letter-spacing:.07em !important; color:#8b8e9d !important; margin:0 0 12px !important;
}
.filter-item a{ color:#3c3f4c !important; font-size:.92rem !important; line-height:2 !important; display:block; border-radius:6px; }
.filter-item a:hover{ color:var(--brand) !important; }
/* filter lists: no scroll at all — show every option in full */
.filter-list,.filter-custom-scrollbar,.filter-list-container ul{
  max-height:none !important; overflow:visible !important; padding-right:0 !important; float:none !important;
}
.filter-list li{ margin:0 !important; padding:0 !important; }
.price-filter-input{ height:38px !important; font-size:.9rem !important; }
.btn-filter-price{ height:38px !important; border-radius:8px !important; }
.product-list-header{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 16px !important;
  margin-bottom:18px !important; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.product-sort-by .form-control,.product-sort-by select{ height:38px !important; font-size:.9rem !important; border-radius:8px !important; }

/* ---- 6. Pagination: modern pills ----------------------------------- */
.product-list-pagination{ margin:26px 0 8px !important; }
.pagination{ gap:6px; }
.pagination li a,.pagination li span{
  min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 12px !important; border:1px solid var(--line) !important; border-radius:10px !important;
  background:#fff !important; color:var(--ink) !important; font-weight:600 !important; font-size:.92rem !important;
  margin:0 !important; transition:all .15s ease;
}
.pagination li a:hover{ border-color:var(--brand) !important; color:var(--brand) !important; background:#fff !important; }
.pagination li.active a,.pagination li.active span{
  background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important;
}
.pagination li.disabled a,.pagination li.disabled span{ opacity:.45; pointer-events:none; }

/* ---- 7. Product detail page ---------------------------------------- */
.product-details-container{ margin-top:10px; }
.product-slider-container,.product-slider{
  border-radius:14px !important; overflow:hidden !important; background:#fff;
}
#product_slider_container{ border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(20,24,60,.05); }
.product-details-container h1.product-title{
  font-size:1.5rem !important; font-weight:800 !important; line-height:1.3 !important;
  letter-spacing:-.015em !important; color:var(--ink) !important; min-height:0 !important;
  display:block !important; -webkit-line-clamp:unset !important; margin:0 0 12px !important;
}
.product-details-container .price{ font-size:1.7rem !important; color:var(--brand) !important; font-weight:800 !important; }
.nav-tabs{ border-bottom:1px solid var(--line) !important; gap:4px; }
.nav-tabs .nav-link,.nav-tabs a{
  border:none !important; border-bottom:2px solid transparent !important; border-radius:0 !important;
  color:#7b7e8c !important; font-weight:600 !important; padding:10px 16px !important; background:transparent !important;
}
.nav-tabs .nav-link.active,.nav-tabs a.active,.nav-tabs .nav-link:hover{
  color:var(--brand) !important; border-bottom-color:var(--brand) !important;
}
.tab-content{ padding:22px 2px !important; }
.section-related-products{ margin-top:48px !important; }

/* ---- 8. Blog post + static pages: readable measure ----------------- */
.post-content .title,.post-content h1.title{
  font-size:1.9rem !important; font-weight:800 !important; letter-spacing:-.02em !important;
  line-height:1.22 !important; color:var(--ink) !important; margin:8px 0 12px !important;
}
.post-content .blog-post-meta{ margin-bottom:18px !important; }
.post-content .blog-post-meta a,.post-content .blog-post-meta span{
  color:#8b8e9d !important; font-size:13px !important; font-weight:600;
}
.post-text,.page-text-content{
  font-size:1.04rem !important; line-height:1.75 !important; color:#33353f !important; max-width:760px;
}
.post-text h2,.page-text-content h2{ font-size:1.4rem !important; font-weight:700 !important; margin:34px 0 12px !important; letter-spacing:-.015em; color:var(--ink) !important; }
.post-text h3,.page-text-content h3{ font-size:1.15rem !important; font-weight:700 !important; margin:26px 0 10px !important; color:var(--ink) !important; }
.post-text p,.page-text-content p{ margin-bottom:16px !important; }
.post-text img{ border-radius:12px !important; margin:10px 0 18px; }
.post-text ul,.post-text ol,.page-text-content ul,.page-text-content ol{ margin:0 0 16px 4px; padding-left:22px; }
.post-text li,.page-text-content li{ margin-bottom:6px; }
.post-image img{ border-radius:14px !important; box-shadow:0 2px 10px rgba(20,24,60,.08); }
.post-tags{ margin-top:26px !important; }
.post-tags a{
  display:inline-flex; padding:5px 13px; border:1px solid var(--line); border-radius:999px;
  font-size:12.5px; font-weight:600; color:#5b5e6c !important; margin:0 6px 8px 0; background:#fff;
}
.post-tags a:hover{ border-color:var(--brand); color:var(--brand) !important; }
.post-share{ margin-top:18px; }
.related-posts{ margin-top:44px !important; }

/* small blog items (related posts): same tile family, just shorter */
.blog-item.blog-item-small{ height:210px !important; margin-bottom:20px !important; }
.blog-item-small .blog-post-title a{ font-size:1rem !important; }
.blog-item-small .blog-post-meta a,.blog-item-small .blog-post-meta span{ font-size:10.5px !important; }
.blog-item-small .blog-post-title{ padding:0 16px 16px !important; }
.blog-item-small .blog-post-meta{ padding:0 16px !important; margin-bottom:6px !important; }
.related-posts .blog-section-title{ margin-bottom:16px !important; }

/* ---- 9. Forms & modals --------------------------------------------- */
.form-control,select.form-control{ height:44px; border-radius:10px !important; border-color:var(--line) !important; font-size:.95rem; }
textarea.form-control{ height:auto; min-height:110px; }
.form-control:focus{ border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(44,50,101,.12) !important; }
.form-group label{ font-weight:600; font-size:.88rem; color:#3c3f4c; margin-bottom:6px; }
.modal-content{ border-radius:14px !important; border:none !important; box-shadow:0 24px 60px rgba(20,24,60,.25) !important; }
.modal-title{ font-weight:700 !important; }
.btn-md{ height:44px; display:inline-flex; align-items:center; justify-content:center; }

/* ---- 10. Footer rhythm ---------------------------------------------- */
#footer{ margin-top:64px !important; padding-top:44px !important; }
#footer .footer-title,#footer h5{
  font-size:.85rem !important; font-weight:700 !important; text-transform:uppercase !important;
  letter-spacing:.07em !important; margin-bottom:14px !important;
}
#footer .nav-footer li{ line-height:2.1 !important; }
#footer .bottom-footer{ margin-top:30px !important; padding:18px 0 !important; }

/* blog lister intro */
.blog-intro{ max-width:760px; font-size:1.02rem !important; line-height:1.7 !important; color:#5b5e6c !important; margin:-6px 0 22px !important; }