/* Martyn Eshop — inherits theme fonts/colors via CSS variables with fallbacks */
:root {
  --me-accent:     var(--e-global-color-accent,     #0073aa);
  --me-text:       var(--e-global-color-text,        #333);
  --me-border:     #e0e0e0;
  --me-bg:         #fff;
  --me-sale:       #e74c3c;
  --me-star:       #f0b400;
  --me-radius:     8px;
  --me-shadow:     0 2px 12px rgba(0,0,0,.08);
}

.me-catalog, .me-single, .me-cart-page { font-family: inherit; color: var(--me-text); }

/* ── Category nav ── */
.me-cat-nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.me-cat-filter { padding:6px 14px; border:1px solid var(--me-border); border-radius:20px; text-decoration:none; color:var(--me-text); font-size:14px; transition:.15s; }
.me-cat-filter:hover, .me-cat-filter.active { background:var(--me-accent); color:#fff; border-color:var(--me-accent); }
.me-cat-sub { font-size:13px; opacity:.85; }

/* ── Toolbar ── */
.me-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.me-view-toggle { display:flex; gap:4px; }
.me-view-btn { background:none; border:1px solid var(--me-border); padding:5px 10px; cursor:pointer; border-radius:4px; font-size:16px; }
.me-view-btn.active { background:var(--me-accent); color:#fff; border-color:var(--me-accent); }
.me-count { font-size:13px; color:#888; }

/* ── Grid ── */
.me-products.me-view-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px; }

/* ── List ── */
.me-products.me-view-list { display:flex; flex-direction:column; gap:12px; }
.me-products.me-view-list .me-product-card { display:flex; gap:16px; align-items:flex-start; }
.me-products.me-view-list .me-card-img { flex:0 0 120px; height:90px; }
.me-products.me-view-list .me-card-img img { height:90px; }

/* ── Card ── */
.me-product-card { position:relative; background:var(--me-bg); border:1px solid var(--me-border); border-radius:var(--me-radius); box-shadow:var(--me-shadow); overflow:hidden; transition:box-shadow .2s; }
.me-product-card:hover { box-shadow:0 4px 20px rgba(0,0,0,.14); }
.me-card-img { overflow:hidden; background:#f5f5f5; height:180px; cursor:pointer; }
.me-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.me-card-img:hover img { transform:scale(1.04); }
.me-no-img { display:flex; align-items:center; justify-content:center; height:100%; font-size:40px; color:#ccc; }
.me-card-body { padding:14px; }
.me-card-title { margin:0 0 6px; font-size:15px; cursor:pointer; color:var(--me-accent); }
.me-card-title:hover { text-decoration:underline; }
.me-card-desc { font-size:13px; color:#666; margin:0 0 8px; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.me-card-stars { color:var(--me-star); font-size:15px; margin-bottom:6px; }
.me-card-price { margin-bottom:10px; }
.me-card-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* Badges */
.me-badge-fav, .me-badge-sale { position:absolute; top:10px; left:10px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; z-index:1; }
.me-badge-fav  { background:#f0b400; color:#fff; }
.me-badge-sale { background:var(--me-sale); color:#fff; top:10px; left:auto; right:10px; }

/* Prices */
.me-price-old  { color:#aaa; font-size:13px; text-decoration:line-through; margin-right:4px; }
.me-price-sale { color:var(--me-sale); font-size:17px; }
.me-price-main { font-size:17px; }

/* Buttons */
.me-btn-detail, .me-btn-cart, .me-btn-order, .me-btn-cart-lg {
  padding:7px 14px; border:none; border-radius:4px; cursor:pointer; font-size:14px; font-weight:600; transition:.15s;
}
.me-btn-detail  { background:#f0f0f0; color:var(--me-text); }
.me-btn-detail:hover { background:#e0e0e0; }
.me-btn-cart, .me-btn-cart-lg { background:var(--me-accent); color:#fff; }
.me-btn-cart:hover, .me-btn-cart-lg:hover { opacity:.88; }
.me-btn-order { background:var(--me-accent); color:#fff; padding:10px 28px; font-size:16px; }
.me-btn-order:hover { opacity:.88; }

/* Toast */
.me-cart-toast { position:fixed; bottom:24px; right:24px; background:#333; color:#fff; padding:12px 18px; border-radius:6px; z-index:9999; display:flex; align-items:center; gap:12px; font-size:14px; box-shadow:0 4px 16px rgba(0,0,0,.2); }
.me-cart-link  { color:#7ec8e3; text-decoration:none; font-weight:600; }
.me-toast-close { background:none; border:none; color:#fff; cursor:pointer; font-size:18px; }

/* ── Lightbox ── */
.me-lightbox { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; }
.me-lightbox-overlay { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.me-lightbox-box { position:relative; background:var(--me-bg); border-radius:var(--me-radius); padding:28px; width:900px; max-width:96vw; max-height:92vh; overflow-y:auto; box-shadow:0 8px 40px rgba(0,0,0,.3); }
.me-lightbox-close { position:absolute; top:10px; right:14px; background:none; border:none; font-size:26px; cursor:pointer; color:#555; z-index:1; }

/* ── Single product ── */
.me-single { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
.me-single-main-img img { width:100%; border-radius:var(--me-radius); border:1px solid var(--me-border); }
.me-single-thumbs { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.me-single-thumb { width:70px; height:70px; object-fit:cover; border-radius:4px; border:2px solid var(--me-border); cursor:pointer; }
.me-single-thumb.active { border-color:var(--me-accent); }
.me-no-img-lg { height:280px; display:flex; align-items:center; justify-content:center; font-size:80px; color:#ccc; border:1px solid var(--me-border); border-radius:var(--me-radius); }
.me-single-info h2 { margin:0 0 8px; font-size:24px; }
.me-stars-lg { font-size:20px; }
.me-single-price { margin:12px 0; }
.me-price-sale-lg { font-size:22px; }
.me-price-main { font-size:22px; }
.me-single-short { color:#555; font-size:15px; margin-bottom:14px; }
.me-single-add { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.me-qty { width:60px; padding:8px; border:1px solid var(--me-border); border-radius:4px; font-size:15px; text-align:center; }
.me-single-desc { margin-top:20px; border-top:1px solid var(--me-border); padding-top:16px; line-height:1.7; }

/* ── Cart ── */
.me-cart-table { width:100%; border-collapse:collapse; margin-bottom:16px; }
.me-cart-table th, .me-cart-table td { padding:10px 8px; border-bottom:1px solid var(--me-border); vertical-align:middle; }
.me-cart-table th { font-weight:700; font-size:13px; text-transform:uppercase; color:#888; }
.me-cart-name { display:flex; align-items:center; gap:10px; }
.me-cart-name img { width:56px; height:44px; object-fit:cover; border-radius:4px; }
.me-cart-qty { width:56px; padding:5px; border:1px solid var(--me-border); border-radius:4px; text-align:center; }
.me-cart-remove { background:none; border:none; color:#e74c3c; font-size:16px; cursor:pointer; }
.me-cart-total { text-align:right; font-size:18px; margin-bottom:24px; }
.me-cart-empty { color:#888; font-size:16px; }
.me-order-form h3 { margin-bottom:14px; }
.me-grid-2-pub { display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
.me-field { margin-bottom:12px; }
.me-field label { display:block; font-size:13px; font-weight:600; margin-bottom:4px; }
.me-field input, .me-field textarea, .me-field select { width:100%; padding:8px 10px; border:1px solid var(--me-border); border-radius:4px; font-size:14px; box-sizing:border-box; font-family:inherit; }
.me-order-success { background:#eafaf1; border:1px solid #2ecc71; color:#1a7a3e; padding:14px 18px; border-radius:6px; font-weight:600; }

@media (max-width:700px) {
  .me-single { grid-template-columns:1fr; }
  .me-grid-2-pub { grid-template-columns:1fr; }
  .me-products.me-view-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
  .me-cart-table th:nth-child(2), .me-cart-table td:nth-child(2) { display:none; }
}

/* ── Cart nav button ── */
.me-nav-cart-li { list-style:none; display:flex; align-items:center; }
.me-cart-btn-wrap { display:inline-flex; align-items:center; }
.me-cart-nav-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--me-accent); color:#fff;
  border:none; border-radius:24px;
  padding:7px 16px 7px 12px;
  cursor:pointer; font-size:14px; font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  transition:opacity .15s, transform .1s;
  white-space:nowrap;
}
.me-cart-nav-btn:hover { opacity:.88; transform:translateY(-1px); }
.me-cart-nav-icon { font-size:18px; line-height:1; }
.me-cart-nav-info { display:flex; flex-direction:column; line-height:1.2; }
.me-cart-nav-label { font-size:10px; opacity:.85; text-transform:uppercase; letter-spacing:.04em; }
.me-cart-nav-total { font-size:14px; font-weight:700; }
.me-cart-nav-count {
  background:#fff; color:var(--me-accent);
  font-size:11px; font-weight:800;
  min-width:20px; height:20px;
  border-radius:10px; display:inline-flex;
  align-items:center; justify-content:center;
  padding:0 5px;
}

/* ── Cart modal ── */
.me-cart-modal { position:fixed; inset:0; z-index:99990; display:flex; align-items:flex-start; justify-content:flex-end; }
.me-cart-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.me-cart-modal-box {
  position:relative; z-index:1;
  background:#fff; width:480px; max-width:100vw;
  height:100vh; max-height:100vh;
  display:flex; flex-direction:column;
  box-shadow:-4px 0 32px rgba(0,0,0,.18);
  animation:me-slide-in .22s ease;
}
@keyframes me-slide-in { from { transform:translateX(100%); } to { transform:translateX(0); } }
.me-cart-modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--me-border);
  background:var(--me-accent); color:#fff;
}
.me-cart-modal-head h3 { margin:0; font-size:18px; }
.me-cart-modal-close { background:none; border:none; color:#fff; font-size:26px; cursor:pointer; line-height:1; opacity:.85; }
.me-cart-modal-close:hover { opacity:1; }
.me-cart-modal-body { flex:1; overflow-y:auto; padding:18px 22px; }
.me-cart-modal-loading { text-align:center; padding:40px; color:#888; }

/* Modal cart table */
.me-modal-cart-table { width:100%; border-collapse:collapse; margin-bottom:12px; }
.me-modal-cart-table td { padding:8px 4px; border-bottom:1px solid var(--me-border); vertical-align:middle; }
.me-mct-img img { width:48px; height:40px; object-fit:cover; border-radius:4px; }
.me-mct-name { font-size:14px; font-weight:500; padding:8px 10px !important; }
.me-mct-qty input { width:52px; text-align:center; padding:5px; border:1px solid var(--me-border); border-radius:4px; }
.me-mct-sub { font-weight:600; white-space:nowrap; font-size:14px; }
.me-modal-cart-total { text-align:right; font-size:17px; margin:8px 0 18px; padding-top:10px; border-top:2px solid var(--me-border); }
.me-modal-cart-empty { text-align:center; padding:40px 20px; color:#888; font-size:15px; line-height:1.6; }

/* Modal cart empty state */
.me-modal-cart-empty { text-align:center; padding:40px 20px; color:#888; font-size:15px; line-height:1.6; }
.me-mce-icon { font-size:40px; margin-bottom:10px; }

/* Modal order form */
.me-modal-cart-form {
  margin-top:4px;
  border-top:2px solid var(--me-border);
  padding-top:20px;
}
.me-mcf-heading {
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:#555;
  margin-bottom:16px;
}
.me-mcf-heading-icon { font-size:18px; }
.me-mcf-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.me-mcf-field { display:flex; flex-direction:column; margin-bottom:10px; }
.me-mcf-label { font-size:12px; font-weight:600; color:#555; margin-bottom:5px; letter-spacing:.02em; }
.me-mcf-req { color:var(--me-sale); }
.me-modal-cart-form input,
.me-modal-cart-form textarea {
  padding:9px 12px;
  border:1.5px solid var(--me-border);
  border-radius:6px;
  font-size:14px;
  font-family:inherit;
  width:100%;
  box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
  background:#fafafa;
  color:var(--me-text);
}
.me-modal-cart-form input:focus,
.me-modal-cart-form textarea:focus {
  outline:none;
  border-color:var(--me-accent);
  box-shadow:0 0 0 3px rgba(0,115,170,.12);
  background:#fff;
}
.me-modal-cart-form textarea { resize:vertical; min-height:70px; }
.me-btn-order-modal {
  width:100%; padding:13px;
  background:var(--me-accent); color:#fff;
  border:none; border-radius:8px;
  font-size:15px; font-weight:700;
  cursor:pointer; margin-top:8px;
  transition:opacity .15s, transform .1s;
  letter-spacing:.02em;
}
.me-btn-order-modal:hover { opacity:.9; transform:translateY(-1px); }
.me-btn-order-modal:active { transform:translateY(0); }
.me-order-success--modal {
  margin-top:16px; text-align:center; font-size:15px;
}

@media (max-width:500px) {
  .me-cart-modal-box { width:100vw; }
  .me-mcf-row-2 { grid-template-columns:1fr; }
}
