:root{--black:#111;--cream:#f7f0e8;--white:#fff;--gold:#c5974a;--brown:#5c351f;--muted:#6f6258;}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;background:var(--cream);color:var(--black);line-height:1.6}
a{text-decoration:none;color:inherit} img{max-width:100%;display:block}
/* ── HEADER ── */
.site-header{position:sticky;top:0;z-index:100;background:rgba(247,240,232,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-between;padding:0 5%;height:68px;border-bottom:1px solid rgba(0,0,0,.07);gap:24px;}
.logo{font-weight:900;letter-spacing:2px;font-size:21px;white-space:nowrap;flex-shrink:0}.logo span{color:var(--gold)}
.nav{display:flex;gap:22px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;align-items:center;flex:1;justify-content:center}.nav a{color:#7a7065;transition:color .2s;white-space:nowrap}.nav a:hover{color:var(--black,#111)}
.header-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}

/* Social icon buttons */
.icon-link{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1.5px solid rgba(0,0,0,.1);transition:.22s;color:#111}
.icon-link:hover{background:#111;border-color:#111;color:#fff;transform:translateY(-2px)}.icon-link svg{width:16px;height:16px;fill:currentColor}

/* Pill buttons (Track Order, Sign In) */
.track-header-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:999px;border:1.5px solid rgba(0,0,0,.11);font-size:12px;font-weight:700;letter-spacing:.03em;background:#fff;color:#111;transition:all .22s;white-space:nowrap;text-decoration:none}
.track-header-btn:hover{background:#111;color:#fff;border-color:#111}

/* Primary CTA */
.header-btn,.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:999px;font-weight:800;transition:.25s;border:none;font-size:13px;white-space:nowrap}
.header-btn,.btn.primary{background:#111;color:#fff}.btn.secondary{border:1.5px solid #111;color:#111;background:transparent}
.header-btn:hover,.btn.primary:hover{background:var(--gold)}.btn.secondary:hover{background:#111;color:#fff}

/* Hide view-toggle button — not needed in desktop header */
.view-toggle-btn{display:none!important}
.hero{min-height:86vh;padding:70px 7%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px}
.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:3px;font-size:12px;font-weight:900;margin-bottom:14px}
.hero h1,.page-hero h1{font-family:Georgia,serif;font-size:clamp(54px,9vw,112px);line-height:.9;margin-bottom:24px}
.hero-text,.page-hero p{max-width:640px;font-size:19px;color:#333}
.hero-actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.hero-card{height:620px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.look{border-radius:30px;overflow:hidden;position:relative;min-height:250px;background-size:cover;background-position:center;box-shadow:0 24px 60px rgba(0,0,0,.18)}
.look span{position:absolute;left:20px;bottom:20px;color:#fff;font-weight:900;font-size:22px}
.look-one{grid-row:span 2;background:linear-gradient(145deg,rgba(0,0,0,.25),rgba(0,0,0,.45)),radial-gradient(circle at 40% 25%,#f3f0e7 0 16%,transparent 17%),linear-gradient(160deg,#151515 10%,#333 45%,#0f0f0f 100%)}
.look-two{background:linear-gradient(145deg,rgba(0,0,0,.18),rgba(0,0,0,.45)),linear-gradient(135deg,#e2b900,#113d2b 45%,#101010)}
.look-three{background:linear-gradient(145deg,rgba(0,0,0,.1),rgba(0,0,0,.5)),repeating-linear-gradient(45deg,#8b2e18,#8b2e18 20px,#e5b43b 20px,#e5b43b 40px,#0d5c50 40px,#0d5c50 60px)}
.intro{background:#111;color:#fff;padding:18px 7%;overflow:hidden;white-space:nowrap}.intro p{letter-spacing:3px;text-transform:uppercase;font-size:13px;text-align:center}
.section{padding:90px 7%}.section.dark{background:#111;color:#fff}
.section-title{text-align:center;max-width:780px;margin:0 auto 44px}.section-title h2{font-family:Georgia,serif;font-size:clamp(36px,5vw,68px);line-height:1}
.category-grid,.product-grid,.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.category-grid{grid-template-columns:repeat(6,1fr)}
.category-card,.product-card,.features div,.wide-card,.contact-box{background:#fff;border-radius:28px;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.08)}
.category-card{min-height:245px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center;grid-column:span 2}
.category-card h3,.product-card h3,.features h3,.wide-card h3{font-size:24px;margin-bottom:10px}.category-card a,.product-card a{margin-top:18px;color:var(--gold);font-weight:900}
.men-bg{background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.72)),linear-gradient(135deg,#111,#555)}
.women-bg{background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.72)),linear-gradient(135deg,#f7c9d4,#a4003d)}
.ankara-bg{background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.72)),repeating-linear-gradient(45deg,#6a1e13,#6a1e13 18px,#d8a22d 18px,#d8a22d 36px,#0d5c50 36px,#0d5c50 54px)}
.bubu-bg{background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.72)),linear-gradient(135deg,#f2e7d5,#794d2f 45%,#1a1a1a)}
.jersey-bg{background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.72)),linear-gradient(135deg,#f0cf36,#111 48%,#006b3f)}
.access-bg{background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.72)),linear-gradient(135deg,#111,#c5974a)}
.product-img{height:360px;border-radius:22px;margin-bottom:22px;background-size:cover;background-position:center top;background-color:#ddd;position:relative;overflow:hidden}
.product-card span{display:block;margin:12px 0;font-weight:900;color:var(--gold)}
.product-men-1{background:linear-gradient(135deg,#111 15%,#f6f6f6 15% 25%,#111 25% 35%,#c05735 35% 75%,#fff 75%)}
.product-men-2{background:linear-gradient(135deg,#0f1c2e,#f7f0e8 50%,#5f4734)}
.product-men-3{background:linear-gradient(135deg,#f7c600,#006b3f,#111)}
.product-women-1{background:linear-gradient(135deg,#0d3b2e 0 45%,#e0b229 45% 70%,#111 70%)}
.product-women-2{background:linear-gradient(135deg,#ffd7e8,#e6418d,#fff)}
.product-women-3{background:linear-gradient(135deg,#fff,#111 50%,#b68b4c)}
.product-ankara{background:repeating-linear-gradient(45deg,#722b18,#722b18 20px,#dbaf30 20px,#dbaf30 40px,#1b6a5b 40px,#1b6a5b 60px)}
.product-bubu{background-image:url('images/bubu1.jpeg');}

.jersey-img-1{background-image:url('images/jersey1.jpeg');}

.jersey-img-2{background-image:url('images/jersey2.jpeg');}

.jersey-img-3{background-image:url('images/jersey3.jpeg');}

.jersey-img-4{background-image:url('images/jersey4.jpeg');}

.jersey-img-5{background-image:url('images/jersey5.jpeg');}

.jersey-img-6{background-image:url('images/jersey6.jpeg');}

.jersey-img-7{background-image:url('images/jersey7.jpeg');}

.jersey-img-8{background-image:url('images/jersey8.jpeg');}

.jersey-img-9{background-image:url('images/jersey9.jpeg');}

.jersey-img-10{background-image:url('images/jersey10.jpeg');}

.wide-card{display:flex;justify-content:space-between;align-items:center;gap:30px}.features div{text-align:center}
.contact{padding:90px 7%;background:#111;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.contact h2{font-family:Georgia,serif;font-size:clamp(42px,6vw,80px)}.contact-box{color:#111}.contact-box p{margin-bottom:10px}.contact-box .btn{margin-top:18px}
.social-row{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}.social-pill{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#111;border-radius:999px;padding:12px 16px;font-weight:800}.social-pill:hover{background:var(--gold);color:#fff}.social-pill svg{width:20px;height:20px;fill:currentColor}
.page-hero{padding:86px 7%;background:linear-gradient(135deg,#f7f0e8,#fff)}.breadcrumb{margin-bottom:20px;color:#6f6258;font-weight:700}.breadcrumb a{color:var(--gold)}
.catalog-note{padding:30px 7%;background:#fff;color:#333;text-align:center}
footer{padding:26px 7%;display:flex;justify-content:space-between;background:#050505;color:#fff;font-size:14px;gap:20px}
@media(max-width:1100px){.category-grid{grid-template-columns:repeat(2,1fr)}.category-card{grid-column:span 1}.nav{display:none}}
@media(max-width:900px){.hero,.contact{grid-template-columns:1fr}.hero-card{height:auto;grid-template-columns:1fr}.look{min-height:340px}.product-grid,.features{grid-template-columns:1fr 1fr}.header-btn{display:none}.site-header{gap:12px}}
@media(max-width:620px){.site-header{padding:0 4%;height:60px;gap:8px}.hero,.section,.contact,.page-hero{padding:60px 5%}.category-grid,.product-grid,.features{grid-template-columns:1fr}.wide-card,footer{flex-direction:column;align-items:flex-start}.hero h1,.page-hero h1{font-size:54px}.header-actions .icon-link{display:none}.track-header-btn{display:none}}

.ankara-img-1{background-image:url('images/ankara1.jpeg');}

.ankara-img-2{background-image:url('images/ankara2.jpeg');}

.ankara-img-3{background-image:url('images/ankara3.jpeg');}

.ankara-img-4{background-image:url('images/ankara4.jpeg');}

.ankara-img-5{background-image:url('images/ankara5.jpeg');}

.ankara-img-6{background-image:url('images/ankara6.jpeg');}

.ankara-img-7{background-image:url('images/ankara7.jpeg');}

.men-img-1{background-image:url('images/men1.jpeg');}

.men-img-2{background-image:url('images/men2.jpeg');}

.men-img-3{background-image:url('images/men3.jpeg');}

.men-img-4{background-image:url('images/men4.jpeg');}

.men-img-5{background-image:url('images/men5.jpeg');}

.men-img-6{background-image:url('images/men6.jpeg');}

.men-img-7{background-image:url('images/men7.jpeg');}

.men-img-8{background-image:url('images/men8.jpeg');}

.men-img-9{background-image:url('images/men9.jpeg');}

.men-img-10{background-image:url('images/men10.jpeg');}

.women-img-1{background-image:url('images/women1.jpeg');}

.women-img-2{background-image:url('images/women2.jpeg');}

.women-img-3{background-image:url('images/women3.jpeg');}

.women-img-4{background-image:url('images/women4.jpeg');}

.women-img-5{background-image:url('images/women5.jpeg');}

.women-img-6{background-image:url('images/women6.jpeg');}

.women-img-7{background-image:url('images/women7.jpeg');}

.women-img-8{background-image:url('images/women8.jpeg');}

.bubu-img-1{background-image:url('images/bubu1.jpeg');}

.bubu-img-2{background-image:url('images/bubu2.jpeg');}

.bubu-img-3{background-image:url('images/bubu3.jpeg');}




/* ===== Added uploaded product photo mappings ===== */

/* ── NEW MEN'S ITEMS — uploaded product photos ── */
/* Replace these with your actual image paths once uploaded to /images/ */

.men-new-img-1 { background-image: url('images/men-new-1.jpeg'); }
.men-new-img-2 { background-image: url('images/men-new-2.jpeg'); }
.men-new-img-3 { background-image: url('images/men-new-3.jpeg'); }
.men-new-img-4 { background-image: url('images/men-new-4.jpeg'); }
.men-new-img-5 { background-image: url('images/men-new-5.jpeg'); }
.men-new-img-6 { background-image: url('images/men-new-6.jpeg'); }
.men-new-img-7 { background-image: url('images/men-new-7.jpeg'); }
.men-new-img-8 { background-image: url('images/men-new-8.jpeg'); }
.men-new-img-9 { background-image: url('images/men-new-9.jpeg'); }
.men-new-img-10 { background-image: url('images/men-new-10.jpeg'); }
.men-new-img-11 { background-image: url('images/men-new-11.jpeg'); }
.men-new-img-12 { background-image: url('images/men-new-12.jpeg'); }
.men-new-img-13 { background-image: url('images/men-new-13.jpeg'); }

/* ===== VENDORHIVE PROFESSIONAL AUTO MOBILE RESPONSIVE UPDATE ===== */
/* Makes the site automatically adapt on phones like a professional ecommerce site. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
.site-header, .header-actions, .header-right, .nav, .header-nav { min-width: 0; }

@media (max-width: 1180px) {
  .site-header {
    height: 64px !important;
    padding: 0 4.5% !important;
    gap: 10px !important;
  }
  .logo, .lxr-header-logo {
    font-size: 20px !important;
    max-width: 58vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .site-header > .nav,
  .site-header .nav,
  .site-header .header-nav {
    display: none !important;
  }
  .header-actions, .header-right {
    gap: 6px !important;
    margin-left: auto !important;
  }
  .header-actions > a:not(.cart-icon-btn):not(.bliss-auth-btn):not(#authHeaderBtn):not(.track-header-btn):not(.icon-link),
  .header-actions .header-btn,
  .header-actions .btn-wa-header,
  .header-actions .track-header-btn,
  .header-right > span,
  .header-right > a:not(.bliss-auth-btn):not(#authHeaderBtn) {
    display: none !important;
  }
  .icon-link { width: 38px !important; height: 38px !important; }
}

@media (max-width: 900px) {
  body { cursor: auto !important; }
  .cursor { display: none !important; }

  .hero, .page-wrap, .checkout-wrap, .pd-layout, .dashboard-grid, .contact,
  .store-hero-content, .store-nova-hero, .store-editorial,
  .main-grid, .account-grid, .admin-grid, .form-layout {
    grid-template-columns: 1fr !important;
  }

  .hero { min-height: auto !important; padding: 92px 5% 46px !important; display: block !important; }
  .hero-left { padding: 28px 0 !important; }
  .hero-right { height: 390px !important; border-radius: 28px !important; margin-top: 22px !important; }
  .hero h1, .page-hero h1, .stores-hero h1, .left-heading, h1 {
    font-size: clamp(38px, 12vw, 58px) !important;
    line-height: 0.98 !important;
  }
  .hero-desc, .hero-sub, .stores-hero p, .page-hero p { font-size: 15px !important; max-width: 100% !important; }
  .hero-ctas, .gate-actions, .store-hero-actions { gap: 10px !important; }
  .btn, .btn-gold, .btn-outline-dark, .header-link, .hdr-btn, .btn-wa-store, .btn-ig-store {
    min-height: 44px !important;
    justify-content: center !important;
  }

  .section, .page-hero, .stores-hero, .contact, .hero, main, .wrap, .main {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  .section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .section-title { font-size: clamp(34px, 10vw, 52px) !important; }

  .category-grid, .product-grid, .stores-grid, .store-products-grid, .templates-grid,
  .stats, .metrics, .features, .grid, .form-grid, .quick-grid, .cards-grid,
  .owner-products-grid, .promo-grid, .nova-tiles, .trust-grid, .gallery-grid {
    grid-template-columns: 1fr !important;
  }
  .product-card, .store-card, .category-card, .panel, .checkout-card, .form-card, .terms-card,
  .auth-gate, .empty, .metric-card, .stat, .template-card {
    border-radius: 18px !important;
  }
  .product-img { height: 320px !important; border-radius: 16px !important; }
  .products-grid, .store-products-grid { gap: 18px !important; }

  .filter-bar, .store-cat-bar, .checkout-progress, .stores-filter-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .filter-bar::-webkit-scrollbar, .store-cat-bar::-webkit-scrollbar, .checkout-progress::-webkit-scrollbar { display: none !important; }
  .filter-pill, .store-cat-tab, .progress-step { flex: 0 0 auto !important; }
  .search-wrap, .store-search, .search-box { width: 100% !important; flex: 1 0 100% !important; }

  .store-hero { height: auto !important; min-height: 330px !important; }
  .store-hero-content { display: block !important; padding: 120px 5% 30px !important; }
  .store-hero-logo { width: 68px !important; height: 68px !important; margin-bottom: 14px !important; }
  .store-hero-actions { margin-top: 18px !important; }
  .store-nav-wrapper { top: 64px !important; }
  .store-mega-panel { position: fixed !important; inset: 64px 0 auto 0 !important; overflow-y: auto !important; max-height: 70vh !important; }

  .pd-gallery {
    position: static !important;
    height: auto !important;
    grid-template-columns: 1fr !important;
    padding: 14px 5% !important;
  }
  .pd-thumbs { flex-direction: row !important; order: 2 !important; }
  .pd-thumb { width: 64px !important; height: 80px !important; }
  .pd-main-img { min-height: 430px !important; }
  .pd-info { padding: 20px 5% 40px !important; }
  .pd-btn-row { position: sticky !important; bottom: 0 !important; background: #fff !important; padding: 12px 0 !important; z-index: 40 !important; }

  .checkout-wrap { padding-top: 20px !important; }
  .summary-card { position: static !important; order: -1 !important; }
  .cart-item { gap: 10px !important; }
  .ci-img { width: 64px !important; height: 64px !important; }

  table, .orders-table, .stock-table { min-width: 760px !important; }
  .table-wrap, .stock-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .panel-head, .stock-admin-header, .filter-bar { align-items: stretch !important; }

  .vh-notify-fab { right: 16px !important; bottom: 88px !important; }
  .vh-chat-fab, .store-chat-fab { right: 16px !important; bottom: 18px !important; }
  .vh-chat-panel, .store-chat-panel, .notify-panel {
    width: calc(100vw - 28px) !important;
    right: 14px !important;
    left: 14px !important;
    bottom: 78px !important;
    max-height: 76vh !important;
  }
}

@media (max-width: 560px) {
  .site-header { height: 60px !important; padding: 0 14px !important; }
  .logo { font-size: 18px !important; letter-spacing: .02em !important; }
  .icon-link { display: none !important; }
  .bliss-auth-btn, #authHeaderBtn { padding: 8px 11px !important; font-size: 0 !important; }
  .bliss-auth-btn svg, #authHeaderBtn svg { width: 17px !important; height: 17px !important; }
  .hamburger-btn { width: 40px !important; height: 40px !important; border-radius: 12px !important; }
  .mobile-nav-drawer { top: 60px !important; padding: 16px 14px 22px !important; }

  .hero, .page-hero, .stores-hero { padding-top: 82px !important; }
  .hero h1, .page-hero h1, .stores-hero h1, h1 { font-size: clamp(34px, 13vw, 48px) !important; }
  .hero-right { height: 320px !important; }
  .hero-stats, .stores-stats { gap: 16px !important; }
  .stat-num, .stores-stat-num { font-size: 28px !important; }

  .product-img { height: 285px !important; }
  .product-grid, .stores-grid, .store-products-grid { gap: 16px !important; }
  .store-card-cover, .store-card .cover, .store-cover { min-height: 190px !important; }
  .pd-main-img { min-height: 360px !important; }
  .pd-btn-row { gap: 8px !important; }
  .pd-wish-btn { width: 50px !important; height: 50px !important; }

  input, select, textarea, button { font-size: 16px !important; }
  .form-card, .checkout-card, .panel, .terms-card { padding: 18px !important; }
  .input-group { flex-direction: column !important; }
  .input-group button, .track-btn { width: 100% !important; }

  footer { text-align: left !important; gap: 12px !important; }
}

@media (max-width: 380px) {
  .logo { max-width: 52vw !important; }
  .product-img { height: 250px !important; }
  .pd-main-img { min-height: 310px !important; }
}


/* ============================================================
   VENDORHIVE MOBILE PROFESSIONAL HEADER HARDENING
   Keeps mobile pages portrait-friendly: no squeezed/rotated buttons,
   no overflowing desktop nav, clean compact ecommerce header.
   ============================================================ */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden !important; }
  .site-header { flex-wrap: nowrap !important; }
  .site-header .nav, .site-header .header-nav { display: none !important; }
  .site-header .track-header-btn:not(#authHeaderBtn),
  .site-header .btn-wa-header,
  .site-header .btn-go-live,
  .site-header .header-btn,
  .site-header .hdr-btn,
  .site-header .btn-shop-hdr { display: none !important; }
  .store-nav-wrapper, .filter-bar { max-width: 100vw !important; overflow-x: auto !important; }
}
@media (max-width: 560px) {
  .hero-ctas, .page-actions, .store-hero-actions { display: grid !important; grid-template-columns: 1fr !important; }
  .hero-ctas a, .hero-ctas button, .page-actions a, .store-hero-actions a, .store-hero-actions button { width: 100% !important; }
}