/* =====================================================
ZAINORA FASHION BD
PREMIUM SHOP CSS
===================================================== */

:root{

–zf-pink:#ff2a5f;

–zf-orange:#ff6017;

–zf-gradient:
linear-gradient(
135deg,
#ff2a5f,
#ff6017
);

–zf-dark:#15171c;

–zf-text:#252932;

–zf-muted:#858c97;

–zf-bg:#f7f7f8;

–zf-border:#e8e9ed;

}

/* =====================================================
MAIN
===================================================== */

#zainora-shop{

width:100%;

max-width:1500px;

margin:0 auto;

padding:
25px 28px 100px;

box-sizing:border-box;

}

/* =====================================================
HERO
===================================================== */

.zf-hero{

position:relative;

min-height:270px;

padding:
45px 50px;

box-sizing:border-box;

display:flex;

align-items:center;

justify-content:space-between;

overflow:hidden;

border-radius:25px;

background:

radial-gradient(
circle at 85% 20%,
rgba(255,96,23,.30),
transparent 30%
),

radial-gradient(
circle at 70% 100%,
rgba(255,42,95,.28),
transparent 35%
),

linear-gradient(
120deg,
#14161b,
#292d35
);

box-shadow:
0 20px 55px
rgba(15,17,21,.13);

}

/* Decorative glow */

.zf-hero::before{

content:””;

position:absolute;

width:400px;
height:400px;

right:-170px;
top:-220px;

border:
1px solid
rgba(255,255,255,.10);

border-radius:50%;

}

.zf-hero-content{

position:relative;

z-index:5;

}

.zf-eyebrow{

display:block;

margin-bottom:10px;

color:#ff6b80;

font-size:10px;

font-weight:800;

letter-spacing:3px;

}

.zf-hero h1{

margin:0 !important;

color:#fff !important;

font-size:42px !important;

line-height:1.1 !important;

font-weight:800 !important;

letter-spacing:-1.5px;

}

.zf-hero p{

max-width:480px;

margin:
13px 0 22px !important;

color:#b9bec6 !important;

font-size:14px !important;

line-height:1.7;

}

/* =====================================================
HERO BUTTONS
===================================================== */

.zf-hero-buttons{

display:flex;

gap:9px;

}

.zf-hero-buttons a{

text-decoration:none !important;

}

.zf-btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

min-height:42px;

padding:
0 18px;

border-radius:9px;

background:
var(–zf-gradient);

color:#fff !important;

font-size:10px;

font-weight:800;

text-transform:uppercase;

letter-spacing:.5px;

}

.zf-btn-outline{

display:inline-flex;

align-items:center;

justify-content:center;

min-height:42px;

padding:
0 18px;

border:
1px solid
rgba(255,255,255,.20);

border-radius:9px;

background:
rgba(255,255,255,.05);

color:#fff !important;

font-size:10px;

font-weight:700;

text-transform:uppercase;

}

/* =====================================================
HERO ART
===================================================== */

.zf-hero-art{

position:relative;

width:210px;

height:210px;

flex-shrink:0;

}

.zf-hero-badge{

position:absolute;

top:50%;
left:50%;

transform:
translate(-50%,-50%);

width:130px;
height:130px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

border:
1px solid
rgba(255,255,255,.20);

border-radius:50%;

background:
rgba(255,255,255,.06);

backdrop-filter:
blur(12px);

color:#fff;

}

.zf-hero-badge span{

color:#ff6b80;

font-size:8px;

font-weight:800;

letter-spacing:2px;

}

.zf-hero-badge strong{

margin:4px 0;

font-size:25px;

}

.zf-hero-badge small{

color:#9da3ac;

font-size:8px;

letter-spacing:2px;

}

.zf-orbit{

position:absolute;

border:
1px solid
rgba(255,255,255,.10);

border-radius:50%;

}

.orbit-one{

width:180px;
height:180px;

top:15px;
left:15px;

}

.orbit-two{

width:145px;
height:145px;

top:32px;
left:32px;

}

/* =====================================================
CATEGORY BAR
===================================================== */

.zf-category-bar{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

margin-top:20px;

padding:
18px 20px;

background:#fff;

border:
1px solid
var(–zf-border);

border-radius:16px;

box-shadow:
0 6px 25px
rgba(15,17,21,.035);

}

.zf-category-title{

min-width:125px;

}

.zf-category-title span{

display:block;

color:var(–zf-pink);

font-size:8px;

font-weight:800;

letter-spacing:1.5px;

}

.zf-category-title strong{

display:block;

margin-top:3px;

color:var(–zf-dark);

font-size:15px;

}

.zf-categories{

display:flex;

align-items:center;

justify-content:flex-end;

gap:7px;

flex-wrap:wrap;

}

.zf-categories a{

display:inline-flex;

align-items:center;

justify-content:center;

min-height:35px;

padding:
0 13px;

border:
1px solid
var(–zf-border);

border-radius:8px;

background:#fff;

color:#626975;

text-decoration:none !important;

font-size:9px;

font-weight:700;

transition:.2s ease;

}

.zf-categories a:hover{

border-color:
var(–zf-pink);

background:
rgba(255,42,95,.04);

color:
var(–zf-pink);

}

/* =====================================================
PRODUCT SECTION
===================================================== */

.zf-products-section{

margin-top:28px;

}

.zf-section-heading{

display:flex;

align-items:flex-end;

justify-content:space-between;

margin-bottom:17px;

}

.zf-section-heading span{

color:
var(–zf-pink);

font-size:8px;

font-weight:800;

letter-spacing:2px;

}

.zf-section-heading h2{

margin:
4px 0 0 !important;

color:
var(–zf-dark) !important;

font-size:27px !important;

line-height:1.1 !important;

font-weight:800 !important;

}

.zf-product-count{

color:
var(–zf-muted);

font-size:10px;

font-weight:600;

}

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

.zf-products-section
ul.products{

width:100% !important;

margin:0 !important;

padding:0 !important;

display:grid !important;

grid-template-columns:
repeat(4,minmax(0,1fr)) !important;

gap:20px !important;

}

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

.zf-products-section
ul.products li.product{

width:100% !important;

margin:0 !important;

padding:0 !important;

float:none !important;

overflow:hidden;

background:#fff !important;

border:
1px solid
var(–zf-border) !important;

border-radius:16px !important;

box-shadow:
0 5px 25px
rgba(15,17,21,.035);

transition:.28s ease;

}

.zf-products-section
ul.products li.product:hover{

transform:
translateY(-5px);

box-shadow:
0 18px 40px
rgba(15,17,21,.10);

}

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

.zf-products-section
ul.products li.product img{

width:100% !important;

aspect-ratio:
1 / 1.15 !important;

object-fit:cover !important;

margin:0 !important;

transition:
transform .45s ease;

}

.zf-products-section
ul.products li.product:hover img{

transform:
scale(1.045);

}

/* =====================================================
SALE
===================================================== */

.zf-products-section
ul.products li.product .onsale{

top:10px !important;

left:10px !important;

right:auto !important;

margin:0 !important;

padding:
6px 9px !important;

min-width:auto !important;

min-height:auto !important;

border-radius:6px !important;

background:
var(–zf-gradient) !important;

color:#fff !important;

font-size:8px !important;

font-weight:800 !important;

}

/* =====================================================
PRODUCT TITLE
===================================================== */

.zf-products-section
ul.products li.product
.woocommerce-loop-product__title{

margin:0 !important;

padding:
13px 14px 3px !important;

color:
var(–zf-text) !important;

font-size:13px !important;

line-height:1.45 !important;

font-weight:700 !important;

}

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

.zf-products-section
ul.products li.product .price{

margin:0 !important;

padding:
3px 14px 13px !important;

color:
var(–zf-pink) !important;

font-size:14px !important;

font-weight:800 !important;

}

.zf-products-section
ul.products li.product .price del{

color:#9da3aa !important;

font-size:10px !important;

}

.zf-products-section
ul.products li.product .price ins{

color:
var(–zf-pink) !important;

text-decoration:none !important;

}

/* =====================================================
RATING
===================================================== */

.zf-products-section
ul.products li.product .star-rating{

margin:
0 14px 4px !important;

font-size:9px !important;

}

.zf-products-section
ul.products li.product
.star-rating span:before{

color:#ffb400 !important;

}

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

.zf-products-section
ul.products li.product
.add_to_cart_button{

width:
calc(100% – 28px) !important;

min-height:40px !important;

margin:
0 14px 14px !important;

display:flex !important;

align-items:center;

justify-content:center;

border:0 !important;

border-radius:8px !important;

background:
var(–zf-dark) !important;

color:#fff !important;

font-size:9px !important;

font-weight:800 !important;

text-transform:uppercase;

letter-spacing:.5px;

}

.zf-products-section
ul.products li.product
.add_to_cart_button:hover{

background:
var(–zf-gradient) !important;

}

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

@media(max-width:767px){

#zainora-shop{

padding:
8px 7px 90px;

}

.zf-hero{

min-height:185px;

padding:
25px 19px;

border-radius:16px;

}

.zf-eyebrow{

font-size:7px;

letter-spacing:2px;

}

.zf-hero h1{

font-size:25px !important;

}

.zf-hero p{

max-width:225px;

margin:
8px 0 15px !important;

font-size:9px !important;

}

.zf-hero-buttons{

gap:6px;

}

.zf-btn-primary,
.zf-btn-outline{

min-height:34px;

padding:
0 11px;

border-radius:7px;

font-size:7px;

}

.zf-hero-art{

width:80px;

height:80px;

}

.zf-hero-badge{

width:58px;
height:58px;

}

.zf-hero-badge strong{

font-size:12px;

}

.zf-hero-badge span{

font-size:5px;

}

.zf-hero-badge small{

font-size:5px;

}

.orbit-one{

width:75px;
height:75px;

top:3px;
left:3px;

}

.orbit-two{

width:60px;
height:60px;

top:10px;
left:10px;

}

/* CATEGORY */

.zf-category-bar{

margin-top:9px;

padding:
10px;

border-radius:11px;

display:block;

}

.zf-category-title{

margin-bottom:8px;

}

.zf-category-title span{

font-size:6px;

}

.zf-category-title strong{

font-size:12px;

}

.zf-categories{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:4px;

}

.zf-categories a{

min-height:30px;

padding:
0 3px;

border-radius:6px;

font-size:6.5px;

text-align:center;

}

/* HEADING */

.zf-products-section{

margin-top:19px;

}

.zf-section-heading{

margin-bottom:9px;

}

.zf-section-heading span{

font-size:6px;

letter-spacing:1.5px;

}

.zf-section-heading h2{

font-size:19px !important;

}

.zf-product-count{

font-size:7px;

}

/* PRODUCT GRID */

.zf-products-section
ul.products{

grid-template-columns:
repeat(2,minmax(0,1fr)) !important;

gap:8px !important;

}

/* CARD */

.zf-products-section
ul.products li.product{

border-radius:11px !important;

}

/* IMAGE */

.zf-products-section
ul.products li.product img{

aspect-ratio:
1 / 1.18 !important;

}

/* SALE */

.zf-products-section
ul.products li.product .onsale{

top:6px !important;

left:6px !important;

padding:
4px 6px !important;

border-radius:4px !important;

font-size:6px !important;

}

/* TITLE */

.zf-products-section
ul.products li.product
.woocommerce-loop-product__title{

padding:
8px 8px 2px !important;

font-size:9px !important;

}

/* PRICE */

.zf-products-section
ul.products li.product .price{

padding:
2px 8px 8px !important;

font-size:10px !important;

}

.zf-products-section
ul.products li.product .price del{

font-size:7px !important;

}

/* RATING */

.zf-products-section
ul.products li.product .star-rating{

margin:
0 8px 2px !important;

font-size:7px !important;

}

/* BUTTON */

.zf-products-section
ul.products li.product
.add_to_cart_button{

width:
calc(100% – 16px) !important;

min-height:31px !important;

margin:
0 8px 8px !important;

border-radius:6px !important;

font-size:6.5px !important;

}

}

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

@media(min-width:768px)
and (max-width:1100px){

.zf-products-section
ul.products{

grid-template-columns:
repeat(3,minmax(0,1fr)) !important;

gap:15px !important;

}

}

/* =====================================================
HIDE DEFAULT SHOP HEADER
===================================================== */

body.woocommerce-shop
.woocommerce-products-header,

body.post-type-archive-product
.woocommerce-products-header{

display:none !important;

}

body.woocommerce-shop
.entry-title,

body.post-type-archive-product
.entry-title{

display:none !important;

}

/* =====================================================
ZAINORA FASHION BD
SHOP PAGE JAVASCRIPT
===================================================== */

document.addEventListener(
“DOMContentLoaded”,
function(){

/*
* Find Zainora custom shop container
*/

const zainoraShop =
document.querySelector(
“#zainora-shop”
);

if(!zainoraShop){

return;

}

/*
* Find WooCommerce shop container
*/

const wooShop =
document.querySelector(
“.woocommerce”
);

if(!wooShop){

return;

}

/*
* Find WooCommerce product grid
*/

const products =
wooShop.querySelector(
“ul.products”
);

if(!products){

return;

}

/*
* Put the existing WooCommerce
* product grid inside our section.
*/

const productSection =
zainoraShop.querySelector(
“.zf-products-section”
);

if(!productSection){

return;

}

productSection.appendChild(
products
);

/*
* Move WooCommerce pagination
*/

const pagination =
wooShop.querySelector(
“.woocommerce-pagination”
);

if(pagination){

productSection.appendChild(
pagination
);

}

/*
* Get product count
*/

const productCount =
products.querySelectorAll(
“li.product”
).length;

const countElement =
document.querySelector(
“#zf-product-count”
);

if(
countElement &&
productCount > 0
){

countElement.textContent =
productCount +
” PRODUCTS”;

}

/*
* Add active state to current category.
*/

const categoryLinks =
document.querySelectorAll(
“.zf-categories a”
);

const currentURL =
window.location.href;

categoryLinks.forEach(
function(link){

if(
link.href === currentURL
){

link.classList.add(
“zf-category-active”
);

}

}
);

/*
* WooCommerce AJAX add-to-cart
*/

document.addEventListener(
“added_to_cart”,
function(){

const addedButtons =
document.querySelectorAll(
“.add_to_cart_button.added”
);

addedButtons.forEach(
function(button){

button.textContent =
“ADDED ✓”;

button.style.background =
“#109b61”;

}
);

}
);

/*
* Restore Add to Cart text
* after WooCommerce updates.
*/

document.body.addEventListener(
“wc_fragments_refreshed”,
function(){

setTimeout(
function(){

const buttons =
document.querySelectorAll(
“.add_to_cart_button”
);

buttons.forEach(
function(button){

if(
button.classList.contains(
“added”
)
){

button.textContent =
“ADDED ✓”;

}

}
);

},
100
);

}
);

}
);