/*
Theme Name: OrderOye
Theme URI: https://orderoye.com
Author: OrderOye
Description: Colorful energetic Pakistani ecommerce theme with WooCommerce support, Daraz-inspired design.
Version: 1.0.0
Text Domain: orderoye
Tags: ecommerce, woocommerce, colorful, pakistan
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root{
--orange:#FF6B00;--orange-dark:#E85D00;--orange-dim:rgba(255,107,0,.08);--orange-glow:rgba(255,107,0,.25);
--purple:#5B21B6;--purple-dim:rgba(91,33,182,.08);
--yellow:#FBBF24;--yellow-dim:rgba(251,191,36,.1);
--green:#22C55E;--green-dim:rgba(34,197,94,.08);
--red:#EF4444;
--dark:#1A1025;--dark-2:#2D1F3D;
--text:#1A1025;--text-2:#4B4458;--text-3:#8B839A;
--bg:#FFFFFF;--bg-2:#F9F7FC;--bg-3:#F3F0F7;
--border:#E8E3F0;
--font-h:'Plus Jakarta Sans',sans-serif;--font-b:'Inter',sans-serif;
--max-w:1200px;--r:12px;--r-sm:8px;--r-lg:16px;
--shadow:0 2px 8px rgba(26,16,37,.06),0 4px 16px rgba(26,16,37,.04);
--shadow-lg:0 8px 24px rgba(26,16,37,.08),0 16px 48px rgba(26,16,37,.06);
--t:.3s ease}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-b);color:var(--text);background:var(--bg);line-height:1.7;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}ul,ol{list-style:none}
::selection{background:var(--orange);color:#fff}
.container{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1.5rem;border-radius:var(--r-sm);font-family:var(--font-b);font-size:.88rem;font-weight:600;cursor:pointer;border:none;transition:all .2s}
.btn--orange{background:var(--orange);color:#fff;box-shadow:0 2px 8px var(--orange-glow)}
.btn--orange:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 4px 16px var(--orange-glow)}
.btn--purple{background:var(--purple);color:#fff}
.btn--purple:hover{background:#4C1D95;transform:translateY(-2px)}
.btn--outline{background:#fff;color:var(--text);border:1.5px solid var(--border)}
.btn--outline:hover{border-color:var(--orange);color:var(--orange)}
.btn--sm{padding:.5rem 1rem;font-size:.78rem}
.btn--lg{padding:.85rem 2rem;font-size:.95rem}

/* ===== TOP BAR ===== */
.topbar{background:linear-gradient(90deg,var(--purple),#7C3AED);color:#fff;text-align:center;padding:.45rem;font-size:.75rem;font-weight:500}
.topbar strong{color:var(--yellow)}

/* ===== NAV ===== */
.nav{background:#fff;border-bottom:1px solid var(--border);padding:.5rem 0;position:sticky;top:0;z-index:100}
.nav .container{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav__logo{font-family:var(--font-h);font-size:1.3rem;font-weight:900;display:flex;align-items:center;gap:.4rem;color:var(--orange)}
.nav__logo span{color:var(--text)}
.nav__search{flex:1;max-width:480px;display:flex;border:2px solid var(--border);border-radius:var(--r-sm);overflow:hidden;transition:border-color .2s}
.nav__search:focus-within{border-color:var(--orange)}
.nav__search input{flex:1;padding:.55rem 1rem;border:none;font-family:var(--font-b);font-size:.85rem;outline:none}
.nav__search button{padding:.55rem 1.25rem;background:var(--orange);color:#fff;border:none;font-weight:600;font-size:.82rem;cursor:pointer}
.nav__actions{display:flex;align-items:center;gap:1rem}
.nav__action{display:flex;flex-direction:column;align-items:center;font-size:.65rem;color:var(--text-2);gap:.15rem;transition:color .2s;position:relative}
.nav__action:hover{color:var(--orange)}
.nav__action-icon{font-size:1.3rem}
.nav__cart-count{position:absolute;top:-4px;right:-8px;background:var(--orange);color:#fff;font-size:.55rem;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.nav__cats{background:var(--bg-2);border-bottom:1px solid var(--border);padding:.4rem 0;overflow-x:auto}
.nav__cats-inner{display:flex;gap:0;justify-content:center}
.nav__cats a{padding:.35rem 1rem;font-size:.78rem;font-weight:500;color:var(--text-2);white-space:nowrap;transition:color .2s}
.nav__cats a:hover{color:var(--orange)}
.nav__toggle{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer}

/* ===== HERO BANNER ===== */
.hero-banner{padding:2rem 0;background:linear-gradient(135deg,#FFF7ED,#F3F0F7,#EEF2FF)}
.hero-banner__grid{display:grid;grid-template-columns:2fr 1fr;gap:1rem;min-height:340px}
.hero-banner__main{background:linear-gradient(135deg,var(--orange),#FF8C38);border-radius:var(--r-lg);padding:2.5rem;color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.hero-banner__main::after{content:'🛒';position:absolute;right:2rem;bottom:1rem;font-size:8rem;opacity:.15}
.hero-banner__tag{display:inline-block;background:rgba(255,255,255,.2);padding:.2rem .75rem;border-radius:100px;font-size:.72rem;font-weight:700;margin-bottom:.75rem;width:fit-content}
.hero-banner__h1{font-family:var(--font-h);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;line-height:1.1;margin-bottom:.75rem}
.hero-banner__sub{font-size:.95rem;opacity:.85;margin-bottom:1.25rem;max-width:400px}
.hero-banner__side{display:flex;flex-direction:column;gap:1rem}
.hero-banner__card{flex:1;border-radius:var(--r-lg);padding:1.5rem;display:flex;flex-direction:column;justify-content:center;color:#fff;position:relative;overflow:hidden}
.hero-banner__card:nth-child(1){background:linear-gradient(135deg,var(--purple),#7C3AED)}
.hero-banner__card:nth-child(2){background:linear-gradient(135deg,#059669,var(--green))}
.hero-banner__card-title{font-family:var(--font-h);font-size:1.1rem;font-weight:800;margin-bottom:.25rem}
.hero-banner__card-sub{font-size:.78rem;opacity:.8}
.hero-banner__card-badge{position:absolute;top:.75rem;right:.75rem;background:var(--yellow);color:var(--dark);padding:.15rem .5rem;border-radius:100px;font-size:.65rem;font-weight:700}

/* ===== CATEGORY STRIP ===== */
.cat-strip{padding:2rem 0}
.cat-strip__grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.75rem}
.cat-item{text-align:center;transition:all .2s;cursor:pointer;padding:.75rem .5rem;border-radius:var(--r);border:1.5px solid transparent}
.cat-item:hover{border-color:var(--orange);background:var(--orange-dim);transform:translateY(-3px)}
.cat-item__icon{width:52px;height:52px;border-radius:50%;background:var(--bg-2);margin:0 auto .4rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all .2s}
.cat-item:hover .cat-item__icon{background:var(--orange-dim)}
.cat-item__name{font-size:.72rem;font-weight:600;color:var(--text-2)}

/* ===== DEAL BANNER ===== */
.deal-banner{padding:.75rem 0}
.deal-banner__inner{background:linear-gradient(90deg,var(--dark),var(--dark-2));border-radius:var(--r);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;color:#fff}
.deal-banner__text{font-family:var(--font-h);font-size:1.1rem;font-weight:700}
.deal-banner__text span{color:var(--yellow)}
.deal-banner__timer{display:flex;gap:.5rem}
.deal-banner__time{background:rgba(255,255,255,.1);padding:.25rem .5rem;border-radius:4px;font-family:var(--font-h);font-size:.85rem;font-weight:700;min-width:36px;text-align:center}

/* ===== PRODUCT GRID ===== */
.products{padding:2rem 0}
.products__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
.products__title{font-family:var(--font-h);font-size:1.3rem;font-weight:800;display:flex;align-items:center;gap:.5rem}
.products__title-bar{width:4px;height:24px;background:var(--orange);border-radius:2px}
.products__link{font-size:.82rem;font-weight:600;color:var(--orange)}
.products__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem}
.product-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;transition:all .2s;position:relative}
.product-card:hover{border-color:var(--orange);box-shadow:var(--shadow);transform:translateY(-3px)}
.product-card__badge{position:absolute;top:.5rem;left:.5rem;background:var(--red);color:#fff;padding:.15rem .5rem;border-radius:4px;font-size:.62rem;font-weight:700;z-index:1}
.product-card__badge--new{background:var(--green)}
.product-card__badge--hot{background:var(--orange)}
.product-card__img{height:180px;background:var(--bg-2);display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--text-3)}
.product-card__body{padding:.75rem}
.product-card__name{font-size:.82rem;font-weight:500;color:var(--text);line-height:1.35;margin-bottom:.35rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card__price{font-family:var(--font-h);font-size:1.05rem;font-weight:800;color:var(--orange)}
.product-card__old-price{font-size:.75rem;color:var(--text-3);text-decoration:line-through;margin-left:.35rem;font-weight:400}
.product-card__meta{display:flex;align-items:center;gap:.5rem;margin-top:.35rem;font-size:.68rem;color:var(--text-3)}
.product-card__stars{color:var(--yellow)}
.product-card__sold{color:var(--text-3)}
.product-card__cart{position:absolute;bottom:.75rem;right:.75rem;width:32px;height:32px;border-radius:50%;background:var(--orange);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;opacity:0;transition:all .2s;box-shadow:0 2px 8px var(--orange-glow)}
.product-card:hover .product-card__cart{opacity:1}

/* ===== FEATURES BAR ===== */
.features{padding:2rem 0;background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.features__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.feature{display:flex;align-items:center;gap:.75rem;padding:.75rem}
.feature__icon{width:44px;height:44px;border-radius:50%;background:var(--orange-dim);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.feature__title{font-family:var(--font-h);font-size:.82rem;font-weight:700}
.feature__desc{font-size:.7rem;color:var(--text-3)}

/* ===== BANNER GRID ===== */
.banner-grid{padding:2rem 0}
.banner-grid__inner{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.banner-card{border-radius:var(--r-lg);padding:2rem;color:#fff;display:flex;flex-direction:column;justify-content:center;min-height:180px;position:relative;overflow:hidden;transition:transform .2s}
.banner-card:hover{transform:translateY(-3px)}
.banner-card:nth-child(1){background:linear-gradient(135deg,#1E1B4B,var(--purple))}
.banner-card:nth-child(2){background:linear-gradient(135deg,#7C2D12,var(--orange))}
.banner-card__title{font-family:var(--font-h);font-size:1.5rem;font-weight:900;margin-bottom:.25rem}
.banner-card__sub{font-size:.88rem;opacity:.75;margin-bottom:.75rem}
.banner-card__badge{position:absolute;top:1rem;right:1rem;background:var(--yellow);color:var(--dark);padding:.2rem .75rem;border-radius:100px;font-size:.72rem;font-weight:700}

/* ===== TESTIMONIALS ===== */
.reviews{padding:2rem 0;background:var(--bg-2)}
.reviews__header{text-align:center;margin-bottom:1.5rem}
.reviews__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.review-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r);padding:1.25rem;transition:all .2s}
.review-card:hover{border-color:var(--orange)}
.review-card__stars{color:var(--yellow);font-size:.85rem;margin-bottom:.4rem}
.review-card__text{font-size:.82rem;color:var(--text-2);line-height:1.6;margin-bottom:.75rem}
.review-card__author{font-weight:600;font-size:.78rem}
.review-card__city{font-size:.68rem;color:var(--text-3)}

/* ===== FOOTER ===== */
.footer{background:var(--dark);color:rgba(255,255,255,.5);padding:3rem 0 0}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2rem}
.footer__brand{font-family:var(--font-h);font-size:1.2rem;font-weight:900;color:#fff;margin-bottom:.5rem}
.footer__brand span{color:var(--orange)}
.footer__desc{font-size:.8rem;line-height:1.7;opacity:.5;margin-bottom:1rem}
.footer__col-title{font-family:var(--font-h);font-size:.85rem;font-weight:700;color:#fff;margin-bottom:.6rem}
.footer__links a{display:block;padding:.2rem 0;font-size:.8rem;opacity:.4;transition:all .2s}
.footer__links a:hover{opacity:1;color:var(--orange)}
.footer__payments{display:flex;gap:.5rem;margin-top:.75rem}
.footer__pay{background:rgba(255,255,255,.08);padding:.3rem .6rem;border-radius:4px;font-size:.65rem;font-weight:600;color:rgba(255,255,255,.5)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.06);padding:.75rem 0;display:flex;justify-content:space-between;font-size:.7rem;opacity:.3}

/* ===== WOOCOMMERCE OVERRIDES ===== */
.woocommerce ul.products li.product{border:1.5px solid var(--border);border-radius:var(--r);padding:0;overflow:hidden;transition:all .2s}
.woocommerce ul.products li.product:hover{border-color:var(--orange);box-shadow:var(--shadow)}
.woocommerce ul.products li.product a img{border-radius:0}
.woocommerce ul.products li.product .price{color:var(--orange);font-family:var(--font-h);font-weight:800}
.woocommerce ul.products li.product .price del{color:var(--text-3)}
.woocommerce ul.products li.product .button,.woocommerce a.button,.woocommerce button.button,.woocommerce .cart .button,.woocommerce #respond input#submit{background:var(--orange)!important;color:#fff!important;border-radius:var(--r-sm)!important;font-family:var(--font-b)!important;font-weight:600!important;border:none!important}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--orange-dark)!important}
.woocommerce .onsale{background:var(--red);border-radius:4px}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{border-color:var(--border)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--orange);border-color:var(--orange);color:#fff}
.woocommerce .quantity .qty{border-color:var(--border);border-radius:var(--r-sm)}
.woocommerce table.shop_table{border-color:var(--border)}
.woocommerce-message,.woocommerce-info{border-top-color:var(--orange)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--orange)}
.woocommerce #payment #place_order{background:var(--orange)!important;font-size:1rem!important;padding:1rem!important}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
.products__grid{grid-template-columns:repeat(4,1fr)}
.cat-strip__grid{grid-template-columns:repeat(4,1fr)}
.features__grid{grid-template-columns:repeat(2,1fr)}
.reviews__grid{grid-template-columns:repeat(2,1fr)}
.footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
.nav__search{display:none}
.nav__toggle{display:block}
.hero-banner__grid{grid-template-columns:1fr}
.hero-banner__side{flex-direction:row}
.products__grid{grid-template-columns:repeat(2,1fr)}
.cat-strip__grid{grid-template-columns:repeat(4,1fr)}
.features__grid,.reviews__grid{grid-template-columns:1fr}
.banner-grid__inner{grid-template-columns:1fr}
.footer__grid{grid-template-columns:1fr}
.footer__bottom{flex-direction:column;gap:.3rem;text-align:center}
.deal-banner__inner{flex-direction:column;gap:.75rem;text-align:center}
}
@media(max-width:480px){
.products__grid{grid-template-columns:repeat(2,1fr)}
.cat-strip__grid{grid-template-columns:repeat(4,1fr)}
.hero-banner__side{flex-direction:column}
}

/* Animations */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}