/* ME PARFUM - Shared Mobile First CSS */
:root{
    --black:#000;--black-soft:#111;--white:#fff;
    --yellow:#ffcc00;--yellow-dark:#e5b800;--yellow-soft:#fff8d6;
    --gray-50:#fafafa;--gray-100:#f4f4f4;--gray-200:#e5e5e5;
    --gray-300:#d4d4d4;--gray-400:#a3a3a3;--gray-500:#737373;--gray-600:#525252;
    --red:#dc2626;--radius-md:12px;--radius-lg:16px;--radius-xl:22px;--radius-full:999px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100vh;background:#fff;color:#111;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}button,input,textarea{font:inherit}button{cursor:pointer}img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.container{width:min(calc(100% - 32px),1180px);margin:auto}
.header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.97);border-bottom:1px solid var(--gray-200);backdrop-filter:blur(12px)}
.header-inner{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:8px;background:#000;color:#ffcc00;font-size:.7rem;font-weight:900}
.brand-name{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-link{position:relative;font-size:1.1rem}
.cart-badge{position:absolute;top:-8px;right:-9px;min-width:20px;height:20px;padding:0 4px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:#ffcc00;color:#000;font-size:.62rem;font-weight:900}
.hero{padding:30px 0 18px}
.kicker{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--yellow-soft);font-size:.7rem;font-weight:900;text-transform:uppercase}
h1{font-size:2rem;line-height:1.12;letter-spacing:-.04em;font-weight:900;margin-top:10px}
.lead{margin-top:9px;color:var(--gray-600);font-size:.9rem}
.search{width:100%;height:48px;margin-top:18px;padding:0 16px;border:1px solid var(--gray-200);border-radius:999px;background:var(--gray-50);outline:none}
.search:focus{border-color:#000;box-shadow:0 0 0 4px rgba(255,204,0,.22);background:#fff}
.categories{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-top:14px;padding-bottom:3px}
.categories::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:9px 14px;border:1px solid var(--gray-200);border-radius:999px;background:#fff;color:var(--gray-600);font-size:.8rem;font-weight:750}
.chip.active{background:#000;color:#ffcc00;border-color:#000}
.section{padding:24px 0}
.section-title{font-size:1.3rem;font-weight:900}
.section-subtitle{margin-top:3px;color:var(--gray-500);font-size:.82rem}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px}
.card{overflow:hidden;border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:#fff}
.photo{position:relative;aspect-ratio:1/1;background:var(--gray-100);overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:8px;left:8px;padding:5px 8px;border-radius:8px;background:var(--yellow);color:#000;font-size:.6rem;font-weight:900}
.card-body{padding:12px}
.category{color:var(--gray-500);font-size:.65rem;font-weight:750}
.name{margin-top:3px;font-size:.88rem;line-height:1.3;font-weight:850}
.price{margin-top:8px;font-size:1rem;font-weight:900}
.original{margin-top:1px;color:var(--gray-400);font-size:.68rem;text-decoration:line-through}
.card-actions{display:grid;gap:7px;margin-top:10px}
.btn{min-height:44px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;border-radius:var(--radius-md);border:1px solid transparent;font-size:.8rem;font-weight:900}
.btn-yellow{background:var(--yellow);border-color:var(--yellow);color:#000}
.btn-black{background:#000;border-color:#000;color:#fff}
.btn-outline{background:#fff;border-color:var(--gray-300);color:#000}
.float-cart{position:fixed;right:15px;bottom:76px;z-index:1100;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border:2px solid var(--yellow);border-radius:999px;background:#000;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.15);font-size:.76rem;font-weight:850}
.float-total{color:var(--yellow)}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:1200;display:grid;grid-template-columns:repeat(3,1fr);min-height:62px;padding:6px 6px max(6px,env(safe-area-inset-bottom));border-top:1px solid var(--gray-200);background:rgba(255,255,255,.98);backdrop-filter:blur(12px)}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--gray-500);font-size:.66rem;font-weight:750}
.bottom-nav a.active{color:#000}
.empty{padding:50px 16px;text-align:center}
.page-head{padding:24px 0 10px}.page-title{font-size:1.8rem;line-height:1.15;font-weight:900}
.layout{display:grid;gap:16px;padding:14px 0 24px}
.product-main{display:grid;gap:20px}
.detail-photo{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-xl);background:var(--gray-100)}
.detail-category{color:var(--gray-500);font-size:.74rem;font-weight:750}
.detail-title{margin-top:4px;font-size:1.8rem;line-height:1.12;font-weight:900}
.detail-price{margin-top:12px;font-size:1.5rem;font-weight:900}
.detail-original{color:var(--gray-400);font-size:.76rem;text-decoration:line-through}
.detail-desc{margin-top:14px;color:var(--gray-600);font-size:.88rem}
.stock{margin-top:14px;padding:10px 12px;border-radius:var(--radius-md);background:var(--gray-50);font-size:.77rem;font-weight:800}
.qty{display:inline-flex;align-items:center;margin-top:14px;border:1px solid var(--gray-300);border-radius:999px;overflow:hidden}
.qty button{width:42px;height:40px;border:0;background:#fff;font-weight:900}
.qty span{min-width:42px;text-align:center;font-weight:850}
.actions{display:grid;gap:9px;margin-top:14px}
.cart-list{display:grid;gap:12px}
.cart-item{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;padding:12px;border:1px solid var(--gray-200);border-radius:var(--radius-lg)}
.cart-img{width:78px;height:78px;object-fit:cover;border-radius:10px;background:var(--gray-100)}
.cart-name{font-size:.84rem;font-weight:850}.cart-meta{margin-top:2px;color:var(--gray-500);font-size:.7rem}.cart-subtotal{margin-top:4px;font-size:.82rem;font-weight:900}
.cart-row{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:8px}
.remove{border:0;background:transparent;color:var(--red);font-size:.7rem;font-weight:750}
.summary{margin-top:16px;padding:16px;border:1px solid var(--gray-200);border-radius:var(--radius-xl);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.summary-row{display:flex;justify-content:space-between;gap:12px;font-size:.82rem}.summary-row+.summary-row{margin-top:8px}.summary-total{margin-top:13px;padding-top:13px;border-top:1px solid var(--gray-200);font-size:1rem;font-weight:900}
.form-group{margin-bottom:13px}.label{display:block;margin-bottom:5px;font-size:.77rem;font-weight:850}
.input,.textarea{width:100%;border:1px solid var(--gray-300);border-radius:var(--radius-md);background:#fff;color:#000}
.input{height:46px;padding:0 13px}.textarea{min-height:95px;padding:11px 13px;resize:vertical}
.input:focus,.textarea:focus{outline:none;border-color:#000;box-shadow:0 0 0 4px rgba(255,204,0,.22)}
.error{min-height:16px;margin-top:3px;color:var(--red);font-size:.67rem}
.notice{padding:11px 12px;border-radius:var(--radius-md);background:var(--yellow-soft);font-size:.74rem}
footer{padding:28px 0 90px;color:var(--gray-500);text-align:center;font-size:.7rem;border-top:1px solid var(--gray-200)}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:1200;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.98);border-top:1px solid var(--gray-200);box-shadow:0 -6px 22px rgba(0,0,0,.08)}
.sticky-inner{width:min(100%,820px);margin:auto;display:grid;grid-template-columns:1fr 1.35fr;gap:10px;align-items:center}
.sticky small{display:block;color:var(--gray-500);font-size:.65rem}.sticky strong{font-size:.9rem}
@media(min-width:640px){
    .container{width:min(calc(100% - 48px),1180px)}
    .header-inner{min-height:72px}
    h1{font-size:2.5rem}.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
    .bottom-nav{display:none}.float-cart{bottom:24px}
    .product-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
    .layout{padding-top:24px}
    .sticky{position:static;padding:0;background:transparent;border:0;box-shadow:none}
}
@media(min-width:960px){
    .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .layout{grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr)}
}
@media(max-width:639px){body{padding-bottom:70px}}