/* =============================================================
   PRINTERS.COM.HK — WC REBUILD DESIGN SYSTEM
   Phase 1: /shop/ + /product-category/*
   Apple-style B2B · TC primary · Mobile-first
   ============================================================= */

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Apple-style color palette */
  --wc-bg:              #ffffff;
  --wc-bg-subtle:       #f5f5f7;   /* Apple gray-50 */
  --wc-bg-elevated:     #fbfbfd;
  --wc-border:          #d2d2d7;   /* Apple gray-200 */
  --wc-border-subtle:   #e8e8ed;
  --wc-text:            #1d1d1f;   /* Apple near-black */
  --wc-text-secondary:  #6e6e73;   /* Apple gray-500 */
  --wc-text-tertiary:   #86868b;   /* Apple gray-400 */
  --wc-price:           #000000;   /* Apple black price */
  --wc-accent:          #0066cc;   /* Apple blue */
  --wc-accent-hover:    #0077ed;
  --wc-sale:            #bf4800;   /* Apple orange */
  --wc-success:         #00875a;
  --wc-trust-green:     #00a86b;
  --wc-warm-gold:       #c79a3b;   /* premium/highlight */

  /* Type scale (modular, Apple-style) */
  --wc-fs-xs:           12px;
  --wc-fs-sm:           13px;
  --wc-fs-base:         15px;       /* Apple body */
  --wc-fs-md:           17px;
  --wc-fs-lg:           21px;
  --wc-fs-xl:           28px;
  --wc-fs-2xl:          40px;
  --wc-fs-3xl:          56px;

  /* Spacing (4px grid) */
  --wc-s-1:             4px;
  --wc-s-2:             8px;
  --wc-s-3:             12px;
  --wc-s-4:             16px;
  --wc-s-5:             20px;
  --wc-s-6:             24px;
  --wc-s-8:             32px;
  --wc-s-10:            40px;
  --wc-s-12:            48px;
  --wc-s-16:            64px;

  /* Radius */
  --wc-r-sm:            8px;
  --wc-r-md:            12px;
  --wc-r-lg:            14px;       /* Apple card */
  --wc-r-xl:            18px;
  --wc-r-full:          980px;      /* Apple pill */

  /* Shadow (Apple) */
  --wc-shadow-sm:       0 1px 2px rgba(0,0,0,.04);
  --wc-shadow-md:       0 4px 12px rgba(0,0,0,.06);
  --wc-shadow-lg:       0 10px 30px rgba(0,0,0,.10);
  --wc-shadow-hover:    0 12px 28px rgba(0,0,0,.12);

  /* Animation */
  --wc-ease:            cubic-bezier(0.4, 0.0, 0.2, 1);
  --wc-ease-out:        cubic-bezier(0.0, 0.0, 0.2, 1);
  --wc-dur-fast:        180ms;
  --wc-dur-base:        280ms;
  --wc-dur-slow:        480ms;

  /* Container */
  --wc-container:       1280px;
  --wc-container-pad:   24px;
}

/* ─── Reset (WC only, scoped) ──────────────────────────────── */
.woocommerce,
.woocommerce-page {
  background: var(--wc-bg);
  color: var(--wc-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "SF Pro Display", "Helvetica Neue", "PingFang TC",
               "Microsoft JhengHei", sans-serif;
  font-size: var(--wc-fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ─── Container ────────────────────────────────────────────── */
.wcr-container {
  max-width: var(--wc-container);
  margin: 0 auto;
  padding: 0 var(--wc-container-pad);
}

/* ─── Page Header ──────────────────────────────────────────── */
.wcr-page-header {
  text-align: center;
  padding: var(--wc-s-12) 0 var(--wc-s-8);
  border-bottom: 1px solid var(--wc-border-subtle);
}

.wcr-page-header h1 {
  font-size: var(--wc-fs-2xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--wc-text);
  margin: 0 0 var(--wc-s-2);
}

.wcr-page-header .wcr-subtitle {
  color: var(--wc-text-secondary);
  font-size: var(--wc-fs-md);
  margin: 0;
}

/* ─── Category Pills (top filter row) ──────────────────────── */
.wcr-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wc-s-2);
  justify-content: center;
  padding: var(--wc-s-6) 0;
  border-bottom: 1px solid var(--wc-border-subtle);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wcr-cat-pills::-webkit-scrollbar { display: none; }

.wcr-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--wc-s-2);
  padding: var(--wc-s-2) var(--wc-s-4);
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--wc-r-full);
  font-size: var(--wc-fs-sm);
  font-weight: 500;
  color: var(--wc-text);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--wc-dur-fast) var(--wc-ease);
}
.wcr-cat-pill:hover {
  background: var(--wc-text);
  color: var(--wc-bg);
  transform: translateY(-1px);
}
.wcr-cat-pill.is-active {
  background: var(--wc-text);
  color: var(--wc-bg);
}
.wcr-cat-pill .wcr-cat-count {
  font-size: var(--wc-fs-xs);
  opacity: 0.7;
  margin-left: var(--wc-s-1);
}

/* ─── Toolbar (result count + sort + filter button) ────────── */
.wcr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wc-s-5) 0;
  gap: var(--wc-s-4);
  flex-wrap: wrap;
}

.wcr-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--wc-s-3);
  color: var(--wc-text-secondary);
  font-size: var(--wc-fs-sm);
}

.wcr-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--wc-s-2);
  padding: var(--wc-s-2) var(--wc-s-4);
  background: #fff;
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-full);
  font-size: var(--wc-fs-sm);
  font-weight: 500;
  color: var(--wc-text);
  cursor: pointer;
  transition: all var(--wc-dur-fast) var(--wc-ease);
}
.wcr-filter-btn:hover { background: var(--wc-text); color: var(--wc-bg); }
.wcr-filter-btn .wcr-icon { width: 16px; height: 16px; }

.wcr-sort-select {
  appearance: none;
  background: #fff;
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-full);
  padding: var(--wc-s-2) var(--wc-s-6) var(--wc-s-2) var(--wc-s-4);
  font-size: var(--wc-fs-sm);
  font-weight: 500;
  color: var(--wc-text);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231d1d1f' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ─── Layout: Sidebar + Grid ───────────────────────────────── */
.wcr-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wc-s-10);
  padding: var(--wc-s-6) 0 var(--wc-s-12);
}

.wcr-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.wcr-filter-group {
  margin-bottom: var(--wc-s-8);
}
.wcr-filter-group h4 {
  font-size: var(--wc-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wc-text-secondary);
  margin: 0 0 var(--wc-s-3);
}

.wcr-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wcr-filter-list li {
  margin-bottom: var(--wc-s-2);
}
.wcr-filter-list a {
  display: flex;
  justify-content: space-between;
  padding: var(--wc-s-2) var(--wc-s-3);
  border-radius: var(--wc-r-sm);
  font-size: var(--wc-fs-sm);
  color: var(--wc-text);
  text-decoration: none;
  transition: background var(--wc-dur-fast) var(--wc-ease);
}
.wcr-filter-list a:hover { background: #fff; }
.wcr-filter-list .wcr-count {
  color: var(--wc-text-tertiary);
  font-size: var(--wc-fs-xs);
}

/* ─── Product Grid ─────────────────────────────────────────── */
.wcr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.wcr-card {
  background: var(--wc-bg);
  border: none;
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1);  /* 5.18.0: 280ms → 180ms + Apple easeOutExpo */
  position: relative;
  display: flex;
  flex-direction: column;
}
.wcr-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
}

/* ─── Card Image ─────────────────────────────────────────── */
.wcr-card-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}
.wcr-card-image {
  position: relative;
  aspect-ratio: 5 / 4;  /* 5.18.0 grid refinement: 4:3 → 5:4 (slightly taller, better printer product proportions) */
  background: #fff;
  overflow: hidden;
  display: block;
}
.wcr-card-image img {

  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);  /* 5.18.0: 0.4s → 0.32s + Apple easeOutExpo */
}
.wcr-card-image .is-second {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1);  /* 5.18.0: 0.3s → 0.18s */
}
.wcr-card:hover .wcr-card-image img:not(.is-second) {
  transform: scale(1.04);
}
.wcr-card:hover .wcr-card-image .is-second {
  opacity: 1;
}

/* ─── Card Body ───────────────────────────────────────────── */
.wcr-card-body {
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.wcr-card-cat {
  display: inline-block;
  width: fit-content;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--wc-muted, #86868b);
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 6px;
  transition: color var(--wc-dur-fast);
}
.wcr-card-cat:hover {
  color: var(--wc-link);
}
.wcr-card-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--wc-text);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.wcr-card-title a {
  color: inherit;
  text-decoration: none;
}
.wcr-card-title a:hover {
  color: var(--wc-link);
}

/* ─── Card Bottom (Price + Add to Cart) ───────────────────── */
.wcr-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  gap: 8px;
}
.wcr-card-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--wc-price);
  letter-spacing: -0.02em;
  flex: 1;
}
.wcr-card-price del {
  color: var(--wc-text-tertiary);
  font-weight: 400;
  font-size: 13px;
  margin-right: 6px;
}
.wcr-card-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--wc-text);
  text-decoration: none;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s cubic-bezier(0.16, 1, 0.3, 1);  /* 5.18.0: 280ms → 180ms + Apple easeOutExpo */
}
.wcr-card:hover .wcr-card-add,
.wcr-card:focus-within .wcr-card-add {
  opacity: 1;
  transform: translateX(0);
}
.wcr-card-add:hover {
  background: var(--wc-link);
  color: #fff;
}
.wcr-card-add.is-loading {
  pointer-events: none;
  opacity: 0.6;
}
.wcr-card-add.is-added {
  background: var(--wc-success, #34c759);
  color: #fff;
}

/* Hide WooCommerce loop buttons / wishlist */
.wcr-card .button:not(.wcr-card-add),
.wcr-card .added_to_cart,
.wcr-card .yith-wcwl-add-to-wishlist,
.wcr-card .quick-view,
.wcr-card .yith-wcqv-button {
  display: none !important;
}
/* ─── Pagination ───────────────────────────────────────────── */
.wcr-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--wc-s-2);
  padding: var(--wc-s-10) 0 var(--wc-s-12);
  flex-wrap: wrap;
}
.wcr-pagination a,
.wcr-pagination span {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--wc-s-3);
  border-radius: var(--wc-r-sm);
  font-size: var(--wc-fs-sm);
  font-weight: 500;
  color: var(--wc-text);
  text-decoration: none;
  transition: all var(--wc-dur-fast) var(--wc-ease);
}
.wcr-pagination a:hover { background: #fff; }
.wcr-pagination .current {
  background: var(--wc-text);
  color: var(--wc-bg);
}

/* ─── Trust Bar (bottom) ───────────────────────────────────── */
.wcr-trustbar {
  background: #fff;
  padding: var(--wc-s-8) 0;
  border-top: 1px solid var(--wc-border-subtle);
}
.wcr-trustbar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wc-s-6);
}
.wcr-trust-item {
  text-align: center;
}
.wcr-trust-item-icon { font-size: 24px; margin-bottom: var(--wc-s-2); }
.wcr-trust-item-title {
  font-size: var(--wc-fs-sm);
  font-weight: 600;
  color: var(--wc-text);
  margin: 0 0 2px;
}
.wcr-trust-item-desc {
  font-size: var(--wc-fs-xs);
  color: var(--wc-text-secondary);
  margin: 0;
}

/* ─── Mobile Filter Drawer ─────────────────────────────────── */
.wcr-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--wc-dur-base) var(--wc-ease);
  z-index: 9998;
}
.wcr-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.wcr-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 90vw);
  background: var(--wc-bg);
  transform: translateX(100%);
  transition: transform var(--wc-dur-base) var(--wc-ease);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wcr-drawer.is-open { transform: translateX(0); }

.wcr-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--wc-s-5) var(--wc-s-5);
  border-bottom: 1px solid var(--wc-border-subtle);
}
.wcr-drawer-header h3 {
  font-size: var(--wc-fs-md);
  font-weight: 600;
  margin: 0;
}
.wcr-drawer-close {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wc-r-full);
  background: #fff;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--wc-text);
}

.wcr-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--wc-s-5);
}

.wcr-drawer-footer {
  padding: var(--wc-s-4) var(--wc-s-5);
  border-top: 1px solid var(--wc-border-subtle);
}
.wcr-drawer-apply {
  width: 100%;
  padding: var(--wc-s-3) var(--wc-s-5);
  background: var(--wc-text);
  color: var(--wc-bg);
  border: none;
  border-radius: var(--wc-r-full);
  font-size: var(--wc-fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--wc-dur-fast) var(--wc-ease);
}
.wcr-drawer-apply:hover { opacity: 0.85; }

/* ─── Mobile Responsive (≤768px) ───────────────────────────── */
@media (max-width: 768px) {
  :root {
    --wc-container-pad: 16px;
  }

  .wcr-page-header { padding: var(--wc-s-8) 0 var(--wc-s-5); }
  .wcr-page-header h1 { font-size: var(--wc-fs-xl); }

  .wcr-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: var(--wc-s-4) 0;
  }

  /* Sidebar hidden on mobile, drawer only */
  .wcr-sidebar { display: none; }
.wcr-grid {    grid-template-columns: repeat(2, 1fr);    gap: 12px;  }  .wcr-card-title { font-size: 13px; }  .wcr-card-price { font-size: 14px; }  .wcr-card-add {    opacity: 1;    transform: translateX(0);    width: 30px;    height: 30px;  }  .wcr-card-body {    padding: 10px 10px 8px;  }  .wcr-card-cat { font-size: 9px; }  .wcr-card { border-radius: 14px; }

  .wcr-trustbar-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Small phone (≤375px) */
@media (max-width: 375px) {
  .wcr-grid { gap: 10px; }
}

/* ─── Reduce motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ─── Print ─────────────────────────────────────────────────── */
@media print {
  .wcr-toolbar, .wcr-sidebar, .wcr-pagination, .wcr-drawer,
  .wcr-drawer-backdrop, .wcr-trustbar { display: none !important; }
}

/* =============================================================
   SINGLE PRODUCT — Phase 2
   ============================================================= */

/* Layout shell */
.wcr-single {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 64px;
}

/* Breadcrumb */
.wcr-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--wc-fs-sm);
  color: var(--wc-muted);
  margin-bottom: 24px;
}
.wcr-breadcrumb a { color: var(--wc-muted); text-decoration: none; }
.wcr-breadcrumb a:hover { color: var(--wc-link); }
.wcr-breadcrumb-current { color: var(--wc-fg); font-weight: 500; }

/* Grid */
.wcr-single-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}

/* Gallery */
.wcr-gallery {
  position: sticky;
  top: 24px;
  align-self: start;
}
.wcr-gallery-main {
  background: var(--wc-surface-2);
  border-radius: var(--wc-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wcr-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.wcr-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: var(--wc-s-2);
  margin-top: var(--wc-s-3);
}
.wcr-gallery-thumb {
  background: var(--wc-surface-2);
  border: 2px solid transparent;
  border-radius: var(--wc-radius-md);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.wcr-gallery-thumb:hover { transform: translateY(-2px); }
.wcr-gallery-thumb.active {
  border-color: var(--wc-fg);
}
.wcr-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Info column */
.wcr-info { padding-top: var(--wc-s-2); }
.wcr-product-title {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--wc-fg);
  margin: 0 0 var(--wc-s-3);
}
.wcr-meta {
  font-size: var(--wc-fs-sm);
  color: var(--wc-muted);
  margin-bottom: var(--wc-s-4);
}

.wcr-price-box {
  margin-bottom: var(--wc-s-4);
}
.wcr-price-amount {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  color: var(--wc-fg);
  letter-spacing: -0.02em;
}

.wcr-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--wc-fs-sm);
  font-weight: 500;
  margin-bottom: var(--wc-s-4);
  padding: 6px 12px;
  border-radius: 999px;
}
.wcr-stock--in { background: rgba(52, 199, 89, 0.1); color: #137333; }
.wcr-stock--out { background: rgba(255, 59, 48, 0.1); color: #c5221f; }

.wcr-short-desc {
  color: var(--wc-fg-2);
  font-size: var(--wc-fs-base);
  line-height: 1.6;
  margin-bottom: var(--wc-s-5);
  padding: var(--wc-s-4);
  background: var(--wc-surface-2);
  border-radius: var(--wc-radius-md);
}

.wcr-cart-form { margin-bottom: var(--wc-s-4); }
.wcr-qty-row {
  display: flex;
  align-items: center;
  gap: var(--wc-s-3);
  margin-bottom: var(--wc-s-3);
}
.wcr-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-radius-md);
  overflow: hidden;
}
.wcr-qty-btn {
  width: 40px;
  height: 44px;
  background: var(--wc-surface-2);
  border: 0;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  color: var(--wc-fg);
  transition: background 0.15s ease;
}
.wcr-qty-btn:hover { background: var(--wc-border); }
.wcr-qty-stepper input {
  width: 56px;
  height: 44px;
  border: 0;
  text-align: center;
  font-size: var(--wc-fs-base);
  font-weight: 500;
  -moz-appearance: textfield;
}
.wcr-qty-stepper input::-webkit-outer-spin-button,
.wcr-qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.wcr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  font-size: var(--wc-fs-base);
  font-weight: 500;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease, background 0.15s ease;
}
.wcr-btn--primary {
  background: var(--wc-fg);
  color: var(--wc-bg);
}
.wcr-btn--primary:hover { background: #000; transform: translateY(-1px); }
.wcr-btn--whatsapp {
  background: #25D366;
  color: white;
  margin-bottom: var(--wc-s-5);
  width: 100%;
}
.wcr-btn--whatsapp:hover { background: #1DA851; }
.wcr-btn--block { width: 100%; }

/* Product trust list */
.wcr-product-trust {
  list-style: none;
  margin: 0;
  padding: var(--wc-s-4);
  background: var(--wc-surface-2);
  border-radius: var(--wc-radius-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wc-s-3);
}
.wcr-product-trust li {
  font-size: var(--wc-fs-sm);
  color: var(--wc-fg-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wcr-product-trust span {
  color: var(--wc-fg);
  font-weight: 600;
}

/* Tabs */
.wcr-tabs {
  border-top: 1px solid var(--wc-border);
  padding-top: var(--wc-s-5);
  display: grid;
  gap: var(--wc-s-2);
}
.wcr-tab {
  border-bottom: 1px solid var(--wc-border);
  padding-bottom: var(--wc-s-3);
}
.wcr-tab summary {
  font-size: var(--wc-fs-lg);
  font-weight: 500;
  color: var(--wc-fg);
  cursor: pointer;
  padding: var(--wc-s-3) 0;
  list-style: none;
  position: relative;
}
.wcr-tab summary::-webkit-details-marker { display: none; }
.wcr-tab summary::after {
  content: '+';
  position: absolute;
  right: 0;
  font-size: 24px;
  font-weight: 300;
  color: var(--wc-muted);
  transition: transform 0.2s ease;
}
.wcr-tab[open] summary::after {
  transform: rotate(45deg);
}
.wcr-tab-body {
  color: var(--wc-fg-2);
  line-height: 1.7;
  padding-bottom: var(--wc-s-3);
}
.wcr-tab-body ul {
  padding-left: 20px;
  margin: 12px 0;
}

/* Mobile */
@media (max-width: 768px) {
  .wcr-single-grid {
    grid-template-columns: 1fr;
    gap: var(--wc-s-5);
  }
  .wcr-gallery {
    position: static;
  }
  .wcr-info { padding-top: 0; }
  .wcr-product-trust {
    grid-template-columns: 1fr;
  }
}
/* ─── Active Filter Chips ──────────────────────────────── */
.wcr-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 0;
}
.wcr-active-filters:empty { display: none; }
.wcr-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--wc-bg-subtle, #f5f5f7);
  border-radius: 100px;
  font-size: 13px;
  color: var(--wc-text);
  text-decoration: none;
  transition: background var(--wc-dur-fast);
}
.wcr-filter-chip:hover {
  background: #e8e8ed;
}
.wcr-filter-chip-x {
  font-size: 16px;
  line-height: 1;
  opacity: 0.5;
}

/* ─── Load More Button ─────────────────────────────────── */
.wcr-loadmore-wrap {
  text-align: center;
  margin: 40px 0 20px;
}
.wcr-loadmore-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 48px;
  background: var(--wc-bg-subtle, #f5f5f7);
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--wc-link);
  cursor: pointer;
  transition: all var(--wc-dur-base);
}
.wcr-loadmore-btn:hover {
  background: #e8e8ed;
}
.wcr-loadmore-btn:active {
  transform: scale(0.98);
}
.wcr-loadmore-btn.is-loading {
  pointer-events: none;
  opacity: 0.6;
}
.wcr-loadmore-btn.is-done {
  background: transparent;
  color: var(--wc-muted);
  cursor: default;
  pointer-events: none;
}
.wcr-loadmore-progress {
  font-size: 12px;
  color: var(--wc-muted);
}

/* ─── Toolbar Polish ───────────────────────────────────── */
.wcr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  margin-bottom: 8px;
}
.wcr-toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.wcr-filter-btn {
  display: none; /* mobile only */
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--wc-bg-subtle);
  border: 1px solid var(--wc-border);
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}
.wcr-result-count {
  font-size: 14px;
  color: var(--wc-muted);
}
/* ══════════════════════════════════════════
   Single Product — Apple Style
   Printers.com.hk
   ══════════════════════════════════════════ */

.wcr-product {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  background: #fff;
}

/* Breadcrumb */
.wcr-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 24px;
  font-size: 13px;
  color: #86868b;
}
.wcr-breadcrumb a {
  color: #86868b;
  text-decoration: none;
  transition: color 0.2s;
}
.wcr-breadcrumb a:hover { color: #1d1d1f; }
.wcr-breadcrumb span {
  color: #1d1d1f;
  font-weight: 500;
}

/* Product Grid */
.wcr-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding-bottom: 64px;
  border-bottom: 1px solid #e5e5e7;
}

/* Gallery */
.wcr-product-gallery {
  position: sticky;
  top: 24px;
}
.wcr-gallery-main {
  aspect-ratio: 1;
  background: #f5f5f7;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wcr-gallery-main img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
.wcr-gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  justify-content: center;
}
.wcr-gallery-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: #f5f5f7;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
  padding: 0;
}
.wcr-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wcr-gallery-thumb:hover { transform: scale(1.05); }
.wcr-gallery-thumb.active { border-color: #0071e3; }

/* Product Info */
.wcr-product-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.wcr-product-title {
  font-size: 32px;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0;
}
.wcr-product-meta {
  font-size: 14px;
  color: #86868b;
  margin-top: -12px;
}
.wcr-product-meta span {
  color: #1d1d1f;
  font-weight: 500;
}

/* Price */
.wcr-product-price {
  padding: 16px 0;
}
.wcr-price-amount {
  font-size: 28px;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.01em;
}
.wcr-price-amount del {
  font-size: 18px;
  color: #86868b;
  margin-right: 8px;
}
.wcr-price-amount ins {
  text-decoration: none;
  color: #1d1d1f;
}

/* Short description */
.wcr-product-short {
  font-size: 16px;
  color: #515154;
  line-height: 1.6;
  margin: 0;
}

/* Add to Cart Form */
.wcr-cart-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid #e5e5e7;
  border-bottom: 1px solid #e5e5e7;
}
.wcr-qty-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.wcr-qty-row label {
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  min-width: 48px;
}

/* Qty Stepper — Apple style */
.wcr-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d2d2d7;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.wcr-qty-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: #f5f5f7;
  color: #1d1d1f;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  user-select: none;
}
.wcr-qty-btn:hover { background: #e5e5e7; }
.wcr-qty-btn:active { background: #d2d2d7; }
.wcr-qty-stepper input[type="number"] {
  width: 56px;
  height: 40px;
  border: none;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #1d1d1f;
  -moz-appearance: textfield;
  background: #fff;
  padding: 0;
}
.wcr-qty-stepper input[type="number"]::-webkit-outer-spin-button,
.wcr-qty-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Buttons */
.wcr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.wcr-btn--primary {
  background: #0071e3;
  color: #fff;
  width: 100%;
}
.wcr-btn--primary:hover {
  background: #0077ed;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,113,227,0.3);
}
.wcr-btn--primary:active {
  transform: translateY(0);
  background: #0068d1;
}
.wcr-btn--whatsapp {
  background: #f5f5f7;
  color: #1d1d1f;
  width: 100%;
  border: 1px solid #d2d2d7;
}
.wcr-btn--whatsapp:hover {
  background: #e5e5e7;
  border-color: #c5c5cb;
}

/* Trust bar */
.wcr-product-trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}
.wcr-product-trust span {
  font-size: 13px;
  color: #86868b;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Description Tabs */
.wcr-product-desc {
  padding: 48px 0 64px;
}
.wcr-tabs {
  display: flex;
  border-bottom: 1px solid #d2d2d7;
  margin-bottom: 32px;
}
.wcr-tab {
  padding: 14px 24px;
  border: none;
  background: none;
  font-size: 16px;
  font-weight: 500;
  color: #86868b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.wcr-tab.active {
  color: #1d1d1f;
  border-bottom-color: #1d1d1f;
}
.wcr-tab:hover { color: #1d1d1f; }
.wcr-tab-content {
  font-size: 16px;
  color: #515154;
  line-height: 1.7;
  max-width: 800px;
}
.wcr-tab-content h2, .wcr-tab-content h3 {
  color: #1d1d1f;
  margin: 32px 0 16px;
}
.wcr-tab-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.wcr-tab-content td, .wcr-tab-content th {
  padding: 10px 16px;
  border-bottom: 1px solid #e5e5e7;
  text-align: left;
  font-size: 14px;
}
.wcr-tab-content th {
  font-weight: 600;
  color: #1d1d1f;
  background: #f5f5f7;
}

/* Mobile */
@media (max-width: 768px) {
  .wcr-product { padding: 24px 16px 48px; }
  .wcr-product-grid { grid-template-columns: 1fr; gap: 32px; }
  .wcr-product-gallery { position: static; }
  .wcr-product-title { font-size: 24px; }
  .wcr-price-amount { font-size: 22px; }
  .wcr-gallery-thumb { width: 48px; height: 48px; }
}