*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f6f7f9;color:#222}.wrap{max-width:1180px;margin:auto;padding:0 16px}header{background:#111827;color:#fff}.nav{display:flex;justify-content:space-between;align-items:center;min-height:64px}.brand{font-weight:800;color:#fff;text-decoration:none}nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}nav a{color:#fff;text-decoration:none}.drop{position:relative}.drop-menu{display:none;position:absolute;z-index:20;top:24px;background:white;min-width:170px;box-shadow:0 5px 20px #0002}.drop-menu a{display:block;color:#111;padding:10px 12px}.drop:hover .drop-menu{display:block}main{padding-top:28px;padding-bottom:40px}.hero{background:#111827;color:white;border-radius:18px;padding:48px;margin-bottom:28px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.card{background:white;border-radius:14px;padding:14px;box-shadow:0 2px 12px #0000000d}.card img{width:100%;height:220px;object-fit:cover;border-radius:10px}.price{font-size:20px;font-weight:700}.btn{display:inline-block;padding:10px 14px;border:0;border-radius:9px;background:#111827;color:white;text-decoration:none;cursor:pointer}.btn-danger{background:#b91c1c}.btn-secondary{background:#475569}input,textarea,select{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:8px;margin:5px 0 12px}label{font-weight:600}.form{max-width:620px;background:white;padding:22px;border-radius:14px}table{width:100%;border-collapse:collapse;background:white}th,td{padding:11px;border-bottom:1px solid #e5e7eb;text-align:left}.danger-text{color:#ff5b5b!important;font-weight:800}.badge{padding:4px 8px;border-radius:999px;background:#e5e7eb}.alert{padding:12px;border-radius:8px;background:#fee2e2;color:#991b1b;margin-bottom:16px}.ok{background:#dcfce7;color:#166534}footer{padding:25px 0;background:#111827;color:white}.admin-menu{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.muted{color:#64748b}.right{text-align:right}

/* Product detail V4: large square image + info fixed on the right */
.product-detail{
    width:100%;
    display:grid !important;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:28px;
    align-items:start;
}
.product-gallery{
    width:100%;
    min-width:0;
}
.product-image-square{
    width:100%;
    aspect-ratio:1/1;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 2px 12px #0000000d;
    display:flex;
    align-items:center;
    justify-content:center;
}
.product-image-square img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
}
.product-image-empty{color:#64748b;font-weight:600}
.product-info{
    width:100%;
    min-width:0;
    max-width:100%;
    padding:8px 0;
    overflow:hidden;
}
.product-info h1{
    margin:0 0 14px;
    font-size:34px;
    line-height:1.15;
    overflow-wrap:anywhere;
}
.product-info .price{margin:0 0 18px}
.product-description{
    width:100%;
    max-width:100%;
    line-height:1.6;
    margin:16px 0;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.product-buy-form{
    width:100%;
    max-width:100%;
    margin-top:16px;
}
.product-buy-form input{
    width:100%;
    max-width:100%;
}
@media(max-width:680px){
    .product-detail{grid-template-columns:minmax(0,1fr);gap:20px}
    .product-info{padding:0}
    .product-info h1{font-size:28px}
}

/* Mini3D V5 - soft full-page background */
body{
    background:
        linear-gradient(rgba(246,247,249,.72), rgba(246,247,249,.72)),
        url('../images/mini3d-bg.png') center center / cover fixed no-repeat;
    min-height:100vh;
}

/* Keep content readable while allowing the background to show through */
.card,
.form,
table,
.product-image-square{
    background:rgba(255,255,255,.90);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}

.hero{
    background:rgba(17,24,39,.90);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}

header,
footer{
    background:rgba(17,24,39,.96);
}

@media(max-width:768px){
    body{
        background-position:center top;
        background-attachment:scroll;
    }
}

/* Mini3D V6 - hero banner image */
.hero{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(rgba(17,24,39,.46), rgba(17,24,39,.46)),
        url('../images/hero-bg.jpg') center center / cover no-repeat;
    color:#fff;
    border-radius:18px;
    padding:48px;
    margin-bottom:28px;
    min-height:230px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-shadow:0 6px 24px rgba(0,0,0,.12);
}
.hero h1,
.hero h2,
.hero h3,
.hero p,
.hero a{
    position:relative;
    z-index:1;
}
.hero h1,
.hero h2,
.hero h3{
    text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.hero p{
    text-shadow:0 1px 5px rgba(0,0,0,.45);
}
@media(max-width:680px){
    .hero{
        padding:30px 24px;
        min-height:210px;
        background-position:center center;
    }
}

/* Mini3D V7 - clearer top navigation spacing and item separation */
header .nav > nav{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
header .nav > nav > a,
header .nav > nav > .drop > a{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:9px 13px;
    border-radius:9px;
    color:#fff;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.035);
    transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
    white-space:nowrap;
}
header .nav > nav > a:hover,
header .nav > nav > .drop > a:hover{
    background:rgba(255,255,255,.11);
    border-color:rgba(255,255,255,.20);
    transform:translateY(-1px);
}
header .nav > nav > a + a,
header .nav > nav > .drop + a,
header .nav > nav > a + .drop{
    margin-left:2px;
}
header .drop-menu{
    top:44px;
    border-radius:10px;
    overflow:hidden;
    padding:6px;
    min-width:180px;
}
header .drop-menu a{
    border-radius:7px;
    padding:10px 12px;
}
header .drop-menu a:hover{
    background:#f1f5f9;
}
@media(max-width:900px){
    header .nav{
        gap:10px;
        padding-top:10px;
        padding-bottom:10px;
    }
    header .nav > nav{
        gap:6px;
    }
    header .nav > nav > a,
    header .nav > nav > .drop > a{
        padding:8px 10px;
        min-height:36px;
    }
}

/* Mini3D V9 - soft pink / lavender theme replacing dark UI backgrounds */
:root{
    --mini-pink:#d98bb6;
    --mini-pink-deep:#b76598;
    --mini-lavender:#8f79c9;
    --mini-lavender-deep:#705ca8;
    --mini-rose:#efb6cf;
    --mini-cream:#fff7fb;
    --mini-text:#4b3750;
}

/* Top navigation + footer */
header,
footer{
    background:linear-gradient(135deg, rgba(126,94,167,.97), rgba(207,119,167,.97)) !important;
    color:#fff;
}
.brand{color:#fff!important;text-shadow:0 1px 3px rgba(74,41,79,.25)}

/* Main action buttons */
.btn,
button.btn,
input[type="submit"].btn{
    background:linear-gradient(135deg,var(--mini-lavender),var(--mini-pink)) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:0 3px 10px rgba(126,94,167,.18);
}
.btn:hover,
button.btn:hover,
input[type="submit"].btn:hover{
    background:linear-gradient(135deg,var(--mini-lavender-deep),var(--mini-pink-deep)) !important;
}
.btn-secondary{
    background:linear-gradient(135deg,#a99ad4,#d8a5c2) !important;
}
.btn-danger{
    background:linear-gradient(135deg,#d96f91,#c95f83) !important;
}

/* Hero: keep the picture, replace the dark overlay with a rosy/lavender tint */
.hero{
    background:
        linear-gradient(135deg, rgba(119,84,156,.32), rgba(225,137,180,.34)),
        url('../images/hero-bg.jpg') center center / cover no-repeat !important;
    color:#fff;
    box-shadow:0 8px 28px rgba(185,103,153,.18);
}
.hero h1,.hero h2,.hero h3,.hero p{
    text-shadow:0 2px 8px rgba(80,44,78,.42);
}

/* Navigation items: distinct pastel pills */
header .nav > nav > a,
header .nav > nav > .drop > a{
    background:rgba(255,255,255,.13) !important;
    border-color:rgba(255,255,255,.26) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
header .nav > nav > a:hover,
header .nav > nav > .drop > a:hover{
    background:rgba(255,255,255,.25) !important;
    border-color:rgba(255,255,255,.42) !important;
}

/* Dropdown */
header .drop-menu{
    background:rgba(255,248,252,.98) !important;
    border:1px solid rgba(208,151,187,.35);
    box-shadow:0 10px 28px rgba(120,80,120,.18);
}
header .drop-menu a{color:var(--mini-text)!important}
header .drop-menu a:hover{background:#fbe8f2!important}

/* Soft content accents */
.badge{
    background:#f3ddec;
    color:#76516c;
}
.muted{color:#846b82}

/* Forms/tables/cards stay bright but with a soft rosy edge */
.card,
.form,
table,
.product-image-square{
    border:1px solid rgba(216,155,190,.22);
    box-shadow:0 4px 18px rgba(157,106,145,.10);
}

/* Text links in content */
main a:not(.btn){color:#9f4f86}
main a:not(.btn):hover{color:#753a69}

/* Admin menu buttons use same pastel theme */
.admin-menu .btn,
.admin-menu a{
    border-radius:10px;
}

/* Mini3D V13 - larger feminine hero typography with stronger contrast */
.hero h1{
    margin:0 0 18px;
    font-size:48px; /* ~50% larger than the original 32px */
    line-height:1.12;
    font-weight:800;
    color:#713b68 !important;
    letter-spacing:.2px;
    text-shadow:
        0 1px 0 rgba(255,255,255,.98),
        0 0 8px rgba(255,239,249,.95),
        0 3px 12px rgba(102,57,94,.22) !important;
}
.hero p{
    margin:0;
    font-size:24px; /* 50% larger than the original 16px */
    line-height:1.5;
    font-weight:600;
    color:#875274 !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.98),
        0 0 7px rgba(255,242,250,.92),
        0 2px 7px rgba(108,65,99,.18) !important;
}
@media(max-width:680px){
    .hero h1{font-size:36px}
    .hero p{font-size:20px}
}

/* Mini3D V15 - high contrast feminine hero text */
.hero h1{
    color:#4b2142 !important;
    text-shadow:
        0 2px 0 rgba(255,255,255,.98),
        1px 0 0 rgba(255,255,255,.78),
        -1px 0 0 rgba(255,255,255,.78),
        0 4px 12px rgba(38,18,40,.48) !important;
}
.hero p{
    color:#55294c !important;
    font-weight:700;
    text-shadow:
        0 1px 0 rgba(255,255,255,1),
        1px 0 0 rgba(255,255,255,.68),
        -1px 0 0 rgba(255,255,255,.68),
        0 3px 9px rgba(42,19,42,.38) !important;
}

/* Mini3D V16 - hero text white-pink fill with soft pale outline */
.hero h1{
    color:#fff7fb !important;
    -webkit-text-stroke: 1px rgba(205,153,188,.72);
    text-shadow:
        0 0 0 rgba(0,0,0,0),
        0 1px 0 rgba(255,255,255,.98),
        1px 1px 0 rgba(216,170,198,.72),
        -1px 1px 0 rgba(216,170,198,.72),
        1px -1px 0 rgba(216,170,198,.72),
        -1px -1px 0 rgba(216,170,198,.72),
        0 4px 14px rgba(82,43,77,.36) !important;
}
.hero p{
    color:#fff9fc !important;
    -webkit-text-stroke: .6px rgba(205,153,188,.58);
    text-shadow:
        0 1px 0 rgba(255,255,255,.98),
        1px 1px 0 rgba(216,170,198,.58),
        -1px 1px 0 rgba(216,170,198,.58),
        1px -1px 0 rgba(216,170,198,.58),
        -1px -1px 0 rgba(216,170,198,.58),
        0 3px 10px rgba(82,43,77,.28) !important;
}