* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background: #f7f8fc;
    color: #111;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

button {
    cursor: pointer;
    font-family: inherit;
}

a {
    text-decoration: none;
}

a:hover,
a:focus{
    color:inherit !important;
    text-decoration:none !important;
}

button:hover{
    outline:none;
}

button:focus,
button:focus-visible{
    outline:none !important;
    box-shadow:none !important;
}

input:focus,
select:focus,
textarea:focus{
    outline:none !important;
    box-shadow:none !important;
}

*:focus{
    outline:none;
}

/* ====================================
   SHOP SECTION
==================================== */

.fashion-shop {
    width: 100%;
    padding: 2vw;
}

.shop-wrapper {
    display: grid;
    grid-template-columns: 18vw 1fr;
    gap: 2vw;
    align-items: start;
}

/* ====================================
   SIDEBAR
==================================== */

.filter-sidebar {
    background: #fff;
    border-radius: 1.2vw;
    padding: 1.5vw;
    position: sticky;
    top: 1.5vw;
    box-shadow:
        0 1vw 3vw rgba(0, 0, 0, .05);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.8vw;
}

.sidebar-header h3 {
    font-size: 1.1vw;
    font-weight: 700;
}

.clear-filter {
    border: none;
    background: none;
    color: #ff4d4d;
    font-size: .75vw;
}

/* ====================================
   FILTER GROUP
==================================== */

.filter-group {
    margin-bottom: 2vw;
    padding-bottom: 1.5vw;
    border-bottom: .08vw solid #ececec;
}

.filter-title {
    margin-bottom: 1vw;
}

.filter-title span {
    font-size: .9vw;
    font-weight: 700;
}

/* ====================================
   CHECKBOX
==================================== */

.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: .9vw;
}

.checkbox-list label {
    display: flex;
    align-items: center;
    gap: .6vw;
    font-size: .75vw;
}

.checkbox-list span {
    flex: 1;
}

.checkbox-list em {
    font-style: normal;
    color: #888;
}

.checkbox-list input {
    width: .9vw;
    height: .9vw;
}

/* ====================================
   FABRIC BUTTONS
==================================== */

.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: .6vw;
}

.pill-list button {
    border: none;
    background: #f3f4f7;
    border-radius: 5vw;
    padding: .55vw .9vw;
    font-size: .7vw;
    transition: .3s;
}

.pill-list button:hover {
    background: #111;
    color: #fff;
}

/* ====================================
   PATTERN
==================================== */

.pattern-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .8vw;
}

.pattern-item {
    text-align: center;
}

.pattern {
    width: 2.8vw;
    height: 2.8vw;
    border-radius: .8vw;
    display: block;
    margin: auto;
}

.solid {
    background: #111;
}

.striped {
    background:
        repeating-linear-gradient(45deg,
            #111,
            #111 .3vw,
            #fff .3vw,
            #fff .6vw);
}

.floral {
    background: #ffdce5;
}

.checked {
    background:
        linear-gradient(90deg,
            #111 50%,
            #fff 50%);
}

.pattern-item p {
    font-size: .65vw;
    margin-top: .4vw;
}

/* ====================================
   COLORS
==================================== */

.color-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .7vw;
}

.color-grid span {
    width: 1.8vw;
    height: 1.8vw;
    border-radius: 50%;
    border: .08vw solid #ddd;
    cursor: pointer;
}

/* ====================================
   SIZES
==================================== */

.size-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6vw;
}

.size-grid button {
    border: .08vw solid #ddd;
    background: #fff;
    border-radius: .7vw;
    height: 2vw;
    font-size: .7vw;
    transition: .3s;
}

.size-grid button:hover {
    background: #111;
    color: #fff;
}

/* ====================================
   PRICE BOX
==================================== */

.price-box {
    background: #fafafa;
    border-radius: 1vw;
    padding: 1vw;
}

.price-values {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1vw;
}

.price-values span {
    font-size: .75vw;
    font-weight: 600;
}

.range-wrapper {
    position: relative;
    height: 2vw;
}

.range-wrapper input {
    width: 100%;
    appearance: none;
    background: none;
    position: absolute;
    pointer-events: none;
}

.range-wrapper input::-webkit-slider-thumb {
    appearance: none;
    width: 1vw;
    height: 1vw;
    border-radius: 50%;
    background: #111;
    pointer-events: auto;
}

.selected-range {
    margin-top: 1vw;
    text-align: center;
    font-size: .75vw;
    color: #666;
}

.apply-btn {
    width: 100%;
    height: 2.8vw;
    border: none;
    border-radius: .9vw;
    background: #111;
    color: #fff;
    font-size: .8vw;
    font-weight: 600;
}

/* ====================================
   CONTENT
==================================== */

.shop-content {
    width: 100%;
}

/* ====================================
   TOPBAR
==================================== */

.shop-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5vw;
}

.topbar-left h1 {
    font-size: 2vw;
    font-weight: 800;
}

.topbar-left p {
    font-size: .8vw;
    color: #777;
    margin-top: .3vw;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 1vw;
}

.topbar-right select {
    height: 2.7vw;
    padding: 0 1vw;
    border: .08vw solid #ddd;
    border-radius: .8vw;
    background: #fff;
    font-size: .75vw;
}

.view-switcher {
    display: flex;
    gap: .5vw;
}

.view-switcher button {
    width: 2.7vw;
    height: 2.7vw;
    border: none;
    border-radius: .8vw;
    background: #fff;
}

.view-switcher .active {
    background: #111;
    color: #fff;
}

/* ====================================
   ACTIVE FILTERS
==================================== */

.active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8vw;
    margin-bottom: 2vw;
}

.active-filters span {
    background: #fff;
    border: .08vw solid #e5e5e5;
    border-radius: 5vw;
    padding: .5vw 1vw;
    font-size: .7vw;
    font-weight: 500;
}

.active-filters a {
    color: #ff4d4d;
    font-size: .75vw;
    font-weight: 600;
}

/* ====================================
   PRODUCT GRID
==================================== */

.product-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 1.5vw;
}

/* ====================================
   PRODUCT CARD
==================================== */

.product-card{

    background:#fff;
    
    border-radius:24px;
    
    overflow:hidden;
    
    position:relative;
    
    display:flex;
    
    flex-direction:column;
    
    transition:.35s;
    
    box-shadow: 0 10px 35px rgba(0,0,0,.06);

}

.product-card:hover{

    transform: translateY(-10px);
    
    box-shadow: 0 25px 50px rgba(0,0,0,.12);

}

/* ====================================
   BADGES
==================================== */

.badge {
    position: absolute;
    top: 1vw;
    left: 1vw;
    z-index: 10;
    padding: .45vw .9vw;
    border-radius: 5vw;
    color: #fff;
    font-size: .65vw;
    font-weight: 700;
}

.sale {
    background: #ff4d4d;
}

.new {
    background: #111;
}

/* ====================================
   WISHLIST
==================================== */

.wishlist {
    position: absolute;
    right: 1vw;
    top: 1vw;
    width: 2.3vw;
    height: 2.3vw;
    border: none;
    border-radius: 50%;
    background: #fff;
    z-index: 10;
    font-size: .9vw;
    box-shadow:
        0 .3vw 1vw rgba(0, 0, 0, .08);
    transition: .3s;
}

.wishlist:hover {
    background: #111;
    color: #fff;
    transform: scale(1.1);
}

/* ====================================
   PRODUCT IMAGE
==================================== */

.product-image {
    height: 20vw;
    background:
        linear-gradient(180deg,
            #fafafa 0%,
            #f3f4f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.08);
}

/* ====================================
   PRODUCT INFO
==================================== */

.product-info {
    padding: 1.2vw;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.brand {
    display: block;
    color: #999;
    font-size: .65vw;
    letter-spacing: .08vw;
    margin-bottom: .5vw;
    text-transform:uppercase;
}

.product-info h3 {
    font-size: .95vw;
    line-height: 1.5;
    font-weight: 600;
    min-height: 3vw;
    margin-bottom: .9vw;
}

.product-info h3 a{

color:#111;
transition:.3s;

}

.product-info h3 a:hover{

color:#2f6f3e;

}

/* ====================================
   PRICE
==================================== */

.price-row {
    display: flex;
    align-items: center;
    gap: .7vw;
    margin-bottom: 1vw;
}

.price-row strong {
    font-size: 1vw;
}

.price-row del {
    color: #999;
    font-size: .75vw;
}


.price{

    display:flex;
    align-items:center;
    gap:10px;
    font-size:26px;
    font-weight:700;
    color:#111;

}

.price del{

    font-size:16px;
    color:#aaa;
    font-weight:500;

}

.price ins{

    background:none;
    text-decoration:none;

}
/* ====================================
   PRODUCT COLORS
==================================== */

.product-colors {
    display: flex;
    gap: .45vw;
    margin-bottom: 1vw;
}

.product-colors span {
    width: .9vw;
    height: .9vw;
    border-radius: 50%;
    border:2px solid #fff;
    box-shadow:0 0 0 1px #ddd;
    transition:.3s;
    cursor:pointer;
}

.product-colors span:hover{
    transform:scale(1.2);
}

.product-colors span:nth-child(1) {
    background: #111;
}

.product-colors span:nth-child(2) {
    background: #f6c4d2;
}

.product-colors span:nth-child(3) {
    background: #c6dcff;
}

.product-colors span:nth-child(4) {
    background: #ececec;
}

.product-colors .active {
    outline: .12vw solid #111;
}

/* ====================================
   ADD TO CART
==================================== */

.cart-btn {
    width: 100%;
    height: 2.8vw;
    border: none;
    border-radius: .8vw;
    background: #111;
    color: #fff;
    font-size: .75vw;
    font-weight: 600;
    transition: .3s;
}

.cart-btn:hover {
    background: #222;
}

/* ====================================
   PAGINATION
==================================== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6vw;
    margin-top: 3vw;
}

.pagination button {
    width: 2.6vw;
    height: 2.6vw;
    border: none;
    background: #fff;
    border-radius: .7vw;
    font-size: .75vw;
    box-shadow:
        0 .3vw 1vw rgba(0, 0, 0, .05);
}

.pagination button.active {
    background: #111;
    color: #fff;
}

/* ====================================
   TABLET
==================================== */

@media (max-width:991px) {

    .shop-wrapper {
        grid-template-columns: 1fr;
    }

    .filter-sidebar {
        position: relative;
        top: auto;
    }

    .sidebar-header h3 {
        font-size: 2.5vw;
    }

    .clear-filter {
        font-size: 1.8vw;
    }

    .filter-title span {
        font-size: 2vw;
    }

    .checkbox-list label {
        font-size: 1.7vw;
    }

    .pill-list button {
        font-size: 1.6vw;
        padding: 1vw 1.8vw;
    }

    .pattern {
        width: 6vw;
        height: 6vw;
    }

    .pattern-item p {
        font-size: 1.5vw;
    }

    .color-grid span {
        width: 4vw;
        height: 4vw;
    }

    .size-grid button {
        height: 5vw;
        font-size: 1.6vw;
    }

    .price-values span {
        font-size: 1.6vw;
    }

    .selected-range {
        font-size: 1.6vw;
    }

    .apply-btn {
        height: 6vw;
        font-size: 1.8vw;
    }

    .topbar-left h1 {
        font-size: 4vw;
    }

    .topbar-left p {
        font-size: 1.8vw;
    }

    .topbar-right select {
        height: 5vw;
        font-size: 1.6vw;
    }

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

    .product-image {
        height: 35vw;
    }

    .brand {
        font-size: 1.4vw;
    }

    .product-info h3 {
        font-size: 2vw;
        min-height: auto;
    }

    .price-row strong {
        font-size: 2vw;
    }

    .price-row del {
        font-size: 1.5vw;
    }

    .cart-btn {
        height: 5vw;
        font-size: 1.5vw;
    }

    .badge {
        font-size: 1.3vw;
    }

    .wishlist {
        width: 5vw;
        height: 5vw;
        font-size: 1.7vw;
    }
}

/* ====================================
   MOBILE
==================================== */

@media (max-width:767px) {

    .fashion-shop {
        padding: 4vw;
    }

    .shop-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 4vw;
    }

    .topbar-left h1 {
        font-size: 7vw;
    }

    .topbar-left p {
        font-size: 3vw;
    }

    .topbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .topbar-right select {
        width: 70%;
        height: 10vw;
        font-size: 3vw;
        border-radius: 2vw;
    }

    .view-switcher button {
        width: 10vw;
        height: 10vw;
        font-size: 3vw;
        border-radius: 2vw;
    }

    .active-filters {
        gap: 2vw;
    }

    .active-filters span {
        font-size: 2.8vw;
        padding: 1.5vw 3vw;
    }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 5vw;
    }

    .product-card {
        border-radius: 4vw;
    }

    .product-image {
        height: 70vw;
    }

    .badge {
        top: 3vw;
        left: 3vw;
        padding: 1.2vw 2.5vw;
        font-size: 2.3vw;
    }

    .wishlist {
        top: 3vw;
        right: 3vw;
        width: 10vw;
        height: 10vw;
        font-size: 3.5vw;
    }

    .product-info {
        padding: 4vw;
    }

    .brand {
        font-size: 2.5vw;
    }

    .product-info h3 {
        font-size: 4vw;
    }

    .price-row strong {
        font-size: 4vw;
    }

    .price-row del {
        font-size: 3vw;
    }

    .product-colors span {
        width: 3vw;
        height: 3vw;
    }

    .cart-btn {
        height: 11vw;
        border-radius: 3vw;
        font-size: 3vw;
    }

    .pagination {
        gap: 2vw;
    }

    .pagination button {
        width: 10vw;
        height: 10vw;
        font-size: 3vw;
        border-radius: 2vw;
    }

    .filter-sidebar {
        padding: 5vw;
        border-radius: 4vw;
    }

    .sidebar-header h3 {
        font-size: 5vw;
    }

    .clear-filter {
        font-size: 3vw;
    }

    .filter-title span {
        font-size: 4vw;
    }

    .checkbox-list label {
        font-size: 3vw;
    }

    .checkbox-list input {
        width: 3vw;
        height: 3vw;
    }

    .pill-list button {
        font-size: 2.8vw;
        padding: 2vw 3vw;
    }

    .pattern {
        width: 12vw;
        height: 12vw;
    }

    .pattern-item p {
        font-size: 2.5vw;
    }

    .color-grid span {
        width: 8vw;
        height: 8vw;
    }

    .size-grid button {
        height: 10vw;
        font-size: 3vw;
    }

    .price-values span {
        font-size: 3vw;
    }

    .selected-range {
        font-size: 3vw;
    }

    .apply-btn {
        height: 12vw;
        font-size: 3vw;
        border-radius: 3vw;
    }
}

/* =====================================
REMOVE DEFAULT WOOCOMMERCE STYLE
===================================== */

.woocommerce ul.products,
.woocommerce ul.products li.product{
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
}

.woocommerce ul.products li.product{
    width:100% !important;
    float:none !important;
}

.woocommerce ul.products li.product a{
    text-decoration:none !important;
    color:inherit !important;
}

.woocommerce ul.products li.product:hover a{
    color:inherit !important;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button{
    all:unset;
}

.woocommerce a{
    color:inherit;
}

.woocommerce a:hover{
    color:inherit !important;
}

.product-card *{
    box-sizing:border-box;
}