/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

/* Color Variables */
:root {
  --white: #fff;
  --black: #222;
  --green: #6cbe02;
  --grey1: #f0f0f0;
  --grey2: #e9d7d3;
}

/* Basic Reset */
*,*::before,*::after { margin:0; padding:0; box-sizing:inherit; }
html { box-sizing:border-box; font-size:62.5%; }
body { font-family:'Roboto',sans-serif; font-size:1.6rem; background-color:var(--white); color:var(--black); font-weight:400; }
a { text-decoration:none; color:var(--black); }
li { list-style:none; }
.container { max-width:114rem; margin:0 auto; padding:0 3rem; }
.d-flex { display:flex; align-items:center; }

/* =================
   Header
   ================= */
.header { position:relative; min-height:100vh; overflow-x:hidden; }
.top-nav { background-color:var(--black); font-size:1.3rem; color:var(--white); }
.top-nav div { justify-content:space-between; height:4.5rem; }
.top-nav a { color:var(--white); padding:0 0.5rem; }

/* Navigation */
.navigation { height:6rem; line-height:6rem; }
.nav-center { justify-content:space-between; }
.nav-list .icons { display:none; }
.nav-center .nav-item:not(:last-child) { margin-right:0.5rem; }
.nav-center .nav-link { font-size:1.8rem; padding:1rem; }
.nav-center .nav-link:hover { color:var(--black); }
.nav-center .nav-link.active { border-bottom:2px solid var(--black); }
.nav-center .hamburger { display:none; font-size:2.3rem; color:var(--black); cursor:pointer; }
.nav-right { margin-left:auto; }

.icon { cursor:pointer; font-size:2.5rem; padding:0 1rem; color:#555; position:relative; }
.icon:not(:last-child) { margin-right:0.5rem; }
.icon span { position:absolute; top:3px; right:-3px; background-color:var(--black); color:var(--white); border-radius:50%; font-size:1.3rem; height:2rem; width:2rem; justify-content:center; }

@media only screen and (max-width:768px) {
  .nav-list { position:fixed; top:12%; left:-35rem; flex-direction:column; align-items:flex-start; box-shadow:5px 5px 10px rgba(0,0,0,.2); background-color:white; height:100%; width:0%; max-width:35rem; z-index:100; transition:all 300ms ease-in-out; }
  .nav-list.open { left:0; width:100%; }
  .nav-list .nav-item { margin:0 0 1rem 0; width:100%; }
  .nav-list .nav-link { font-size:2rem; color:var(--black); }
  .nav-center .hamburger { display:block; color:var(--black); font-size:3rem; }
  .icons { display:none; }
  .nav-list .icons { display:flex; }
  .top-nav ul { display:none; }
  .top-nav div { justify-content:center; height:3rem; }
}

/* Hero */
.hero,.hero .glide__slides { background-color:var(--white); position:relative; height:calc(100vh - 6rem); margin:0 4rem; overflow:hidden; }
.hero .center { display:flex; align-items:center; justify-content:center; position:relative; height:100%; padding-top:3rem; }
.hero .left { position:absolute; top:0%; left:25rem; opacity:0; transition:all 1000ms ease-in-out; }
.hero .left h1 { font-size:5rem; margin:1rem 0; }
.hero .left p { font-size:1.6rem; margin-bottom:1rem; }
.hero .left .hero-btn { display:inline-block; padding:1rem 3rem; font-size:1.6rem; margin-top:1rem; background-color:var(--black); color:white; }
.hero .right { flex:0 0 50%; height:100%; position:relative; text-align:center; }
.hero .right img { position:absolute; width:55rem; opacity:0; transition:all 1000ms ease-in-out; }
.center .right img.img1 { width:85%; right:-25%; bottom:-50%; }
.center .right img.img2 { width:90%; right:-40%; bottom:-40%; }
.glide__slide--active .center .right img { bottom:-3%; opacity:1; }
.glide__slide--active .left { opacity:1; top:35%; }

@media only screen and (max-width:1500px) { .hero .left { left:0; } }
@media only screen and (max-width:999px) { .glide__slide--active .left { top:15%; } .center .right img.img1 { width:90%; } .center .right img.img2 { width:100%; } }
@media only screen and (max-width:567px) {
  .center .right img.img1 { width:30rem; }
  .center .right img.img2 { width:33rem; }
  .hero,.hero .glide__slides { margin:0; padding:0 3rem; }
  .hero .left h1 { font-size:3rem; }
  .hero .left p { font-size:1.5rem; width:80%; }
}

/* Category Section */
.section { padding:10rem 0 5rem 0; overflow:hidden; }
.cat-center { display:flex; align-items:center; justify-content:center; max-width:114rem; margin:auto; padding:0 3rem; }
.cat-center .cat { max-width:37rem; height:25rem; overflow:hidden; position:relative; cursor:pointer; text-align:center; }
.cat-center .cat:not(:last-child) { margin-right:3rem; }
.cat-center .cat img { width:36.5rem; height:100%; margin:auto; object-fit:cover; transition:all 2s ease; }
.cat-center .cat:hover img { transform:scale(1.1); }
.cat-center .cat div { position:absolute; bottom:15%; left:50%; transform:translateX(-50%); background-color:var(--white); width:18rem; height:5rem; line-height:5rem; text-align:center; font-size:2rem; font-weight:500; }

@media only screen and (max-width:1200px) { .cat-center .cat img { width:30rem; } }
@media only screen and (max-width:967px) { .cat-center .cat { max-width:25rem; height:20rem; } .cat-center .cat img { width:25rem; } }
@media only screen and (max-width:768px) { .section { padding:5rem 0; } .cat-center { flex-direction:column; padding:3rem; } .cat-center .cat { max-width:100%; height:30rem; } .cat-center .cat:not(:last-child) { margin-right:0; margin-bottom:5rem; } .cat-center .cat img { width:100%; } }

/* New Arrivals */
.title { text-align:center; margin-bottom:5rem; }
.title h1 { font-size:3rem; text-transform:uppercase; margin-bottom:1rem; font-weight:500; }
.product-center { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; max-width:120rem; margin:0 auto; padding:0 2rem; }
.product-item { position:relative; width:27rem; margin:0 auto; margin-bottom:3rem; }
.product-thumb img { width:100%; height:31rem; object-fit:cover; transition:all 500ms linear; }
.product-info { padding:1rem; text-align:center; }
.product-info span { display:inline-block; font-size:1.2rem; color:#666; margin-bottom:1rem; }
.product-info a { font-size:1.5rem; display:block; margin-bottom:1rem; transition:all 300ms ease; }
.product-info a:hover { color:var(--black); }
.product-info h4 { font-size:1.5rem; }
.product-item .icons { position:absolute; left:50%; top:35%; transform:translateX(-50%); display:flex; align-items:center; }
.product-item .icons li { background-color:var(--white); text-align:center; padding:1rem 1.5rem; font-size:2.3rem; cursor:pointer; transition:300ms ease-out; transform:translateY(20px); visibility:hidden; opacity:0; }
.product-item .icons li:first-child { transition-delay:.1s; }
.product-item .icons li:nth-child(2) { transition-delay:.2s; }
.product-item .icons li:nth-child(3) { transition-delay:.3s; }
.product-item:hover .icons li { visibility:visible; opacity:1; transform:translateY(0); }
.product-item .icons li:not(:last-child) { margin-right:.5rem; }
.product-item .icons li:hover { background-color:var(--black); color:var(--white); }
.product-item .overlay { position:relative; overflow:hidden; cursor:pointer; width:100%; }
.product-item .overlay::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.5); visibility:hidden; opacity:0; transition:300ms ease-out; }
.product-item:hover .overlay::after { visibility:visible; opacity:1; }
.product-item:hover .product-thumb img { transform:scale(1.1); }
.product-item .discount { position:absolute; top:1rem; left:1rem; background-color:var(--black); padding:.5rem 1rem; color:var(--white); border-radius:2rem; font-size:1.5rem; }

@media only screen and (max-width:567px) { .product-center { max-width:100%; padding:0 1rem; } .product-item { width:40%; margin-bottom:3rem; margin-right:2rem; } .product-thumb img { height:20rem; } .product-item .icons li { padding:.5rem 1rem; font-size:1.8rem; } }

/* Banner */
.banner { position:relative; background-color:var(--black); padding:14rem 20%; }
.banner .right img { position:absolute; bottom:0; right:0%; width:98rem; }
.banner .trend,.banner p { display:block; font-size:2rem; font-weight:300; margin-bottom:1.5rem; color:var(--white); }
.banner h1 { font-size:5.4rem; color:var(--white); margin-bottom:1.5rem; }
.banner .btn { display:inline-block; margin-top:2rem; }
.promo { margin-right:50%; }
@media only screen and (max-width:1500px) { .banner { padding:14rem; } .banner .right img { right:3rem; width:70rem; } }
@media only screen and (max-width:996px) { .banner { padding:8rem 2rem; } .banner .trend,.banner p { font-size:1.5rem; } .banner h1 { font-size:4rem; } .banner .right img { right:-6%; width:50rem; } }
@media only screen and (max-width:768px) { .banner { display:grid; grid-template-columns:1fr; height:80vh; } .banner .right img { right:0; width:50rem; left:50%; transform:translateX(-50%); } }
@media only screen and (max-width:567px) { .banner { padding:8rem 5rem; } .banner .trend,.banner p { font-size:1.3rem; margin-bottom:1rem; } .banner h1 { font-size:3rem; margin-bottom:1rem; } .banner .right img { width:45rem; } }

/* Contact */
.contact { background-color:var(--black); color:var(--white); padding:10rem 20rem; }
.contact .row { display:grid; grid-template-columns:1fr 1fr; align-items:center; }
.contact .row .col h2 { margin-bottom:1.5rem; }
.contact .row .col p { width:70%; margin-bottom:2rem; }
.btn-1 { background-color:var(--white); color:var(--black); display:inline-block; border-radius:1rem; padding:1rem 2rem; }
.contact form div { position:relative; width:80%; margin:0 auto; }
.contact form input { font-family:'Roboto',sans-serif; text-indent:2rem; width:100%; border-radius:1rem; padding:1.5rem 0; outline:none; border:none; }
.contact form a { position:absolute; top:0; right:0; background-color:var(--black); color:white; margin:.5rem; padding:1rem 3rem; border-radius:1rem; border:1px solid #fff; }
@media only screen and (max-width:996px) { .contact { padding:8rem; } }
@media only screen and (max-width:768px) { .contact .row { grid-template-columns:1fr; gap:5rem 0; } .contact form div { width:100%; } }
@media only screen and (max-width:567px) { .contact { padding:8rem 1rem; } }

/* Footer */
.footer { padding:7rem 1rem; background-color:var(--black); }
footer .row { display:grid; grid-template-columns:1fr 1fr 1fr; max-width:99.6rem; margin:0 auto; }
.footer .col { flex-direction:column; color:var(--white); align-items:flex-start; }
.footer .col:last-child { flex-direction:row; justify-content:center; }
.footer .col:last-child span { font-size:2.5rem; margin-right:.5rem; color:var(--white); }
.footer .col a { color:var(--white); font-size:1.5rem; padding:.5rem; font-weight:300; }
.footer .col h4 { margin-bottom:1rem; color:var(--white); }
@media only screen and (max-width:567px) { footer .row { grid-template-columns:1fr; row-gap:3rem; } }

/* Popup */
.popup { position:fixed; top:0; left:0; width:100%; height:100vh; background-color:rgba(0,0,0,.5); z-index:9999; transition:.3s; transform:scale(1); }
.popup-content { position:absolute; top:50%; left:50%; width:90%; max-width:110rem; margin:0 auto; height:55rem; transform:translate(-50%,-50%); padding:1.6rem; display:table; overflow:hidden; background-color:var(--white); }
.popup-close { display:flex; align-items:center; justify-content:center; position:absolute; top:2rem; right:2rem; padding:.5rem; background-color:var(--black); border-radius:50%; cursor:pointer; font-size:3rem; color:white; border:none; }
.popup-left { display:table-cell; width:50%; height:100%; vertical-align:middle; }
.popup-right { display:table-cell; width:50%; vertical-align:middle; padding:3rem 5rem; }
.popup-img-container { width:100%; overflow:hidden; }
.popup-img-container img.popup-img { display:block; width:60rem; height:45rem; max-width:100%; border-radius:1rem; object-fit:cover; }
.right-content { text-align:center; width:85%; margin:0 auto; }
.right-content h1 { font-size:4rem; color:#000; margin-bottom:1.6rem; }
.right-content p { font-size:1.6rem; margin-bottom:1.6rem; }
.popup-form-input { width:100%; padding:1.5rem 0; text-indent:1rem; margin-bottom:1.6rem; border-radius:3rem; background-color:var(--black); color:white; font-size:1.8rem; border:none; }
.popup-form-input::placeholder { color:white; }
.popup-form-input:focus { outline:none; }
.right-content .popup-btn { display:inline-block; padding:1.8rem 5rem; border-radius:3rem; font-weight:700; color:var(--white); background-color:var(--black); border:1px solid var(--grey2); transition:.3s; cursor:pointer; }
.hide-popup { transform:scale(.2); opacity:0; visibility:hidden; }
@media only screen and (max-width:998px) { .popup-left { display:none; } .popup-right { width:100%; } .right-content h1 { font-size:5rem; } }
@media only screen and (max-width:768px) { .right-content h1 { font-size:4rem; } }
@media only screen and (max-width:568px) { .popup-right { padding:0 1.6rem; } .popup-content { height:35rem; } .right-content h1 { font-size:3rem; } .right-content p { font-size:1.4rem; } .popup-close { top:1rem; right:1rem; } }

/* Cart (table-based original) */
.cart { margin:10rem auto; }
table { width:100%; border-collapse:collapse; }
.cart-info { display:flex; flex-wrap:wrap; }
th { text-align:left; padding:.5rem; color:#fff; background-color:var(--black); font-weight:normal; }
td { padding:1rem .5rem; }
td input { width:5rem; height:3rem; padding:.5rem; }
td a { color:orangered; font-size:1.4rem; }
td img { width:8rem; height:8rem; margin-right:1rem; }
.total-price { display:flex; align-items:flex-end; flex-direction:column; margin-top:2rem; }
.total-price table { border-top:3px solid var(--black); width:100%; max-width:35rem; }
td:last-child { text-align:right; }
th:last-child { text-align:right; }
.checkout { display:inline-block; background-color:var(--black); color:white; padding:1rem; margin-top:1rem; }
@media only screen and (max-width:567px) { .cart-info p { display:none; } }

/* Product Detail */
.product-detail .details { display:grid; grid-template-columns:1fr 1.2fr; gap:7rem; }
.product-detail .left { display:flex; flex-direction:column; }
.product-detail .left .main { text-align:center; background-color:#f6f2f1; margin-bottom:2rem; height:45rem; }
.product-detail .left .main img { object-fit:cover; height:100%; width:100%; }
.product-detail .right span { display:inline-block; font-size:1.5rem; margin-bottom:1rem; }
.product-detail .right h1 { font-size:4rem; line-height:1.2; margin-bottom:2rem; }
.product-detail .right .price { font-size:2rem; color:var(--black); margin-bottom:2rem; }
.product-detail .right select { font-family:'Roboto',sans-serif; width:20rem; padding:.7rem; border:1px solid #ccc; appearance:none; outline:none; }
.product-detail .form { margin-bottom:3rem; }
.product-detail .form input { padding:.8rem; text-align:center; width:3.5rem; margin-right:2rem; }
.product-detail .form .addCart { background:var(--black); padding:.8rem 4rem; color:#fff; border-radius:3rem; }
.product-detail h3 { text-transform:uppercase; margin-bottom:2rem; }
@media only screen and (max-width:996px) { .product-detail .left { width:30rem; height:45rem; } .product-detail .details { gap:3rem; } }
@media only screen and (max-width:650px) { .product-detail .details { grid-template-columns:1fr; } .product-detail .left { width:100%; height:45rem; } }

/* Login Form */
.login-form { padding:5rem 0; max-width:50rem; margin:5rem auto; }
.login-form form { display:flex; flex-direction:column; }
.login-form form h1 { margin-bottom:1rem; }
.login-form form p { margin-bottom:2rem; }
.login-form form label { margin-bottom:1rem; }
.login-form form input { border:1px solid #ccc; outline:none; padding:1.5rem 0; text-indent:1rem; font-size:1.6rem; margin-bottom:2rem; border-radius:.5rem; }
.login-form form input::placeholder { font-size:1.6rem; color:#222; }
.login-form form button { outline:none; border:none; font-size:1.6rem; padding:1rem 3rem; margin-right:1.5rem; background-color:var(--black); color:white; cursor:pointer; }
.login-form form p a { color:dodgerblue; }

/* All Products sort */
.section .top { display:flex; align-items:center; justify-content:space-between; margin-bottom:4rem; }
.all-products .top select { font-family:'Roboto',sans-serif; width:20rem; padding:1rem; border:1px solid #ccc; appearance:none; outline:none; }
.pagination { display:flex; align-items:center; padding:3rem 0 5rem 0; }
.pagination span { display:inline-block; padding:1rem 1.5rem; border:1px solid var(--black); font-size:1.8rem; margin-bottom:2rem; cursor:pointer; transition:all 300ms ease-in-out; }
.pagination span:hover { background-color:var(--black); color:#fff; }

/* =================================================
   PHP-SPECIFIC STYLES (catalog, product, cart, auth)
   ================================================= */

/* Page hero bar */
.page-hero { background-color:var(--black); color:var(--white); padding:5rem 0; text-align:center; }
.page-hero h1 { font-size:4rem; font-weight:500; letter-spacing:.3rem; margin-bottom:.5rem; }
.page-hero p { font-size:1.4rem; opacity:.7; }

/* Catalog layout */
.catalog-main { padding:5rem 0 8rem; }
.catalog-layout { display:grid; grid-template-columns:24rem 1fr; gap:4rem; align-items:start; }
.catalog-sidebar .filter-block { margin-bottom:3rem; }
.catalog-sidebar .filter-block h3 { font-size:1.4rem; text-transform:uppercase; letter-spacing:.15rem; margin-bottom:1.5rem; padding-bottom:.8rem; border-bottom:1px solid #ddd; }
.catalog-sidebar ul li { margin-bottom:.5rem; }
.catalog-sidebar ul li a { font-size:1.4rem; color:#555; padding:.3rem 0; display:block; transition:color .2s; }
.catalog-sidebar ul li a:hover,.catalog-sidebar ul li a.active { color:var(--black); font-weight:500; }
.search-input { width:100%; padding:.8rem 1rem; border:1px solid #ddd; font-size:1.4rem; outline:none; margin-bottom:.8rem; }
.search-input:focus { border-color:var(--black); }
.btn-search { background:var(--black); color:var(--white); border:none; padding:.8rem 1.5rem; cursor:pointer; font-size:1.6rem; }
.catalog-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:2.5rem; flex-wrap:wrap; gap:1rem; }
.catalog-count { font-size:1.4rem; color:#666; }
.catalog-sort label { font-size:1.3rem; margin-right:.8rem; }
.catalog-sort select { padding:.6rem 1rem; border:1px solid #ccc; font-size:1.4rem; outline:none; cursor:pointer; }
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(22rem,1fr)); gap:3rem; }
.product-card { position:relative; }
.product-card .product-img { overflow:hidden; height:28rem; background:#f6f2f1; position:relative; }
.product-card .product-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.product-card:hover .product-img img { transform:scale(1.06); }
.product-overlay { position:absolute; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; }
.product-overlay span { color:#fff; font-size:1.4rem; letter-spacing:.1rem; border:1px solid #fff; padding:.6rem 1.8rem; }
.product-card:hover .product-overlay { opacity:1; }
.product-card .product-info { padding:1.2rem .5rem; }
.product-card .product-cat { font-size:1.1rem; color:#888; text-transform:uppercase; letter-spacing:.1rem; display:block; margin-bottom:.4rem; }
.product-card h4 { font-size:1.5rem; margin-bottom:.5rem; }
.product-card .price { font-size:1.5rem; font-weight:500; }
.btn-cart-quick { width:100%; padding:.9rem; background:var(--black); color:var(--white); border:none; font-size:1.3rem; cursor:pointer; margin-top:.8rem; transition:opacity .2s; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.btn-cart-quick:hover { opacity:.8; }
.btn-cart-quick.added { background:#27ae60; }
.empty-state { text-align:center; padding:8rem 0; }
.empty-state i { font-size:6rem; color:#ccc; margin-bottom:2rem; display:block; }
.empty-state h3 { font-size:2rem; margin-bottom:1rem; }
.empty-state p { font-size:1.5rem; color:#888; margin-bottom:2rem; }
.btn-outline { display:inline-block; padding:.9rem 2.5rem; border:1px solid var(--black); font-size:1.4rem; transition:all .2s; }
.btn-outline:hover { background:var(--black); color:var(--white); }
@media only screen and (max-width:900px) { .catalog-layout { grid-template-columns:1fr; } .catalog-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:2rem; } }
@media only screen and (max-width:567px) { .catalog-sidebar { grid-template-columns:1fr; } }

/* Product page (PHP) */
.product-main { padding:4rem 0 8rem; }
.breadcrumb { font-size:1.3rem; color:#888; margin-bottom:3rem; }
.breadcrumb a { color:#888; }
.breadcrumb a:hover { color:var(--black); }
.product-detail { display:grid; grid-template-columns:1fr 1.2fr; gap:6rem; margin-bottom:6rem; }
.product-gallery { }
.gallery-main { background:#f6f2f1; height:50rem; overflow:hidden; margin-bottom:1rem; }
.gallery-main img { width:100%; height:100%; object-fit:cover; }
.gallery-thumbs { display:flex; gap:1rem; flex-wrap:wrap; }
.gallery-thumbs .thumb { width:8rem; height:8rem; object-fit:cover; cursor:pointer; opacity:.6; transition:opacity .2s; border:2px solid transparent; }
.gallery-thumbs .thumb:hover,.gallery-thumbs .thumb.active { opacity:1; border-color:var(--black); }
.product-details { }
.product-cat-label { font-size:1.2rem; text-transform:uppercase; color:#888; letter-spacing:.15rem; display:block; margin-bottom:1rem; }
.product-title { font-size:3.5rem; line-height:1.2; margin-bottom:1.5rem; font-weight:500; }
.product-price { font-size:2.5rem; font-weight:500; margin-bottom:2rem; }
.product-desc { margin-bottom:2.5rem; font-size:1.5rem; line-height:1.8; color:#555; }
.size-selector { margin-bottom:2rem; }
.size-selector h3,.qty-selector h3 { font-size:1.4rem; text-transform:uppercase; letter-spacing:.1rem; margin-bottom:1.2rem; }
.size-buttons { display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:.8rem; }
.size-btn { padding:.8rem 1.5rem; border:1px solid #ccc; background:#fff; font-size:1.4rem; cursor:pointer; transition:all .2s; position:relative; }
.size-btn:hover:not([disabled]) { border-color:var(--black); }
.size-btn.selected { border-color:var(--black); background:var(--black); color:#fff; }
.size-btn.disabled,.size-btn[disabled] { opacity:.4; cursor:not-allowed; }
.out-of-stock,.low-stock { font-size:1rem; position:absolute; top:-.5rem; right:-.5rem; background:red; color:#fff; border-radius:50%; width:1.4rem; height:1.4rem; display:flex; align-items:center; justify-content:center; }
.low-stock { background:orange; }
.size-note { font-size:1.3rem; color:red; min-height:1.6rem; }
.qty-selector { margin-bottom:2rem; }
.qty-control { display:flex; align-items:center; gap:1rem; }
.qty-btn { width:3.5rem; height:3.5rem; border:1px solid #ccc; background:#fff; font-size:2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.qty-btn:hover { background:var(--black); color:#fff; }
.qty-control input { width:5rem; height:3.5rem; text-align:center; border:1px solid #ccc; font-size:1.6rem; }
.product-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.btn-primary { display:inline-flex; align-items:center; gap:.6rem; padding:1.2rem 3rem; background:var(--black); color:#fff; border:none; font-size:1.5rem; cursor:pointer; transition:opacity .2s; }
.btn-primary:hover { opacity:.8; }
.btn-primary.added { background:#27ae60; }
.product-meta { font-size:1.4rem; color:#666; }
.product-meta p { margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; }
.related-products { margin-top:6rem; }
.section-title { font-size:2.5rem; font-weight:500; text-transform:uppercase; margin-bottom:3rem; letter-spacing:.2rem; }
@media only screen and (max-width:900px) { .product-detail { grid-template-columns:1fr; gap:3rem; } }

/* Cart (PHP AJAX) */
.cart-main { padding:4rem 0 8rem; }
.page-title { font-size:3rem; font-weight:500; text-transform:uppercase; letter-spacing:.3rem; margin-bottom:3rem; }
.cart-layout { display:grid; grid-template-columns:1fr 32rem; gap:4rem; align-items:start; }
.cart-header { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 3rem; align-items:center; padding:1.2rem 0; border-bottom:2px solid var(--black); gap:1rem; font-size:1.2rem; text-transform:uppercase; letter-spacing:.1rem; color:#888; }
.cart-row { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 3rem; align-items:center; padding:1.5rem 0; border-bottom:1px solid #eee; gap:1rem; }
.cart-product { display:flex; align-items:center; gap:1.5rem; }
.cart-product img { width:8rem; height:8rem; object-fit:cover; background:#f6f2f1; }
.cart-product-info h4 { font-size:1.5rem; margin-bottom:.3rem; }
.cart-product-info h4 a { color:var(--black); }
.cart-size,.cart-cat { font-size:1.2rem; color:#888; }
.cart-price,.cart-subtotal { font-size:1.5rem; }
.cart-qty .qty-control { gap:.5rem; }
.cart-qty-btn { width:2.8rem; height:2.8rem; border:1px solid #ccc; background:#fff; font-size:1.6rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cart-qty-btn:hover { background:var(--black); color:#fff; }
.qty-val { min-width:2rem; text-align:center; font-size:1.5rem; }
.btn-remove { background:none; border:none; font-size:2rem; color:#ccc; cursor:pointer; transition:color .2s; padding:0; }
.btn-remove:hover { color:red; }
.cart-summary { background:#f6f2f1; padding:2.5rem; }
.cart-summary h3 { font-size:1.8rem; font-weight:500; text-transform:uppercase; letter-spacing:.1rem; margin-bottom:2rem; }
.summary-line { display:flex; justify-content:space-between; margin-bottom:1.2rem; font-size:1.5rem; }
.summary-total { display:flex; justify-content:space-between; font-size:1.8rem; font-weight:700; margin-bottom:2rem; }
.cart-summary hr { border:none; border-top:1px solid #ddd; margin-bottom:2rem; }
.btn-checkout { width:100%; padding:1.4rem; background:var(--black); color:#fff; border:none; font-size:1.5rem; cursor:pointer; transition:opacity .2s; margin-bottom:1rem; }
.btn-checkout:hover { opacity:.8; }
.order-success { display:flex; flex-direction:column; align-items:center; gap:1rem; padding:2rem; text-align:center; background:#e8f5e9; }
.order-success i { font-size:4rem; color:#27ae60; }
.order-success h4 { font-size:1.8rem; }
.order-success p { font-size:1.4rem; color:#555; }
@media only screen and (max-width:900px) { .cart-layout { grid-template-columns:1fr; } }
@media only screen and (max-width:567px) { .cart-header { display:none; } .cart-row { grid-template-columns:1fr 1fr; } }

/* Auth forms (PHP) */
.auth-main { display:flex; align-items:center; justify-content:center; min-height:60vh; padding:5rem 2rem; }
.auth-card { background:#fff; border:1px solid #eee; padding:4rem; width:100%; max-width:44rem; box-shadow:0 2px 16px rgba(0,0,0,.06); }
.auth-card h1 { font-size:2.8rem; font-weight:500; text-transform:uppercase; letter-spacing:.3rem; margin-bottom:.8rem; }
.auth-sub { font-size:1.4rem; color:#888; margin-bottom:3rem; }
.auth-form .form-group { margin-bottom:1.8rem; }
.auth-form label { display:block; font-size:1.2rem; text-transform:uppercase; letter-spacing:.1rem; color:#888; margin-bottom:.6rem; }
.auth-form input[type=email],.auth-form input[type=password],.auth-form input[type=text] { width:100%; padding:1.2rem 1rem; border:1px solid #ddd; font-size:1.5rem; outline:none; border-radius:.3rem; transition:border-color .2s; box-sizing:border-box; }
.auth-form input:focus { border-color:var(--black); }
.input-eye { position:relative; }
.input-eye input { width:100%; padding-right:4rem; box-sizing:border-box; }
.eye-btn { position:absolute; right:.8rem; top:50%; transform:translateY(-50%); background:none; border:none; font-size:1.8rem; color:#888; cursor:pointer; }
.form-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.8rem; font-size:1.3rem; }
.checkbox-label { display:flex; align-items:center; gap:.6rem; cursor:pointer; }
.link-muted { color:#888; }
.link-muted:hover { color:var(--black); }
.btn-full { width:100%; padding:1.4rem; background:var(--black); color:#fff; border:none; font-size:1.5rem; cursor:pointer; transition:opacity .2s; margin-top:.5rem; }
.btn-full:hover { opacity:.8; }
.auth-switch { font-size:1.4rem; text-align:center; margin-top:2rem; color:#888; }
.auth-switch a { color:var(--black); font-weight:500; }
.demo-hint { margin-top:2rem; padding:1.2rem; background:#f6f2f1; font-size:1.3rem; color:#888; }
.demo-hint code { background:#e0e0e0; padding:.2rem .5rem; border-radius:.2rem; font-size:1.2rem; }
.alert { padding:1.2rem 1.5rem; border-radius:.3rem; font-size:1.4rem; margin-bottom:1.8rem; display:flex; align-items:flex-start; gap:.8rem; }
.alert-error { background:#ffeaea; border:1px solid #f5c6c6; color:#c0392b; }
.alert-error ul { margin:.5rem 0 0 1.5rem; }
.alert-success { background:#e8f5e9; border:1px solid #a5d6a7; color:#27ae60; }

/* Cart counter badge */
.cart-count { background-color:var(--black); color:var(--white); border-radius:50%; font-size:1.3rem; height:2rem; width:2rem; justify-content:center; position:absolute; top:3px; right:-3px; }

/* Toast notifications */
#toast { position:fixed; top:2rem; right:2rem; z-index:9999; padding:1.4rem 2rem; border-radius:.4rem; font-size:1.5rem; display:flex; align-items:center; gap:1rem; max-width:35rem; min-width:22rem; box-shadow:0 4px 18px rgba(0,0,0,.18); opacity:0; transform:translateX(130%); transition:opacity .3s ease,transform .3s ease; pointer-events:none; }
#toast.show { opacity:1; transform:translateX(0); pointer-events:auto; }
#toast.toast-success { background:#27ae60; color:#fff; }
#toast.toast-error   { background:#c0392b; color:#fff; }
#toast.toast-warning { background:#f39c12; color:#fff; }
.input-error { border-color:#c0392b !important; background:#fff5f5 !important; }