/* OptiCommerce Search v2.2 — Specs For Vets Match */
/* Uses !important on key props to override Elementor/theme CSS */

/* ── Tokens ──────────────────────────────────────── */
.ocs-search-wrapper{
  --ocs-font:'Barlow',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ocs-primary:#1a1a2e;
  --ocs-text:#1a1a2e;
  --ocs-text-lt:#555;
  --ocs-text-mt:#999;
  --ocs-bdr:#ddd;
  --ocs-bg:#fff;
  --ocs-tr:.2s ease;
  --ocs-sidebar-width:210px;
  font-family:var(--ocs-font) !important;
  color:var(--ocs-text);
  max-width:1400px;margin:0 auto;padding:0 20px 60px;
  box-sizing:border-box;line-height:1.5;
  -webkit-font-smoothing:antialiased
}
.ocs-search-wrapper *,
.ocs-search-wrapper *::before,
.ocs-search-wrapper *::after{box-sizing:border-box}

/* ── Page Header ─────────────────────────────────── */
.ocs-page-header{padding:20px 0 10px !important;margin:0 !important;border:none !important;background:none !important}
.ocs-page-title{font-size:28px !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:.01em;margin:0 !important;color:var(--ocs-primary) !important;line-height:1.15 !important}

/* ── Search Bar ──────────────────────────────────── */
.ocs-search-bar{margin-bottom:10px !important}
.ocs-search-input-wrap{position:relative;display:flex;align-items:center}
.ocs-search-icon{position:absolute;left:14px;width:16px !important;height:16px !important;max-width:16px !important;max-height:16px !important;color:var(--ocs-text-mt);pointer-events:none}
.ocs-search-field{
  width:100% !important;padding:10px 40px 10px 40px !important;
  border:1.5px solid var(--ocs-primary) !important;border-radius:0 !important;
  font-size:14px !important;font-family:var(--ocs-font) !important;
  color:var(--ocs-text) !important;background:var(--ocs-bg) !important;
  outline:none !important;box-shadow:none !important
}
.ocs-search-field:focus{border-color:var(--ocs-primary) !important;box-shadow:none !important}
.ocs-search-field::placeholder{color:#bbb !important}

/* Close button — plain ×, NO circle */
.ocs-search-clear{
  position:absolute !important;right:12px !important;
  background:none !important;border:none !important;border-radius:0 !important;
  font-size:20px !important;font-weight:300 !important;line-height:1 !important;
  color:var(--ocs-text-mt) !important;cursor:pointer;
  padding:4px !important;width:auto !important;height:auto !important;
  box-shadow:none !important;outline:none !important;
  min-width:0 !important;min-height:0 !important
}
.ocs-search-clear:hover{color:var(--ocs-text) !important;background:none !important}

/* ── Toolbar ─────────────────────────────────────── */
.ocs-toolbar{display:flex !important;justify-content:space-between !important;align-items:center !important;padding:8px 0 6px !important;margin:0 !important}
.ocs-result-count{font-size:13px !important;color:var(--ocs-text-lt) !important}
.ocs-sort-wrap{display:flex !important;align-items:center !important;gap:8px !important}
.ocs-sort-wrap label{color:var(--ocs-text) !important;font-weight:600 !important;font-size:11px !important;text-transform:uppercase !important;letter-spacing:.05em}
.ocs-sort-select{
  padding:7px 30px 7px 10px !important;border:1px solid var(--ocs-bdr) !important;
  border-radius:0 !important;font-size:13px !important;font-family:var(--ocs-font) !important;
  color:var(--ocs-text) !important;background:var(--ocs-bg) !important;
  cursor:pointer;outline:none !important;appearance:none !important;
  -webkit-appearance:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right 10px center !important
}

/* ── Layout ──────────────────────────────────────── */
.ocs-content{display:flex;gap:24px;padding-top:0}
.ocs-content.ocs-has-sidebar{display:grid !important;grid-template-columns:var(--ocs-sidebar-width) 1fr !important;gap:28px !important}
.ocs-main{min-width:0}

/* ── Sidebar — NO overall scroll, flows naturally ──── */
.ocs-sidebar{
  position:relative;top:auto;max-height:none !important;
  overflow:visible !important;padding-right:10px
}
.ocs-sidebar-header{display:none !important}

/* ── Filter Groups ───────────────────────────────── */
/* KEY: No borders, no pills, no capsules */
.ocs-filter-group{
  margin:0 !important;padding:0 !important;
  border:none !important;border-radius:0 !important;
  background:none !important;box-shadow:none !important
}

/* Filter heading — plain text + icon, NO border, NO pill, NO capsule */
.ocs-search-wrapper .ocs-filter-toggle,
.ocs-filter-toggle{
  display:flex !important;justify-content:space-between !important;align-items:center !important;
  width:100% !important;
  padding:14px 0 6px !important;margin:0 !important;
  background:none !important;
  border:none !important;border-bottom:none !important;
  border-radius:0 !important;box-shadow:none !important;
  font-size:11px !important;font-weight:700 !important;
  text-transform:uppercase !important;letter-spacing:.1em !important;
  color:var(--ocs-text) !important;cursor:pointer;
  font-family:var(--ocs-font) !important;
  outline:none !important;
  -webkit-appearance:none !important;appearance:none !important
}
.ocs-filter-toggle:hover{background:none !important}
.ocs-filter-toggle:focus{outline:none !important;box-shadow:none !important}

.ocs-toggle-arrow{width:12px !important;height:12px !important;flex-shrink:0}

/* ── Filter Options ──────────────────────────────── */
.ocs-filter-options{
  padding:6px 0 16px !important;max-height:280px;
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ddd transparent;
  transition:max-height .3s ease,opacity .2s ease;
  border:none !important;background:none !important;border-radius:0 !important
}
.ocs-filter-options.ocs-collapsed{max-height:0 !important;overflow:hidden !important;opacity:0 !important;padding:0 !important}

.ocs-filter-option{
  display:flex !important;align-items:center !important;gap:8px !important;
  padding:4px 0 !important;font-size:13px !important;
  cursor:pointer;user-select:none;color:var(--ocs-text-lt) !important;
  border:none !important;background:none !important;border-radius:0 !important;
  margin:0 !important
}
.ocs-filter-option:hover{color:var(--ocs-text) !important}
.ocs-filter-option.ocs-zero-count{opacity:.3;pointer-events:none}

.ocs-filter-cb{
  width:15px !important;height:15px !important;margin:0 !important;
  cursor:pointer;accent-color:var(--ocs-primary);flex-shrink:0;
  border-radius:0 !important
}

.ocs-filter-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400 !important}
.ocs-filter-count{color:var(--ocs-text-mt) !important;font-size:11px !important;flex-shrink:0}

/* ── Active Filters ──────────────────────────────── */
.ocs-active-filters{margin-bottom:10px !important;padding-bottom:10px !important;border-bottom:1px solid var(--ocs-bdr) !important}
.ocs-active-filters-header{display:flex !important;justify-content:space-between !important;align-items:center !important;margin-bottom:6px !important;font-size:11px !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:.08em}
.ocs-clear-all{background:none !important;border:1px solid var(--ocs-bdr) !important;color:var(--ocs-text) !important;font-size:10px !important;cursor:pointer;font-family:var(--ocs-font) !important;padding:4px 12px !important;border-radius:0 !important;text-transform:uppercase !important;letter-spacing:.05em;font-weight:600 !important}
.ocs-clear-all:hover{background:var(--ocs-primary) !important;color:#fff !important;border-color:var(--ocs-primary) !important}
.ocs-active-filter-tags{display:flex !important;flex-wrap:wrap !important;gap:5px !important}
.ocs-tag{display:inline-flex !important;align-items:center !important;gap:4px !important;padding:3px 8px !important;background:#f5f5f5 !important;border:1px solid var(--ocs-bdr) !important;border-radius:0 !important;font-size:11px !important;color:var(--ocs-text) !important;cursor:pointer;font-family:var(--ocs-font) !important}
.ocs-tag:hover{background:#fee2e2 !important;border-color:#fca5a5 !important}
.ocs-tag-x{font-size:13px;line-height:1;color:var(--ocs-text-mt)}

/* ── Price Slider ─────────────────────────────────── */
.ocs-price-slider-wrap{margin-bottom:14px !important;padding:0 2px !important}
.ocs-price-slider-labels{display:flex !important;justify-content:space-between !important;margin-bottom:8px !important;font-size:12px !important;font-weight:600 !important;color:var(--ocs-text) !important}
.ocs-price-slider-track{position:relative !important;height:4px !important;background:#e0e0e0 !important;border-radius:2px !important;margin:16px 0 8px !important}
.ocs-price-slider-range{position:absolute !important;height:100% !important;background:var(--ocs-primary) !important;border-radius:2px !important;z-index:1 !important}

/* Dual thumb styling */
.ocs-price-slider-thumb{
  position:absolute !important;top:50% !important;left:0 !important;
  width:100% !important;height:4px !important;margin:0 !important;padding:0 !important;
  -webkit-appearance:none !important;appearance:none !important;
  background:none !important;border:none !important;outline:none !important;
  pointer-events:none !important;z-index:2 !important;
  transform:translateY(-50%) !important
}
.ocs-price-slider-thumb::-webkit-slider-thumb{
  -webkit-appearance:none !important;appearance:none !important;
  width:18px !important;height:18px !important;
  background:var(--ocs-primary) !important;border:2px solid #fff !important;
  border-radius:50% !important;cursor:pointer !important;
  pointer-events:all !important;box-shadow:0 1px 3px rgba(0,0,0,.25) !important;
  position:relative !important;z-index:3 !important
}
.ocs-price-slider-thumb::-moz-range-thumb{
  width:18px !important;height:18px !important;
  background:var(--ocs-primary) !important;border:2px solid #fff !important;
  border-radius:50% !important;cursor:pointer !important;
  pointer-events:all !important;box-shadow:0 1px 3px rgba(0,0,0,.25) !important
}
/* Second thumb on top for overlap area */
.ocs-price-slider-thumb#ocs-price-slider-max{z-index:3 !important}

/* ── Price Manual Inputs ─────────────────────────── */
.ocs-price-inputs{padding-top:2px !important}
.ocs-price-range{display:flex !important;align-items:center !important;gap:6px !important;margin-bottom:8px !important}
.ocs-price-input{flex:1;padding:7px 8px !important;border:1px solid var(--ocs-bdr) !important;border-radius:0 !important;font-size:13px !important;font-family:var(--ocs-font) !important;outline:none !important;max-width:80px}
.ocs-price-input:focus{border-color:var(--ocs-primary) !important}
.ocs-price-sep{color:var(--ocs-text-mt);font-size:12px}
.ocs-apply-price{width:100% !important;padding:8px !important;background:var(--ocs-primary) !important;color:#fff !important;border:none !important;border-radius:0 !important;font-size:11px !important;font-family:var(--ocs-font) !important;font-weight:600 !important;text-transform:uppercase !important;letter-spacing:.06em;cursor:pointer}
.ocs-apply-price:hover{background:#333 !important}

/* ── Product Grid ────────────────────────────────── */
.ocs-product-grid{display:grid !important;gap:0 !important;transition:opacity .15s ease}
.ocs-product-grid.ocs-loading{opacity:.35;pointer-events:none}
.ocs-cols-2{grid-template-columns:repeat(2,1fr) !important}
.ocs-cols-3{grid-template-columns:repeat(3,1fr) !important}
.ocs-cols-4{grid-template-columns:repeat(4,1fr) !important}

/* ── Product Card ────────────────────────────────── */
.ocs-product-card{
  background:var(--ocs-bg) !important;border:none !important;
  border-bottom:1px solid var(--ocs-bdr) !important;
  border-radius:0 !important;box-shadow:none !important;
  overflow:hidden;margin:0 !important;padding:0 !important
}
.ocs-product-link{
  text-decoration:none !important;color:inherit !important;
  display:flex !important;flex-direction:column !important;
  height:100%;padding:14px 14px 18px !important
}

/* TRY-ON row */
.ocs-tryon-row{display:flex !important;justify-content:flex-end !important;min-height:18px;margin-bottom:2px}
.ocs-tryon-badge{
  display:inline-flex !important;align-items:center !important;gap:4px !important;
  padding:0 !important;margin:0 !important;
  font-size:9px !important;font-weight:700 !important;letter-spacing:.06em;text-transform:uppercase !important;
  color:var(--ocs-text-lt) !important;
  background:none !important;border:none !important;border-radius:0 !important;
  box-shadow:none !important;position:static !important
}
.ocs-tryon-badge svg{width:13px !important;height:13px !important}

/* Product Image */
.ocs-product-image{
  position:relative;aspect-ratio:4/3;
  background:#fff !important;display:flex !important;
  align-items:center !important;justify-content:center !important;
  overflow:hidden;padding:10px 6px !important;
  border:none !important;border-radius:0 !important
}
/* .ocs-product-image > img handled by .ocs-slide */
.ocs-product-card:hover .ocs-slide.active{transform:scale(1.02);transition:transform .3s ease,opacity .25s ease}
.ocs-no-image{color:var(--ocs-text-mt);font-size:12px}

/* Product Info */
.ocs-product-info{padding:8px 0 0 !important;display:flex !important;flex-direction:column !important;flex:1}
.ocs-product-brand{font-size:11px !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:.06em;color:var(--ocs-text) !important;margin-bottom:1px !important;line-height:1.3 !important}
.ocs-product-title{font-size:13px !important;font-weight:400 !important;color:var(--ocs-text-lt) !important;margin:0 0 6px !important;line-height:1.3 !important;text-decoration:underline;text-decoration-color:#ccc;text-underline-offset:2px}
.ocs-product-link:hover .ocs-product-title{text-decoration-color:var(--ocs-text-lt)}

/* Price + Variants */
.ocs-product-meta{display:flex !important;align-items:baseline !important;justify-content:space-between !important;margin-top:auto}
.ocs-product-price{font-size:14px !important;font-weight:700 !important;color:var(--ocs-text) !important}
.ocs-price-enquire{font-size:12px !important;font-weight:400 !important;color:var(--ocs-text-lt) !important;font-style:italic}
.ocs-variant-count{font-size:11px !important;color:var(--ocs-text-mt) !important;font-weight:400 !important}

/* ── Pagination ──────────────────────────────────── */
.ocs-pagination{display:flex !important;justify-content:center !important;align-items:center !important;gap:4px !important;margin-top:28px !important;padding-top:16px !important}
.ocs-page-btn{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  min-width:34px !important;height:34px !important;padding:0 8px !important;
  border:1px solid var(--ocs-bdr) !important;border-radius:0 !important;
  background:var(--ocs-bg) !important;color:var(--ocs-text) !important;
  font-size:13px !important;font-family:var(--ocs-font) !important;cursor:pointer
}
.ocs-page-btn:hover{background:var(--ocs-primary) !important;color:#fff !important;border-color:var(--ocs-primary) !important}
.ocs-page-btn.ocs-page-current{background:var(--ocs-primary) !important;color:#fff !important;border-color:var(--ocs-primary) !important}
.ocs-page-ellipsis{padding:0 5px;color:var(--ocs-text-mt)}

/* ── Loading Skeleton ────────────────────────────── */
.ocs-loading-skeleton{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:0 !important}
.ocs-skeleton-card{border-bottom:1px solid #eee;padding:14px 14px 18px}
.ocs-skeleton-image{aspect-ratio:4/3;background:linear-gradient(90deg,#f5f5f5 25%,#eee 50%,#f5f5f5 75%);background-size:200% 100%;animation:ocs-shimmer 1.5s infinite}
.ocs-skeleton-text{height:11px;margin:8px 0 0;background:linear-gradient(90deg,#f5f5f5 25%,#eee 50%,#f5f5f5 75%);background-size:200% 100%;animation:ocs-shimmer 1.5s infinite}
.ocs-skeleton-text.short{width:40%;margin-bottom:10px}
@keyframes ocs-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── States ──────────────────────────────────────── */
.ocs-no-results,.ocs-error{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--ocs-text-lt)}
.ocs-no-results p{margin:0;font-size:15px}
.ocs-error{color:#dc2626;background:#fef2f2}
.ocs-perf-indicator{margin-top:16px;padding:8px 12px;background:#1e293b;color:#94a3b8;font-size:11px;font-family:monospace}

/* ── Mobile ──────────────────────────────────────── */
.ocs-mobile-filter-toggle{
  display:none !important;align-items:center;gap:8px;
  padding:9px 14px;border:1px solid var(--ocs-bdr) !important;border-radius:0 !important;
  background:var(--ocs-bg) !important;font-size:11px !important;
  font-family:var(--ocs-font) !important;font-weight:700 !important;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ocs-text) !important;cursor:pointer;
  margin-bottom:10px
}
.ocs-mobile-filter-toggle svg{width:16px;height:16px}
.ocs-mobile-filter-close{
  display:none !important;background:none !important;border:none !important;
  font-size:26px !important;font-weight:300 !important;color:var(--ocs-text) !important;
  cursor:pointer;padding:2px;line-height:1
}

/* ── Responsive ──────────────────────────────────── */
@media(max-width:1024px){
  .ocs-cols-4{grid-template-columns:repeat(3,1fr) !important}
  .ocs-loading-skeleton{grid-template-columns:repeat(3,1fr) !important}
}
@media(max-width:768px){
  .ocs-content.ocs-has-sidebar{grid-template-columns:1fr !important}
  .ocs-sidebar{display:none !important;position:fixed !important;top:0 !important;left:0 !important;width:280px !important;height:100vh !important;max-height:100vh !important;background:var(--ocs-bg) !important;z-index:10000 !important;padding:16px !important;box-shadow:4px 0 24px rgba(0,0,0,.12) !important;overflow-y:auto !important}
  .ocs-sidebar.ocs-sidebar-open{display:block !important}
  .ocs-sidebar-header{display:flex !important;justify-content:space-between !important;align-items:center !important;margin-bottom:10px !important;padding-bottom:10px !important;border-bottom:1px solid var(--ocs-bdr) !important}
  .ocs-mobile-filter-close{display:block !important}
  .ocs-mobile-filter-toggle{display:inline-flex !important}
  body.ocs-sidebar-overlay::after{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.35);z-index:9999}
  .ocs-cols-3,.ocs-cols-4{grid-template-columns:repeat(2,1fr) !important}
  .ocs-loading-skeleton{grid-template-columns:repeat(2,1fr) !important}
  .ocs-page-title{font-size:22px !important}
}
@media(max-width:480px){
  .ocs-search-wrapper{padding:0 10px 24px !important}
  .ocs-cols-2,.ocs-cols-3,.ocs-cols-4{grid-template-columns:1fr 1fr !important;gap:0 !important}
  .ocs-loading-skeleton{grid-template-columns:1fr 1fr !important;gap:0 !important}
  .ocs-product-link{padding:8px 6px 12px !important}
  .ocs-product-brand{font-size:10px !important}
  .ocs-product-title{font-size:11px !important}
  .ocs-product-price{font-size:12px !important}
  .ocs-product-image{padding:6px 4px !important}
}

/* ── Skeleton Loading Cards ───────────────────────── */
@keyframes ocs-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.ocs-skeleton-card {
  pointer-events: none;
  border: 1px solid var(--ocs-bdr) !important;
  border-radius: 6px;
  overflow: hidden;
  padding: 0 !important;
}
.ocs-skeleton-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: ocs-shimmer 1.4s infinite linear;
}
.ocs-skeleton-line {
  height: 14px;
  margin: 10px 12px 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: ocs-shimmer 1.4s infinite linear;
}
.ocs-skeleton-short {
  width: 55%;
  margin-bottom: 12px;
}
/* Prevent image reflow — images have explicit dimensions, object-fit fills card */
.ocs-product-image img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

/* ── Block filter ─────────────────────────────────── */
.ocs-filter-blocks{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:5px !important;
  padding:6px 0 4px !important
}
.ocs-filter-block{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:36px !important;
  border:1px solid var(--ocs-bdr) !important;
  border-radius:0 !important;
  background:#fff !important;
  color:var(--ocs-text) !important;
  font-family:var(--ocs-font) !important;
  font-size:12px !important;
  font-weight:500 !important;
  cursor:pointer !important;
  transition:all var(--ocs-tr) !important;
  padding:0 !important;
  width:100% !important;
  box-sizing:border-box !important
}
.ocs-filter-block:hover:not(:disabled){
  border-color:var(--ocs-primary) !important;
  background:#f5f5f5 !important
}
.ocs-filter-block.ocs-block-active{
  background:var(--ocs-primary) !important;
  color:#fff !important;
  border-color:var(--ocs-primary) !important
}
.ocs-filter-block:disabled{
  opacity:.3 !important;
  cursor:not-allowed !important
}

/* ── Attribute slider (matches price slider exactly) ── */
.ocs-attr-slider-wrap{padding:4px 2px !important}
.ocs-attr-slider-labels{
  display:flex !important;
  justify-content:space-between !important;
  margin-bottom:8px !important;
  font-size:12px !important;
  font-weight:600 !important;
  color:var(--ocs-text) !important
}
.ocs-attr-slider-track{
  position:relative !important;
  height:4px !important;
  background:#e0e0e0 !important;
  border-radius:2px !important;
  margin:16px 0 8px !important
}
.ocs-attr-slider-range{
  position:absolute !important;
  height:100% !important;
  background:var(--ocs-primary) !important;
  border-radius:2px !important;
  z-index:1 !important
}
.ocs-attr-slider-thumb{
  position:absolute !important;
  width:100% !important;
  height:4px !important;
  top:0 !important;left:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  background:transparent !important;
  pointer-events:none !important;
  z-index:2 !important
}
.ocs-attr-slider-thumb#ocs-attr-slider-max{z-index:3 !important}
.ocs-attr-slider-thumb::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  width:16px !important;height:16px !important;
  border-radius:50% !important;
  background:var(--ocs-primary) !important;
  border:2px solid #fff !important;
  box-shadow:0 1px 3px rgba(0,0,0,.25) !important;
  cursor:pointer !important;
  pointer-events:all !important
}
.ocs-attr-slider-thumb::-moz-range-thumb{
  width:16px !important;height:16px !important;
  border-radius:50% !important;
  background:var(--ocs-primary) !important;
  border:2px solid #fff !important;
  cursor:pointer !important;
  pointer-events:all !important
}
.ocs-attr-slider-inputs{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  margin-bottom:8px !important;
  padding-top:2px !important
}
.ocs-attr-slider-input{
  flex:1 !important;
  padding:7px 8px !important;
  border:1px solid var(--ocs-bdr) !important;
  border-radius:0 !important;
  font-size:13px !important;
  font-family:var(--ocs-font) !important;
  outline:none !important;
  max-width:80px !important
}
.ocs-attr-slider-input:focus{border-color:var(--ocs-primary) !important}
.ocs-attr-slider-sep{color:var(--ocs-text-mt);font-size:12px}
.ocs-attr-slider-apply{
  width:100% !important;
  padding:8px !important;
  background:var(--ocs-primary) !important;
  color:#fff !important;
  border:none !important;
  border-radius:0 !important;
  font-size:11px !important;
  font-family:var(--ocs-font) !important;
  font-weight:600 !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
  cursor:pointer !important
}
.ocs-attr-slider-apply:hover{background:#333 !important}

/* ── SVG size reset — prevent theme from stretching icons ── */
.ocs-search-wrapper svg{max-width:none !important;height:auto}
.ocs-search-icon svg,.ocs-search-icon{width:16px !important;height:16px !important;max-width:16px !important;max-height:16px !important}

/* ── Colour swatches ─────────────────────────────────── */
.ocs-colour-swatches {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ocs-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
  background: #ccc;
  flex-shrink: 0;
}
.ocs-swatch-more {
  font-size: 11px;
  color: var(--ocs-text-lt);
  line-height: 14px;
}
/* Common colour slugs → CSS colours */
.ocs-swatch--black        { background: #1a1a1a; }
.ocs-swatch--white        { background: #ffffff; border-color: #ccc; }
.ocs-swatch--blue         { background: #2563eb; }
.ocs-swatch--navy         { background: #1e3a5f; }
.ocs-swatch--red          { background: #dc2626; }
.ocs-swatch--pink         { background: #ec4899; }
.ocs-swatch--purple       { background: #7c3aed; }
.ocs-swatch--green        { background: #16a34a; }
.ocs-swatch--yellow       { background: #eab308; }
.ocs-swatch--orange       { background: #ea580c; }
.ocs-swatch--brown        { background: #92400e; }
.ocs-swatch--grey,
.ocs-swatch--gray         { background: #6b7280; }
.ocs-swatch--silver       { background: #c0c0c0; border-color: #aaa; }
.ocs-swatch--gold         { background: #b8860b; }
.ocs-swatch--beige        { background: #d4b896; }
.ocs-swatch--cream        { background: #f5f0e8; border-color: #ccc; }
.ocs-swatch--clear        { background: linear-gradient(135deg,#fff 40%,#e0e0e0 100%); border-color: #ccc; }
.ocs-swatch--transparent  { background: linear-gradient(135deg,#fff 40%,#e0e0e0 100%); border-color: #ccc; }
.ocs-swatch--tortoise,
.ocs-swatch--tortoiseshell{ background: linear-gradient(135deg,#8B4513 0%,#D2691E 50%,#8B4513 100%); }
.ocs-swatch--havana       { background: linear-gradient(135deg,#5C3317 0%,#C8832A 100%); }
.ocs-swatch--gunmetal     { background: #2C3539; }
.ocs-swatch--rose-gold    { background: #b76e79; }
.ocs-swatch--bronze       { background: #8C6239; }
.ocs-swatch--bronze-copper{ background: #8C6239; }
.ocs-swatch--multicolour,
.ocs-swatch--multicolor,
.ocs-swatch--multiple     { background: linear-gradient(135deg,#e53e3e,#f6e05e,#48bb78,#4299e1,#805ad5); }

/* ── Sale price ──────────────────────────────────────── */
.ocs-price-sale { display: flex; align-items: center; gap: 6px; }
.ocs-price-regular { text-decoration: line-through; color: var(--ocs-text-lt); font-size: 0.9em; }
.ocs-price-current { color: #d0021b; font-weight: 600; }

/* ── Product card row builder ────────────────────────── */
.ocs-product-primary { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ocs-text-mt); margin-bottom: 2px; }
.ocs-product-secondary { font-size: 13px; font-weight: 500; color: var(--ocs-text); margin-bottom: 4px; }
/* All spans inherit parent row colour — no per-field colour overrides */
.ocs-product-primary > span,
.ocs-product-primary > span * { color: inherit; }
.ocs-product-secondary > span,
.ocs-product-secondary > span * { color: inherit; }
/* Separator between multiple fields in same row */
.ocs-product-primary > span + span::before,
.ocs-product-secondary > span + span::before { content: ' · '; color: var(--ocs-text-lt); }

/* ── Product card gallery slider ─────────────────────── */
.ocs-slides {
  position: relative;
  width: 100%;
  height: 100%;
}
.ocs-slide {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.ocs-slide.active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
}
/* Arrow nav — hidden until hover */
.ocs-gallery-nav {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
  z-index: 2;
}
.ocs-product-card:hover .ocs-gallery-nav {
  opacity: 1;
  pointer-events: auto;
}
.ocs-gallery-prev,
.ocs-gallery-next {
  background: rgba(255,255,255,.92);
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: #333;
  transition: background .15s, box-shadow .15s;
  padding: 0;
  flex-shrink: 0;
}
.ocs-gallery-prev:hover,
.ocs-gallery-next:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.ocs-gallery-count {
  font-size: 10px;
  font-weight: 500;
  color: #555;
  background: rgba(255,255,255,.85);
  padding: 1px 6px;
  border-radius: 10px;
  letter-spacing: .02em;
  white-space: nowrap;
}