/* ===== Utility pages: 404 + Search results — brand. Loaded via mu-utility-pages. v0.1.0 ===== */
:root{
  --red:#e21c2b;--red-hover:#c8171f;--black:#000;--white:#fff;
  --gray-100:#f7f7f7;--gray-200:#ebebeb;--gray-300:#d4d4d4;--gray-500:#737373;--gray-700:#404040;
  --green:#22c55e;--gold:#f5a623;--wa-green:#25D366;--radius:12px;
}
/* Full-width: break the theme 1200 cap + #content flex */
body.error404 .site.grid-container.container,body.search .site.grid-container.container,
body.error404 #page,body.search #page{max-width:100%!important}
body.error404 #content.site-content,body.search #content.site-content{display:block!important}
body.error404 .site-content,body.search .site-content,
body.error404 #content,body.search #content,
body.error404 .content-area,body.search .content-area,
body.error404 .inside-article,body.search .inside-article,
body.error404 .entry-content,body.search .entry-content{max-width:100%!important;width:100%!important;margin:0!important;padding:0!important;border:0!important}
body.error404 .page-header-image,body.search .page-header-image,
body.error404 .entry-header,body.search .entry-header{display:none!important}

.util{font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#161616}
.util *{box-sizing:border-box}
.util a{text-decoration:none;color:inherit}
.util img{max-width:100%;display:block}
.util .wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.util .eyebrow{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:2px;font-weight:600;font-size:14px;color:var(--red)}
.util .btn{display:inline-flex;align-items:center;gap:9px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:1px;font-weight:600;font-size:17px;padding:14px 28px;border-radius:6px;transition:.18s;cursor:pointer;border:2px solid transparent}
.util .btn--red{background:var(--red);color:#fff}
.util .btn--red:hover{background:var(--red-hover)}
.util .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.util .btn--ghost:hover{background:rgba(255,255,255,.1)}
.util .btn--outline{background:transparent;color:var(--black);border-color:var(--gray-300)}
.util .btn--outline:hover{border-color:var(--black)}

/* ---- Hero ---- */
.util .page-hero{background:var(--black);color:#fff;position:relative;overflow:hidden}
.util .page-hero::after{content:"";position:absolute;right:-120px;top:-120px;width:480px;height:480px;background:radial-gradient(circle,rgba(226,28,43,.32),transparent 60%);pointer-events:none}
.util .page-hero .wrap{padding:60px 40px;position:relative;z-index:1}
.util .page-hero .eyebrow{color:#ff4d59}
.util .page-hero__title{font-family:'Teko',sans-serif;text-transform:uppercase;font-weight:600;line-height:.95;letter-spacing:.5px;color:#fff;font-size:56px;margin:10px 0 0}
.util .page-hero__lede{font-size:17px;line-height:1.7;color:#d4d4d4;max-width:64ch;margin-top:12px}

/* ---- 404 ---- */
.util404 .four04 .wrap{padding:72px 40px;text-align:center}
.util404 .four04__code{font-family:'Teko',sans-serif;font-weight:600;font-size:150px;line-height:.9;color:var(--red);letter-spacing:2px}
.util404 .four04__title{font-family:'Teko',sans-serif;text-transform:uppercase;font-weight:600;font-size:42px;letter-spacing:.5px;color:var(--black);margin:6px 0 10px}
.util404 .four04__sub{font-size:17px;color:var(--gray-700);max-width:52ch;margin:0 auto 26px;line-height:1.6}
.util404 .four04__search{max-width:520px;margin:0 auto 28px}
.util404 .four04__search form{display:flex;gap:8px}
.util404 .four04__search input[type=search]{flex:1;border:1px solid var(--gray-300);border-radius:8px;padding:13px 16px;font-family:'DM Sans',sans-serif;font-size:16px}
.util404 .four04__search input[type=search]:focus{outline:none;border-color:var(--red)}
.util404 .four04__search button{background:var(--red);color:#fff;border:0;border-radius:8px;padding:0 22px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.5px;font-weight:600;font-size:16px;cursor:pointer}
.util404 .four04__links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:30px}
.util404 .four04__links a{border:1px solid var(--gray-200);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:500;color:var(--gray-700);background:#fff;transition:.15s}
.util404 .four04__links a:hover{border-color:var(--black);color:var(--black)}
.util404 .four04__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---- Search results ---- */
.utilsearch .util-wrap{max-width:1320px;margin:0 auto;padding:48px 40px 64px}
.utilsearch .util-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.utilsearch .util-empty{padding:30px 0 10px;text-align:center}
.utilsearch .util-empty p{font-size:17px;color:var(--gray-700);margin-bottom:20px}
.util-card{display:flex;flex-direction:column;border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}
.util-card:hover{border-color:var(--gray-300);box-shadow:0 8px 22px rgba(0,0,0,.07);transform:translateY(-2px)}
.util-card__img{position:relative;display:block;aspect-ratio:1/1;background:var(--gray-100);overflow:hidden}
.util-card__img img{width:100%;height:100%;object-fit:contain;padding:10px;transition:transform .3s}
.util-card.is-post .util-card__img img{object-fit:cover;padding:0}
.util-card:hover .util-card__img img{transform:scale(1.04)}
.util-card__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;letter-spacing:2px;color:var(--gray-300);font-weight:600;font-size:14px}
.util-card__badge{position:absolute;left:10px;top:10px;background:var(--black);color:#fff;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:5px}
.util-card.is-product .util-card__badge{background:var(--red)}
.util-card__body{display:flex;flex-direction:column;gap:7px;padding:14px 16px 16px;flex:1}
.util-card__title{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:17px;line-height:1.2;color:var(--black);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:41px}
.util-card__title a:hover{color:var(--red)}
.util-card__price{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:600;color:var(--black)}
.util-card__price del{color:var(--gray-500);font-weight:400;font-size:14px;margin-right:6px}
.util-card__price ins{text-decoration:none;color:var(--red)}
.util-card__excerpt{font-size:13.5px;line-height:1.55;color:var(--gray-700);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.util-card__more{margin-top:auto;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.5px;font-weight:600;font-size:13px;color:var(--red);padding-top:4px}

/* ---- Pagination (shared) ---- */
.util-pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:40px 0 0}
.util-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border:1px solid var(--gray-200);border-radius:8px;font-size:14px;color:var(--gray-700);background:#fff;transition:.15s}
.util-pagination a.page-numbers:hover{border-color:var(--black);color:var(--black)}
.util-pagination .page-numbers.current{background:var(--black);color:#fff;border-color:var(--black)}
.util-pagination .page-numbers.dots{border:0;background:transparent}

/* ---- Responsive ---- */
@media(max-width:1024px){
  .util .page-hero__title{font-size:46px}
  .utilsearch .util-grid{grid-template-columns:repeat(3,1fr)}
  .util .wrap,.utilsearch .util-wrap{padding-left:28px;padding-right:28px}
}
@media(max-width:760px){
  .utilsearch .util-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:600px){
  .util .page-hero .wrap{padding:44px 16px}
  .util .page-hero__title{font-size:38px}
  .util404 .four04 .wrap{padding:48px 16px}
  .util404 .four04__code{font-size:110px}
  .util404 .four04__title{font-size:32px}
  .utilsearch .util-wrap{padding:32px 16px 48px}
  .util .wrap{padding-left:16px;padding-right:16px}
}