/* ============================================================
   FEMZA — CORE STYLESHEET
   Base styles for every page. premium.css loads after this.
   ============================================================ */
* { box-sizing: border-box; }
body { margin:0; font-family:'Inter','Segoe UI',Arial,sans-serif; color:#222; background:#fafafa; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
a { text-decoration:none; color:inherit; }

/* Alerts */
.alert { padding:10px 16px; margin:10px 0; border-radius:6px; }
.alert-success { background:#e6f6ea; color:#1a7a35; }
.alert-error { background:#fde8e8; color:#b02a2a; }

/* Buttons */
.btn { display:inline-block; padding:10px 18px; border-radius:6px; border:none; cursor:pointer; font-size:14px; }
.btn-primary { background:#c2185b; color:#fff; }
.btn-secondary { background:#333; color:#fff; }
.btn-outline { background:#fff; border:1px solid #c2185b; color:#c2185b; }
.btn-danger { background:#b02a2a; color:#fff; }
.btn-block { display:block; width:100%; text-align:center; margin-top:10px; }
.btn-link { background:none; border:none; color:#c2185b; cursor:pointer; text-decoration:underline; }

/* Product grid */
.product-section { margin:32px 0; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.product-card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.08); transition:transform .15s; position:relative; }
.product-card:hover { transform:translateY(-4px); }
.product-image { position:relative; aspect-ratio:3/4; background:#f0f0f0; overflow:hidden; }
.product-image img { width:100%; height:100%; object-fit:cover; }
.badge-discount { position:absolute; top:8px; left:8px; background:#c2185b; color:#fff; font-size:11px; padding:3px 8px; border-radius:4px; }
.product-info { padding:12px; }
.product-info h3 { font-size:14px; margin:0 0 4px; }
.brand { font-size:12px; color:#888; margin:0 0 6px; }
.price .final-price { font-weight:700; }
.price .original-price { text-decoration:line-through; color:#999; font-size:12px; margin-left:6px; }
.rating { font-size:12px; color:#e69500; }

/* Shop layout */
.shop-layout { display:flex; gap:28px; align-items:flex-start; }
.filters { width:220px; flex-shrink:0; background:#fff; padding:16px; border-radius:8px; }
.filters h4 { margin:14px 0 6px; font-size:13px; }
.filters select, .filters input { width:100%; padding:6px; margin-bottom:6px; border:1px solid #ddd; border-radius:4px; }
.shop-results { flex:1; }
.shop-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.empty-state { padding:40px; text-align:center; color:#888; }

/* Product detail */
.product-detail { display:flex; gap:36px; margin:24px 0; flex-wrap:wrap; }
.product-gallery { flex:1; min-width:280px; display:flex; flex-direction:column; gap:8px; }
.product-gallery img { width:100%; border-radius:8px; }
.product-main { flex:1; min-width:300px; }
.add-to-cart-form,.address-form,.review-form { display:flex; flex-direction:column; gap:8px; max-width:340px; margin:14px 0; }
.add-to-cart-form select,.add-to-cart-form input { padding:8px; border:1px solid #ddd; border-radius:4px; }
.delivery-check { margin:16px 0; }
.verified-badge { background:#e6f6ea; color:#1a7a35; font-size:11px; padding:2px 6px; border-radius:4px; margin-left:6px; }
.review { border-bottom:1px solid #eee; padding:14px 0; }

/* Cart & checkout */
.cart-layout,.checkout-layout { display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap; }
.cart-items { flex:2; min-width:300px; }
.cart-item { display:flex; align-items:center; gap:14px; background:#fff; padding:12px; border-radius:8px; margin-bottom:10px; }
.cart-item img { width:70px; height:90px; object-fit:cover; border-radius:6px; }
.cart-item-info { flex:1; }
.qty-form input { width:60px; padding:6px; }
.stock-warning { color:#b02a2a; font-size:12px; }
.cart-summary { flex:1; min-width:260px; background:#fff; padding:20px; border-radius:8px; position:sticky; top:80px; }
.cart-summary .total { font-weight:700; font-size:18px; margin-top:10px; }
.checkout-main { flex:2; min-width:320px; }
.checkout-block { background:#fff; padding:18px; border-radius:8px; margin-bottom:16px; }
.address-option { display:block; padding:8px 0; }
.payment-options label { display:block; margin:8px 0; }

/* Auth forms */
.auth-form { max-width:380px; margin:40px auto; background:#fff; padding:30px; border-radius:8px; }
.auth-form form { display:flex; flex-direction:column; gap:10px; }
.auth-form input { padding:10px; border:1px solid #ddd; border-radius:4px; }

/* Orders */
.orders-list .order-row { display:flex; justify-content:space-between; align-items:center; background:#fff; padding:14px; border-radius:8px; margin-bottom:10px; flex-wrap:wrap; gap:10px; }
.order-status { padding:3px 10px; border-radius:12px; font-size:12px; }
.status-placed,.status-packed { background:#fff3cd; color:#856404; }
.status-shipped { background:#cfe2ff; color:#084298; }
.status-delivered { background:#e6f6ea; color:#1a7a35; }
.status-cancelled,.status-returned { background:#fde8e8; color:#b02a2a; }

/* Tracking */
.tracking-timeline { display:flex; margin:20px 0; }
.timeline-step { flex:1; text-align:center; position:relative; color:#aaa; font-size:13px; }
.timeline-step .dot { display:block; width:14px; height:14px; border-radius:50%; background:#ddd; margin:0 auto 6px; }
.timeline-step.done { color:#1a7a35; font-weight:600; }
.timeline-step.done .dot { background:#1a7a35; }
.order-item-row { display:flex; justify-content:space-between; align-items:center; background:#fff; padding:10px 14px; border-radius:6px; margin-bottom:8px; flex-wrap:wrap; gap:10px; }

/* Account */
.account-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.account-card { background:#fff; padding:18px; border-radius:8px; }
.tier { font-weight:700; color:#c2185b; }

/* Footer base */
.site-footer { margin-top:60px; padding:30px 0; text-align:center; color:#888; background:#fff; border-top:1px solid #eee; }
.footer-links a { margin:0 6px; }

/* Admin/staff */
.dash-nav { background:#1f1f2e; color:#fff; width:220px; min-height:100vh; padding:20px; position:fixed; }
.dash-nav a { display:block; color:#ccc; padding:10px 0; }
.dash-nav a:hover,.dash-nav a.active { color:#fff; font-weight:600; }
.dash-body { margin-left:240px; padding:24px; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:#fff; padding:18px; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.stat-card .value { font-size:26px; font-weight:700; }
table.data-table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; }
table.data-table th,table.data-table td { padding:10px 12px; border-bottom:1px solid #eee; text-align:left; font-size:14px; }
table.data-table th { background:#f5f5f5; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:600px; }
.form-grid label { display:flex; flex-direction:column; font-size:13px; gap:4px; }
.form-grid input,.form-grid select,.form-grid textarea { padding:8px; border:1px solid #ddd; border-radius:4px; }

/* Breadcrumbs */
.breadcrumbs { margin:14px 0; font-size:13px; color:#888; }
.breadcrumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0; }
.breadcrumbs li:not(:last-child)::after { content:"›"; margin-left:6px; color:#ccc; }
.breadcrumbs a { color:#888; }
.breadcrumbs a:hover { color:#c2185b; }
.breadcrumbs [aria-current="page"] { color:#333; font-weight:600; }

/* Pagination */
.pagination { display:flex; gap:6px; justify-content:center; margin:28px 0; flex-wrap:wrap; }
.pagination a { padding:8px 14px; border:1px solid #ddd; border-radius:6px; background:#fff; }
.pagination a.active { background:#c2185b; color:#fff; border-color:#c2185b; }
.pagination a:hover:not(.active) { border-color:#c2185b; color:#c2185b; }

/* Newsletter box (base) */
.newsletter-box { background:#fff5f8; border-radius:10px; padding:24px; text-align:center; margin-bottom:24px; }
.newsletter-box h3 { margin:0 0 6px; }
.newsletter-form { display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.newsletter-form input { padding:10px; border:1px solid #ddd; border-radius:4px; width:260px; max-width:100%; }

/* Stock alert */
.stock-alert-box { background:#fff8e6; border:1px solid #ffe4a3; border-radius:8px; padding:14px; margin:14px 0; max-width:340px; }
.stock-alert-box select { padding:6px; margin-right:6px; }

/* Focus + polish */
.product-card a:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid #c2185b; outline-offset:2px; }
img { max-width:100%; }
.product-image img { transition:transform .25s ease; }
.product-card:hover .product-image img { transform:scale(1.04); }
h1,h2,h3 { line-height:1.25; }

/* Skip link */
.skip-link { position:absolute; left:-999px; top:0; background:#c2185b; color:#fff; padding:10px 16px; z-index:100; }
.skip-link:focus { left:10px; top:10px; }

/* Address list */
.address-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-bottom:14px; }
.address-card { background:#faf9f9; border:1px solid #eee; border-radius:8px; padding:12px; font-size:14px; }
.address-actions { display:flex; gap:10px; margin-top:8px; font-size:13px; }

/* Gallery */
.gallery-main { border-radius:8px; overflow:hidden; aspect-ratio:3/4; background:#f0f0f0; }
.gallery-main img { width:100%; height:100%; object-fit:cover; }
.gallery-thumbs { display:flex; gap:8px; margin-top:8px; overflow-x:auto; }
.gallery-thumb { width:60px; height:75px; object-fit:cover; border-radius:6px; cursor:pointer; opacity:.6; border:2px solid transparent; transition:opacity .15s,border-color .15s; }
.gallery-thumb:hover { opacity:.85; }
.gallery-thumb.active { opacity:1; border-color:#c2185b; }

/* Quantity stepper */
.qty-stepper { display:flex; align-items:center; border:1px solid #ddd; border-radius:4px; width:fit-content; }
.qty-stepper input { border:none; width:50px; text-align:center; padding:8px 0; -moz-appearance:textfield; }
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.qty-btn { background:#f5f5f5; border:none; width:32px; height:36px; cursor:pointer; font-size:16px; color:#333; }
.qty-btn:hover { background:#e8e8e8; }

/* Quick View button on base cards */
.quick-view-btn { position:absolute; left:8px; right:8px; bottom:8px; z-index:2; background:rgba(0,0,0,.75); color:#fff; border:none; padding:8px; border-radius:6px; font-size:12px; cursor:pointer; opacity:0; transform:translateY(6px); transition:opacity .2s,transform .2s; }
.product-card:hover .quick-view-btn { opacity:1; transform:translateY(0); }

/* Quick View modal */
.quick-view-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000; align-items:center; justify-content:center; padding:20px; }
.quick-view-overlay.open { display:flex; }
.quick-view-modal { background:#fff; border-radius:10px; max-width:640px; width:100%; display:flex; gap:20px; padding:24px; position:relative; max-height:90vh; overflow-y:auto; }
.quick-view-modal img { width:220px; height:280px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.quick-view-details { display:flex; flex-direction:column; gap:8px; justify-content:center; }
.quick-view-close { position:absolute; top:12px; right:16px; background:none; border:none; font-size:24px; cursor:pointer; color:#888; }
@media (max-width:600px) { .quick-view-modal { flex-direction:column; } .quick-view-modal img { width:100%; height:220px; } }

/* Fade-in */
.fade-in-section { opacity:0; transform:translateY(16px); transition:opacity .5s ease,transform .5s ease; }
.fade-in-section.in-view { opacity:1; transform:translateY(0); }

/* Back to top */
.back-to-top { position:fixed; bottom:24px; right:24px; background:#c2185b; color:#fff; border:none; width:44px; height:44px; border-radius:50%; font-size:18px; cursor:pointer; z-index:50; opacity:0; pointer-events:none; transition:opacity .2s; }
.back-to-top.visible { opacity:1; pointer-events:auto; }

/* Base responsive */
@media (max-width:900px) {
  .shop-layout { flex-direction:column; }
  .filters { width:100%; }
  .product-detail { flex-direction:column; }
}