/* ================================
   JAIFORE SERVICES — SHARED STOREFRONT STYLES
   ================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Colours, fonts, radius and motion live in tokens.css (loaded first). */

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

/* Nav + footer: see shell.css */

.cart-btn {
  position: relative;
  background: none; border: 2px solid var(--ink);
  color: var(--ink); padding: 0.4rem 0.6rem;
  border-radius: var(--radius); cursor: pointer;
  display: flex; align-items: center; gap: 0.3rem;
  transition: border-color var(--transition), color var(--transition);
  text-decoration: none;
}
.cart-btn:hover { border-color: var(--purple); color: var(--purple); }

.cart-count {
  background: var(--purple-fill); color: #fff;
  font-size: 0.6rem; font-weight: 700;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: -6px; right: -6px;
}

/* ================================
   HERO
   ================================ */
.hero {
  padding: 6.25rem 3rem 2.25rem;
  position: relative; z-index: 1;
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
}

.hero-inner { max-width: 700px; }

.hero-tag {
  font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--purple); margin-bottom: 1rem;
  opacity: 0; animation: fadeUp 0.8s 0.2s forwards;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em; margin-bottom: 0.75rem;
  opacity: 0; animation: fadeUp 0.8s 0.35s forwards;
}

.hero-title em { font-style: italic; color: var(--purple); font-weight: 700; }
.hero-title .outline { -webkit-text-stroke: 2px var(--ink); color: transparent; }

.hero-sub {
  font-size: 0.92rem; font-weight: 400;
  color: var(--muted); line-height: 1.65; max-width: 460px;
  opacity: 0; animation: fadeUp 0.8s 0.5s forwards;
}

.hero-scroll-line { display: none; } /* decorative line removed in the editorial pass */

/* ================================
   SERVICES MAIN
   ================================ */
.services-main {
  position: relative; z-index: 1;
  padding: 0 3rem 6rem;
  max-width: 1400px; margin: 0 auto;
}

/* ================================
   CATEGORY SECTION
   ================================ */
.category-section { padding: 2.5rem 0 1.75rem; }

.cat-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem; align-items: start;
  margin-bottom: 2rem;
  padding-bottom: 1.1rem;
  border-bottom: 2px solid var(--ink);
}

.cat-label {
  font-family: var(--font-display);
  font-size: 1.9rem; font-weight: 800;
  color: var(--muted2); line-height: 1;
  letter-spacing: -0.04em; opacity: 0.4;
  padding-top: 0.25rem;
}

.cat-title-wrap { padding-top: 0.5rem; }

.cat-title {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 0.4rem;
}

.cat-desc {
  font-size: 0.875rem; color: var(--muted);
  line-height: 1.6; max-width: 500px;
}

.cat-view-all {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--purple); text-decoration: none;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap; padding-top: 0.75rem;
  transition: gap var(--transition), color var(--transition);
}
.cat-view-all:hover { color: var(--ink); gap: 0.75rem; }

/* ================================
   PRODUCTS GRID
   ================================ */
/* Editorial product card: photo first, text on the page, actions underneath */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem 1.5rem;
}

.skeleton-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); height: 380px;
  position: relative; overflow: hidden;
}
.skeleton-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 1.5s infinite;
}

.product-card {
  background: transparent; border: none;
  border-radius: var(--radius); cursor: pointer;
  transition: transform var(--transition);
  opacity: 0; animation: fadeUp 0.6s forwards;
}
.product-card:hover { transform: translateY(-3px); }

.card-img {
  width: 100%; aspect-ratio: 4/5;
  background: var(--bg-soft); overflow: hidden; position: relative;
  border-radius: var(--radius);
}
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; border-radius: 0; }
.product-card:hover .card-img img { transform: scale(1.04); }

.card-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--bg-soft), var(--purple-tint));
}

.card-badge {
  position: absolute; top: 0.7rem; left: 0.7rem;
  background: var(--surface); color: var(--ink);
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 1px;
  box-shadow: var(--shadow-sm);
}
.card-badge.out-of-stock { background: var(--error); color: #fff; }

/* Wishlist heart lives on the photo (still the same button, same behaviour) */
.card-img .wishlist-heart-btn {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.card-img .wishlist-heart-btn.saved { background: #fff; }

.card-body { padding: 0.85rem 0.1rem 0; }

.card-name {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600; margin-bottom: 0.2rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.card-desc {
  font-size: 0.78rem; color: var(--muted);
  line-height: 1.5; margin-bottom: 0.75rem;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

.card-price { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--ink-2); margin-bottom: 0.65rem; }
.card-price .currency { font-size: 0.75rem; color: var(--muted); font-weight: 400; margin-right: 1px; }

.card-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.card-action {
  background: var(--purple-fill); border: none; color: var(--on-purple);
  font-family: var(--font-body); font-size: 0.7rem;
  font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.55rem 1rem; border-radius: var(--radius);
  cursor: pointer; transition: background var(--transition); white-space: nowrap;
}
.card-action:hover { background: var(--ink); }
.card-action:disabled { opacity: 0.45; cursor: not-allowed; }
.card-action:disabled:hover { background: var(--purple-fill); }

.configure-btn {
  display: flex; align-items: center; gap: 0.4rem;
  background: none; border: 1px solid var(--purple);
  color: var(--purple);
  font-family: var(--font-body); font-size: 0.7rem;
  font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.5rem 0.85rem; border-radius: var(--radius);
  cursor: pointer; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.configure-btn:hover { background: var(--purple-fill); color: var(--on-purple); }

.webdev-grid .product-card .card-img { aspect-ratio: 16/9; }
.site-domain { font-size: 0.65rem; letter-spacing: 0.1em; color: var(--purple); margin-bottom: 0.25rem; }

.size-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.size-chip {
  font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--border); padding: 0.15rem 0.4rem;
  border-radius: 1px; color: var(--muted);
}

/* ================================
   LOAD MORE
   ================================ */
.load-more-wrap { display: flex; justify-content: center; padding-top: 2.5rem; }

.load-more-btn {
  background: transparent; border: 2px solid var(--ink); color: var(--ink);
  font-family: var(--font-body); font-size: 0.78rem;
  font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.75rem 2.5rem; border-radius: var(--radius);
  cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
  transition: background var(--transition), color var(--transition);
}
.load-more-btn:hover { background: var(--ink); color: var(--bg); }

/* ================================
   SECTION DIVIDER
   ================================ */
.section-divider { display: flex; align-items: center; gap: 1rem; padding: 0 0 1rem; }
.section-divider span { flex: 1; height: 1px; background: var(--border); }
.divider-dot {
  flex: none !important; width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple-fill); box-shadow: 0 0 8px var(--purple-glow);
}

/* ================================
   CART SIDEBAR
   ================================ */
.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; opacity: 0; pointer-events: none; transition: opacity var(--transition); }
.cart-overlay.open { opacity: 1; pointer-events: all; }

.cart-sidebar {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px;
  background: var(--bg); border-left: 2px solid var(--ink);
  z-index: 201; transform: translateX(100%);
  transition: transform var(--transition); display: flex; flex-direction: column;
}
.cart-sidebar.open { transform: translateX(0); }

.cart-top { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid var(--border); }
.cart-top h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
.cart-close { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; transition: color var(--transition); }
.cart-close:hover { color: var(--ink); }

.cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.cart-empty { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 3rem 0; font-style: italic; }

.cart-item { display: flex; gap: 1rem; align-items: flex-start; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.cart-item-snapshot { width: 56px; height: 56px; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
.cart-item-info { flex: 1; }
.cart-item-name { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.2rem; }
.cart-item-meta { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.4rem; }
.cart-item-price { font-size: 0.9rem; color: var(--purple); font-weight: 700; }
.cart-item-designs { font-size: 0.68rem; color: var(--muted); margin-top: 0.2rem; }
.cart-item-remove { background: none; border: none; color: var(--muted); font-size: 0.75rem; cursor: pointer; padding: 0.2rem; transition: color var(--transition); }
.cart-item-remove:hover { color: var(--error); }

.cart-footer { padding: 1.5rem; border-top: 1px solid var(--border); }
.cart-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }

.checkout-btn {
  width: 100%; background: var(--ink); border: none; color: var(--bg);
  font-family: var(--font-body); font-size: 0.85rem;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.9rem; border-radius: var(--radius);
  cursor: pointer; transition: background var(--transition);
}
.checkout-btn:hover { background: var(--purple-fill); }

/* ================================
   PRODUCT MODAL
   Compact sizing: smaller padding, heading, price and description so the
   product details sit comfortably without filling the whole screen.
   ================================ */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 300; opacity: 0; pointer-events: none; transition: opacity var(--transition); }
.modal-overlay.open { opacity: 1; pointer-events: all; }

.product-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-48%) scale(0.96);
  width: 90%; max-width: 620px; max-height: 85vh;
  background: var(--bg); border: 2px solid var(--ink);
  border-radius: var(--radius); z-index: 301;
  overflow-y: auto; opacity: 0; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.product-modal.open { opacity: 1; pointer-events: all; transform: translate(-50%,-50%) scale(1); }

.modal-close { position: absolute; top: 0.8rem; right: 0.9rem; background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; z-index: 1; transition: color var(--transition); }
.modal-close:hover { color: var(--ink); }

.modal-inner { padding: 1.5rem; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.modal-img { border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border); aspect-ratio: 1 / 1; max-height: 300px; align-self: start; }
.modal-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.modal-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; background: var(--bg-soft); }

.modal-details { display: flex; flex-direction: column; gap: 0.8rem; }
.modal-category { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--purple); }
.modal-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.modal-price { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--purple); }
.modal-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.6; }

.modal-sizes label { font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.45rem; }
.modal-size-opts { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.size-opt { background: none; border: 1px solid var(--border); color: var(--ink); font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; padding: 0.3rem 0.6rem; border-radius: var(--radius); cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.size-opt:hover, .size-opt.selected { border-color: var(--purple); background: var(--purple-dim); color: var(--purple); }

/* Print-size options (graphic designs) — one per row: "Small · 3x3  $2.00" */
.print-opt { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex: 1 1 100%; text-align: left; }

.modal-configure-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: none; border: 1px solid var(--purple); color: var(--purple); font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.65rem; border-radius: var(--radius); cursor: pointer; transition: background var(--transition), color var(--transition); }
.modal-configure-btn:hover { background: var(--purple-fill); color: #fff; }

.modal-add-btn { background: var(--ink); border: none; color: var(--bg); font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.75rem; border-radius: var(--radius); cursor: pointer; transition: background var(--transition); margin-top: auto; }
.modal-add-btn:hover { background: var(--purple-fill); }
.modal-add-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.modal-add-btn:disabled:hover { background: var(--ink); }

.modal-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--purple); text-decoration: none; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color var(--transition); }
.modal-link:hover { color: var(--ink); }

/* ================================
   SIZE GUIDE MODAL (item 16)
   Shared between services.html and configurator.html — both load this
   stylesheet, so it only needs to exist here once.
   ================================ */
.size-guide-link {
  background: none; border: none;
  color: var(--purple);
  font-family: var(--font-body);
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer; padding: 0;
}
.size-guide-link:hover { color: var(--ink); }

.size-guide-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 400; opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.size-guide-overlay.open { opacity: 1; pointer-events: all; }

.size-guide-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-48%) scale(0.96);
  width: 90%; max-width: 520px; max-height: 80vh;
  background: var(--bg); border: 2px solid var(--ink);
  border-radius: var(--radius); z-index: 401;
  overflow-y: auto; opacity: 0; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  padding: 2rem;
}
.size-guide-modal.open { opacity: 1; pointer-events: all; transform: translate(-50%,-50%) scale(1); }

.size-guide-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; color: var(--muted);
  font-size: 1rem; cursor: pointer; transition: color var(--transition);
}
.size-guide-close:hover { color: var(--ink); }

.size-guide-title {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 700;
  margin-bottom: 1.2rem;
}

.size-guide-tabs {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.size-guide-tab {
  background: none; border: 1px solid var(--border);
  color: var(--muted); font-family: var(--font-body);
  font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.4rem 0.8rem; border-radius: var(--radius);
  cursor: pointer; transition: all var(--transition);
}
.size-guide-tab:hover  { border-color: var(--purple); color: var(--purple); }
.size-guide-tab.active { background: var(--purple-fill); border-color: var(--purple); color: #fff; }

.size-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.size-guide-table th, .size-guide-table td {
  padding: 0.6rem 0.7rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.size-guide-table th {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.sg-size-cell { font-weight: 700; text-align: left; }

.size-guide-note {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 1rem;
  line-height: 1.5;
}

.size-guide-empty {
  font-size: 0.82rem;
  color: var(--muted2);
  font-style: italic;
  padding: 1rem 0;
}

/* ================================
   JAIFORE — DESIGN PRODUCT QUANTITY STEPPER (item 18b)
   Paste into services.css. Uses the same CSS custom properties
   (--border, --purple-light, --font-body, --radius, --transition) that
   every other rule in this file already relies on, rather than hardcoded
   hex values — keeps this in sync automatically if the palette changes.
   ================================ */

.qty-stepper {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.qty-minus-btn,
.qty-plus-btn {
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), color var(--transition);
  line-height: 1;
  flex-shrink: 0;
}

.qty-minus-btn:hover:not(:disabled),
.qty-plus-btn:hover:not(:disabled) { border-color: var(--purple); color: var(--purple); }
.qty-minus-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.qty-input {
  width: 40px;
  height: 26px;
  text-align: center;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  transition: border-color var(--transition);
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-input:focus { border-color: var(--purple); }

/* Modal variant — same stepper, slightly larger, with its own label row */
.modal-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.4rem 0;
}

.modal-qty-row label {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.modal-qty-row .qty-stepper .qty-minus-btn,
.modal-qty-row .qty-stepper .qty-plus-btn {
  width: 28px;
  height: 28px;
}

.modal-qty-row .qty-stepper .qty-input {
  width: 44px;
  height: 28px;
}

/* ================================
   WISHLIST HEART (item 19)
   Shared between category.js and services.js card/modal renders.
   ================================ */
.wishlist-heart-btn {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
  line-height: 1;
}

.wishlist-heart-btn:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
}

.wishlist-heart-btn.saved {
  background: rgba(176, 48, 48, 0.08);
  border-color: var(--error);
  color: var(--error);
}

.wishlist-heart-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Modal placement — its own row above the primary action buttons */
.modal-wishlist-heart-btn {
  align-self: flex-start;
  margin-bottom: 0.2rem;
}

/* ================================
   WEB DEV SERVICES (maintenance, hosting, etc.)
   Sits inside #webdev's .category-section, below the portfolio grid.
   Cards reuse .product-card/.card-body/.card-footer/.card-action as-is —
   only this wrapper + header + a distinct icon-placeholder tone are new.
   ================================ */
.webdev-services {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.webdev-services-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.webdev-services-header-text {
  flex: 1;
  min-width: 200px;
}

.webdev-services-header h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.webdev-services-header p {
  color: var(--muted);
  font-size: 0.85rem;
}

.webdev-services-enquire-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.service-card .card-img-placeholder {
  font-size: 2rem;
  opacity: 0.6;
}

/* ================================
   RECENTLY VIEWED SECTION (item 20)
   Section on services.html only — sits above the three category
   sections, styled to match .category-section's rhythm without its
   numbered label (this isn't "category 04", it's the user's own browsing
   history) or the 2px border-bottom .cat-header uses (a lighter divider
   fits better for a section that's here-today-gone-tomorrow depending on
   whether the user has any view history at all).
   ================================ */
#recently-viewed-section {
  padding: 3rem 0 2rem;
}

#recently-viewed-section.hidden {
  display: none;
}

#recently-viewed-section .cat-header {
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}

/* ── RECENTLY VIEWED SLIDER ────────────────────────────
   A single scrolling row. The arrow buttons scroll it left and right;
   touch screens swipe it natively. The scrollbar is hidden, and the arrows
   disappear at either end (or entirely when every card already fits). */
.rv-slider {
  position: relative;
}

.rv-track {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* old Edge */
  /* a little room so card hover lift + shadow aren't clipped by the scroll box */
  padding: 8px 8px 12px;
  margin: -8px;
}

.rv-track::-webkit-scrollbar { display: none; }

.rv-track .recently-viewed-card {
  flex: 0 0 calc((100% - 3 * 1.2rem) / 4);
  min-width: 0;
  scroll-snap-align: start;
}

.rv-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
  transition: background var(--transition), color var(--transition), opacity var(--transition);
}

.rv-arrow-prev { left: -14px; }
.rv-arrow-next { right: -14px; }

.rv-arrow:hover:not(:disabled) { background: var(--ink); color: var(--bg); }

.rv-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.rv-slider.no-overflow .rv-arrow { display: none; }

.recently-viewed-card {
  cursor: pointer;
}

/* Smaller than the full .product-card — this strip is meant to feel like
   a quick-glance row, not compete visually with the main category grids
   below it. Reuses .card-img/.card-body's existing look at a reduced size
   rather than declaring an entirely separate visual language. */
.recently-viewed-card .card-body {
  padding: 0.85rem;
}

.recently-viewed-card .card-name {
  font-size: 0.85rem;
  white-space: normal;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recently-viewed-card .card-price {
  font-size: 0.95rem;
}

/* ================================
   MODAL RELATED ITEMS (item 20)
   Appended as a sibling of .modal-grid inside .modal-inner (not nested
   inside the grid itself), so it spans the full modal width below both
   the image and details columns.
   ================================ */
.modal-related-section {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.modal-related-label {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.8rem;
}

.modal-related-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 0.7rem;
}

.modal-related-card {
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}

.modal-related-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.modal-related-img {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  overflow: hidden;
}

.modal-related-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-related-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0.45rem 0.55rem 0.1rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-related-price {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--purple);
  padding: 0 0.55rem 0.55rem;
}

/* ================================
   BACK TO TOP BUTTON (new)
   Shared by services.html and category.html via scripts/back-to-top.js,
   which injects the button markup and toggles ".visible" on scroll — no
   HTML needs to be hand-added to either page.
   ================================ */
.back-to-top-btn {
  position: fixed;
  right: 1.75rem;
  bottom: 1.75rem;
  z-index: 150;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,0.22);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
}

.back-to-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.back-to-top-btn:hover {
  background: var(--purple-fill);
}

.back-to-top-btn svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 600px) {
  .back-to-top-btn {
    right: 1.1rem;
    bottom: 1.1rem;
    width: 42px;
    height: 42px;
  }
}

/* ================================
   NOISE OVERLAY
   ================================ */
.noise {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ================================
   ANIMATIONS
   ================================ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ================================
   RESPONSIVE
   ================================ */
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(2,1fr); }
  .modal-grid { grid-template-columns: 1fr; }
  .rv-track .recently-viewed-card { flex-basis: calc((100% - 2 * 1.2rem) / 3); }
}
@media (max-width: 768px) {
  .nav { padding: 1rem 1.5rem; }
  .nav-links { display: none; }
  .hero { padding: 6rem 1.5rem 2rem; }
  .services-main { padding: 0 1.5rem 4rem; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 0.75rem; }
  .cat-header { grid-template-columns: auto 1fr; }
  .cat-view-all { grid-column: 1/-1; }
  .cart-sidebar { width: 100%; }
  .footer { padding: 1.5rem; }
  .footer-inner { flex-direction: column; gap: 0.5rem; text-align: center; }
  .modal-related-row { grid-template-columns: repeat(2, 1fr); }
  .modal-inner { padding: 1.1rem; }
  .rv-track .recently-viewed-card { flex-basis: calc((100% - 1.2rem) / 2); }
  .rv-arrow-prev { left: -8px; }
  .rv-arrow-next { right: -8px; }
}