:root{
    --sidebar:148px;
    --topbar:64px;
    --purple:#6f3cf0;
    --purple-2:#8f58ff;
    --ink:#17152e;
    --muted:#747184;
    --line:rgba(78,59,123,.10);
    --surface:rgba(255,255,255,.88);
    --shadow:0 18px 48px rgba(75,48,138,.10);
}

*{
    box-sizing:border-box;
    min-width:0;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:
        radial-gradient(circle at 75% 8%,rgba(155,111,255,.11),transparent 28%),
        linear-gradient(180deg,#fcfbff,#f7f5fb);
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input{
    font:inherit;
}

button{
    cursor:pointer;
}

svg{
    width:1em;
    height:1em;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.home-topbar{
    position:fixed;
    z-index:100;
    inset:0 0 auto var(--sidebar);
    height:var(--topbar);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 22px;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(18px);
}

.home-search{
    width:min(500px,58vw);
    min-height:42px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 13px;
    border:1px solid rgba(67,50,104,.11);
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 26px rgba(59,39,109,.05);
    color:#777184;
}

.home-search svg{
    flex:0 0 auto;
    width:18px;
    height:18px;
}

.home-search input{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#242033;
}

.home-search input::placeholder{
    color:#aaa5b5;
}

.home-search kbd{
    padding:4px 7px;
    border-radius:7px;
    background:#f6f3fb;
    color:#aaa5b5;
    font-family:inherit;
    font-size:10px;
}

.topbar-account{
    display:flex;
    align-items:center;
    gap:14px;
}

.notification-icon{
    position:relative;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    padding:0;
    border:0;
    background:transparent;
    color:#343047;
}

.notification-icon svg{
    width:21px;
    height:21px;
}

.notification-icon span{
    position:absolute;
    top:0;
    right:0;
    display:grid;
    place-items:center;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:999px;
    background:#ef365b;
    color:#fff;
    font-size:9px;
    font-weight:900;
}

.user-menu{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:12px;
    font-weight:800;
}

.user-menu > svg{
    width:15px;
    height:15px;
}

.user-avatar,
.sidebar-avatar{
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(135deg,#7b45ef,#a360ff);
    color:#fff;
    font-weight:900;
}

.user-avatar{
    width:38px;
    height:38px;
}

.mobile-menu-button{
    display:none;
    place-items:center;
    width:40px;
    height:40px;
    padding:0;
    border:0;
    border-radius:12px;
    background:#f1ecff;
    color:var(--purple);
}

.mobile-menu-button svg{
    width:20px;
    height:20px;
}

.home-sidebar{
    position:fixed;
    z-index:120;
    inset:0 auto 0 0;
    width:var(--sidebar);
    display:flex;
    flex-direction:column;
    padding:21px 14px 14px;
    border-right:1px solid var(--line);
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(20px);
}

.sidebar-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
}

.dk-logo{
    display:grid;
    justify-items:center;
    margin:0 auto 20px;
}

.dk-logo strong{
    font-size:35px;
    line-height:.95;
    font-style:italic;
    font-weight:1000;
    letter-spacing:-.09em;
    background:linear-gradient(135deg,#4f22dc,#a15fff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.dk-logo span{
    margin-top:3px;
    color:#625d70;
    font-size:10px;
    font-weight:900;
}

.sidebar-close{
    display:none;
    place-items:center;
    width:36px;
    height:36px;
    border:0;
    border-radius:11px;
    background:#f3effa;
    color:#6b6577;
}

.public-nav{
    display:grid;
    gap:4px;
}

.public-nav a{
    min-height:39px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 10px;
    border-radius:12px;
    color:#4e495a;
    font-size:10.5px;
    font-weight:760;
    transition:.18s ease;
}

.public-nav a svg{
    width:18px;
    height:18px;
    flex:0 0 auto;
}

.public-nav a:hover,
.public-nav a.active{
    background:linear-gradient(135deg,#eee8ff,#f4f0ff);
    color:#6940e5;
}

.premium-card{
    margin-top:auto;
    padding:16px 12px;
    border-radius:18px;
    background:
        radial-gradient(circle at 80% 10%,rgba(153,100,255,.18),transparent 45%),
        linear-gradient(145deg,#f7f3ff,#fff);
    border:1px solid rgba(108,66,224,.10);
    text-align:center;
    box-shadow:0 14px 30px rgba(86,56,166,.07);
}

.premium-crown{
    display:grid;
    place-items:center;
    width:39px;
    height:39px;
    margin:0 auto 8px;
    border-radius:13px;
    background:#fff5df;
    color:#f0a300;
    font-size:22px;
}

.premium-card strong{
    display:block;
    font-size:12px;
}

.premium-card p{
    margin:6px 0 11px;
    color:#777182;
    font-size:9px;
    line-height:1.45;
}

.premium-card a{
    display:inline-flex;
    min-height:31px;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    border-radius:9px;
    background:linear-gradient(135deg,#7e48f4,#6530df);
    color:#fff;
    font-size:9px;
    font-weight:900;
}

.sidebar-user{
    display:grid;
    grid-template-columns:32px 1fr auto;
    align-items:center;
    gap:8px;
    margin-top:11px;
    padding:9px;
    border-radius:14px;
    background:#faf9fc;
    border:1px solid var(--line);
}

.sidebar-avatar{
    width:32px;
    height:32px;
    font-size:11px;
}

.sidebar-user span:nth-child(2){
    display:grid;
    gap:2px;
}

.sidebar-user strong{
    font-size:9px;
}

.sidebar-user small{
    color:#837d8e;
    font-size:8px;
}

.sidebar-user > svg{
    width:13px;
    height:13px;
}

.sidebar-overlay{
    position:fixed;
    z-index:110;
    inset:0;
    display:none;
    background:rgba(30,23,44,.32);
    backdrop-filter:blur(5px);
}

.home-main{
    margin-left:var(--sidebar);
    padding:calc(var(--topbar) + 14px) 20px 28px;
}

.hero-slider{
    position:relative;
    width:min(1260px,100%);
    min-height:414px;
    margin:0 auto;
    overflow:hidden;
    border-radius:25px;
    background:#f2ecff;
    box-shadow:var(--shadow);
}

.hero-slide{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:minmax(430px,.92fr) minmax(480px,1.08fr);
    gap:8px;
    padding:34px 37px 25px;
    background:var(--hero-bg);
    opacity:0;
    transform:translateX(22px);
    pointer-events:none;
    transition:.45s ease;
}

.hero-slide.active{
    position:relative;
    opacity:1;
    transform:none;
    pointer-events:auto;
}

.hero-copy{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.hero-badge{
    width:max-content;
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:29px;
    padding:0 11px;
    border-radius:999px;
    background:rgba(255,255,255,.72);
    color:#30294a;
    font-size:10px;
    font-weight:900;
    box-shadow:0 7px 20px rgba(68,45,122,.06);
}

.hero-badge svg{
    width:14px;
    height:14px;
    color:#8251f2;
}

.hero-copy h1{
    max-width:480px;
    margin:14px 0 0;
    font-size:44px;
    line-height:1.03;
    letter-spacing:-.045em;
}

.hero-copy h1 mark{
    background:transparent;
    color:var(--purple);
}

.hero-copy > p{
    max-width:480px;
    margin:14px 0 0;
    color:#686276;
    font-size:13px;
    line-height:1.55;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.primary-cta,
.secondary-cta{
    min-height:43px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 20px;
    border-radius:12px;
    font-size:11px;
    font-weight:900;
}

.primary-cta{
    background:linear-gradient(135deg,#7944f1,#6732e1);
    color:#fff;
    box-shadow:0 12px 25px rgba(96,50,218,.18);
}

.secondary-cta{
    background:rgba(255,255,255,.78);
    border:1px solid rgba(83,60,126,.10);
    color:#302b3a;
}

.primary-cta svg,
.secondary-cta svg{
    width:16px;
    height:16px;
}

.hero-mini-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-top:24px;
}

.hero-mini-stats > div{
    display:grid;
    grid-template-columns:30px 1fr;
    align-items:center;
    gap:8px;
}

.mini-stat-icon{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:10px;
    background:rgba(255,255,255,.72);
    color:#7745ef;
}

.mini-stat-icon svg{
    width:16px;
    height:16px;
}

.hero-mini-stats strong,
.hero-mini-stats small{
    display:block;
}

.hero-mini-stats strong{
    font-size:10px;
}

.hero-mini-stats small{
    margin-top:2px;
    color:#777184;
    font-size:8px;
}

.hero-art{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
}

.hero-art > img{
    width:112%;
    max-width:none;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    filter:drop-shadow(0 20px 22px rgba(49,35,80,.13));
}

.floating-news{
    position:absolute;
    z-index:4;
    top:11px;
    right:11px;
    display:flex;
    align-items:center;
    gap:7px;
    max-width:155px;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.78);
    color:#342e45;
    box-shadow:0 12px 30px rgba(67,43,119,.09);
    font-size:9px;
    font-weight:900;
    line-height:1.25;
}

.floating-news svg{
    width:17px;
    height:17px;
    color:#e25ac9;
    flex:0 0 auto;
}

.slider-dots{
    position:absolute;
    z-index:6;
    right:27px;
    bottom:18px;
    display:flex;
    gap:7px;
}

.slider-dots button{
    width:7px;
    height:7px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(88,71,124,.22);
}

.slider-dots button.active{
    background:var(--purple);
    box-shadow:0 0 0 4px rgba(111,60,240,.09);
}

.category-strip{
    width:min(1260px,100%);
    margin:13px auto 0;
    display:grid;
    grid-template-columns:repeat(8,minmax(92px,1fr));
    gap:9px;
    padding:11px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(255,255,255,.77);
    box-shadow:0 12px 35px rgba(72,49,125,.06);
}

.category-card{
    min-height:92px;
    display:grid;
    justify-items:center;
    align-content:center;
    gap:6px;
    padding:8px 5px;
    border-radius:15px;
    transition:.18s ease;
}

.category-card:hover{
    background:#f7f3ff;
    transform:translateY(-2px);
}

.category-card img{
    width:50px;
    height:50px;
    object-fit:contain;
    filter:drop-shadow(0 7px 8px rgba(56,40,95,.10));
}

.category-card span{
    font-size:9px;
    font-weight:850;
    text-align:center;
}

.home-split{
    width:min(1260px,100%);
    margin:14px auto 0;
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(310px,.9fr);
    gap:14px;
}

.content-panel,
.popular-section{
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(255,255,255,.78);
    box-shadow:0 13px 38px rgba(69,47,122,.06);
}

.content-panel{
    padding:14px;
}

.section-heading{
    min-height:29px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.section-heading h2{
    display:flex;
    align-items:center;
    gap:7px;
    margin:0;
    font-size:14px;
    letter-spacing:-.02em;
}

.section-heading > a{
    display:flex;
    align-items:center;
    gap:5px;
    color:#6f3cf0;
    font-size:9px;
    font-weight:900;
}

.section-heading > a svg{
    width:13px;
    height:13px;
}

.product-grid{
    display:grid;
    gap:10px;
}

.compact-product-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.product-card{
    overflow:hidden;
    border:1px solid rgba(70,52,108,.08);
    border-radius:15px;
    background:#fff;
    box-shadow:0 10px 24px rgba(63,43,106,.07);
    transition:.18s ease;
}

.product-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 32px rgba(63,43,106,.12);
}

.product-media{
    position:relative;
    display:block;
    aspect-ratio:1.15/1;
    overflow:hidden;
    background:#f2eff5;
}

.product-media > img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.28s ease;
}

.product-card:hover .product-media > img{
    transform:scale(1.035);
}

.favorite-button{
    position:absolute;
    top:8px;
    right:8px;
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.78);
    color:#fff;
    backdrop-filter:blur(10px);
    text-shadow:0 2px 8px rgba(0,0,0,.18);
}

.favorite-button svg{
    width:17px;
    height:17px;
}

.favorite-button.active{
    color:#ef3e67;
}

.favorite-button.active svg{
    fill:currentColor;
}

.new-badge{
    position:absolute;
    top:8px;
    left:8px;
    padding:4px 7px;
    border-radius:999px;
    background:#6a38e8;
    color:#fff;
    font-size:7px;
    font-weight:950;
}

.product-category{
    position:absolute;
    left:8px;
    bottom:7px;
    max-width:calc(100% - 16px);
    padding:4px 7px;
    border-radius:999px;
    background:rgba(255,255,255,.85);
    color:#7140e5;
    font-size:7px;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.product-body{
    padding:9px 9px 8px;
}

.product-title{
    min-height:30px;
    display:block;
    font-size:10px;
    font-weight:900;
    line-height:1.25;
}

.product-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:9px;
    color:#4e4960;
    font-size:8px;
}

.rating,
.product-count{
    display:flex;
    align-items:center;
    gap:4px;
}

.rating svg{
    width:13px;
    height:13px;
    fill:#ffb01f;
    stroke:#ffb01f;
}

.product-count svg{
    width:13px;
    height:13px;
}

.tools-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.tool-card{
    min-height:95px;
    display:grid;
    grid-template-columns:52px 1fr;
    align-items:center;
    gap:10px;
    padding:12px;
    border-radius:14px;
    background:linear-gradient(135deg,#f3edff,#faf8ff);
    transition:.18s ease;
}

.tool-card:hover{
    transform:translateY(-2px);
}

.tool-card img{
    width:48px;
    height:48px;
    object-fit:contain;
}

.tool-card span{
    display:grid;
    gap:4px;
}

.tool-card strong{
    font-size:10px;
    line-height:1.25;
}

.tool-card small{
    color:#7a7484;
    font-size:8px;
}

.accent-green{
    background:linear-gradient(135deg,#eafff7,#f7fffb);
}

.accent-blue,
.accent-indigo{
    background:linear-gradient(135deg,#eef1ff,#fafbff);
}

.metrics-strip{
    width:min(1260px,100%);
    margin:14px auto 0;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:4px;
    padding:15px 17px;
    border:1px solid var(--line);
    border-radius:19px;
    background:rgba(255,255,255,.80);
    box-shadow:0 12px 34px rgba(66,44,116,.06);
}

.metric-item{
    display:grid;
    grid-template-columns:39px 1fr;
    align-items:center;
    gap:10px;
    padding:4px 14px;
    border-right:1px solid rgba(75,57,111,.08);
}

.metric-item:last-child{
    border-right:0;
}

.metric-icon{
    display:grid;
    place-items:center;
    width:39px;
    height:39px;
    border-radius:13px;
    background:#f1ebff;
    color:#6f3cf0;
}

.metric-icon svg{
    width:21px;
    height:21px;
}

.metric-item strong,
.metric-item small{
    display:block;
}

.metric-item strong{
    font-size:17px;
}

.metric-item small{
    margin-top:2px;
    color:#787182;
    font-size:8px;
}

.popular-section{
    width:min(1260px,100%);
    margin:14px auto 0;
    padding:14px;
}

.fire-icon{
    display:grid;
    place-items:center;
    color:#ff6647;
}

.fire-icon svg{
    width:18px;
    height:18px;
    fill:#ff7a42;
}

.popular-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
}

.promo-banner{
    position:relative;
    width:min(1260px,100%);
    min-height:105px;
    margin:15px auto 0;
    display:grid;
    grid-template-columns:90px minmax(290px,1fr) auto 120px;
    align-items:center;
    gap:16px;
    padding:15px 28px;
    overflow:hidden;
    border-radius:18px;
    background:var(--promo-bg);
    color:#fff;
    box-shadow:0 18px 42px rgba(71,47,178,.19);
}

.promo-banner::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 16% 20%,rgba(255,255,255,.16),transparent 24%),
        radial-gradient(circle at 80% 80%,rgba(255,255,255,.10),transparent 28%);
    pointer-events:none;
}

.promo-rocket{
    position:relative;
    z-index:2;
    font-size:58px;
    transform:rotate(-18deg);
    filter:drop-shadow(0 10px 14px rgba(31,20,99,.22));
}

.promo-copy{
    position:relative;
    z-index:2;
}

.promo-copy h2{
    margin:0;
    font-size:19px;
}

.promo-copy p{
    max-width:520px;
    margin:5px 0 0;
    color:rgba(255,255,255,.88);
    font-size:10px;
    line-height:1.45;
}

.promo-banner > a{
    position:relative;
    z-index:2;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 17px;
    border-radius:12px;
    background:#fff;
    color:#6736df;
    font-size:10px;
    font-weight:950;
    box-shadow:0 10px 25px rgba(37,23,101,.16);
}

.promo-banner > a svg{
    width:17px;
    height:17px;
}

.promo-image{
    position:relative;
    z-index:2;
    width:110px;
    height:82px;
    object-fit:contain;
}

.filament-art{
    position:relative;
    z-index:2;
    width:105px;
    height:80px;
}

.filament-art i{
    position:absolute;
    left:5px;
    width:95px;
    height:42px;
    border-radius:50%;
    background:
        repeating-radial-gradient(
            ellipse at center,
            #8f55ff 0 4px,
            #6230d2 5px 8px
        );
    box-shadow:0 8px 16px rgba(27,18,75,.25);
}

.filament-art i:first-child{
    top:4px;
}

.filament-art i:last-child{
    top:34px;
    background:
        repeating-radial-gradient(
            ellipse at center,
            #3a3551 0 4px,
            #211c33 5px 8px
        );
}

.benefits-row{
    width:min(1260px,100%);
    margin:10px auto 0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    padding:10px 14px;
}

.benefits-row > div{
    display:grid;
    grid-template-columns:31px 1fr;
    align-items:center;
    gap:8px;
}

.benefits-row > div > svg{
    width:24px;
    height:24px;
    color:#7040e8;
}

.benefits-row strong,
.benefits-row small{
    display:block;
}

.benefits-row strong{
    font-size:9px;
}

.benefits-row small{
    margin-top:2px;
    color:#817a8c;
    font-size:7px;
}

.empty-home-state{
    grid-column:1/-1;
    min-height:165px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:6px;
    padding:25px;
    border:1px dashed rgba(86,61,140,.16);
    border-radius:15px;
    background:#faf8fd;
    text-align:center;
}

.empty-home-state strong{
    font-size:12px;
}

.empty-home-state span{
    color:#7d7687;
    font-size:9px;
}

.search-page{
    padding:30px;
}

.search-shell{
    width:min(1260px,100%);
    margin:0 auto;
}

.back-home{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#6f3cf0;
    font-size:11px;
    font-weight:900;
}

.back-home svg{
    width:16px;
    height:16px;
}

.search-page-header{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-top:20px;
    padding:24px;
    border-radius:23px;
    background:linear-gradient(135deg,#f0e8ff,#fbf9ff);
}

.search-page-header span{
    color:#7343e9;
    font-size:10px;
    font-weight:900;
}

.search-page-header h1{
    margin:5px 0 0;
    font-size:30px;
}

.search-page-header form{
    min-width:350px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:9px;
    min-height:45px;
    padding:0 8px 0 13px;
    border-radius:14px;
    background:#fff;
}

.search-page-header form svg{
    width:18px;
    height:18px;
    color:#716b7c;
}

.search-page-header input{
    border:0;
    outline:0;
}

.search-page-header button{
    min-height:33px;
    padding:0 13px;
    border:0;
    border-radius:10px;
    background:#6f3cf0;
    color:#fff;
    font-size:10px;
    font-weight:900;
}

.search-main{
    min-height:100vh;
}

.search-main .search-shell{
    width:min(1260px,100%);
    margin:0 auto;
}

.search-main .search-page-header{
    align-items:center;
    margin-top:0;
    border:1px solid rgba(104,69,191,.08);
    box-shadow:0 18px 48px rgba(75,48,138,.08);
}

.search-page-header > div:first-child{
    max-width:720px;
}

.search-page-header .search-page-kicker{
    display:block;
    text-transform:uppercase;
    letter-spacing:.13em;
}

.search-page-header p{
    margin:8px 0 0;
    color:#716b7c;
    font-size:11px;
    line-height:1.6;
}

.search-summary{
    min-width:185px;
    display:grid;
    justify-items:end;
    gap:2px;
    padding-left:24px;
    border-left:1px solid rgba(87,61,149,.10);
}

.search-summary strong{
    color:#6f3cf0;
    font-size:28px;
    line-height:1;
}

.search-summary > span{
    color:#716b7c;
    font-size:9px;
}

.search-summary a{
    margin-top:8px;
    color:#6f3cf0;
    font-size:9px;
    font-weight:900;
}

.search-results{
    grid-template-columns:repeat(5,minmax(0,1fr));
    margin-top:18px;
}

@media(max-width:1120px){
    :root{
        --sidebar:76px;
    }

    .public-nav a{
        justify-content:center;
        padding:0;
    }

    .public-nav a span,
    .premium-card,
    .sidebar-user span:nth-child(2),
    .sidebar-user > svg{
        display:none;
    }

    .sidebar-user{
        grid-template-columns:1fr;
        justify-items:center;
    }

    .hero-slide{
        grid-template-columns:minmax(360px,.95fr) minmax(390px,1.05fr);
        padding:30px 27px 24px;
    }

    .hero-copy h1{
        font-size:39px;
    }

    .category-strip{
        grid-template-columns:repeat(4,1fr);
    }

    .home-split{
        grid-template-columns:1fr;
    }

    .popular-grid{
        grid-template-columns:repeat(4,1fr);
    }

    .popular-grid .product-card:nth-child(n+5){
        display:none;
    }

    .search-results{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media(max-width:800px){
    :root{
        --sidebar:0px;
    }

    .home-topbar{
        left:0;
        padding:0 12px;
    }

    .mobile-menu-button{
        display:grid;
    }

    .home-search{
        width:100%;
    }

    .home-search kbd,
    .user-name{
        display:none;
    }

    .home-sidebar{
        width:250px;
        transform:translateX(-105%);
        transition:.25s ease;
        box-shadow:20px 0 50px rgba(41,27,72,.16);
    }

    .home-sidebar.open{
        transform:none;
    }

    .sidebar-close{
        display:grid;
    }

    .dk-logo{
        margin-left:0;
    }

    .public-nav a{
        justify-content:flex-start;
        padding:0 12px;
        font-size:12px;
    }

    .public-nav a span{
        display:inline;
    }

    .premium-card{
        display:block;
    }

    .sidebar-user{
        grid-template-columns:36px 1fr auto;
    }

    .sidebar-user span:nth-child(2),
    .sidebar-user > svg{
        display:grid;
    }

    .sidebar-overlay.open{
        display:block;
    }

    .home-main{
        margin-left:0;
        padding-left:10px;
        padding-right:10px;
    }

    .hero-slider{
        min-height:620px;
    }

    .hero-slide{
        grid-template-columns:1fr;
        grid-template-rows:auto 250px;
        padding:24px 21px 18px;
    }

    .hero-copy h1{
        font-size:36px;
    }

    .hero-art > img{
        height:260px;
    }

    .floating-news{
        top:0;
        right:0;
    }

    .hero-mini-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .category-strip{
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
    }

    .category-card{
        flex:0 0 125px;
        scroll-snap-align:start;
    }

    .compact-product-grid,
    .popular-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .popular-grid .product-card:nth-child(n+5){
        display:block;
    }

    .metrics-strip{
        grid-template-columns:repeat(2,1fr);
    }

    .metric-item{
        border-right:0;
        border-bottom:1px solid rgba(75,57,111,.08);
    }

    .metric-item:last-child{
        grid-column:1/-1;
    }

    .promo-banner{
        grid-template-columns:65px 1fr;
        padding:18px;
    }

    .promo-banner > a{
        grid-column:1/-1;
    }

    .filament-art,
    .promo-image{
        display:none;
    }

    .benefits-row{
        grid-template-columns:repeat(2,1fr);
    }

    .search-page{
        padding:15px;
    }

    .search-page-header{
        align-items:stretch;
        flex-direction:column;
    }

    .search-page-header > div:first-child{
        max-width:none;
    }

    .search-summary{
        width:100%;
        min-width:0;
        justify-items:start;
        padding:14px 0 0;
        border-top:1px solid rgba(87,61,149,.10);
        border-left:0;
    }

    .search-page-header form{
        min-width:0;
    }

    .search-results{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:480px){
    .topbar-account{
        gap:3px;
    }

    .notification-icon{
        display:none;
    }

    .user-avatar{
        width:34px;
        height:34px;
    }

    .hero-slider{
        min-height:655px;
        border-radius:20px;
    }

    .hero-copy h1{
        font-size:31px;
    }

    .hero-copy > p{
        font-size:11px;
    }

    .primary-cta,
    .secondary-cta{
        min-height:40px;
        padding:0 14px;
    }

    .hero-mini-stats{
        margin-top:17px;
    }

    .hero-art{
        min-height:225px;
    }

    .hero-art > img{
        width:125%;
        height:235px;
    }

    .compact-product-grid,
    .popular-grid,
    .search-results{
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .content-panel,
    .popular-section{
        padding:10px;
        border-radius:17px;
    }

    .tools-grid{
        grid-template-columns:1fr;
    }

    .metrics-strip{
        padding:10px;
    }

    .metric-item{
        grid-template-columns:34px 1fr;
        padding:7px;
    }

    .metric-icon{
        width:34px;
        height:34px;
    }

    .promo-copy h2{
        font-size:16px;
    }

    .benefits-row{
        grid-template-columns:1fr 1fr;
        padding:8px 2px;
    }
}

/* sidebar-real-plan-v1 */
.public-nav .nav-crown{display:grid;place-items:center;width:20px;height:20px;flex:0 0 auto;color:currentColor;font:900 20px/1 Georgia,serif}.sidebar-plan-card strong{line-height:1.25}.sidebar-plan-card p{line-height:1.45}