/* ── Webshop shared styles ──
   Used by all website templates when webshop is active.
   Prefixed with ws- to avoid conflicts with theme styles.
   Uses CSS custom properties from theme/stijl.css where available.
*/

/* ── Autocomplete ── */
.ws-ac-wrap { position: relative; }
.ws-autocomplete {
  position: absolute; z-index: 100; width: 100%;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: 4px; max-height: 200px; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  display: none;
}
.ws-ac-item {
  padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid var(--color-border, #eee);
}
.ws-ac-item:hover { background: var(--color-surface, #f8f9fa); }

/* ── Noscript fallback (hides JS-only elements when JS is disabled) ── */
.no-js .ws-grid, .no-js .ws-filter-bar, .no-js .ws-sort { display: none !important; }

/* ── Page head ── */
.ws-pagehead {
  padding: 24px 0 16px;
  margin-bottom: 20px;
}
.ws-pagehead h1 {
  margin: 8px 0 0;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
}

/* Breadcrumb */
.ws-breadcrumb {
  font-size: 13px;
  color: var(--w-secondary, #64748b);
}
.ws-breadcrumb a {
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,.18);
}
.ws-breadcrumb a:hover {
  text-decoration-color: var(--w-primary, #2563eb);
}

/* ── Toolbar ── */
.ws-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  margin-bottom: 16px;
}
.ws-search {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1 1 300px;
}
.ws-search input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
  font: inherit;
}
.ws-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ws-select {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
  font: inherit;
  font-weight: 600;
}
.ws-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(0,0,0,.03);
}

/* ── Chips ── */
.ws-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ws-chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.1);
  background: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.ws-chip.is-active {
  background: rgba(var(--w-primary-rgb, 37,99,235), .12);
  border-color: rgba(var(--w-primary-rgb, 37,99,235), .3);
  color: var(--w-primary, #2563eb);
}

/* ── Product grid ── */
.ws-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px) {
  .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .ws-grid { grid-template-columns: 1fr; }
}

/* ── Product card ── */
.ws-card {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ws-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}
.ws-card picture, .ws-detail__img picture { display: contents; }
.ws-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: rgba(0,0,0,.03);
}
.ws-card__body {
  padding: 14px;
  display: grid;
  gap: 8px;
}
.ws-card__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.ws-card__title {
  font-weight: 700;
  line-height: 1.25;
}
.ws-card__title a { color: inherit; text-decoration: none; }
.ws-card__title a:hover { text-decoration: underline; }

/* ── Shared ── */
.ws-meta {
  color: var(--w-secondary, #64748b);
  font-size: 13px;
  font-weight: 600;
}
.ws-price {
  font-weight: 700;
  font-size: 16px;
}
.ws-price small {
  color: var(--w-secondary, #64748b);
  text-decoration: line-through;
  margin-left: 6px;
  font-weight: 600;
}
.ws-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(0,0,0,.03);
  font-weight: 700;
  font-size: 12px;
  width: fit-content;
}
.ws-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.ws-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ws-card__pricing {
  text-align: right;
}

/* ── Buttons ── */
.ws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.1);
  background: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ws-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.ws-btn--primary {
  background: var(--w-primary, #2563eb);
  border-color: transparent;
  color: #fff;
}
.ws-btn--primary:hover { filter: brightness(.94); }
.ws-btn--soft {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.08);
}
.ws-btn--danger {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.2);
  color: #b91c1c;
}
.ws-btn--sm {
  padding: 6px 10px;
  font-size: 13px;
}
.ws-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
.ws-variant-selector {
  margin: 14px 0;
}
.ws-variant-selector label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}
.ws-variant-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ws-variant-opt.is-active {
  background: var(--primary, #3f51b5);
  color: #fff;
  border-color: var(--primary, #3f51b5);
}
.ws-tag--sm {
  font-size: 11px;
  padding: 2px 6px;
}
.ws-btngroup {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.ws-btnstack {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.ws-btnstack--sm {
  gap: 8px;
  margin-top: 12px;
}

/* ── Badge (cart count) ── */
.ws-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--w-accent, #10b981);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ── Product detail ── */
.ws-detail {
  display: grid;
  gap: 20px;
}
@media (min-width: 768px) {
  .ws-detail { grid-template-columns: 1fr 1fr; }
}
.ws-detail__gallery { display: flex; flex-direction: column; }
.ws-detail__img {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.ws-detail__img img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(0,0,0,.03);
}
/* ── Hover zoom lens ── */
.ws-zoom-lens {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background-repeat: no-repeat;
  z-index: 2;
  opacity: 0;
  transition: opacity .15s;
}
.ws-detail__img:hover .ws-zoom-lens:not([hidden]) { opacity: 1; }
@media (hover: none) { .ws-zoom-lens { display: none; } }
.ws-detail__thumbs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.ws-detail__thumbs img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: .7;
  transition: opacity .15s, border-color .15s;
}
.ws-detail__thumbs img:hover { opacity: 1; }
.ws-detail__thumbs img.is-active {
  border-color: var(--w-accent, #2563eb);
  opacity: 1;
}

/* ── Lightbox ── */
.ws-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-lightbox[hidden] { display: none; }
.ws-lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  user-select: none;
}
.ws-lightbox__close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 2rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 4px 12px;
}
.ws-lightbox__close:hover { color: #ccc; }
.ws-lightbox__prev,
.ws-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  line-height: 1;
}
.ws-lightbox__prev { left: 12px; }
.ws-lightbox__next { right: 12px; }
.ws-lightbox__prev:hover,
.ws-lightbox__next:hover { color: #ccc; }
@media (hover: none) {
  .ws-lightbox__prev, .ws-lightbox__next { font-size: 2rem; padding: 12px; }
}
.ws-lightbox__img { touch-action: pan-y; }
.ws-detail__info h2 {
  margin: 8px 0 4px;
  font-size: 1.6rem;
}
.ws-detail__info p {
  color: var(--w-secondary, #64748b);
}
.ws-detail__info hr {
  border: none;
  border-top: 1px solid rgba(0,0,0,.1);
  margin: 14px 0;
}
.ws-features-wrap span {
  font-weight: 700;
  font-size: 14px;
}
.ws-features {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.ws-features li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.ws-features li:last-child { border-bottom: none; }

/* ── Cart ── */
.ws-cart-layout {
  display: grid;
  gap: 20px;
}
@media (min-width: 768px) {
  .ws-cart-layout { grid-template-columns: 1fr .8fr; }
}
.ws-cart-items, .ws-cart-summary {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  background: #fff;
  padding: 18px;
}
.ws-notice {
  border: 1px dashed rgba(0,0,0,.2);
  background: rgba(0,0,0,.03);
  padding: 14px;
  border-radius: 10px;
  color: var(--w-secondary, #64748b);
}
.ws-notice a { text-decoration: underline; }

/* Cart items */
.ws-cartitem {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.ws-cartitem:last-child { border-bottom: none; }
.ws-cartitem img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
  object-fit: cover;
  background: rgba(0,0,0,.03);
}
.ws-cartitem b { display: block; }
.ws-cartitem small {
  color: var(--w-secondary, #64748b);
  font-weight: 600;
}
.ws-qty {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.ws-qty button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.1);
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  font: inherit;
}
.ws-qty input {
  width: 50px;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.1);
  text-align: center;
  font: inherit;
  font-weight: 600;
}

/* Totals */
.ws-totalrow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
}
.ws-totalrow--lg {
  font-size: 1.1rem;
  font-weight: 700;
}

/* ── Checkout ── */
.ws-checkout-layout {
  display: grid;
  gap: 20px;
}
@media (min-width: 768px) {
  .ws-checkout-layout { grid-template-columns: 1fr 1fr; }
}
.ws-checkout-form, .ws-checkout-summary {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  background: #fff;
  padding: 18px;
}
.ws-checkout-form h2, .ws-checkout-summary h2 {
  margin: 0 0 12px;
}

/* Form */
.ws-form {
  display: grid;
  gap: 12px;
}
.ws-form__group {
  display: grid;
  gap: 4px;
}
.ws-form__group label {
  font-weight: 600;
  font-size: 14px;
}
.ws-form__group input, .ws-form__group select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.1);
  font: inherit;
}
.ws-form__row {
  display: flex;
  gap: 12px;
}
.ws-form__row > div {
  display: grid;
  gap: 4px;
}
.ws-form__row label {
  font-weight: 600;
  font-size: 14px;
}
.ws-form__row input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.1);
  font: inherit;
}

/* Table */
.ws-table {
  width: 100%;
  border-collapse: collapse;
}
.ws-table th, .ws-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-weight: 600;
}
.ws-table th {
  background: rgba(0,0,0,.03);
  font-weight: 700;
}

/* ── Success ── */
.ws-success {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  background: #fff;
  padding: 24px;
}
.ws-success h2 { margin: 0 0 8px; }
.ws-success p {
  color: var(--w-secondary, #64748b);
  margin: 0 0 14px;
}

/* ── Toast ── */
.ws-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: #111827;
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(0,0,0,.15);
  z-index: 1000;
  display: none;
  font-weight: 600;
}
.ws-toast.show { display: block; }

/* ── Hidden utility ── */
.hidden { display: none !important; }

/* ── Nav shop link ── */
.ws-nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ws-nav-cart .ws-badge {
  position: absolute;
  top: -6px;
  right: -8px;
}

/* ── Checkout steps ── */
.ws-steps{display:flex;gap:4px;margin:12px 0 4px;font-size:13px;font-weight:600}
.ws-step{padding:6px 14px;border-radius:999px;border:1px solid rgba(0,0,0,.1);background:#fff;color:var(--w-secondary,#64748b)}
.ws-step.is-active{background:var(--w-primary,#2563eb);border-color:transparent;color:#fff}
.ws-step.is-done{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.3);color:#065f46}

/* ── Form errors ── */
.ws-field-error{font-size:12px;color:#b91c1c;min-height:0;font-weight:600}
.ws-form__group input:invalid:not(:placeholder-shown),.ws-form__row input:invalid:not(:placeholder-shown){border-color:#dc2626}
.ws-form__group input:valid:not(:placeholder-shown),.ws-form__row input:valid:not(:placeholder-shown){border-color:#16a34a}

/* ── Stock indicators ── */
.ws-stock-ok{color:#065f46;font-weight:600;font-size:13px}
.ws-stock-limited{color:#b45309;font-weight:700;font-size:13px}
.ws-stock-out{color:#b91c1c;font-weight:700;font-size:13px}
.ws-stock-low{color:#b91c1c;font-weight:700;font-size:13px}

/* ── ARIA live region for filter results ── */
.ws-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);border:0;padding:0;margin:-1px}

/* CSP-safe checkout layout classes */
.ws-mb-lg { margin-bottom: 1.5rem; }
.ws-col-3 { flex: 3; }
.ws-col-1 { flex: 1; }
.ws-col-2 { flex: 2; }

/* ── Wishlist heart button ── */
.ws-wish-btn{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.85);border:none;border-radius:50%;width:34px;height:34px;font-size:18px;cursor:pointer;line-height:34px;text-align:center;color:#888;transition:color .2s,background .2s;z-index:2}
.ws-wish-btn:hover,.ws-wish-btn.is-wished{color:#e11d48;background:#fff}
.ws-card{position:relative}

/* ── Reviews ── */
.ws-review{border-bottom:1px solid var(--border,#e5e7eb);padding:12px 0}
.ws-review:last-child{border-bottom:none}
.ws-review__header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.ws-review__stars{color:#f59e0b;font-size:14px;margin-bottom:4px}
.ws-review__title{font-weight:600;margin-bottom:4px}
.ws-review p{margin:4px 0;font-size:14px;color:var(--text,#333)}
.ws-review-form{margin-top:20px;padding-top:16px;border-top:1px solid var(--border,#e5e7eb)}
.ws-review-form h4{margin-bottom:10px}
.ws-star-input{display:flex;gap:2px;margin-bottom:10px}
.ws-star-input button{background:none;border:none;font-size:24px;color:#f59e0b;cursor:pointer;padding:0}
.ws-review-form .ws-input{display:block;width:100%;max-width:400px;margin-bottom:8px;padding:6px 10px;border:1px solid var(--border,#ccc);border-radius:6px;font-size:14px}

/* ── Coupon ── */
.ws-coupon-row{display:flex;gap:8px;margin-bottom:6px}
.ws-coupon-row .ws-input{flex:1;padding:6px 10px;border:1px solid var(--border,#ccc);border-radius:6px;font-size:14px}
.ws-coupon-ok{color:#16a34a;font-weight:600}