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

:root{
--black:#050505;
--black2:#0d0d0d;
--gray:#1b1b1b;
--gray2:#2f2f2f;
--steel:#bfbfbf;
--white:#ffffff;
}

body{
font-family:Arial,Helvetica,sans-serif;
color:var(--white);
overflow-x:hidden;

background:
linear-gradient(rgba(0,0,0,.88),rgba(0,0,0,.94)),

radial-gradient(circle at 20% 20%, rgba(255,255,255,.035), transparent 22%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,.025), transparent 26%),

repeating-linear-gradient(
45deg,
rgba(255,255,255,.015) 0px,
rgba(255,255,255,.015) 1px,
transparent 1px,
transparent 6px
),

repeating-linear-gradient(
-45deg,
rgba(255,255,255,.01) 0px,
rgba(255,255,255,.01) 1px,
transparent 1px,
transparent 8px
),

linear-gradient(
180deg,
#050505 0%,
#0b0b0b 35%,
#101010 100%
);
}

body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
opacity:.08;

background:
repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.015), transparent 40px),
repeating-linear-gradient(
90deg,
rgba(255,255,255,.01) 0px,
rgba(255,255,255,.01) 1px,
transparent 1px,
transparent 4px
);

mix-blend-mode:screen;
z-index:-1;
}

.promo-bar{
text-align:center;
padding:10px;
font-weight:900;
letter-spacing:1px;
color:#000;
background:linear-gradient(90deg,#777,#fff,#777);
box-shadow:0 0 22px rgba(255,255,255,.18);
}

.header{
position:sticky;
top:0;
z-index:10;
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 50px;
background:rgba(5,5,5,.88);
backdrop-filter:blur(8px);
border-bottom:1px solid #333;
}

.brand img{
height:88px;
filter:drop-shadow(0 0 14px rgba(255,255,255,.15));
}

nav a{
color:white;
text-decoration:none;
font-weight:800;
margin-left:25px;
text-transform:uppercase;
font-size:.9rem;
}

.menu-btn{
display:none;
background:none;
color:white;
border:1px solid #444;
font-size:1.5rem;
padding:8px 12px;
}

.hero{
min-height:82vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
overflow:hidden;
background:
linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.9)),
url("../img/logo.png") center/430px no-repeat;
}

.hero::before{
content:"";
position:absolute;
inset:0;
opacity:.12;
background:
repeating-linear-gradient(0deg,transparent 0,transparent 7px,rgba(255,255,255,.08) 8px),
repeating-linear-gradient(90deg,transparent 0,transparent 12px,rgba(255,255,255,.05) 13px);
}

.hero-text{
position:relative;
z-index:1;
padding:30px;
}

.tag{
display:inline-block;
border:1px solid #555;
padding:10px 18px;
margin-bottom:20px;
background:rgba(255,255,255,.06);
letter-spacing:2px;
}

h1{
font-size:clamp(3rem,8vw,7rem);
letter-spacing:8px;
text-shadow:0 0 28px rgba(255,255,255,.10);
}

.hero p{
font-size:1.1rem;
color:#d3d3d3;
margin:18px 0;
}

.timer{
margin:20px auto;
padding:12px 20px;
width:max-content;
max-width:100%;
background:linear-gradient(90deg,#111,#2a2a2a,#111);
border:1px solid #555;
box-shadow:inset 0 0 20px rgba(255,255,255,.05);
font-weight:900;
}

.primary-btn,
.card button,
.filters button{
cursor:pointer;
border:none;
background:linear-gradient(180deg,#fff,#8b8b8b);
color:#000;
padding:15px 25px;
font-weight:900;
text-transform:uppercase;
transition:.25s;
text-decoration:none;
display:inline-block;
}

.primary-btn:hover,
.card button:hover,
.filters button:hover{
transform:translateY(-3px);
box-shadow:0 0 25px rgba(255,255,255,.18);
}

.trust{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:1px;
background:#333;
border-top:1px solid #333;
border-bottom:1px solid #333;
}

.trust div{
background:#0c0c0c;
padding:20px;
text-align:center;
font-weight:800;
}

.products-section{
padding:70px 7%;
}

.section-title{
text-align:center;
margin-bottom:30px;
}

.section-title p{
color:#aaa;
letter-spacing:4px;
font-weight:900;
}

.section-title h2{
font-size:2.8rem;
text-transform:uppercase;
}

.filters{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:35px;
}

.products-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:24px;
}

.card{
background:
linear-gradient(145deg,#101010,#202020);
border:1px solid #3a3a3a;
padding:24px;
min-height:280px;
box-shadow:
inset 0 0 22px rgba(255,255,255,.03),
0 18px 40px rgba(0,0,0,.65);
position:relative;
overflow:hidden;
}

.card::before{
content:"";
position:absolute;
inset:0;
opacity:.10;
background:
repeating-linear-gradient(120deg,rgba(255,255,255,.14) 0,rgba(255,255,255,.14) 1px,transparent 1px,transparent 10px);
}

.card *{
position:relative;
z-index:1;
}

.product-image{
height:120px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
background:#080808;
border:1px solid #2c2c2c;
}

.product-image img{
max-height:95px;
opacity:.85;
}

.card h3{
font-size:1.25rem;
text-transform:uppercase;
}

.price{
font-size:1.5rem;
font-weight:900;
margin:14px 0;
}

.size{
color:#bbb;
margin-bottom:16px;
}

.industrial-banner{
margin:30px 7% 80px;
padding:60px 30px;
text-align:center;
border:1px solid #3d3d3d;
background:
linear-gradient(135deg,rgba(255,255,255,.06),rgba(0,0,0,.75)),
repeating-linear-gradient(90deg,#111 0,#1b1b1b 2px,#0a0a0a 5px);
box-shadow:0 0 35px rgba(0,0,0,.7);
}

.industrial-banner h2{
font-size:3rem;
letter-spacing:5px;
}

footer{
text-align:center;
padding:40px 20px;
background:#050505;
border-top:1px solid #333;
color:#aaa;
}

footer img{
height:90px;
opacity:.75;
margin-bottom:15px;
}

input,textarea,select{
width:100%;
max-width:420px;
padding:14px;
margin:8px 0;
background:#111;
border:1px solid #444;
color:white;
}

.form-page{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:30px;
text-align:center;
}

@media(max-width:760px){
.header{
padding:12px 18px;
}
.menu-btn{
display:block;
}
nav{
display:none;
position:absolute;
top:115px;
left:0;
right:0;
background:#080808;
padding:20px;
border-bottom:1px solid #333;
}
nav.open{
display:block;
}
nav a{
display:block;
margin:18px 0;
}
.brand img{
height:72px;
}
}


/* ===== DCL STREETWEAR VISUAL UPGRADE ===== */

body::after{
content:"DCL  DROP 001  STREETWEAR  LIMITED";
position:fixed;
left:-120px;
top:45%;
width:140%;
font-size:clamp(3rem,9vw,9rem);
font-weight:900;
letter-spacing:18px;
color:rgba(255,255,255,.025);
transform:rotate(-8deg);
pointer-events:none;
z-index:-1;
white-space:nowrap;
}

.header{
padding:18px 62px;
}

.brand img{
height:125px;
transition:.25s ease;
}

.brand img:hover{
transform:scale(1.04) rotate(-1deg);
filter:drop-shadow(0 0 22px rgba(255,255,255,.22));
}

.hero{
background:
linear-gradient(rgba(0,0,0,.48),rgba(0,0,0,.92)),
url("../img/logo.png") center/620px no-repeat;
}

.hero::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg,transparent 0 48%,rgba(255,255,255,.08) 49%,transparent 50%),
repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 22px);
opacity:.16;
mix-blend-mode:overlay;
}

.hero-text::before{
content:"DROP 001";
display:block;
font-size:.9rem;
letter-spacing:8px;
font-weight:900;
color:#aaa;
margin-bottom:14px;
}

.hero-text::after{
content:"OVERSIZED • HEAVY TEE • URBAN FIT";
display:block;
margin-top:24px;
padding:10px 18px;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.05);
letter-spacing:3px;
font-size:.75rem;
color:#cfcfcf;
}

.tag{
border-radius:999px;
}

.primary-btn,
.card button,
.filters button,
.form-box button,
.form-page button{
border-radius:999px;
letter-spacing:1.5px;
box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 10px 28px rgba(0,0,0,.45);
}

.card{
border-radius:22px;
}

.card::after{
content:"DCL";
position:absolute;
right:14px;
bottom:8px;
font-size:4.4rem;
font-weight:900;
color:rgba(255,255,255,.035);
letter-spacing:3px;
z-index:0;
}

.product-image{
height:155px;
border-radius:18px;
background:
linear-gradient(145deg,#050505,#171717),
repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 1px,transparent 1px 12px);
}

.product-image img{
max-height:135px;
}

.trust div{
position:relative;
overflow:hidden;
}

.trust div::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.07),transparent);
transform:translateX(-120%);
animation:shine 4s infinite;
}

@keyframes shine{
0%{transform:translateX(-120%)}
45%,100%{transform:translateX(120%)}
}

/* Login e Admin mais premium */
.form-page{
background:
linear-gradient(rgba(0,0,0,.82),rgba(0,0,0,.96)),
url("../img/logo.png") center 45px/300px no-repeat,
repeating-linear-gradient(90deg,#080808 0,#171717 3px,#070707 7px);
position:relative;
}

.form-page::before{
content:"DCL CLOTHING";
position:absolute;
top:8%;
left:50%;
transform:translateX(-50%);
font-size:clamp(2.2rem,8vw,7rem);
font-weight:900;
letter-spacing:10px;
color:rgba(255,255,255,.035);
white-space:nowrap;
}

.form-page img{
height:190px !important;
filter:drop-shadow(0 0 20px rgba(255,255,255,.20));
position:relative;
z-index:1;
}

.form-page h1{
font-size:clamp(2rem,5vw,4rem);
margin-bottom:20px;
position:relative;
z-index:1;
}

.form-page p,
.form-page a{
position:relative;
z-index:1;
}

.form-page input,
.form-page textarea,
.form-page select{
border-radius:999px;
padding:17px 22px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.20);
box-shadow:
inset 0 0 16px rgba(255,255,255,.03),
0 10px 24px rgba(0,0,0,.35);
outline:none;
transition:.25s;
position:relative;
z-index:1;
}

.form-page textarea{
border-radius:24px;
min-height:120px;
resize:vertical;
}

.form-page input:focus,
.form-page textarea:focus,
.form-page select:focus{
border-color:#fff;
box-shadow:
0 0 0 3px rgba(255,255,255,.10),
0 0 26px rgba(255,255,255,.13);
transform:translateY(-2px);
}

.form-page input::placeholder,
.form-page textarea::placeholder{
color:#aaa;
text-transform:uppercase;
letter-spacing:1px;
font-size:.75rem;
}

.form-page button{
margin-top:12px;
min-width:220px;
padding:16px 30px;
position:relative;
z-index:1;
}

.admin-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;
width:min(980px,92vw);
margin-top:30px;
position:relative;
z-index:1;
}

.admin-panel-card{
padding:24px;
border:1px solid rgba(255,255,255,.18);
border-radius:24px;
background:rgba(255,255,255,.055);
box-shadow:0 16px 35px rgba(0,0,0,.45);
}

.street-badges{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin:28px 0;
}

.street-badges span{
border:1px solid #444;
background:rgba(255,255,255,.055);
padding:10px 16px;
border-radius:999px;
font-size:.76rem;
font-weight:900;
letter-spacing:2px;
color:#ddd;
}

@media(max-width:760px){
.brand img{
height:94px;
}
.hero{
background-size:420px;
}
.form-page img{
height:150px !important;
}
}

/* ===== DCL MUSIC BOT ===== */
.music-bot{
position:fixed;
right:22px;
bottom:22px;
z-index:99999;
width:335px;
max-width:calc(100vw - 28px);
padding:16px;
border-radius:28px;
background:linear-gradient(145deg,rgba(8,8,8,.95),rgba(30,30,30,.88));
border:1px solid rgba(255,255,255,.18);
box-shadow:0 18px 45px rgba(0,0,0,.8),inset 0 0 24px rgba(255,255,255,.04);
backdrop-filter:blur(12px);
color:#fff;
font-family:Arial,Helvetica,sans-serif;
overflow:hidden;
}
.music-bot::before{
content:"";
position:absolute;
inset:-45%;
background:
radial-gradient(circle at 18% 22%,rgba(150,0,255,.22),transparent 28%),
radial-gradient(circle at 82% 72%,rgba(255,0,72,.20),transparent 31%),
repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 12px);
pointer-events:none;
opacity:.8;
}
.music-bot-content{position:relative;z-index:1}
.music-bot-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.music-bot-cover{
width:64px;height:64px;border-radius:19px;
display:flex;align-items:center;justify-content:center;
font-weight:900;letter-spacing:1px;font-size:.82rem;
background:linear-gradient(135deg,#1c1c1c,#050505);
border:1px solid rgba(255,255,255,.24);
box-shadow:0 0 22px rgba(255,255,255,.08);
}
.music-bot-info{flex:1;min-width:0}
.music-bot-label{font-size:.68rem;letter-spacing:2px;color:#bbb;font-weight:900;text-transform:uppercase}
.music-bot-title{font-weight:900;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.music-bot-artist{font-size:.78rem;color:#aaa;margin-top:3px}
.music-bot-controls{display:flex;align-items:center;gap:10px;margin-top:8px}
.music-bot-controls button{
border:none;border-radius:999px;width:42px;height:42px;cursor:pointer;
background:linear-gradient(180deg,#fff,#8e8e8e);
color:#000;font-weight:900;
box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 8px 20px rgba(0,0,0,.45);
transition:.2s;
}
.music-bot-controls button:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(255,255,255,.22)}
.music-bot-volume{display:flex;align-items:center;gap:7px;flex:1;font-size:.85rem;color:#ddd}
.music-bot-volume input{width:100%;accent-color:#fff}
.music-eq{display:flex;gap:4px;height:22px;align-items:end;margin-top:13px}
.music-eq span{width:5px;height:8px;border-radius:999px;background:linear-gradient(#fff,#777);opacity:.8;animation:dclEq 1s infinite ease-in-out;animation-play-state:paused}
.music-eq span:nth-child(2){animation-delay:.12s}
.music-eq span:nth-child(3){animation-delay:.24s}
.music-eq span:nth-child(4){animation-delay:.36s}
.music-eq span:nth-child(5){animation-delay:.48s}
.music-bot.playing .music-eq span{animation-play-state:running}
@keyframes dclEq{0%,100%{height:7px}50%{height:22px}}
.music-bot-note{font-size:.68rem;color:#aaa;margin-top:10px;line-height:1.3}
@media(max-width:620px){.music-bot{left:14px;right:14px;bottom:14px;width:auto}}


/* ===== DCL PRODUCT CATALOG UPDATE ===== */
.products-section{padding:70px 7%;background:linear-gradient(rgba(0,0,0,.82),rgba(0,0,0,.95)),repeating-linear-gradient(90deg,#080808 0,#151515 3px,#080808 7px)}
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.product-card{position:relative;border-radius:24px;overflow:hidden;min-height:440px}
.product-number{position:absolute;top:14px;left:14px;z-index:3;background:#fff;color:#000;border-radius:999px;padding:7px 12px;font-weight:900;letter-spacing:1px}
.product-tag{color:#aaa;text-transform:uppercase;letter-spacing:2px;font-size:.72rem;font-weight:900;margin:12px 0 6px}
.product-image{height:260px;background:#060606;border:1px solid #2d2d2d;border-radius:20px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-image img{width:100%;height:100%;object-fit:cover;opacity:1}
.product-card h3{font-size:1rem;line-height:1.25;margin-top:12px}
.product-card .size{color:#bfbfbf;font-weight:700}


/* ===== DCL FINAL UX UPDATE ===== */
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.brand-name{font-size:.9rem;font-weight:900;letter-spacing:3px;text-transform:uppercase;color:#ddd;white-space:nowrap}
.header{padding:12px 46px}
.brand img{height:78px}
.hero{min-height:78vh;background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.95)),url("../img/logo.png") center 42%/360px no-repeat}
.hero-text{max-width:920px;background:rgba(0,0,0,.18);backdrop-filter:blur(2px);border-radius:32px}
h1{letter-spacing:6px}
.hero p{max-width:560px;margin:18px auto}
.category-filters{overflow-x:auto;justify-content:flex-start;padding:0 2px 12px;scrollbar-width:thin}
.category-filters button{flex:0 0 auto}
.product-card{transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;animation:cardRise .55s ease both}
.product-card:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.42);box-shadow:0 0 28px rgba(255,255,255,.12),0 22px 50px rgba(0,0,0,.75)}
.product-image{cursor:zoom-in}
.product-image img{transition:transform .38s ease, filter .38s ease}
.product-image:hover img{transform:scale(1.16);filter:contrast(1.05) brightness(1.05)}
.product-image:active img{transform:scale(1.22)}
.size-select-label{display:block;color:#aaa;font-size:.72rem;text-transform:uppercase;letter-spacing:2px;font-weight:900;margin:12px 0 6px}
.size-select{
width:100%;
max-width:100%;
margin:0 0 14px;
padding:12px 18px;
padding-right:48px;

border-radius:18px;

background:
linear-gradient(145deg,#0b0b0b,#1b1b1b);

border:1px solid rgba(255,255,255,.14);

color:#fff;
font-weight:900;
outline:none;
cursor:pointer;

appearance:none;
-webkit-appearance:none;
-moz-appearance:none;

transition:.25s ease;

background-image:
linear-gradient(45deg, transparent 50%, #999 50%),
linear-gradient(135deg, #999 50%, transparent 50%);

background-position:
calc(100% - 20px) calc(50% - 3px),
calc(100% - 14px) calc(50% - 3px);

background-size:6px 6px, 6px 6px;
background-repeat:no-repeat;

box-shadow:
inset 0 0 14px rgba(255,255,255,.03),
0 8px 20px rgba(0,0,0,.35);
}

.size-select:hover{
border-color:rgba(255,255,255,.28);
}

.size-select:focus{
border-color:#fff;
box-shadow:
0 0 0 3px rgba(255,255,255,.08),
0 0 24px rgba(255,255,255,.10);
}

.size-select option{
background:#111;
color:#fff;
border-radius:12px;
}
.product-modal{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:100000;display:none;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(10px)}
.product-modal.open{display:flex}
.product-modal-box{position:relative;width:min(920px,96vw);max-height:92vh;overflow:auto;border:1px solid rgba(255,255,255,.24);border-radius:30px;background:linear-gradient(145deg,#070707,#1c1c1c);box-shadow:0 25px 80px rgba(0,0,0,.9);display:grid;grid-template-columns:1.2fr .8fr;gap:24px;padding:24px}
.product-modal-box img{width:100%;height:min(70vh,620px);object-fit:contain;background:#050505;border-radius:24px;border:1px solid #333}
.modal-info{display:flex;flex-direction:column;justify-content:center;gap:18px}
.modal-info p{color:#aaa;text-transform:uppercase;letter-spacing:2px;font-weight:900;font-size:.75rem}
.modal-info h2{font-size:clamp(1.8rem,4vw,3.8rem);text-transform:uppercase;line-height:1}
.modal-info strong{font-size:2rem}
.modal-info button,.modal-close{cursor:pointer;border:none;background:linear-gradient(180deg,#fff,#8b8b8b);color:#000;font-weight:900;text-transform:uppercase;border-radius:999px;padding:15px 24px}
.modal-close{position:absolute;right:18px;top:18px;z-index:3;width:44px;height:44px;padding:0;font-size:1.8rem;line-height:1}
.music-bot-cover{object-fit:cover;padding:0;background:#080808}
.music-progress{height:8px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden;margin:10px 0 12px;cursor:pointer}
.music-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#fff,#777);border-radius:999px}
.music-playlist{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.playlist-item{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#ddd;border-radius:999px;padding:8px 10px;font-size:.68rem;font-weight:900;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playlist-item span{color:#fff;margin-right:4px}
.playlist-item.active{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.42);color:#fff}
@keyframes cardRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
  .header{padding:10px 16px}.brand img{height:64px}.brand-name{display:none}nav{top:86px}.hero{background-size:260px;min-height:72vh}.hero-text{padding:24px 12px}h1{letter-spacing:3px}.category-filters{justify-content:flex-start;flex-wrap:nowrap}.product-modal-box{grid-template-columns:1fr;padding:16px}.product-modal-box img{height:54vh}.music-playlist{grid-template-columns:1fr}.products-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.product-image{height:220px}
}


/* ===== DCL PRODUCT ALIGNMENT FIX ===== */

/* Centraliza as categorias no centro da tela */
.category-filters{
justify-content:center !important;
align-items:center;
text-align:center;
margin-left:auto;
margin-right:auto;
}

/* Mantém os cards com estrutura alinhada */
.product-card{
display:flex;
flex-direction:column;
}

/* Área padrão para todas as imagens dos produtos */
.product-card .product-image{
height:260px;
min-height:260px;
display:flex;
align-items:center;
justify-content:center;
}

/* Garante que todos os modelos fiquem centralizados dentro do quadro */
.product-card .product-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
display:block;
}

/* Alinha textos e botões, evitando cards visualmente quebrados */
.product-card h3{
min-height:42px;
display:flex;
align-items:flex-start;
}

.product-card .price{
margin-top:auto;
}

/* No mobile, mantém categorias centralizadas sem quebrar layout */
@media(max-width:760px){
  .category-filters{
    justify-content:center !important;
    flex-wrap:wrap !important;
    overflow-x:visible;
  }

  .product-card .product-image{
    height:230px;
    min-height:230px;
  }
}


/* ===== DCL AUTH / ADMIN ===== */

.auth-box{
position:relative;
z-index:1;
width:min(420px,92vw);
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
padding:26px;
border:1px solid rgba(255,255,255,.18);
border-radius:28px;
background:rgba(255,255,255,.055);
box-shadow:0 18px 42px rgba(0,0,0,.45);
}

.auth-box button,
.admin-panel-card button{
cursor:pointer;
border:none;
background:linear-gradient(180deg,#fff,#8b8b8b);
color:#000;
padding:15px 25px;
font-weight:900;
text-transform:uppercase;
border-radius:999px;
letter-spacing:1.5px;
box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 10px 28px rgba(0,0,0,.45);
transition:.25s;
width:100%;
max-width:320px;
}

.auth-box button:hover,
.admin-panel-card button:hover{
transform:translateY(-3px);
box-shadow:0 0 25px rgba(255,255,255,.18);
}

.auth-box a,
.admin-panel-card a{
color:#fff;
font-weight:900;
text-transform:uppercase;
letter-spacing:1px;
}

.auth-note{
font-size:.78rem;
color:#aaa;
line-height:1.45;
max-width:320px;
}

.admin-page .admin-grid{
margin-bottom:35px;
}

.admin-panel-card h2{
text-transform:uppercase;
margin-bottom:10px;
}

.admin-panel-card p{
color:#bbb;
line-height:1.45;
}


/* ===== DCL CART DRAWER DEFINITIVE FIX ===== */

body.cart-open{overflow:hidden;}

.cart-overlay{
position:fixed !important;
inset:0 !important;
width:100vw !important;
height:100vh !important;
background:rgba(0,0,0,.72) !important;
backdrop-filter:blur(7px);
z-index:120000 !important;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .28s ease, visibility .28s ease;
}

.cart-overlay.open{
opacity:1;
visibility:visible;
pointer-events:auto;
}

.cart-drawer{
position:fixed !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
left:auto !important;
width:min(430px,94vw) !important;
height:100vh !important;
max-height:100vh !important;
z-index:120001 !important;
background:linear-gradient(145deg,rgba(6,6,6,.98),rgba(24,24,24,.98)),repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 12px) !important;
border-left:1px solid rgba(255,255,255,.18);
box-shadow:-25px 0 70px rgba(0,0,0,.85);
transform:translateX(110%);
transition:transform .32s ease;
padding:22px;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
margin:0 !important;
}

.cart-drawer.open{transform:translateX(0);}

.cart-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding-bottom:18px;
border-bottom:1px solid rgba(255,255,255,.14);
flex:0 0 auto;
}

.cart-head p{font-size:.7rem;letter-spacing:4px;color:#aaa;font-weight:900;margin:0 0 4px;}
.cart-head h2{font-size:2rem;text-transform:uppercase;margin:0;}
.cart-head button{width:42px;height:42px;border:none;border-radius:999px;background:linear-gradient(180deg,#fff,#8b8b8b);color:#000;font-size:1.8rem;font-weight:900;cursor:pointer;line-height:1;}

.cart-items{
flex:1 1 auto;
overflow-y:auto;
padding:18px 3px 18px 0;
display:flex;
flex-direction:column;
gap:14px;
}

.empty-cart{
padding:26px;
text-align:center;
border:1px dashed rgba(255,255,255,.22);
border-radius:22px;
color:#aaa;
font-weight:800;
line-height:1.5;
display:flex;
flex-direction:column;
gap:8px;
}

.empty-cart strong{color:#fff;text-transform:uppercase;}

.cart-item{
display:grid;
grid-template-columns:92px 1fr;
gap:14px;
padding:12px;
border-radius:20px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.12);
}

.cart-item img{
width:92px;
height:112px;
object-fit:cover;
object-position:center;
border-radius:14px;
background:#050505;
border:1px solid rgba(255,255,255,.12);
}

.cart-item-info h3{font-size:.88rem;text-transform:uppercase;line-height:1.2;margin:0;}
.cart-item-info p{font-size:.72rem;color:#aaa;font-weight:900;letter-spacing:1px;margin:6px 0;}
.cart-item-info strong{font-size:.95rem;}

.cart-qty{
display:inline-flex;
align-items:center;
gap:10px;
margin-top:10px;
border:1px solid rgba(255,255,255,.16);
border-radius:999px;
padding:4px;
}

.cart-qty button{
width:28px;
height:28px;
border:none;
border-radius:999px;
background:#fff;
color:#000;
font-weight:900;
cursor:pointer;
}

.cart-qty span{min-width:20px;text-align:center;font-weight:900;}

.cart-remove{
display:block;
margin-top:10px;
background:transparent;
border:none;
color:#bbb;
font-size:.72rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:1px;
cursor:pointer;
text-decoration:underline;
padding:0;
}

.cart-remove:hover{color:#fff;}
.cart-footer{flex:0 0 auto;border-top:1px solid rgba(255,255,255,.14);padding-top:16px;}
.cart-total{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;font-size:1.1rem;}
.cart-total strong{font-size:1.4rem;}

.cart-checkout,.cart-clear{
width:100%;
border:none;
border-radius:999px;
padding:15px 18px;
font-weight:900;
text-transform:uppercase;
cursor:pointer;
}

.cart-checkout{background:linear-gradient(180deg,#fff,#8b8b8b);color:#000;}
.cart-clear{margin-top:8px;background:transparent;color:#aaa;border:1px solid rgba(255,255,255,.18);}

.product-actions{display:grid;grid-template-columns:1fr;gap:9px;}
.product-actions .buy-direct{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:none;}

@media(max-width:760px){
  .cart-drawer{width:94vw !important;padding:18px;}
  .cart-item{grid-template-columns:84px 1fr;}
  .cart-item img{width:84px;height:104px;}
}


/* ===== DCL LOADER SAFE FIX ===== */

.dcl-loader{
position:fixed !important;
inset:0 !important;
z-index:200000 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:
linear-gradient(rgba(0,0,0,.92),rgba(0,0,0,.98)),
repeating-linear-gradient(90deg,#080808 0,#171717 3px,#070707 7px) !important;
opacity:1;
visibility:visible;
pointer-events:auto;
transition:opacity .55s ease, visibility .55s ease;
}

.dcl-loader.hide{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}

.dcl-loader-box{
text-align:center;
position:relative;
padding:35px;
}

.dcl-loader-box img{
height:130px;
filter:drop-shadow(0 0 24px rgba(255,255,255,.22));
animation:loaderPulse 1.4s infinite alternate;
}

.dcl-loader-box h2{
font-size:clamp(2rem,6vw,4.8rem);
letter-spacing:8px;
margin-top:15px;
text-shadow:2px 0 rgba(255,255,255,.16),-2px 0 rgba(255,255,255,.08);
}

.dcl-loader-box p{
letter-spacing:5px;
color:#aaa;
font-weight:900;
font-size:.8rem;
margin:12px 0 18px;
}

.loader-line{
width:min(340px,75vw);
height:8px;
border-radius:999px;
overflow:hidden;
background:rgba(255,255,255,.12);
margin:auto;
}

.loader-line span{
display:block;
height:100%;
width:45%;
border-radius:999px;
background:linear-gradient(90deg,#777,#fff,#777);
animation:loaderLine 1.1s infinite ease-in-out;
}

@keyframes loaderPulse{
from{transform:scale(.98);opacity:.82}
to{transform:scale(1.04);opacity:1}
}

@keyframes loaderLine{
0%{transform:translateX(-120%)}
100%{transform:translateX(240%)}
}

@media(max-width:760px){
  .dcl-loader-box img{height:95px}
  .dcl-loader-box h2{letter-spacing:4px}
}


/* ===== DCL MUSIC BOT MOBILE COMPACT FIX ===== */

@media(max-width:760px){

  .music-bot{
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
    width:auto !important;
    max-width:none !important;
    padding:10px 12px !important;
    border-radius:20px !important;
    z-index:99999 !important;
  }

  .music-bot-top{
    margin-bottom:0 !important;
    gap:9px !important;
  }

  .music-bot-cover{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:12px !important;
  }

  .music-bot-label{
    font-size:.55rem !important;
    letter-spacing:1.5px !important;
  }

  .music-bot-title{
    font-size:.78rem !important;
    max-width:140px !important;
  }

  .music-bot-artist{
    font-size:.62rem !important;
  }

  .music-progress{
    height:5px !important;
    margin:7px 0 8px !important;
  }

  .music-bot-controls{
    margin-top:0 !important;
    gap:7px !important;
  }

  .music-bot-controls button{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    font-size:.78rem !important;
  }

  .music-bot-volume{
    font-size:.72rem !important;
  }

  .music-bot-volume input{
    height:18px !important;
  }

  .music-playlist,
  .music-eq,
  .music-bot-note{
    display:none !important;
  }

  .music-bot.minimized .music-bot-info,
  .music-bot.minimized .music-progress,
  .music-bot.minimized .music-bot-volume,
  .music-bot.minimized #musicBotNext{
    display:none !important;
  }

  .music-bot.minimized{
    left:auto !important;
    width:auto !important;
    padding:9px !important;
    border-radius:999px !important;
  }

  .music-bot.minimized .music-bot-top{
    margin:0 !important;
  }

  .music-bot-minimize{
    display:flex !important;
  }
}

.music-bot-minimize{
position:absolute;
top:8px;
right:8px;
width:24px;
height:24px;
border:none;
border-radius:999px;
background:rgba(255,255,255,.12);
color:#fff;
font-weight:900;
cursor:pointer;
display:none;
z-index:4;
}