/* brutal-mono — 2023 Brutal Minimalism · atomic utility CSS */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:#fafafa;
  background:#0a0a0a;
  min-height:100vh;
}

img{max-width:100%;height:auto;display:block;border:0}

a{color:#fafafa;text-decoration:none}
a:hover{color:#ff3d00}

ul,ol{list-style:none}

button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}

/* ── atomic utilities ── */
.mx{max-width:960px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.fx{display:flex;align-items:center}
.gd{display:grid}
.ct{text-align:center}

/* ── typography ── */
.t1{
  font-size:clamp(1.75rem,4vw,2.5rem);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.06em;
  line-height:1.15;
  margin-bottom:32px;
}

.t2{
  font-size:1.125rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:24px;
  border-left:4px solid #ff3d00;
  padding-left:12px;
}

/* ── header ── */
.hd{
  position:sticky;
  top:0;
  z-index:100;
  background:#0a0a0a;
  border-bottom:2px solid #fafafa;
}

.hd .mx{
  justify-content:space-between;
  gap:16px;
  min-height:56px;
}

.lg{
  font-weight:800;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  flex-shrink:0;
}

.lg:hover{color:#ff3d00}

.nv ul{gap:0;flex-wrap:wrap}

.nv li a{
  display:block;
  padding:8px 14px;
  font-size:0.8125rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.nv li a:hover{background:#ff3d00;color:#0a0a0a}

.ct-lk{
  font-size:0.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.1em;
  padding:6px 12px;
  border:2px solid #ff3d00;
  color:#ff3d00;
  flex-shrink:0;
}

.ct-lk:hover{background:#ff3d00;color:#0a0a0a}

.hb{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:40px;
  height:40px;
  padding:8px;
  border:2px solid #fafafa;
}

.hb span{
  display:block;
  width:100%;
  height:2px;
  background:#fafafa;
}

/* ── main spacing ── */
main.mx{padding-top:48px;padding-bottom:64px}

/* ── product list grid (single column stack) ── */
.pl-gd{display:flex;flex-direction:column;gap:2px}

.pl-gd > [class*="col-"]{
  width:100%;
  max-width:100%;
  flex:none;
  padding:0;
}

/* horizontal product card */
.product-card{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  background:#0a0a0a;
  border:2px solid #fafafa;
  border-radius:0;
  overflow:hidden;
}

.product-card:hover{border-color:#ff3d00}

.product-card .card-img{
  width:140px;
  min-width:140px;
  height:auto;
  object-fit:cover;
  aspect-ratio:3/4;
  flex-shrink:0;
}

.product-card .card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:20px 24px;
  gap:8px;
  min-width:0;
}

.product-card .card-title{
  font-size:1rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.06em;
  line-height:1.2;
}

.product-card .card-meta{
  display:flex;
  gap:16px;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  opacity:0.7;
}

.product-card .card-meta .fa{display:none}

.product-card .card-price{
  font-size:1.125rem;
  font-weight:800;
  color:#ff3d00;
}

.product-card .card-btn{
  display:inline-block;
  align-self:flex-start;
  margin-top:8px;
  padding:8px 20px;
  font-size:0.6875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.12em;
  border:2px solid #ff3d00;
  color:#ff3d00;
  border-radius:0;
}

.product-card .card-btn:hover{background:#ff3d00;color:#0a0a0a}

/* ── features section ── */
.ft-sec{margin-top:64px;padding-top:48px;border-top:2px solid #fafafa}

.ft-gd{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2px;
}

.ft-gd > *{
  padding:24px;
  border:2px solid #fafafa;
  font-size:0.875rem;
}

.ft-gd h3,.ft-gd h4{
  font-size:0.8125rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:12px;
  color:#ff3d00;
}

/* ── notices ── */
.nt-sec{
  margin-top:48px;
  padding:24px;
  border:2px solid #ff3d00;
  font-size:0.875rem;
  line-height:1.7;
}

.nt-sec p{margin-bottom:8px}

/* ── seo content ── */
.seo-sec{margin-top:64px;padding-top:48px;border-top:2px solid #fafafa}

.seo-b{font-size:0.875rem;line-height:1.8;opacity:0.85}

.seo-b h2,.seo-b h3{
  font-size:0.9375rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin:32px 0 12px;
  color:#ff3d00;
}

.seo-b p{margin-bottom:16px}

/* ── area filter ── */
.af{
  flex-wrap:wrap;
  gap:2px;
  margin-bottom:32px;
}

.af a{
  padding:8px 16px;
  font-size:0.6875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.1em;
  border:2px solid #fafafa;
}

.af a:hover,.af a.active{
  background:#ff3d00;
  border-color:#ff3d00;
  color:#0a0a0a;
}

/* ── pagination ── */
.pg{
  justify-content:center;
  gap:2px;
  margin-top:48px;
  flex-wrap:wrap;
}

.pg li a,.pg a{
  display:block;
  padding:8px 16px;
  font-size:0.6875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.1em;
  border:2px solid #fafafa;
}

.pg li.active a,.pg a:hover{
  background:#ff3d00;
  border-color:#ff3d00;
  color:#0a0a0a;
}

/* ── breadcrumb ── */
.bc{
  gap:8px;
  font-size:0.6875rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:32px;
  opacity:0.6;
}

.bc span{opacity:0.4}

/* ── product detail ── */
.pd{
  gap:0;
  align-items:flex-start;
  border:2px solid #fafafa;
}

.pd-im{
  width:360px;
  flex-shrink:0;
  border-right:2px solid #fafafa;
}

.pd-im > img{width:100%;aspect-ratio:3/4;object-fit:cover}

.pd-th{
  display:flex;
  gap:2px;
  flex-wrap:wrap;
  padding:2px;
  background:#0a0a0a;
}

.pd-th img{
  width:64px;
  height:64px;
  object-fit:cover;
  border:2px solid #fafafa;
  cursor:pointer;
}

.pd-th img:hover,.pd-th img.active{border-color:#ff3d00}

.pd-in{
  flex:1;
  padding:32px;
  min-width:0;
}

.pd-tg{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px;
}

.pd-tg span{
  font-size:0.6875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.1em;
  padding:4px 10px;
  border:1px solid #fafafa;
}

.pd-pr{
  font-size:2rem;
  font-weight:800;
  color:#ff3d00;
  margin-bottom:32px;
}

.pd-sp{
  margin-bottom:32px;
  border-top:2px solid #fafafa;
}

.pd-sp > div{
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid rgba(250,250,250,0.15);
  font-size:0.875rem;
}

.pd-sp dt{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.6875rem;
  opacity:0.6;
}

.pd-sp dd{font-weight:600}

.btn{
  display:inline-block;
  padding:14px 32px;
  font-size:0.75rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.14em;
  background:#ff3d00;
  color:#0a0a0a;
  border:2px solid #ff3d00;
  border-radius:0;
  margin-bottom:32px;
}

.btn:hover{background:#0a0a0a;color:#ff3d00}

.pd-ct{
  font-size:0.875rem;
  line-height:1.8;
  padding-top:24px;
  border-top:2px solid #fafafa;
}

.pd-ct img{display:none}

/* ── related section ── */
.rl-sec{margin-top:64px;padding-top:48px;border-top:2px solid #fafafa}

/* ── news / article ── */
.nw{margin-bottom:64px}

.nw-mt{
  gap:24px;
  font-size:0.6875rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:32px;
  opacity:0.6;
}

.nw-bd{font-size:0.9375rem;line-height:1.85}

.nw-bd h2,.nw-bd h3{
  font-size:1rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin:32px 0 12px;
  color:#ff3d00;
}

.nw-bd p{margin-bottom:16px}

.nw-bd img{max-width:100%;margin:24px 0;border:2px solid #fafafa}

.rl-nw{padding-top:48px;border-top:2px solid #fafafa}

.rl-ls li{padding:12px 0;border-bottom:1px solid rgba(250,250,250,0.15)}

.rl-ls a{
  font-size:0.875rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
}

/* ── footer ── */
.ft{
  border-top:2px solid #fafafa;
  padding:20px 0;
  margin-top:auto;
}

.ft-rw{
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.cp{
  font-size:0.6875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.1em;
  flex-shrink:0;
}

.ft-lk{gap:2px}

.ft-lk a{
  padding:6px 14px;
  font-size:0.6875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.1em;
  border:1px solid #fafafa;
}

.ft-lk a:hover{background:#ff3d00;border-color:#ff3d00;color:#0a0a0a}

.ft-ar{
  display:none;
  gap:2px;
  flex-wrap:wrap;
}

.ft-ar li a{
  padding:4px 10px;
  font-size:0.625rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  opacity:0.5;
}

.ct-box{
  max-width:960px;
  margin:12px auto 0;
  padding:0 24px;
  font-size:0.8125rem;
}

.ct-box:empty{display:none}

/* ── responsive ── */
@media(max-width:768px){
  .nv{
    position:fixed;
    top:56px;
    left:0;
    right:0;
    background:#0a0a0a;
    border-bottom:2px solid #fafafa;
    padding:16px 24px;
    transform:translateY(-120%);
    opacity:0;
    pointer-events:none;
    transition:transform .2s,opacity .2s;
  }

  .nv.on{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .nv ul{flex-direction:column;align-items:stretch}

  .nv li a{padding:12px 0;border-bottom:1px solid rgba(250,250,250,0.1)}

  .hb{display:flex}

  .ct-lk{display:none}

  .pd{flex-direction:column}

  .pd-im{width:100%;border-right:0;border-bottom:2px solid #fafafa}

  .product-card .card-img{width:100px;min-width:100px}

  .ft-rw{flex-direction:column;align-items:flex-start}

  .ft-ar{display:flex}
}

@media(min-width:769px){
  .hb{display:none}
  .nv{display:block}
}

@media(min-width:960px){
  .product-card .card-img{width:180px;min-width:180px}
}