/* Dad's Tools - mock preview. Original CSS, layout measured from the Stroyka red demo. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:24px;color:#3d464d;background:#fff;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
.wrap{width:100%;padding:0 20px}
.red{color:#cc3333}
.btn{display:inline-block;border:1px solid #cc3333;background:#cc3333;color:#fff;font-weight:500;border-radius:2px;font-size:16px;line-height:24px;padding:6px 20px}
.btn:hover{background:#b82e2e;border-color:#b82e2e}
.btn-lg{font-size:18px;padding:13px 32px;line-height:18px}
.btn-sm{font-size:14px;line-height:17.5px;padding:6px 16px}
/* topbar */
.topbar{background:#f7f7f7;height:32px;font-size:14px;line-height:14px;color:#737373}
.topbar .wrap{display:flex;align-items:center;height:32px;gap:0}
.topbar a{padding:0 10px;display:flex;align-items:center;height:32px}
.topbar a:first-child{padding-left:0}
.topbar .sp{flex:1}
.topbar .dd::after{content:"";display:inline-block;margin-left:6px;border:3.5px solid transparent;border-top:4px solid #b3b3b3;transform:translateY(2px)}
.topbar b{font-weight:400;color:#cc3333;margin-left:4px}
.mocknote{background:#fff7e6;color:#8a5a00;font-size:13px;line-height:18px;text-align:center;padding:4px 20px;border-bottom:1px solid #f3e2bd}
/* middle header */
.hmid{height:104px}
.hmid .wrap{display:flex;align-items:center;height:104px}
.logo{width:255px;flex:0 0 255px;margin-right:30px;font-weight:900;font-size:30px;letter-spacing:1.5px;color:#3d464d;line-height:26px;white-space:nowrap}
.logo span{color:#cc3333}
.logo small{display:block;font-size:10px;letter-spacing:3.2px;font-weight:500;color:#999;margin-top:5px}
.search{flex:1;display:flex;height:42px;border:2px solid #ebebeb;border-radius:2px;background:#fff}
.search select{border:0;border-right:2px solid #ebebeb;background:#fff;font-size:14px;color:#3d464d;padding:0 31px 0 14px;width:182px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#999 50%),linear-gradient(135deg,#999 50%,transparent 50%);background-position:150px 17px,155px 17px;background-size:5px 5px;background-repeat:no-repeat;font-family:inherit}
.search input{flex:1;border:0;padding:0 14px;font-size:15px;font-family:inherit;color:#3d464d;min-width:0;outline:none}
.search input::placeholder{color:#999}
.search button{width:46px;border:0;background:transparent;color:#bfbfbf;display:flex;align-items:center;justify-content:center}
.phone{margin-left:80px;text-align:right;white-space:nowrap}
.phone .t{font-size:14px;line-height:14px;color:#999}
.phone .n{font-size:20px;line-height:20px;font-weight:700;margin-top:6px}
/* nav panel */
.navp{background:#cc3333;color:#fff;height:54px;position:relative;z-index:20}
.navp .wrap{display:flex;align-items:center;height:54px}
.dept{width:255px;flex:0 0 255px;position:relative;height:42px;margin-right:15px}
.dept-btn{width:100%;height:42px;border:0;background:transparent;color:#fff;font-size:15px;font-weight:500;text-align:left;padding:0 32px 0 47px;position:relative}
.dept-btn svg.m{position:absolute;left:16px;top:14px}
.dept-btn svg.c{position:absolute;right:13px;top:17px;transition:transform .2s}
.dept-body{position:absolute;left:0;top:0;width:255px;background:#303138;border-radius:2px;padding:42px 0 14px;z-index:-1;display:none}
.dept.open .dept-body{display:block}
.dept.open .dept-btn svg.c{transform:rotate(180deg)}
.dept-body a{display:flex;justify-content:space-between;align-items:center;font-size:14px;line-height:16px;padding:10px 16px;color:#fff}
.dept-body a:hover{background:rgba(255,255,255,.08)}
.dept-body a svg{opacity:.55}
.nav-links{display:flex;flex:1;height:54px;overflow:hidden}
.nav-links a{display:flex;align-items:center;height:54px;padding:0 14px;font-size:15px}
.nav-links a:first-child{padding-left:4px}
.nav-links a.dd::after{content:"";margin-left:7px;border:3px solid transparent;border-top:4px solid rgba(255,255,255,.6);transform:translateY(2px)}
.nav-links a:hover{background:rgba(0,0,0,.08)}
.ind{display:flex;height:42px}
.ind button{position:relative;height:42px;padding:0 14px;border:0;background:transparent;color:#fff;border-radius:2px;display:flex;align-items:center}
.ind button:hover{background:rgba(0,0,0,.1)}
.ind .v{position:absolute;top:2px;right:5px;background:#fff;color:#3d464d;font-size:10px;font-weight:700;line-height:15px;padding:0 5px;border-radius:1000px}
/* slideshow */
.slideshow{margin-bottom:50px}
.slideshow .wrap{display:flex;padding-top:15px}
.slideshow .gap{width:270px;flex:0 0 270px}
.ss-body{position:relative;flex:1;height:395px;overflow:hidden;border-radius:2px;background:#f0f0f0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide img{width:100%;height:100%;object-fit:cover}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.96) 0,rgba(255,255,255,.88) 30%,rgba(255,255,255,0) 58%);z-index:1}
.slide-c{position:absolute;left:46px;top:131px;z-index:2;max-width:430px}
.slide-c h2{margin:0 0 12px;font-size:30px;line-height:34px;font-weight:700}
.slide-c p{margin:0;font-size:16px;line-height:26px}
.slide-c .btn{margin-top:40px}
.dots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:#fff;border-radius:9px;padding:4px;display:flex;gap:4px;z-index:3}
.dots button{width:10px;height:10px;border-radius:5px;border:0;background:#e0e0e0;padding:0}
.dots button.on{background:#cc3333}
/* features */
.features{margin:-20px 0 50px}
.fl{display:flex;border:2px solid #f0f0f0;border-radius:2px}
.fi{flex:1;display:flex;align-items:center;padding:16px 24px;gap:20px}
.fi+.fi{border-left:2px solid #f0f0f0}
.fi svg{flex:0 0 48px}
.fi .t{font-size:17px;font-weight:700;line-height:24px}
.fi .s{font-size:14px;line-height:21px}
/* block header */
.block{margin-bottom:50px}
.bh{display:flex;align-items:center;margin-bottom:24px;min-height:29px}
.bh h3{margin:0;font-size:20px;line-height:24px;font-weight:700;white-space:nowrap}
.bh .div{flex:1;height:2px;background:#ebebeb;margin:0 16px}
.groups{display:flex;gap:2px;margin-right:10px}
.groups button{border:0;background:transparent;font-size:14px;font-weight:500;line-height:21px;padding:2px 11px 1px;border-radius:12px;color:#3d464d}
.groups button:hover{background:#f2f2f2}
.groups button.on{box-shadow:inset 0 0 0 2px #cc3333;background:transparent}
.arrows{display:flex;gap:3px}
.arrows button{width:27px;height:29px;border:0;background:#f2f2f2;border-radius:1.5px;color:#3d464d;display:flex;align-items:center;justify-content:center}
.arrows button:hover{background:#e5e5e5}
/* product card */
.pc{position:relative;background:#fff;border:1px solid #ededed;display:flex;flex-direction:column;transition:box-shadow .2s}
.pc:hover{box-shadow:0 0 0 2px #e5e5e5 inset;border-color:#e5e5e5}
.pc .qv{position:absolute;right:0;top:0;width:30px;height:30px;padding:7px;color:#ccc;border:0;background:transparent;z-index:2}
.badges{position:absolute;left:16px;top:16px;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.bdg{font-size:11px;font-weight:500;line-height:11px;color:#fff;padding:5px 8px 4px;border-radius:1.5px;margin:0 4px 4px 0;text-transform:uppercase}
.bdg.new{background:#3377ff}.bdg.hot{background:#614ba6}.bdg.sale{background:#ff3333}
.pc .im{padding:18px 18px 20px;display:block}
.pc .im img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.pc .inf{padding:0 24px;flex:1}
.pc .nm{font-size:15px;line-height:19px;display:block}
.pc .nm:hover{color:#cc3333}
.rt{display:flex;align-items:center;margin-top:5px;gap:9px}
.stars{display:flex;gap:2px}
.rt .rv{font-size:13px;line-height:17px;color:#b3b3b3}
.pr{margin-top:14px;font-size:16px;font-weight:700;line-height:16px}
.pr .np{color:#ff2626}
.pr .op{font-size:13px;font-weight:400;color:#b3b3b3;text-decoration:line-through;margin-left:4px}
.pc .act{padding:16px 24px 24px;display:flex;align-items:center;gap:6px}
.pc .act .ic{border:0;background:transparent;color:#ccc;width:36px;height:30px;display:flex;align-items:center;justify-content:center}
.pc .act .ic:hover{color:#3d464d}
.pc .act .btn{margin-right:auto}
.grid-card .pc .act{display:none}
/* carousel */
.car{overflow:hidden}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--n) - 1) * 12px) / var(--n));gap:12px;transition:transform .45s ease}
.track>*{min-width:0}
:root{--n:7;--h:5;--p:4;--c:4}
@media (max-width:1799px){:root{--n:6}}
@media (max-width:1499px){:root{--n:5;--h:4;--p:3}}
@media (max-width:1199px){:root{--n:4;--h:3;--c:2}}
@media (max-width:991px){:root{--n:3;--h:2;--p:2}}
@media (max-width:767px){:root{--n:2;--h:1;--p:1;--c:1}}
/* banner */
.banner{position:relative;height:170px;background:#f5f5f5;border-radius:2px;overflow:hidden;text-align:center}
.banner .art{position:absolute;top:0;bottom:0;display:flex;align-items:center;gap:6px}
.banner .art img{height:120px;width:auto;object-fit:contain}
.banner .art.l{left:20px}.banner .art.r{right:20px}
.banner .art img.rot1{transform:rotate(-24deg)}.banner .art img.rot2{transform:rotate(18deg)}
.banner .bt{position:relative;padding-top:28px;font-size:30px;line-height:30px;font-weight:700}
.banner .bx{position:relative;padding-top:8px;font-size:16px}
.banner .bb{position:relative;padding-top:20px}
/* large-first products */
.lf{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px}
.lf .big{grid-column:span 2;grid-row:span 2}
.lf .big .nm{font-size:17px;line-height:23px}
.lf .big .pr{font-size:20px;line-height:20px}
.lf .big .im{padding:40px}
.lf .big .act{padding-bottom:28px}
.lf>.pc:not(.big) .act{display:none}
.lf>.pc:not(.big) .im img{aspect-ratio:1/0.82}
.lf>.pc.x{display:none}
/* categories */
.hl{background:#f9f9f9;padding:50px 0 60px}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
.cc{background:#fff;border-radius:2px;box-shadow:0 1px 16px rgba(0,0,0,.04);padding:24px 20px;display:flex;gap:24px}
.cc .ci{flex:0 0 130px;width:130px;height:176px;display:flex;align-items:center}
.cc .ci img{width:130px;height:130px;object-fit:cover}
.cc h4{margin:0 0 14px;font-size:17px;font-weight:500;line-height:19px}
.cc ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:19.5px;color:#6c757d}
.cc li a:hover{color:#cc3333}
.cc .all{display:inline-block;margin-top:14px;font-size:14px;color:#cc3333}
/* horizontal cards */
.hz{display:grid;grid-template-columns:repeat(var(--h),minmax(0,1fr));gap:12px}
.hcard{position:relative;background:#fff;border:1px solid #ededed;display:flex;align-items:center;padding:12px 18px 12px 10px;gap:14px;min-height:108px}
.hcard .qv{position:absolute;right:0;top:0;width:28px;height:28px;padding:7px;color:#ccc;border:0;background:transparent}
.hcard .badges{left:8px;top:8px}
.hcard .bdg{font-size:9px;line-height:9px;padding:3px 5px 2px}
.hcard img{width:84px;height:84px;object-fit:contain;flex:0 0 84px}
.hcard .nm{font-size:14px;line-height:17px}
.hcard .pr{margin-top:10px;font-size:15px}
.hz>.hcard.x{display:none}
/* posts */
.post{display:flex;gap:20px}
.post img{width:240px;height:161px;max-width:none;object-fit:cover;border-radius:1.5px;flex:0 0 240px}
.post .pn{font-size:16px;font-weight:500;line-height:20px;margin-top:10px}
.post .pd{font-size:14px;color:#adadad;margin-top:6px;line-height:21px}
.post .pt{font-size:15px;line-height:22px;margin-top:10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.posts .track{grid-auto-columns:calc((100% - (var(--p) - 1) * 30px) / var(--p));gap:30px}
/* type strip (instead of brand logos) */
.types{border:2px solid #f0f0f0;border-radius:2px;display:grid;grid-template-columns:repeat(8,1fr);min-height:100px}
.types div{display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:.5px;color:#9aa0a6;text-transform:uppercase;padding:24px 12px;text-align:center}
.types svg{flex:0 0 26px;color:#c4c4c4}
/* product columns */
.cols{display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:30px}
.cols .hcard{border-top:0}
.cols .hcard:first-of-type{border-top:1px solid #ededed}
.cols .hl2{display:flex;flex-direction:column}
/* footer */
.foot{border-top:1px solid #ebebeb;margin-top:16px}
.fw{display:grid;grid-template-columns:3fr 1.5fr 1.5fr 3fr;gap:30px;padding:48px 0 54px}
.fw h5{margin:0 0 26px;font-size:20px;font-weight:700;line-height:24px}
.fw p{margin:0;font-size:15px;line-height:22px}
.fw ul{list-style:none;padding:0;margin:0}
.fw li{font-size:15px;line-height:18px;margin-bottom:7px}
.fw li a:hover{color:#cc3333}
.fc li{display:flex;gap:10px;align-items:center;margin-top:12px}
.nl form{display:flex;gap:6px;margin-top:22px;max-width:520px}
.nl input{flex:1;height:38px;border:1px solid #ced4da;border-radius:2px;padding:6px 12px;font-size:16px;font-family:inherit;min-width:0}
.nl .lbl{margin-top:22px;font-size:15px}
.soc{display:flex;gap:6px;margin-top:10px}
.soc span{width:34px;height:34px;border-radius:17px;display:flex;align-items:center;justify-content:center;color:#fff}
.fb{border-top:1px solid #ebebeb;height:54px;display:flex;align-items:center;justify-content:space-between;font-size:14px;gap:20px}
.pay{display:flex;gap:8px}
.pay span{border:1px solid #e0e0e0;border-radius:3px;font-size:11px;font-weight:700;color:#777;padding:3px 8px;letter-spacing:.5px}
.disc{background:#f7f7f7;font-size:13px;line-height:19px;color:#737373;padding:12px 20px;text-align:center}
/* responsive */
@media (max-width:1199px){.phone{display:none}.fw{grid-template-columns:1fr 1fr}.types{grid-template-columns:repeat(4,1fr)}}
@media (max-width:991px){
 .dept-body{display:none!important}.slideshow .gap{display:none}.nav-links{display:none}.navp .wrap{justify-content:space-between}
 .logo{flex:0 0 auto;width:auto}.hmid .wrap{flex-wrap:wrap;height:auto;padding-top:14px;padding-bottom:14px;gap:12px}.hmid{height:auto}.search{flex:1 1 100%}
}
@media (max-width:767px){
 .topbar .hide-sm{display:none}.logo{font-size:24px}.search select{display:none}
 .dept{flex:1 1 auto;width:auto}.ss-body{height:300px}.slide-c{left:20px;top:auto;bottom:40px;right:20px}.slide-c h2{font-size:22px;line-height:27px}.slide-c p{font-size:14px;line-height:21px}.slide-c .btn{margin-top:16px}
 .slide::before{background:linear-gradient(0deg,rgba(255,255,255,.95) 0,rgba(255,255,255,.85) 55%,rgba(255,255,255,0) 85%)}
 .fl{flex-wrap:wrap}.fi{flex:1 1 50%;padding:12px;gap:10px}.fi+.fi{border-left:0}.fi svg{width:34px;height:34px;flex-basis:34px}.fi .t{font-size:14px}.fi .s{font-size:12px;line-height:16px}
 .bh{flex-wrap:wrap;row-gap:8px}.groups{order:3;flex:1 1 100%;overflow-x:auto;margin:0}.bh .div{margin-right:0}.bh .arrows{margin-left:12px}
 .lf .big{grid-column:span 2;grid-row:auto}.banner .art{opacity:.25}.banner .bt{font-size:22px}.banner .bx{font-size:14px;padding:8px 16px 0}
 .cats{grid-template-columns:1fr}.cc .ci{flex-basis:96px;width:96px}.cc .ci img{width:96px;height:96px}
 .post{flex-direction:column}.post img{width:100%;height:auto;aspect-ratio:3/2;flex:none}
 .types{grid-template-columns:repeat(2,1fr)}.fw{grid-template-columns:1fr}.fb{flex-direction:column;height:auto;padding:12px 0;align-items:flex-start}
 .pc .inf{padding:0 12px}.pc .im{padding:12px}.badges{left:10px;top:10px}
}
@media (max-width:1799px){.lf>.pc:nth-child(n+10){display:none}}
@media (max-width:1499px){.lf>.pc:nth-child(n+8){display:none}.hz>.hcard:nth-child(n+9){display:none}}
@media (max-width:1199px){.lf>.pc:nth-child(n+6){display:none}.hz>.hcard:nth-child(n+7){display:none}}
@media (max-width:991px){.lf>.pc:nth-child(n+4){display:none}.hz>.hcard:nth-child(n+5){display:none}}
@media (max-width:767px){.lf>.pc:nth-child(n+4){display:flex}.lf>.pc:nth-child(n+6){display:none}}
.banner .art.r{}@media (max-width:767px){.banner .art{display:none}}
.lf .big .im img{max-width:440px;margin:0 auto}
.dept-btn,.groups button,.btn{white-space:nowrap}
@media (max-width:767px){.pc .act{padding:12px}.pc .act .btn{padding:6px 10px;font-size:13px}.pc .act .ic{width:26px}.dept{max-width:200px}}