/* BREADCRUMB */
.breadcrumb{max-width:1440px;margin:0 auto;padding:12px 24px;font-size:13px;color:var(--mid)}
.breadcrumb a{color:var(--mid);text-decoration:none}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb span{margin:0 6px}

/* PAGE HEADER */
.page-header{max-width:1440px;margin:0 auto;padding:0 24px 16px;display:flex;align-items:baseline;justify-content:space-between}
.page-header h1{font-family:'Playfair Display',serif;font-size:28px;font-weight:700}
.page-header .item-count{font-size:13px;color:var(--mid)}

/* FILTER BAR */
.filter-bar{background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:sticky;top:64px;z-index:90}
.filter-bar-inner{max-width:1440px;margin:0 auto;padding:0 24px;height:48px;display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none}
.filter-bar-inner::-webkit-scrollbar{display:none}
.filter-chip{border:1px solid var(--border);border-radius:4px;padding:0 14px;height:32px;font-size:13px;font-weight:500;color:var(--dark);background:var(--white);cursor:pointer;white-space:nowrap;font-family:'Inter',sans-serif;display:flex;align-items:center;gap:4px;transition:border-color 0.2s,color 0.2s}
.filter-chip:hover,.filter-chip.active{border-color:var(--primary);color:var(--primary);background:#FFF0F3}
.filter-bar-right{display:flex;align-items:center;gap:12px;margin-left:auto;flex-shrink:0}
.sort-select{border:1px solid var(--border);border-radius:4px;padding:0 10px;height:32px;font-size:13px;font-family:'Inter',sans-serif;color:var(--dark);background:var(--white);cursor:pointer;outline:none}
.view-toggle button{background:none;border:1px solid var(--border);cursor:pointer;padding:6px 8px;font-size:14px;color:var(--mid)}
.view-toggle button.active{border-color:var(--primary);color:var(--primary)}
.view-toggle button:first-child{border-radius:4px 0 0 4px}
.view-toggle button:last-child{border-radius:0 4px 4px 0;border-left:none}
.filter-mobile-btn{display:none;border:1px solid var(--border);border-radius:4px;padding:0 14px;height:32px;font-size:13px;font-weight:500;color:var(--dark);background:var(--white);cursor:pointer;font-family:'Inter',sans-serif}

/* MAIN LAYOUT */
.main-container{max-width:1440px;margin:0 auto;padding:20px 24px;display:flex;gap:24px}

/* SIDEBAR */
.sidebar{width:240px;flex-shrink:0}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sidebar-header h2{font-size:16px;font-weight:600}
.clear-all{font-size:13px;color:var(--primary);background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif}
.filter-group{border-bottom:1px solid var(--border);padding:16px 0}
.filter-group-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.filter-group-title{font-size:14px;font-weight:600;color:var(--dark)}
.chevron{font-size:12px;color:var(--mid);transition:transform 0.2s}
.chevron.open{transform:rotate(180deg)}
.filter-group-body{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.filter-group-body.collapsed{display:none}
.filter-check{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--dark)}
.filter-check input{accent-color:var(--primary)}
.show-more{font-size:13px;color:var(--primary);background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;margin-top:4px;text-align:left;padding:0}

/* SIZE BUTTONS */
.size-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.size-btn{border:1px solid var(--border);border-radius:4px;padding:4px 10px;font-size:13px;font-weight:500;cursor:pointer;background:var(--white);color:var(--dark);font-family:'Inter',sans-serif;transition:background 0.2s,color 0.2s,border-color 0.2s}
.size-btn:hover{border-color:var(--dark)}
.size-btn.selected{background:var(--dark);color:#fff;border-color:var(--dark)}

/* COLOR SWATCHES */
.color-swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.color-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color 0.2s;position:relative}
.color-swatch:hover{border-color:var(--mid)}
.color-swatch.selected{border-color:var(--dark)}
.color-swatch[title]:hover::after{content:attr(title);position:absolute;bottom:32px;left:50%;transform:translateX(-50%);background:var(--dark);color:#fff;font-size:11px;padding:2px 6px;border-radius:2px;white-space:nowrap;pointer-events:none}

/* RATING RADIOS */
.rating-row{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;margin-bottom:8px}
.rating-row input{accent-color:var(--primary)}
.rating-stars{color:var(--warning);font-size:13px}

/* PRICE RANGE */
.price-range{margin-top:8px}
.price-inputs{display:flex;gap:8px;margin-bottom:10px}
.price-inputs input{width:100%;border:1px solid var(--border);border-radius:4px;padding:6px 8px;font-size:13px;font-family:'Inter',sans-serif;color:var(--dark);outline:none}
.price-inputs input:focus{border-color:var(--primary)}
.range-slider{width:100%;accent-color:var(--primary)}

/* PRODUCT OVERRIDES */
.products-area{flex:1;min-width:0}
.product-card:hover{background:var(--light)}
.product-img-wrap{position:relative;overflow:hidden}
.product-heart{position:absolute;top:8px;right:8px;font-size:22px;color:#ccc;background:none!important;border:none;cursor:pointer;z-index:2;line-height:1;border-radius:0!important;width:auto!important;height:auto!important;display:block}
.product-heart.liked{color:var(--primary)}
.quick-view{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:var(--white);border:1px solid var(--border);border-radius:4px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--dark);cursor:pointer;white-space:nowrap;opacity:0;transition:opacity 0.2s;font-family:'Inter',sans-serif;z-index:3}
.product-img-wrap:hover .quick-view{opacity:1}
.card-sizes{display:none;justify-content:center;gap:4px;padding:6px 8px;background:var(--white);border-top:1px solid var(--border)}
.product-img-wrap:hover+.card-sizes,.card-sizes:hover{display:flex}
.card-size{border:1px solid var(--border);border-radius:4px;padding:2px 6px;font-size:11px;cursor:pointer;background:var(--white);color:var(--dark);font-family:'Inter',sans-serif}

/* YOU MIGHT ALSO LIKE GRID */
.also-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* MOBILE SIDEBAR PANEL */
.sidebar-panel{position:fixed;left:0;bottom:0;top:0;width:280px;background:var(--white);z-index:2000;padding:20px;overflow-y:auto;transform:translateX(-100%);transition:transform 0.3s ease;box-shadow:2px 0 12px rgba(0,0,0,0.12)}
.sidebar-panel.open{transform:translateX(0)}
.sidebar-panel-close{background:none;border:none;font-size:20px;cursor:pointer;margin-bottom:16px;display:block}

/* RESPONSIVE SPECIFICS */
@media(max-width:1100px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){
  .sidebar{display:none}
  .filter-mobile-btn{display:flex}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .also-grid{grid-template-columns:repeat(2,1fr)}
  .main-container{padding:12px 16px}
  .section{padding:32px 16px}
}

/* UTILITY CLASSES (migrated from inline) */
.breadcrumb-sep { padding: 0 4px; color: var(--mid); }
.mobile-filter-placeholder { font-size: 14px; color: var(--mid); }
.filter-hidden { display: none; }