.catalog-v3{
    --max: 1280px;
    --gap: 28px;
}

/* ---------------------------
   Layout wrapper + title
---------------------------- */
.catalog-v3 .v3-wrap{
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 16px;
}

.catalog-v3 .v3-head{
    display:flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 10px;
}

.catalog-v3 .v3-title{
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ---------------------------
   Grid
---------------------------- */
.catalog-v3 .v3-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}

@media (max-width: 1024px){
    .catalog-v3 .v3-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px){
    .catalog-v3 .v3-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------
   Card (media + swap)
---------------------------- */
.catalog-v3 .v3-media{
    position: relative;
    display:block;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow:hidden;
    background: #f5f5f5;
}

.catalog-v3 .v3-img{
    position:absolute;
    inset: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    object-fit: contain;
    object-position: center;
    display:block;
}

.catalog-v3 .v3-media--swap .v3-img--a{ opacity: 1; transition: opacity 220ms ease; }
.catalog-v3 .v3-media--swap .v3-img--b{ opacity: 0; transition: opacity 220ms ease; }
.catalog-v3 .v3-media--swap:hover .v3-img--a{ opacity: 0; }
.catalog-v3 .v3-media--swap:hover .v3-img--b{ opacity: 1; }

/* ---------------------------
   Badges
---------------------------- */

.catalog-v3 .v3-badge{
    display:inline-flex;
    width: fit-content;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 800;
    border-radius: 999px;
    color:#fff;
}

.catalog-v3 .v3-badge--sale{ background:#dc2626; }
.catalog-v3 .v3-badge--new{ background:#111827; }

.catalog-v3 .v3-badge--try{
    background: transparent;
    border: 1px solid #60a5fa;
    color: #3b82f6;
    font-weight: 650;
}

.catalog-v3 .v3-badge--try:hover{
    background: #60a5fa;
    color: #ffffff;
}

/* ---------------------------
   Info rows
---------------------------- */
.catalog-v3 .v3-info{
    display: grid;
    grid-template-rows: auto auto auto;
    row-gap: 6px;
    padding-top: 6px;
}

.catalog-v3 .v3-row{
    display:flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.catalog-v3 .v3-name{
    min-width:0;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 700;
    color:#111;
    text-decoration:none;
}

.catalog-v3 .v3-row--mid{
    min-height: 16px;
    line-height: 16px;
    align-items: center;
}

.catalog-v3 .v3-brand{
    min-height: 16px;
    line-height: 16px;
    min-width:0;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color:#6b7280;
}

.catalog-v3 .v3-price{ white-space: nowrap; }
.catalog-v3 .v3-price--now{ font-size: 16px; font-weight: 800; color:#111; }
.catalog-v3 .v3-price--old{ font-size: 14px; color:#9ca3af; text-decoration: line-through; }
.catalog-v3 .v3-cur{ margin-left: 4px; color:#6b7280; font-weight: 700; }

.catalog-v3 .v3-row--bottom{ margin-top: 0; align-items: center; }

.catalog-v3 .v3-swatches{
    display:flex;
    align-items:center;
    gap: 8px;
    min-height: 18px;
}

.catalog-v3 .v3-swatch{
    width:16px; height:16px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    display:inline-block;
}

.catalog-v3 .v3-more{ font-size: 12px; color:#6b7280; }

.catalog-v3 .v3-cart{
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    border-radius: 999px;
    color:#111;
}

.catalog-v3 .v3-cart:hover{ background:#f3f4f6; }
.catalog-v3 .v3-cart.is-disabled{ opacity:.45; pointer-events:none; }

/* ---------------------------
   Mobile card tweaks
---------------------------- */
@media (max-width: 768px) {
    .catalog-v3 { --gap: 20px; }
    .catalog-v3 .v3-head { margin: 10px 0 8px; }
    .catalog-v3 .v3-title { font-size: 20px; }
    .catalog-v3 .v3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-v3 .v3-name { font-size: 15px; }
    .catalog-v3 .v3-brand,
    .catalog-v3 .v3-price--old { font-size: 13px; }
    .catalog-v3 .v3-price--now { font-size: 15px; }
    .catalog-v3 .v3-cart { padding: 8px; }
    .catalog-v3 .v3-swatches { gap: 6px; }
    .catalog-v3 .v3-swatch { width: 14px; height: 14px; }
    .catalog-v3 .v3-media { aspect-ratio: 1 / 1; }
}

@media (max-width: 480px) {
    .catalog-v3 .v3-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .catalog-v3 .v3-wrap { padding: 0 12px; }
}

/* ---------------------------
   Toolbar (Sort / Filters)
---------------------------- */
.catalog-v3 .product-toolbar{
    position: relative;
    z-index: 10;
    display: flex;
    gap: 10px;
    margin: 12px 0;
    padding: 0;
    justify-content: flex-end;
}

.catalog-v3 .toolbar-popover{
    position: relative;
    z-index: 11;
}

.catalog-v3 .toolbar-btn{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #111;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    pointer-events: auto;
}

.catalog-v3 .sort-dropdown{
    z-index: 120;
}

@media (max-width: 768px){
    .catalog-v3 .product-toolbar{ justify-content: space-between; }
    .catalog-v3 .toolbar-btn{
        flex: 1;
        padding: 14px 18px;
        font-size: 16px;
    }

    /* Keep dropdown full width, but don't force drawer full width here */
    .catalog-v3 .sort-dropdown{ width: 100%; }
}

/* ---------------------------
   Filter UI blocks
   (Narrower interior: more padding + better spacing)
---------------------------- */

/* Filter drawer title */
.catalog-v3 .filter-topbar{
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.catalog-v3 .filter-title{
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: capitalize;
    margin: 0;
}

.catalog-v3 .filter-form{
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.catalog-v3 .filter-scroll{
    flex: 1;
    overflow: auto;
    padding: 20px 20px 20px; /* narrower / away from walls */
    -webkit-overflow-scrolling: touch;
}

/* Sticky footer */
.catalog-v3 .filter-footer{
    position: sticky;
    bottom: 0;
    background: var(--bg, #fff);
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 12px 16px; /* match inner padding */
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
}

.catalog-v3 .filter-reset{
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 999px;
    padding: 14px 16px;
    font-weight: 900;
    background: #fff;
    cursor: pointer;
}

.catalog-v3 .filter-apply{
    border: 0;
    border-radius: 999px;
    padding: 14px 16px;
    font-weight: 900;
    background: #111;
    color: #fff;
    cursor: pointer;
}

.catalog-v3 .filter-block{
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.catalog-v3 .filter-block-head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.catalog-v3 .filter-block-title{ font-weight: 900; }

.catalog-v3 .filter-close{
    top: 18px;
    right: 16px;
    font-size: 22px;
}


.catalog-v3 .filter-clear{
    border: 0;
    background: transparent;
    color: rgba(0,0,0,0.55);
    font-weight: 800;
    cursor: pointer;
}

.catalog-v3 .price-toolbar{
    display:flex;
    gap: 10px;
}

.catalog-v3 .price-pill{
    flex: 1;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 14px;
    padding: 10px 10px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 8px;
}

.catalog-v3 .price-pill input{
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    text-align: end;
    font-weight: 900;
}

.catalog-v3 .price-pill-label{
    font-weight: 800;
    opacity: .65;
}

/* ---------------------------
   Dual range slider (fixed)
   - thumbs draggable
   - no overlap issues
---------------------------- */
.catalog-v3 .price-slider{ margin-top: 10px; }

.catalog-v3 .range-wrap{
    position: relative;
    height: 34px;
    margin-top: 10px;
}

/* Track */
.catalog-v3 .range-track{
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: rgba(0,0,0,0.12);
    z-index: 1;
}

/* Fill */
.catalog-v3 .range-fill{
    position: absolute;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: #111;
    z-index: 2;
}

/* Sliders */
.catalog-v3 .range-wrap input[type="range"]{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 34px;
    background: transparent;
    margin: 0;

    /* IMPORTANT: make it draggable on mobile */
    pointer-events: none;   /* IMPORTANT: let only the thumb receive input */
    touch-action: pan-y;    /* allow vertical scroll in drawer, thumb still draggable */


    /* Remove default styles */
    -webkit-appearance: none;
    appearance: none;

    z-index: 3;
}

/* Put MAX slider above MIN slider so both can be grabbed */
.catalog-v3 #price-range-min{ z-index: 3; }
.catalog-v3 #price-range-max{ z-index: 4; }

.catalog-v3 .range-wrap input[type="range"]::-webkit-slider-runnable-track{
    height: 34px;
    background: transparent;
}

.catalog-v3 .range-wrap input[type="range"]::-moz-range-track{
    height: 34px;
    background: transparent;
}

/* Thumbs */
.catalog-v3 .range-wrap input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #111;
    border: 2px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
    position: relative;
    z-index: 10;
}

.catalog-v3 .range-wrap input[type="range"]::-moz-range-thumb{
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #111;
    border: 2px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
    position: relative;
    z-index: 10;
}

/* Make thumbs clickable/draggable even when input itself ignores pointer events */
.catalog-v3 .range-wrap input[type="range"]::-webkit-slider-thumb{
    pointer-events: auto;
    cursor: grab;
}
.catalog-v3 .range-wrap input[type="range"]::-moz-range-thumb{
    pointer-events: auto;
    cursor: grab;
}


.catalog-v3 .price-hint{
    margin-top: 6px;
    font-size: 12px;
    opacity: .6;
}

/* Chips */
.catalog-v3 .chip-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.catalog-v3 .chip{ display:block; }
.catalog-v3 .chip input{ display:none; }

.catalog-v3 .chip-ui{
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 14px;
    padding: 10px 10px;
    display:flex;
    align-items:center;
    gap: 10px;
    cursor: pointer;
}

.catalog-v3 .chip input:checked + .chip-ui{
    border-color: rgba(0,0,0,0.65);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.10);
}

.catalog-v3 .swatch{
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.15);
    flex: 0 0 auto;
}

.catalog-v3 .swatch--empty{
    background: repeating-linear-gradient(45deg, #fff, #fff 3px, #eee 3px, #eee 6px);
}

.catalog-v3 .chip-text{
    font-weight: 800;
    font-size: 14px;
}

.catalog-v3 .chip-grid--shapes .chip-ui{ justify-content: flex-start; }

.catalog-v3 .shape-ico{
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 auto;
}

.catalog-v3 .shape-ico--placeholder{
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(0,0,0,0.06);
}

/* Premium select (closed state) */
.catalog-v3 .filter-select{
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    border: 1px solid rgba(0,0,0,0.14);
    border-radius: 16px;
    padding: 14px 44px 14px 16px; /* room for arrow */
    font-weight: 800;
    font-size: 15px;

    background-color: #fff;
    background-image:
        linear-gradient(45deg, transparent 50%, #555 50%),
        linear-gradient(135deg, #555 50%, transparent 50%);
    background-position:
        calc(100% - 22px) 50%,
        calc(100% - 16px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;

    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.catalog-v3 .filter-select:hover{
    border-color: rgba(0,0,0,0.3);
}

.catalog-v3 .filter-select:focus{
    outline: none;
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.12);
}

.catalog-v3 .filter-select option{
    font-weight: 700;
    padding: 10px;
}


/* Toggle */
.catalog-v3 .toggle-row{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
}

.catalog-v3 .toggle-label{ font-weight: 900; }
.catalog-v3 .toggle-input{ display:none; }

.catalog-v3 .toggle-ui{
    width: 52px;
    height: 30px;
    border-radius: 999px;
    background: rgba(0,0,0,0.15);
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
}

.catalog-v3 .toggle-ui::after{
    content:"";
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fff;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform .18s ease;
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.catalog-v3 .toggle-input:checked + .toggle-ui{ background: #111; }
.catalog-v3 .toggle-input:checked + .toggle-ui::after{ transform: translateX(22px); }

.catalog-v3 .filter-empty{
    opacity: .6;
    font-weight: 700;
}

/* === Badges layout for Catalog (same behavior as tryon_select) === */
.catalog-v3 .v3-media{
    position: relative; /* anchor for absolute overlay */
  }
  
  .catalog-v3 .v3-badges{
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 6;
  
    display: grid;
    grid-template-columns: 1fr 1fr; /* left column + right column */
    row-gap: 8px;
    align-items: start;
  
    pointer-events: none;
  }
  
  .catalog-v3 .v3-badges .v3-badge{
    grid-column: 1;
    justify-self: start;
    pointer-events: auto;
  }
  
  /* TRY pinned to top-right, same top row as first badge */
  .catalog-v3 .v3-badges .v3-badge--try{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  
  /* RTL: swap sides (TRY left, others right) */
  html[dir="rtl"] .catalog-v3 .v3-badges .v3-badge{
    grid-column: 2;
    justify-self: end;
  }
  html[dir="rtl"] .catalog-v3 .v3-badges .v3-badge--try{
    grid-column: 1;
    justify-self: start;
  }