@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
--green:#16a34a;
--green-strong:#15803d;
--green-soft:#dcfce7;
--mint:#f0fdf4;
--light:#f8fcf8;
--white:#ffffff;
--text:#0f172a;
--muted:#64748b;
--border:#dfeee3;
--danger:#dc2626;
--danger-soft:#fee2e2;
--shadow:0 14px 45px rgba(22,163,74,.1);
--shadow-soft:0 10px 28px rgba(15,23,42,.07);
--radius:18px;
}

/* ACCESSIBILITY */

.skip-link{
position:absolute;
top:-9999px;
left:-9999px;
z-index:9999;
padding:12px 18px;
background:var(--green);
color:var(--white);
border-radius:8px;
text-decoration:none;
font-weight:800;
}

.skip-link:focus{
top:20px;
left:20px;
}

*:focus-visible{
outline:3px solid var(--green);
outline-offset:2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion:reduce){
*{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
}

/* HIGH CONTRAST mode support */
@media (prefers-contrast:more){
:root{
--border:#94a3b8;
}

.btn,
.primary,
.btn-primary{
border:2px solid currentColor;
}
}

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

html{
scroll-behavior:smooth;
}

body{
font-family:Inter,Arial,sans-serif;
background:var(--light);
color:var(--text);
line-height:1.6;
}

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

img{
width:100%;
display:block;
}

button,
input,
select,
textarea{
font:inherit;
}

button,
select{
cursor:pointer;
}

.container{
max-width:1240px;
margin:auto;
padding:0 24px;
}

/* NAVBAR */

.navbar{
position:sticky;
top:0;
z-index:999;
background:rgba(255,255,255,.94);
backdrop-filter:blur(14px);
border-bottom:1px solid var(--border);
}

.navbar-container{
max-width:1300px;
margin:auto;
padding:12px 24px;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:24px;
}

.brand{
display:flex;
align-items:center;
min-width:max-content;
}

.logo{
height:64px;
width:auto;
object-fit:contain;
border-radius:16px;
}

.menu-toggle{
display:none;
width:44px;
height:44px;
border-radius:999px;
border:1px solid var(--border);
background:var(--white);
box-shadow:var(--shadow-soft);
align-items:center;
justify-content:center;
flex-direction:column;
gap:5px;
padding:0;
}

.menu-toggle span{
display:block;
width:19px;
height:2px;
border-radius:999px;
background:var(--text);
transition:transform .2s ease,opacity .2s ease;
}

.menu-toggle.open span:nth-child(1){
transform:translateY(7px) rotate(45deg);
}

.menu-toggle.open span:nth-child(2){
opacity:0;
}

.menu-toggle.open span:nth-child(3){
transform:translateY(-7px) rotate(-45deg);
}

.nav-links{
display:flex;
justify-content:center;
align-items:center;
gap:6px;
font-weight:700;
}

.nav-links a{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:8px 12px;
border-radius:999px;
color:var(--text);
transition:color .2s ease,background .2s ease;
}

.nav-links a::after{
content:"";
position:absolute;
left:14px;
right:14px;
bottom:5px;
height:3px;
border-radius:999px;
background:var(--green);
transform:scaleX(0);
transform-origin:center;
transition:transform .2s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible{
color:var(--green-strong);
background:rgba(22,163,74,.06);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after{
transform:scaleX(1);
}

.nav-tools{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
min-width:0;
}

.search-wrap{
position:relative;
min-width:0;
width:100%;
}

.search-bar{
display:flex;
align-items:center;
background:var(--white);
border-radius:999px;
border:1px solid var(--border);
overflow:hidden;
box-shadow:var(--shadow-soft);
min-width:0;
width:100%;
min-height:44px;
}

.search-message{
display:none;
position:absolute;
left:0;
right:0;
top:calc(100% + 8px);
z-index:1001;
background:var(--white);
border:1px solid var(--border);
border-radius:14px;
box-shadow:var(--shadow-soft);
padding:10px 14px;
color:var(--danger);
font-weight:800;
font-size:.9rem;
}

.search-message.show{
display:block;
}

.search-bar input{
flex:1;
width:100%;
min-width:0;
border:none;
padding:12px 16px;
outline:none;
background:transparent;
line-height:1.4;
min-height:44px;
}

.search-bar button{
flex-shrink:0;
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--green);
color:var(--white);
border:none;
padding:12px 18px;
min-height:44px;
font-weight:800;
}

/* HERO */

.hero{
padding:88px 0 72px;
background:
radial-gradient(circle at 18% 20%,rgba(34,197,94,.16),transparent 32%),
linear-gradient(180deg,#ffffff,#f1fff5);
}

.hero-wrap{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
gap:54px;
align-items:center;
}

.eyebrow{
display:inline-flex;
align-items:center;
background:var(--green-soft);
color:#166534;
padding:9px 14px;
border-radius:999px;
font-size:.8rem;
font-weight:800;
letter-spacing:0;
margin-bottom:18px;
}

.hero h1{
font-size:clamp(2.4rem,7vw,5.1rem);
line-height:1.05;
margin-bottom:20px;
letter-spacing:0;
}

.hero p{
font-size:1.08rem;
color:var(--muted);
max-width:620px;
}

.hero-buttons{
display:flex;
gap:14px;
margin-top:30px;
flex-wrap:wrap;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
min-width:48px;
padding:13px 24px;
border-radius:999px;
border:1px solid transparent;
font-weight:800;
line-height:1;
transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
cursor:pointer;
}

.btn:focus-visible{
outline:2px solid currentColor;
outline-offset:2px;
}

.btn:hover{
transform:translateY(-1px);
}

.primary,
.btn-primary{
background:var(--green);
color:var(--white);
box-shadow:0 14px 30px rgba(22,163,74,.22);
}

.primary:hover,
.btn-primary:hover{
background:var(--green-strong);
}

.secondary,
.btn-secondary{
background:var(--white);
border-color:var(--border);
color:var(--text);
}

.btn-sm{
min-height:40px;
padding:10px 16px;
font-size:.92rem;
}

.deal-panel{
background:var(--white);
border:1px solid var(--border);
border-radius:28px;
box-shadow:var(--shadow);
padding:32px;
position:relative;
overflow:hidden;
}

.deal-panel::before{
content:"";
position:absolute;
inset:0 0 auto auto;
width:150px;
height:150px;
background:var(--green-soft);
border-radius:0 0 0 100%;
z-index:0;
}

.deal-panel > *{
position:relative;
z-index:1;
}

.deal-tag{
display:inline-flex;
background:var(--green);
color:var(--white);
padding:8px 14px;
border-radius:999px;
font-size:.8rem;
font-weight:800;
margin-bottom:20px;
}

.deal-panel h2{
font-size:clamp(1.8rem,3vw,2.6rem);
line-height:1.12;
margin-bottom:14px;
max-width:420px;
}

.deal-panel p{
color:var(--muted);
margin-bottom:24px;
}

.deal-panel-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-bottom:24px;
}

.deal-panel-grid div{
background:var(--mint);
border:1px solid var(--border);
border-radius:16px;
padding:16px 12px;
}

.deal-panel-grid strong,
.deal-panel-grid span{
display:block;
}

.deal-panel-grid strong{
font-size:1.1rem;
color:var(--green-strong);
}

.deal-panel-grid span{
font-size:.84rem;
color:var(--muted);
}

.deal-panel a{
display:inline-flex;
font-weight:800;
color:var(--green-strong);
}

/* TRUST */

.trust-strip{
padding:28px 0;
}

.trust-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
text-align:center;
font-weight:800;
}

.trust-grid div{
background:var(--white);
border:1px solid var(--border);
border-radius:16px;
padding:18px 12px;
box-shadow:var(--shadow-soft);
}

/* CATEGORIES */

.categories-section{
padding:56px 0 24px;
}

.section-title{
font-size:clamp(2rem,5vw,2.6rem);
text-align:center;
margin-bottom:26px;
}

.chips{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}

.chip{
border:1px solid var(--border);
padding:12px 18px;
border-radius:999px;
background:var(--white);
box-shadow:var(--shadow-soft);
font-weight:800;
color:var(--text);
transition:background .2s ease,color .2s ease,transform .2s ease;
}

.chip:hover{
transform:translateY(-1px);
color:var(--green-strong);
}

.chip.active{
background:var(--green);
color:var(--white);
border-color:var(--green);
}

/* PRODUCTS */

.products-section{
padding:70px 0;
}

.section-head{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:24px;
margin-bottom:36px;
}

.section-head h2{
font-size:clamp(2rem,5vw,2.8rem);
line-height:1.1;
}

.section-head p{
color:var(--muted);
margin-top:6px;
}

.section-head select{
min-height:48px;
padding:0 16px;
border-radius:14px;
border:1px solid var(--border);
background:var(--white);
box-shadow:var(--shadow-soft);
}

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

.products-scroll{
max-height:880px;
overflow-y:auto;
overflow-x:hidden;
padding:4px 8px 12px 4px;
scrollbar-color:var(--green) var(--mint);
scrollbar-width:thin;
}

.products-scroll::-webkit-scrollbar{
width:10px;
}

.products-scroll::-webkit-scrollbar-track{
background:var(--mint);
border-radius:999px;
}

.products-scroll::-webkit-scrollbar-thumb{
background:var(--green);
border-radius:999px;
}

.no-results{
display:none;
background:var(--white);
border:1px solid var(--border);
border-radius:18px;
padding:28px;
text-align:center;
color:var(--muted);
font-weight:800;
}

.product-card{
position:relative;
background:var(--white);
border:1px solid var(--border);
border-radius:22px;
overflow:hidden;
box-shadow:var(--shadow-soft);
transition:transform .25s ease,box-shadow .25s ease;
display:flex;
flex-direction:column;
min-height:100%;
}

.product-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow);
}

.product-card img,
.product-image img{
height:238px;
object-fit:contain;
background:var(--mint);
}

.product-image{
position:relative;
}

.product-badges{
position:absolute;
left:12px;
top:12px;
display:flex;
gap:8px;
flex-wrap:wrap;
}

.badge{
display:inline-flex;
margin:16px 16px 0;
background:#166534;
color:var(--white);
padding:7px 12px;
border-radius:999px;
font-size:.72rem;
font-weight:800;
}

.product-badges .badge{
margin:0;
}

.badge.green,
.badge.trending,
.badge.tech,
.badge.home,
.badge.lifestyle,
.badge.mobiles,
.badge.audio,
.badge.laptops,
.badge.accessories,
.badge.smart-home,
.badge.gaming{
background:var(--green);
}

.product-content{
padding:22px;
display:flex;
flex-direction:column;
flex:1;
min-width:0;
}

.product-content h3,
.product-title{
font-size:1.22rem;
line-height:1.25;
margin-bottom:9px;
min-height:3.05em;
overflow-wrap:anywhere;
}

.product-content p,
.product-description{
color:var(--muted);
margin-bottom:16px;
min-height:52px;
overflow-wrap:anywhere;
}

.price-row,
.product-meta{
display:flex;
gap:12px;
align-items:center;
margin-bottom:18px;
flex-wrap:wrap;
}

.price,
.product-price{
font-size:1.42rem;
font-weight:800;
color:var(--green);
}

.old-price{
text-decoration:line-through;
color:#94a3b8;
font-weight:700;
}

.discount-badge{
display:inline-block;
background:var(--green);
color:var(--white);
padding:4px 10px;
border-radius:8px;
font-size:.85rem;
font-weight:800;
margin-left:8px;
}

.buy-btn,
.btn-buy{
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
text-align:center;
background:var(--green);
color:var(--white);
padding:13px 20px;
border-radius:999px;
font-weight:800;
}

.product-tags{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:18px;
}

.tag{
background:var(--mint);
border:1px solid var(--border);
border-radius:999px;
padding:5px 10px;
font-size:.78rem;
font-weight:700;
color:var(--green-strong);
}

.product-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:auto;
}

.btn-quickview{
background:var(--white);
border-color:var(--border);
color:var(--text);
border-radius:999px;
}

/* BANNER */

.banner-section{
padding:10px 0 70px;
}

.banner-box{
background:linear-gradient(135deg,#eafff0,#ffffff);
padding:42px;
border-radius:24px;
display:flex;
justify-content:space-between;
align-items:center;
gap:24px;
box-shadow:var(--shadow);
border:1px solid var(--border);
}

.banner-box h2{
font-size:clamp(1.8rem,4vw,2.45rem);
line-height:1.1;
}

.banner-box p{
color:var(--muted);
margin-top:6px;
}

/* NEWSLETTER */

.newsletter{
padding:64px 0;
}

.newsletter-box{
text-align:center;
background:var(--white);
padding:56px 28px;
border-radius:24px;
box-shadow:var(--shadow);
border:1px solid var(--border);
}

.newsletter-box h2{
font-size:clamp(2rem,5vw,3rem);
line-height:1.1;
margin-bottom:14px;
}

.newsletter-box p{
color:var(--muted);
margin-bottom:24px;
}

.newsletter-form{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}

.newsletter-form input{
min-height:52px;
padding:0 18px;
width:420px;
max-width:100%;
border-radius:999px;
border:1px solid var(--border);
}

.newsletter-form button{
background:var(--green);
color:var(--white);
border:none;
min-height:52px;
padding:0 26px;
border-radius:999px;
font-weight:800;
}

.newsletter-message{
display:none;
margin:16px auto 0;
max-width:520px;
color:var(--green-strong);
font-weight:800;
}

.newsletter-message.show{
display:block;
}

/* FOOTER */

.footer{
margin-top:0;
background: #f8fcfb;
padding:72px 0 40px;
}

.footer-wrap{
display:grid;
gap:36px;
}

.footer-top{
display:grid;
grid-template-columns:1.5fr 1fr 1fr 1fr;
gap:32px;
align-items:start;
}

.footer-brand h3{
margin-bottom:14px;
font-size:1.3rem;
}

.footer-brand p{
max-width:360px;
line-height:1.8;
color:var(--muted);
}

.footer h3{
margin-bottom:16px;
font-size:1rem;
color:var(--text);
}

.footer a,
.footer p{
display:block;
margin-bottom:10px;
color:var(--muted);
font-size:.95rem;
line-height:1.8;
}

.footer a{
font-weight:700;
transition:color .2s ease, transform .2s ease;
}

.footer a:hover{
color:var(--green-strong);
transform:translateX(2px);
}

.footer-license{
background:rgba(255,255,255,.72);
border:1px solid var(--border);
border-radius:24px;
padding:30px;
}

.footer-license p{
max-width:980px;
font-size:.95rem;
line-height:1.75;
}

.footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding-top:28px;
margin-top:8px;
border-top:1px solid var(--border);
color:var(--muted);
flex-wrap:wrap;
}

.footer-bottom p{
margin:0;
font-size:.95rem;
}

.footer-socials{
display:flex;
justify-content:flex-end;
gap:12px;
flex-wrap:wrap;
}

.footer-socials a{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:999px;
background:var(--white);
border:1px solid var(--border);
box-shadow:var(--shadow-soft);
color:var(--text);
transition:all .3s ease;
}

.footer-socials a:hover{
background:var(--green);
color:var(--white);
border-color:var(--green);
transform:translateY(-2px);
box-shadow:var(--shadow);
}

.footer-socials a img{
width:22px;
height:22px;
object-fit:contain;
}

.footer-socials a.social-soon{
opacity:0.55;
filter:saturate(.7);
}

.footer-socials a.social-soon:hover{
opacity:0.75;
background:var(--white);
color:var(--text);
border-color:var(--border);
transform:translateY(-2px);
box-shadow:var(--shadow-soft);
}


/* ADMIN */

.admin-body{
min-height:100vh;
background:linear-gradient(180deg,#ffffff 0%,var(--light) 38%,var(--mint) 100%);
}

.admin-header{
position:sticky;
top:0;
z-index:999;
background:rgba(255,255,255,.94);
backdrop-filter:blur(14px);
border-bottom:1px solid var(--border);
}

.admin-header-content{
max-width:1320px;
margin:auto;
padding:12px 24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}

.admin-logo{
display:flex;
align-items:center;
gap:10px;
font-weight:800;
font-size:1.05rem;
color:var(--green-strong);
}

.admin-logo .logo{
height:54px;
}

.admin-actions{
display:flex;
align-items:center;
gap:10px;
}

.theme-toggle{
width:44px;
height:44px;
border-radius:999px;
border:1px solid var(--border);
background:var(--white);
color:var(--text);
font-size:1.18rem;
font-weight:800;
padding:0;
display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;
}

.store-theme-toggle{
flex:0 0 auto;
}

.admin-container{
max-width:1320px;
margin:0 auto;
padding:28px 24px 56px;
display:grid;
grid-template-columns:230px minmax(0,1fr);
gap:24px;
align-items:start;
}

.admin-sidebar{
position:sticky;
top:92px;
}

.admin-nav{
display:grid;
gap:10px;
background:var(--white);
border:1px solid var(--border);
border-radius:22px;
padding:12px;
box-shadow:var(--shadow-soft);
}

.admin-nav-item{
width:100%;
border:1px solid transparent;
background:transparent;
color:var(--text);
border-radius:14px;
padding:14px 16px;
font-weight:800;
text-align:left;
transition:background .2s ease,color .2s ease,border .2s ease;
}

.admin-nav-item:hover{
background:var(--mint);
color:var(--green-strong);
}

.admin-nav-item.active{
background:var(--green);
color:var(--white);
box-shadow:0 12px 24px rgba(22,163,74,.18);
}

.admin-content{
min-width:0;
}

.admin-tab{
display:none;
}

.admin-tab.active{
display:block;
}

.admin-section-header{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:24px;
margin-bottom:22px;
}

.admin-section-header h1{
font-size:clamp(2rem,5vw,3rem);
line-height:1.08;
}

.admin-section-header p{
color:var(--muted);
margin-top:8px;
max-width:620px;
}

.admin-eyebrow{
margin-bottom:12px;
}

.stats{
display:grid;
grid-template-columns:repeat(2,minmax(130px,1fr));
gap:14px;
min-width:300px;
}

.stat-card{
background:var(--white);
border:1px solid var(--border);
border-radius:18px;
padding:18px;
box-shadow:var(--shadow-soft);
}

.stat-label{
display:block;
font-size:.78rem;
font-weight:800;
color:var(--muted);
text-transform:uppercase;
}

.stat-value{
display:block;
font-size:2rem;
font-weight:800;
color:var(--green-strong);
line-height:1.1;
margin-top:8px;
}

.products-table-wrapper,
.product-form,
.backup-card{
background:var(--white);
border:1px solid var(--border);
border-radius:22px;
box-shadow:var(--shadow-soft);
}

.products-table-wrapper{
overflow:auto;
}

.products-table{
width:100%;
min-width:920px;
border-collapse:collapse;
}

.products-table th,
.products-table td{
padding:16px;
text-align:left;
border-bottom:1px solid var(--border);
vertical-align:middle;
}

.products-table th{
background:var(--mint);
font-size:.78rem;
text-transform:uppercase;
color:var(--muted);
letter-spacing:0;
}

.products-table tr:last-child td{
border-bottom:none;
}

.click-count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:38px;
min-height:30px;
padding:4px 10px;
border-radius:999px;
background:var(--green-soft);
color:var(--green-strong);
font-weight:800;
border:1px solid var(--border);
}

.table-image{
width:62px;
height:62px;
object-fit:cover;
border-radius:14px;
border:1px solid var(--border);
}

.table-actions{
display:flex;
gap:8px;
}

.icon-btn{
min-width:46px;
height:38px;
border-radius:12px;
border:1px solid var(--border);
background:var(--white);
font-weight:800;
color:var(--text);
padding:0 10px;
}

.icon-btn.edit{
color:var(--green-strong);
}

.icon-btn.delete{
color:var(--danger);
}

.empty-row td{
text-align:center;
color:var(--muted);
padding:36px 18px;
}

.add-first{
color:var(--green-strong);
font-weight:800;
}

.product-form{
padding:24px;
}

.form-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px;
}

.form-group{
display:grid;
gap:8px;
}

.form-group-full{
grid-column:1 / -1;
}

.form-group label{
font-weight:800;
}

.form-group small{
color:var(--muted);
}

.form-group input,
.form-group textarea{
width:100%;
border:1px solid var(--border);
border-radius:14px;
background:#fff;
padding:14px 16px;
outline:none;
transition:border .2s ease,box-shadow .2s ease;
}

.form-group textarea{
resize:vertical;
min-height:120px;
}

.form-group input:focus,
.form-group textarea:focus,
.newsletter-form input:focus,
.search-bar:focus-within{
border-color:var(--green);
box-shadow:0 0 0 4px rgba(22,163,74,.1);
}

.image-upload-area,
.file-upload-area{
display:grid;
gap:12px;
}

.image-input{
width:100%;
border:1px solid var(--border);
border-radius:14px;
background:#fff;
padding:14px 16px;
outline:none;
transition:border .2s ease,box-shadow .2s ease;
}

.image-input:focus{
border-color:var(--green);
box-shadow:0 0 0 4px rgba(22,163,74,.1);
}

.image-preview,
.import-placeholder{
min-height:120px;
border:1px solid var(--border);
border-radius:18px;
background:var(--mint);
display:grid;
place-items:center;
text-align:center;
gap:8px;
padding:18px;
color:var(--muted);
font-weight:800;
transition:border .2s ease,background .2s ease;
}

.image-preview:hover,
.import-placeholder:hover{
border-color:var(--green);
background:#f7fff9;
}

.image-preview.has-image{
padding:0;
overflow:hidden;
border-style:solid;
background:var(--white);
}

.image-preview.has-image img{
width:100%;
height:220px;
object-fit:cover;
}

.upload-icon{
display:inline-flex;
align-items:center;
justify-content:center;
height:36px;
padding:0 12px;
border-radius:999px;
background:var(--white);
border:1px solid var(--border);
color:var(--green-strong);
font-size:.82rem;
}

.tags-container{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.tag-checkbox input{
position:absolute;
opacity:0;
}

.tag-label{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:9px 14px;
border-radius:999px;
border:1px solid var(--border);
background:var(--white);
font-weight:800;
color:var(--text);
transition:background .2s ease,color .2s ease,border .2s ease;
}

.tag-checkbox input:checked + .tag-label{
background:var(--green);
border-color:var(--green);
color:var(--white);
}

.form-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.backup-section{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.backup-card{
padding:24px;
display:flex;
flex-direction:column;
gap:14px;
align-items:flex-start;
min-width:0;
}

.backup-card h2{
font-size:1.25rem;
}

.backup-card p{
color:var(--muted);
}

.backup-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
width:100%;
}

.backup-actions .btn{
flex:1 1 170px;
}

.import-input{
display:none;
}

.backup-card .file-upload-area{
width:100%;
min-width:0;
}

.backup-card .import-placeholder{
min-height:140px;
width:100%;
box-sizing:border-box;
overflow-wrap:anywhere;
}

.btn-danger{
background:var(--danger);
color:var(--white);
}

.backup-card.danger{
border-color:#fecaca;
background:#fffafa;
}

.toast{
position:fixed;
right:18px;
bottom:18px;
z-index:1100;
background:var(--text);
color:var(--white);
padding:14px 18px;
border-radius:14px;
box-shadow:var(--shadow);
opacity:0;
transform:translateY(12px);
pointer-events:none;
transition:opacity .2s ease,transform .2s ease;
font-weight:800;
}

.toast.show{
opacity:1;
transform:translateY(0);
}

.toast.success{
background:var(--green-strong);
}

.toast.error{
background:var(--danger);
}

.toast.warning{
background:#a16207;
}

.modal{
position:fixed;
inset:0;
z-index:1090;
background:rgba(15,23,42,.45);
display:none;
align-items:center;
justify-content:center;
padding:24px;
}

.modal.active{
display:flex;
}

.modal-content{
width:min(680px,100%);
max-height:calc(100vh - 48px);
overflow:auto;
background:var(--white);
border-radius:22px;
padding:26px;
box-shadow:var(--shadow);
}

.quick-view-modal{
position:relative;
display:grid;
grid-template-columns:240px minmax(0,1fr);
gap:22px;
align-items:start;
}

.quick-view-modal img{
height:240px;
object-fit:cover;
border-radius:18px;
border:1px solid var(--border);
}

.quick-view-modal > div{
min-width:0;
overflow-wrap:anywhere;
}

.quick-view-modal h2{
font-size:1.6rem;
line-height:1.2;
padding-right:64px;
margin-bottom:10px;
overflow-wrap:anywhere;
}

.quick-view-modal .product-price{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin-bottom:12px;
}

.quick-view-modal p{
overflow-wrap:anywhere;
}

.modal-close{
position:absolute;
right:16px;
top:16px;
border:1px solid var(--border);
background:var(--white);
color:var(--text);
border-radius:999px;
min-height:36px;
padding:0 12px;
font-weight:800;
}

.modal-sm{
max-width:420px;
}

.modal-content p{
color:var(--muted);
margin:10px 0 22px;
}

.modal-actions{
display:flex;
justify-content:flex-end;
gap:10px;
flex-wrap:wrap;
}

/* DARK MODE */

.dark-mode{
--light:#07130c;
--white:#0f1f16;
--text:#ecfdf5;
--muted:#9fb8aa;
--border:#1f3a2a;
--mint:#10251a;
--green-soft:#173d25;
background:#07130c;
}

.dark-mode .navbar,
.dark-mode .admin-header{
background:rgba(15,31,22,.94);
}

.dark-mode input,
.dark-mode textarea,
.dark-mode select{
color:var(--text);
background:#0b1a12;
}

.dark-mode .hero{
background:
radial-gradient(circle at 18% 20%,rgba(34,197,94,.12),transparent 32%),
linear-gradient(180deg,#08130d,#07130c);
}

.dark-mode .banner-box{
background:linear-gradient(135deg,#10251a,#0f1f16);
}

.dark-mode .admin-body{
background:linear-gradient(180deg,#07130c 0%,#07130c 45%,#10251a 100%);
}

.dark-mode .eyebrow{
color:#bbf7d0;
}

.dark-mode .deal-panel::before{
background:#173d25;
}

.dark-mode .deal-panel-grid strong,
.dark-mode .deal-panel a,
.dark-mode .price,
.dark-mode .product-price,
.dark-mode .stat-value,
.dark-mode .add-first,
.dark-mode .admin-logo,
.dark-mode .icon-btn.edit,
.dark-mode .upload-icon{
color:#86efac;
}

.dark-mode .click-count{
background:#173d25;
color:#bbf7d0;
border-color:#2f6b42;
}

.dark-mode .backup-card.danger{
background:#2a1111;
border-color:#7f1d1d;
}

.dark-mode .footer{
background:#07130c;
}

.dark-mode .footer h3,
.dark-mode .footer p,
.dark-mode .footer a{
color:var(--muted);
}

.dark-mode .footer a:hover{
color:var(--green-strong);
}

.dark-mode .footer-license{
background:rgba(15,31,22,.72);
border-color:var(--border);
}

.dark-mode .footer-bottom{
border-top:1px solid var(--border);
}

.dark-mode .footer-socials a{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.12);
color:var(--text);
}

.dark-mode .footer-socials a:hover{
background:var(--green);
color:var(--white);
border-color:var(--green);
}

/* MOBILE */

/* Tablet responsiveness (768px) */
@media(max-width:768px){
.navbar-container{
padding:10px 16px;
gap:16px;
}

.hero-wrap{
grid-template-columns:1fr;
gap:28px;
}

.hero{
padding:56px 0 48px;
}

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

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

.section-head{
flex-direction:column;
align-items:stretch;
}

.section-head select{
width:100%;
}

.footer-top{
grid-template-columns:repeat(2,1fr);
gap:24px;
}

.newsletter-form{
flex-direction:column;
}

.newsletter-form input,
.newsletter-form button{
width:100%;
}
}

@media(max-width:1080px){
.navbar-container{
grid-template-columns:auto 1fr auto;
}

.nav-tools{
grid-column:1 / -1;
width:100%;
}

.search-wrap,
.search-bar{
flex:1;
min-width:0;
}

.hero-wrap{
grid-template-columns:1fr;
gap:34px;
}

.admin-container{
grid-template-columns:1fr;
}

.admin-sidebar{
position:static;
}

.admin-nav{
grid-template-columns:repeat(3,1fr);
}

.admin-nav-item{
text-align:center;
}

.backup-section{
grid-template-columns:1fr;
}

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

.quick-view-modal{
grid-template-columns:1fr;
}

.quick-view-modal img{
height:260px;
}
}

@media(max-width:820px){
.navbar-container{
display:grid;
grid-template-columns:1fr auto;
align-items:center;
gap:12px;
padding-top:10px;
padding-bottom:10px;
position:relative;
}

.menu-toggle{
display:flex;
justify-self:end;
}

.nav-links{
display:none;
grid-column:1 / -1;
width:100%;
background:var(--white);
border:1px solid var(--border);
border-radius:18px;
box-shadow:var(--shadow-soft);
padding:8px;
margin-top:2px;
}

.nav-links.open{
display:grid;
grid-template-columns:1fr;
gap:4px;
}

.nav-links a{
width:100%;
min-width:0;
justify-content:flex-start;
padding:12px 14px;
}

.nav-links a::after{
left:14px;
right:auto;
width:44px;
}

.nav-tools{
grid-column:1 / -1;
width:100%;
display:grid;
grid-template-columns:minmax(0,1fr) 44px;
gap:10px;
}

.search-wrap{
width:100%;
min-width:0;
}

.search-bar{
width:100%;
min-width:0;
}

.store-theme-toggle{
align-self:stretch;
width:44px;
}

.products-scroll{
max-height:none;
overflow:visible;
padding-right:0;
}

.quick-view-modal img{
height:220px;
}

.brand{
justify-content:flex-start;
}

.logo{
height:54px;
}

.hero{
padding:56px 0 48px;
}

.hero-buttons,
.newsletter-form,
.form-actions{
display:grid;
grid-template-columns:1fr;
}

.btn,
.newsletter-form button,
.newsletter-form input{
width:100%;
}

.deal-panel{
padding:24px;
}

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

.section-head,
.banner-box,
.admin-section-header{
flex-direction:column;
align-items:stretch;
text-align:left;
}

.section-head select,
.stats{
width:100%;
min-width:0;
}

.banner-box{
padding:28px;
}

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

.admin-header-content{
flex-direction:column;
align-items:stretch;
}

.admin-logo,
.admin-actions{
justify-content:center;
}

.footer-top{
grid-template-columns:1fr 1fr;
gap:26px;
}

.footer-bottom{
align-items:flex-start;
flex-direction:column-reverse;
}

.footer-socials{
justify-content:flex-start;
order:0;
width:100%;
}
}

@media(max-width:560px){
.container,
.navbar-container,
.admin-header-content,
.admin-container{
padding-left:16px;
padding-right:16px;
}

.search-wrap,
.search-bar{
width:100%;
min-width:0;
}

.search-bar{
border-radius:18px;
}

.search-message{
position:static;
margin-top:8px;
}

.search-bar button{
padding:12px 14px;
min-width:44px;
}

.search-bar input{
padding:14px 16px;
min-height:44px;
line-height:1.4;
}

.hero h1{
font-size:2.45rem;
}

.deal-panel-grid,
.trust-grid,
.stats,
.admin-nav{
grid-template-columns:1fr;
}

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

.btn,
.newsletter-form button,
.newsletter-form input,
.chip{
min-height:44px;
touch-action:manipulation;
}

.newsletter-form input,
.newsletter-form button{
width:100%;
}

.products-table-wrapper{
overflow:visible;
}

.products-table{
min-width:0;
border-collapse:separate;
border-spacing:0 12px;
}

.products-table thead{
display:none;
}

.products-table,
.products-table tbody,
.products-table tr{
display:block;
width:100%;
}

.products-table tr:not(.empty-row){
background:var(--white);
border:1px solid var(--border);
border-radius:18px;
box-shadow:var(--shadow-soft);
overflow:hidden;
}

.products-table td{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:12px 16px;
border-bottom:1px solid var(--border);
width:100%;
min-width:0;
overflow-wrap:anywhere;
}

.products-table td::before{
content:attr(data-label);
font-size:.72rem;
font-weight:800;
text-transform:uppercase;
color:var(--muted);
letter-spacing:.02em;
flex:0 0 42%;
max-width:42%;
}

.products-table td:last-child{
border-bottom:none;
}

.products-table td[data-label="Image"]{
justify-content:flex-start;
}

.products-table td[data-label="Image"]::before{
display:none;
}

.products-table td[data-label="Image"] img{
width:68px;
height:68px;
object-fit:cover;
border-radius:14px;
}

.products-table td[data-label="Actions"]{
justify-content:flex-start;
}

.products-table td[data-label="Actions"]::before{
align-self:center;
}

.table-actions{
width:100%;
justify-content:flex-end;
flex-wrap:wrap;
}

.product-card img,
.product-image img{
height:220px;
}

.product-actions{
grid-template-columns:1fr;
}

.chips{
justify-content:flex-start;
overflow-x:auto;
flex-wrap:nowrap;
padding-bottom:6px;
-webkit-overflow-scrolling:touch;
}

.chip{
white-space:nowrap;
}

.newsletter-box{
padding:36px 20px;
}

.footer{
margin-top:30px;
padding-top:46px;
}

.footer-top{
grid-template-columns:1fr;
gap:22px;
}

.footer-license{
padding:18px;
}

.footer-socials{
display:flex;
justify-content:flex-start;
gap:10px;
width:100%;
}

.footer-socials a{
width:40px;
height:40px;
}

.products-table{
min-width:920px;
}

.toast{
left:16px;
right:16px;
bottom:16px;
text-align:center;
}
}