/* ===========================================================
   fimnet.shop — Main Stylesheet
   Brand: Red (#E4142D) + Black (#111213) + White
=========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --red: #E4142D;
  --red-dark: #B80F22;
  --red-light: #FF4757;
  --black: #131415;
  --gray-900: #1c1d1f;
  --gray-700: #4a4d52;
  --gray-500: #7c8087;
  --gray-300: #d8dadd;
  --gray-100: #f5f6f8;
  --white: #ffffff;
  --success: #17a35a;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 8px rgba(17,18,19,.06);
  --shadow-md: 0 8px 24px rgba(17,18,19,.10);
  --shadow-lg: 0 20px 45px rgba(17,18,19,.16);
  --transition: all .3s cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope', sans-serif;
  color: var(--gray-900);
  background:var(--white);
  line-height:1.55;
  overflow-x:hidden;
  animation:pageFadeIn .5s ease;
}
@keyframes pageFadeIn{from{opacity:0;}to{opacity:1;}}
h1,h2,h3,h4,h5,.font-display{font-family:'Poppins',sans-serif;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 24px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 28px;border-radius:100px;font-weight:600;font-size:14.5px;
  transition:var(--transition); position:relative; overflow:hidden; white-space:nowrap;
}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-120%);transition:transform .6s ease;}
.btn:hover::before{transform:translateX(120%);}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 6px 16px rgba(228,20,45,.28);}
.btn-primary:hover{background:var(--red-dark); transform:translateY(-2px); box-shadow:0 10px 22px rgba(228,20,45,.38);}
.btn-dark{background:var(--black);color:#fff;}
.btn-dark:hover{background:#000; transform:translateY(-2px);}
.btn-outline{background:transparent;border:1.5px solid var(--gray-300);color:var(--gray-900);}
.btn-outline:hover{border-color:var(--red);color:var(--red);}
.btn-sm{padding:9px 18px;font-size:13px;}
.btn-block{width:100%;}

/* ---------- Top Utility Bar ---------- */
.topbar{background:var(--black);color:#cfd1d4;font-size:13px;}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:38px;}
.topbar a{color:#cfd1d4;transition:var(--transition);}
.topbar a:hover{color:var(--red-light);}
.topbar-links{display:flex;gap:18px;align-items:center;}
.topbar-social{display:flex;gap:12px;}
.topbar-social a{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.08);}
.topbar-social a:hover{background:var(--red);}

/* ---------- Header ---------- */
header.site-header{
  background:#fff;position:sticky;top:0;z-index:500;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.header-main{display:flex;align-items:center;gap:28px;padding:14px 24px;}
.logo{display:flex;align-items:center;gap:10px;font-family:'Poppins';font-weight:800;font-size:22px;flex-shrink:0;transition:var(--transition);}
.logo:hover{transform:scale(1.03);}
.logo img{height:60px;width:auto;}
.logo span.red{color:var(--red);}

.search-bar{
  flex:1; display:flex; max-width:640px; height:48px;
  border:2px solid var(--gray-100); border-radius:100px; overflow:hidden;
  transition:var(--transition); background:var(--gray-100);
}
.search-bar:focus-within{border-color:var(--red); background:#fff; box-shadow:0 0 0 4px rgba(228,20,45,.08);}
.search-bar select{border:none;background:transparent;padding:0 14px;font-size:13.5px;color:var(--gray-700);border-right:1px solid var(--gray-300);outline:none;max-width:160px;}
.search-bar input{flex:1;border:none;background:transparent;padding:0 16px;outline:none;font-size:14.5px;}
.search-bar button{
  background:var(--red);color:#fff;padding:0 26px;font-weight:700;font-size:13.5px;letter-spacing:.5px;
  display:flex;align-items:center;gap:6px;transition:var(--transition);
}
.search-bar button:hover{background:var(--red-dark);}

.header-actions{display:flex;align-items:center;gap:26px;flex-shrink:0;}
.header-action{display:flex;align-items:center;gap:10px;}
.header-action .icon-circle{
  width:42px;height:42px;border-radius:50%;background:var(--gray-100);
  display:flex;align-items:center;justify-content:center;color:var(--black);
  transition:var(--transition); position:relative;
}
.header-action:hover .icon-circle{background:var(--red);color:#fff;transform:scale(1.06);}
.header-action .label{font-size:12px;color:var(--gray-500);}
.header-action strong{display:block;font-size:14px;color:var(--gray-900);}
.cart-count{
  position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;
  font-size:10.5px;font-weight:700;width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;
}

/* ---------- Main Nav ---------- */
.main-nav{border-top:1px solid var(--gray-100);position:relative;z-index:100;}
.nav-inner{position:relative;}
.nav-toggle{display:none;align-items:center;gap:10px;width:100%;padding:13px 0;font-weight:700;font-size:14.5px;color:var(--gray-900);}
.nav-list{display:flex;align-items:center;height:50px;flex-wrap:nowrap;overflow:visible;}
.nav-item{position:relative;height:100%;flex-shrink:0;}
.nav-item-row{display:flex;align-items:center;height:100%;}
.nav-item-row a{display:flex;align-items:center;height:100%;padding:0 16px;font-size:14.5px;font-weight:500;color:var(--gray-800);white-space:nowrap;transition:var(--transition);}
.nav-item-row a:hover, .nav-item-row a.active{color:var(--red);}
.nav-caret{display:flex;align-items:center;padding:0 12px 0 0;margin-left:-10px;color:var(--gray-500);font-size:11px;transition:var(--transition);}
.nav-item:hover .nav-caret, .nav-item.open .nav-caret{color:var(--red);}
.nav-item-more .nav-item-row a{color:var(--red);font-weight:600;}
.nav-dropdown{
  display:none;position:absolute;top:100%;left:0;min-width:220px;background:#fff;
  border-radius:10px;box-shadow:var(--shadow-lg);border:1px solid var(--gray-100);
  padding:8px;z-index:110;
}
.nav-item:hover .nav-dropdown{display:block;animation:fadeSlide .18s ease;}
.nav-dropdown a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;font-size:13.8px;font-weight:500;color:var(--gray-700);transition:var(--transition);height:auto;}
.nav-dropdown a:hover{background:var(--gray-100);color:var(--red);}
.nav-dropdown-all{color:var(--red) !important;border-bottom:1px solid var(--gray-100);border-radius:0 !important;margin-bottom:4px;padding-bottom:12px !important;}
.nav-count{font-size:11.5px;color:var(--gray-500);font-weight:500;}

/* ---------- Hero Slider ---------- */
.hero-slider{position:relative;overflow:hidden;background:#101114;line-height:0;}
.hero-slide{display:none;}
.hero-slide.active{display:block;animation:fadeSlide .8s ease;}
@keyframes fadeSlide{from{opacity:0; transform:translateX(24px);} to{opacity:1; transform:translateX(0);}}
.hero-slide img{width:100%;height:auto;aspect-ratio:1885/476;object-fit:cover;display:block;}
.hero-dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10;}
.hero-dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);transition:var(--transition);}
.hero-dots button.active{background:#fff;width:26px;border-radius:6px;}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(4px);color:#fff;display:flex;align-items:center;justify-content:center;transition:var(--transition);z-index:10;}
.hero-arrow:hover{background:var(--red);}
.hero-arrow.prev{left:20px;}.hero-arrow.next{right:20px;}

/* ---------- Section Heading ---------- */
.section{padding:56px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px;}
.section-head .eyebrow{color:var(--red);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;display:block;margin-bottom:6px;}
.section-head h2{font-size:28px;font-weight:800;}
.section-head a.view-all{font-weight:600;font-size:14px;color:var(--red);display:flex;align-items:center;gap:6px;}
.section-head a.view-all:hover{gap:10px;}

/* ---------- Category Grid ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.cat-grid>*{min-width:0;}
.cat-card{
  background:var(--gray-100);border-radius:var(--radius);padding:26px 20px;text-align:center;
  transition:var(--transition); border:1px solid transparent; opacity:0; transform:translateY(24px);
}
.cat-card.in-view{opacity:1;transform:translateY(0);}
.cat-card:hover{background:#fff;border-color:var(--red);box-shadow:var(--shadow-md);transform:translateY(-6px);}
.cat-card .cat-icon{width:64px;height:64px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:50%;transition:var(--transition);box-shadow:var(--shadow-sm);}
.cat-card:hover .cat-icon{background:var(--icon-color, var(--red));transform:rotate(8deg) scale(1.1);box-shadow:0 10px 24px color-mix(in srgb, var(--icon-color, var(--red)) 45%, transparent);}
.cat-card:hover .cat-icon img{filter:brightness(0) invert(1);}
.cat-card .cat-icon img{width:32px;height:32px;object-fit:contain;}
.cat-card .cat-icon i{font-size:24px;color:var(--icon-color, var(--red));transition:var(--transition);}
.cat-card:hover .cat-icon i{color:#fff;transform:scale(1.1);}
.cat-card h4{font-size:14.5px;font-weight:700;}

/* ---------- Product Card ---------- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.product-grid>*{min-width:0;}
.product-card{
  background:#fff;border:1px solid var(--gray-300); border-radius:var(--radius);overflow:hidden;
  transition:var(--transition); position:relative; opacity:0; transform:translateY(24px);
}
.product-card.in-view{opacity:1;transform:translateY(0);}
.product-card:hover{box-shadow:var(--shadow-lg);border-color:transparent;transform:translateY(-8px);}
.product-card .badges{position:absolute;top:14px;left:14px;z-index:5;display:flex;flex-direction:column;gap:6px;}
.badge{padding:5px 12px;border-radius:100px;font-size:11px;font-weight:700;color:#fff;letter-spacing:.3px;}
.badge.offer{background:var(--red);}
.badge.hot{background:var(--black);animation:hotPulse 1.8s infinite;}
@keyframes hotPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,.35);}50%{box-shadow:0 0 0 6px rgba(0,0,0,0);}}
.badge.new{background:var(--success);}
.product-thumb{position:relative;aspect-ratio:1/1;background:var(--gray-100);overflow:hidden;display:block;}
.product-thumb img{width:100%;height:100%;object-fit:contain;padding:22px;transition:transform .5s ease;}
.product-card:hover .product-thumb img{transform:scale(1.08);}
.quick-actions{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateX(10px);transition:var(--transition);}
.product-card:hover .quick-actions{opacity:1;transform:translateX(0);}
/* Touch devices have no hover state, so these must be visible by default
   or they're simply unreachable — this is what made icons/buttons feel
   like they were "missing" on phones even though the CSS was technically
   fine on desktop. */
@media(hover:none){
  .quick-actions{opacity:1;transform:translateX(0);}
}
.quick-actions button{width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;transition:var(--transition);}
.quick-actions button:hover{background:var(--red);color:#fff;}
.product-info{padding:18px;position:relative;z-index:2;background:#fff;}
.product-info .cat-label{font-size:12px;color:var(--gray-500);text-transform:uppercase;letter-spacing:.4px;}
.product-info h3{font-size:15.5px;font-weight:700;margin:6px 0 10px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px;}
.price-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.price-now{font-size:17px;font-weight:800;color:var(--red);}
.price-was{font-size:13px;color:var(--gray-500);text-decoration:line-through;}
.add-cart-btn{
  width:100%;padding:11px;border-radius:var(--radius-sm);background:var(--black);color:#fff;
  font-weight:600;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:var(--transition);
}
.add-cart-btn:hover{background:var(--red);}

/* ---------- Promo Banners (4 up) ---------- */
.banner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.banner-grid>*{min-width:0;}
.promo-banner{
  border-radius:var(--radius);overflow:hidden;position:relative;aspect-ratio:3/3.6;
  display:flex;flex-direction:column;justify-content:flex-start;padding:24px;color:#fff;
  transition:var(--transition); cursor:pointer;
}
.promo-banner:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.promo-banner .tag2{position:relative;z-index:2;align-self:flex-start;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);padding:5px 12px;border-radius:100px;font-size:11px;font-weight:700;margin-bottom:12px;}
.promo-banner h3{position:relative;z-index:2;font-size:19px;font-weight:800;margin-bottom:6px;}
.promo-banner p{position:relative;z-index:2;font-size:13px;opacity:.85;}
.promo-banner img{position:absolute;z-index:1;bottom:0;left:0;width:100%;object-fit:contain;object-position:bottom;aspect-ratio:1/1;}
.pb-1{background:linear-gradient(160deg,#3a3d63,#14152a);color:#fff;}
.pb-1 .tag2{background:#2563eb;color:#fff;backdrop-filter:none;}
.pb-2{background:#eceef1;color:#14151a;}
.pb-2 .tag2{background:#e4142d;color:#fff;backdrop-filter:none;}
.pb-2 p{color:#5b5e66;}
.pb-3{background:#dbebf6;color:#14151a;}
.pb-3 .tag2{background:#22a559;color:#fff;backdrop-filter:none;}
.pb-3 p{color:#4b5b63;}
.pb-4{background:linear-gradient(160deg,#141414,#000);color:#fff;}
.pb-4 .tag2{background:#e4142d;color:#fff;backdrop-filter:none;}

/* ---------- USP Strip ---------- */
.usp-strip{background:var(--gray-100);padding:34px 0;}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.usp-grid>*{min-width:0;}
.usp-item{display:flex;align-items:center;gap:14px;}
.usp-item .icon{width:50px;height:50px;border-radius:50%;background:#fff;color:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);flex-shrink:0;}
.usp-item h5{font-size:14.5px;font-weight:700;}
.usp-item p{font-size:12.5px;color:var(--gray-500);}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--black);color:#fff;padding:60px 0;position:relative;overflow:hidden;}
.newsletter::before{content:'';position:absolute;width:400px;height:400px;background:var(--red);opacity:.15;border-radius:50%;top:-200px;right:-100px;filter:blur(40px);}
.newsletter .container{display:flex;justify-content:space-between;align-items:center;gap:30px;position:relative;flex-wrap:wrap;}
.newsletter h3{font-size:24px;font-weight:800;margin-bottom:8px;}
.newsletter p{color:#adb0b5;}
.newsletter form{display:flex;gap:0;max-width:420px;flex:1;min-width:280px;}
.newsletter input{flex:1;padding:14px 20px;border-radius:100px 0 0 100px;border:none;outline:none;}
.newsletter button{padding:14px 26px;border-radius:0 100px 100px 0;background:var(--red);color:#fff;font-weight:700;}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--gray-900);color:#c9cace;padding-top:56px;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px;}
.footer-grid>*{min-width:0;}
.footer-logo{font-family:'Poppins';font-weight:800;font-size:22px;color:#fff;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.footer-logo img{height:38px;}
.footer-col h5{color:#fff;font-size:15px;font-weight:700;margin-bottom:18px;}
.footer-col ul li{margin-bottom:11px;}
.footer-col ul li a{font-size:13.8px;transition:var(--transition);}
.footer-col ul li a:hover{color:var(--red-light);padding-left:4px;}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;font-size:13.8px;margin-bottom:14px;}
.footer-social{display:flex;gap:10px;margin-top:16px;}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:var(--transition);}
.footer-social a:hover{background:var(--red);transform:translateY(-3px);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;display:flex;justify-content:space-between;font-size:13px;color:#8b8e93;flex-wrap:wrap;gap:10px;}
.payment-icons{display:flex;gap:10px;}
.payment-icons span{background:rgba(255,255,255,.08);padding:4px 10px;border-radius:6px;font-size:11.5px;font-weight:700;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{background:var(--gray-100);padding:16px 0;font-size:13.5px;color:var(--gray-500);}
.breadcrumb a{color:var(--gray-700);}
.breadcrumb a:hover{color:var(--red);}
.breadcrumb .sep{margin:0 8px;}

/* ---------- Product Detail Page ---------- */
.product-detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;padding:40px 0;}
.product-detail>*{min-width:0;}
.pd-gallery{position:sticky;top:100px;align-self:start;min-width:0;}
.pd-main-img{background:var(--gray-100);border-radius:var(--radius);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:14px;position:relative;}
.pd-main-img img{width:85%;height:85%;object-fit:contain;transition:transform .4s ease;}
.pd-main-img:hover img{transform:scale(1.06);}
.pd-thumbs{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;min-width:0;}
.pd-thumbs img{width:72px;height:72px;flex-shrink:0;object-fit:contain;background:var(--gray-100);border-radius:var(--radius-sm);padding:8px;border:2px solid transparent;transition:var(--transition);cursor:pointer;}
.pd-thumbs img:hover,.pd-thumbs img.active{border-color:var(--red);}

.pd-info .cat-label{color:var(--red);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px;}
.pd-info h1{font-size:28px;font-weight:800;margin:8px 0 12px;}
.pd-rating{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.stars{color:#f5a623;display:flex;gap:2px;}
.stars.sm{font-size:12px;}
.rating-count{font-size:12.5px;color:var(--gray-500);margin-left:4px;}
.card-rating{display:flex;align-items:center;margin-bottom:8px;}
.stock-pill{padding:4px 12px;border-radius:100px;font-size:12px;font-weight:700;background:#e8f8ef;color:var(--success);}
.stock-pill.out{background:#fde9e9;color:var(--red);}
.pd-price{display:flex;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--gray-300);border-bottom:1px solid var(--gray-300);margin-bottom:24px;}
.pd-price .now{font-size:30px;font-weight:800;color:var(--red);}
.pd-price .was{font-size:16px;color:var(--gray-500);text-decoration:line-through;}
.pd-price .save{background:#fde9e9;color:var(--red);font-size:12px;font-weight:700;padding:4px 10px;border-radius:6px;}

.specs-table{width:100%;border-collapse:collapse;margin:22px 0;}
.specs-table tr{border-bottom:1px solid var(--gray-100);}
.specs-table td{padding:11px 0;font-size:14px;}
.specs-table td:first-child{color:var(--gray-500);font-weight:600;width:40%;}
.specs-table td:last-child{color:var(--gray-900);font-weight:500;}

.qty-selector{display:flex;align-items:center;border:1.5px solid var(--gray-300);border-radius:100px;overflow:hidden;width:fit-content;}
.qty-selector button{width:42px;height:42px;font-size:18px;font-weight:700;transition:var(--transition);}
.qty-selector button:hover{background:var(--red);color:#fff;}
.qty-selector input{width:48px;text-align:center;border:none;font-weight:700;font-size:15px;}
.pd-actions{display:flex;gap:14px;margin-top:24px;align-items:center;}

.pd-tabs{display:flex;gap:0;border-bottom:2px solid var(--gray-100);margin:48px 0 24px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.pd-tabs button{padding:14px 26px;font-weight:700;font-size:14.5px;color:var(--gray-500);border-bottom:2px solid transparent;margin-bottom:-2px;transition:var(--transition);white-space:nowrap;flex-shrink:0;}
.pd-tabs button.active{color:var(--red);border-color:var(--red);}

/* ---------- Filters / Listing ---------- */
.listing-layout{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:36px 0;}
.listing-layout>*{min-width:0;}
.filter-box{background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius);padding:20px;margin-bottom:20px;}
.filter-box h5{font-weight:700;margin-bottom:14px;font-size:14.5px;}
.filter-box label{display:flex;align-items:center;gap:10px;font-size:13.8px;color:var(--gray-700);margin-bottom:10px;cursor:pointer;}
.filter-box label:hover{color:var(--gray-900);}
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:36px;flex-wrap:wrap;}
.page-ellipsis{color:var(--gray-500);padding:0 4px;}
.filter-icon{width:16px;text-align:center;font-size:13px;}
.brand-avatar{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:10.5px;font-weight:700;flex-shrink:0;}
.listing-h1{font-size:24px;font-weight:800;margin-bottom:16px;}
.listing-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:12px;}
.listing-toolbar select{padding:10px 14px;border:1.5px solid var(--gray-300);border-radius:var(--radius-sm);}

/* ---------- Forms (auth, checkout) ---------- */
.form-card{max-width:460px;margin:60px auto;background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius);padding:40px;box-shadow:var(--shadow-sm);}
.form-card h2{font-size:24px;font-weight:800;margin-bottom:6px;}
.form-card p.sub{color:var(--gray-500);font-size:13.8px;margin-bottom:26px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-size:13.5px;font-weight:600;margin-bottom:8px;}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:12px 16px;border:1.5px solid var(--gray-300);border-radius:var(--radius-sm);
  font-size:14.5px;transition:var(--transition);outline:none;font-family:inherit;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(228,20,45,.08);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* ---------- Alerts / Toast ---------- */
.alert{padding:14px 18px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:18px;}
.alert-success{background:#e8f8ef;color:var(--success);}
.alert-error{background:#fde9e9;color:var(--red);}
#toast{position:fixed;bottom:26px;right:26px;background:var(--black);color:#fff;padding:14px 24px;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);z-index:9999;display:flex;align-items:center;gap:10px;transform:translateY(120%);opacity:0;transition:var(--transition);}
#toast.show{transform:translateY(0);opacity:1;}
#toast .icon{color:var(--success);}

/* ---------- Cart Page ---------- */
.cart-table{width:100%;border-collapse:collapse;}
.cart-table th{text-align:left;padding:14px;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--gray-500);border-bottom:2px solid var(--gray-100);}
.cart-table td{padding:18px 14px;border-bottom:1px solid var(--gray-100);vertical-align:middle;}
.cart-product{display:flex;gap:14px;align-items:center;}
.cart-product img{width:64px;height:64px;object-fit:contain;background:var(--gray-100);border-radius:var(--radius-sm);padding:6px;}
.cart-remove{color:var(--red);font-size:13px;font-weight:600;}
.cart-summary{background:var(--gray-100);border-radius:var(--radius);padding:26px;}
.cart-summary .row{display:flex;justify-content:space-between;padding:10px 0;font-size:14.5px;}
.cart-summary .row.total{font-size:18px;font-weight:800;border-top:1.5px solid var(--gray-300);margin-top:10px;padding-top:16px;}

/* ---------- Live Chat Bubble ---------- */
.chat-bubble{position:fixed;bottom:26px;right:26px;z-index:400;}
.chat-bubble .bubble-icon{width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(228,20,45,.4);animation:bob 2.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.chat-tooltip{position:absolute;bottom:70px;right:0;background:#fff;padding:14px 18px;border-radius:var(--radius-sm);box-shadow:var(--shadow-md);width:200px;font-size:13.5px;font-weight:600;}

/* ---------- Scroll to top ---------- */
.scroll-top{position:fixed;bottom:26px;left:26px;width:44px;height:44px;border-radius:50%;background:var(--black);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:var(--transition);z-index:400;}
.scroll-top.show{opacity:1;visibility:visible;}
.scroll-top:hover{background:var(--red);}

/* ---------- Loading Skeleton ---------- */
@keyframes shimmer{0%{background-position:-400px 0;}100%{background-position:400px 0;}}
.skeleton{background:linear-gradient(90deg,var(--gray-100) 25%,#ececef 37%,var(--gray-100) 63%);background-size:400px 100%;animation:shimmer 1.4s infinite linear;}

/* ---------- Fade-in on scroll (JS toggles .in-view) ---------- */
.fade-up{opacity:0;transform:translateY(30px);transition:opacity .6s ease, transform .6s ease;}
.fade-up.in-view{opacity:1;transform:translateY(0);}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .cat-grid{grid-template-columns:repeat(3,1fr);}
  .product-grid{grid-template-columns:repeat(3,1fr);}
  .banner-grid{grid-template-columns:repeat(2,1fr);}
  .usp-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .product-detail{grid-template-columns:1fr;}
  .pd-gallery{position:static;}
  .listing-layout{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .topbar .container{flex-wrap:wrap;height:auto;padding:8px 16px;gap:6px;justify-content:center;text-align:center;}
  .topbar-links{flex-wrap:wrap;justify-content:center;}

  .header-main{flex-wrap:wrap;padding:12px 16px;gap:12px;}
  .logo img{height:44px;}
  .search-bar{order:3;flex-basis:100%;max-width:100%;height:44px;}
  .header-actions{gap:14px;margin-left:auto;}
  .header-action .label,.header-action strong{display:none;}
  .header-action .icon-circle{width:38px;height:38px;}

  /* Nav becomes a tap-to-open accordion panel instead of a horizontal bar */
  .nav-toggle{display:flex;}
  .nav-list{
    display:none;flex-direction:column;align-items:stretch;height:auto;
    border-top:1px solid var(--gray-100);padding-bottom:8px;
  }
  .nav-list.open{display:flex;}
  .nav-item{width:100%;}
  .nav-item-row{justify-content:space-between;}
  .nav-item-row a{padding:12px 4px;width:100%;}
  .nav-item-row a::after{display:none;}
  .nav-caret{display:flex;align-items:center;justify-content:center;width:38px;transition:transform .2s ease;}
  .nav-item.open .nav-caret{transform:rotate(180deg);}
  .nav-dropdown{
    display:none;position:static;box-shadow:none;border:none;background:var(--gray-100);
    margin:2px 0 8px;width:100%;
  }
  .nav-item.open .nav-dropdown{display:block;animation:none;}

  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .banner-grid{grid-template-columns:1fr;}
  .listing-layout{grid-template-columns:1fr;}
  .listing-layout aside{order:2;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .newsletter .container{flex-direction:column;text-align:center;}
  .form-row{grid-template-columns:1fr;}

  /* Wide tables (cart, admin lists) scroll horizontally instead of squashing */
  .cart-table, .data-table, table{display:block;overflow-x:auto;white-space:nowrap;}

  .hero-arrow{width:36px;height:36px;}
  .product-detail{grid-template-columns:1fr;}
  .pd-gallery{position:static;}

  /* A full-width x full-width square image is taller than most phone
     screens, forcing a scroll before you even see the whole photo.
     Cap the height instead of letting aspect-ratio grow it 1:1 with
     the (now much wider, single-column) container. */
  .pd-main-img{aspect-ratio:auto;height:min(70vw,360px);}

  /* Qty selector + wishlist stay side by side; Add to Cart drops to its
     own full-width row underneath instead of getting squeezed. */
  .pd-actions{flex-wrap:wrap;}
  .pd-actions .btn-primary{order:3;flex-basis:100%;}
}

@media(max-width:480px){
  .pd-main-img{height:min(78vw,320px);}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .section{padding:38px 0;}
  .section-head h2{font-size:22px;}
  .newsletter form{flex-direction:column;border-radius:14px;overflow:hidden;}
  .newsletter input{border-radius:14px 14px 0 0;}
  .newsletter button{border-radius:0 0 14px 14px;}
}

@media(max-width:400px){
  .container{padding:0 16px;}
  .product-info{padding:14px;}
  .pd-info h1{font-size:22px;}
  .pd-price .now{font-size:24px;}
}

/* ---------- Blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.blog-grid>*{min-width:0;}
.blog-card{
  display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:var(--transition);
}
.blog-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);}
.blog-card-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--gray-100);}
.blog-card-thumb img{width:100%;height:100%;object-fit:cover;transition:var(--transition);}
.blog-card:hover .blog-card-thumb img{transform:scale(1.05);}
.blog-card-body{padding:20px;display:flex;flex-direction:column;flex:1;}
.blog-card-date{font-size:12px;color:var(--gray-500);display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.blog-card-body h3{font-size:16.5px;font-weight:700;line-height:1.35;margin-bottom:10px;}
.blog-card-body p{font-size:13.5px;color:var(--gray-700);line-height:1.6;margin-bottom:14px;flex:1;}
.blog-card-readmore{font-size:13.5px;font-weight:700;color:var(--red);display:inline-flex;align-items:center;gap:6px;transition:var(--transition);}
.blog-card:hover .blog-card-readmore{gap:10px;}

.blog-post-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--gray-500);font-size:13.5px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--gray-100);}
.blog-post-meta span{display:flex;align-items:center;gap:7px;}
.blog-post-hero{border-radius:var(--radius);overflow:hidden;margin-bottom:30px;box-shadow:var(--shadow-sm);}
.blog-post-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.blog-post-content{font-size:15.5px;line-height:1.9;color:var(--gray-900);}
.blog-post-content h2{font-size:21px;font-weight:800;margin:32px 0 14px;}
.blog-post-content h3{font-size:18px;font-weight:700;margin:26px 0 12px;}
.blog-post-content p{margin-bottom:18px;}
.blog-post-content ul,.blog-post-content ol{margin:0 0 18px 22px;}
.blog-post-content li{margin-bottom:8px;}
.blog-post-content a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.blog-post-content strong{font-weight:700;}
.blog-post-content img{max-width:100%;height:auto;border-radius:var(--radius-sm);margin:12px 0;display:block;}
.blog-post-content table{width:100%;border-collapse:collapse;margin-bottom:18px;display:block;overflow-x:auto;}

.blog-share{display:flex;align-items:center;gap:14px;margin-top:36px;padding-top:24px;border-top:1px solid var(--gray-100);font-size:13.5px;color:var(--gray-500);font-weight:600;}
.blog-share a{width:36px;height:36px;border-radius:50%;background:var(--gray-100);display:flex;align-items:center;justify-content:center;color:var(--gray-700);transition:var(--transition);}
.blog-share a:hover{background:var(--red);color:#fff;}

@media(max-width:900px){
  .blog-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .blog-grid{grid-template-columns:1fr;}
  .blog-post-meta{gap:12px;}
}