/* =======================================================
   WALKINFOOTWEAR – RESPONSIVE CSS  (mohanin.com theme)
   Coverage: 320px → 2560px
   ======================================================= */

/* -------------------------------------------------------
   BASE FLUID
   ------------------------------------------------------- */
.containerFull {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------------
   XS  –  320px – 479px
   ------------------------------------------------------- */
@media (max-width: 479px) {

  /* Top bar */
  .topBar               { display: none; }

  /* Header */
  header                { height: 58px; }
  .centerLogo a         { font-size: 17px; letter-spacing: .5px; }
  .headerActions        { gap: 10px; }
  .icon-btn             { font-size: 15px; }
  .cart-count           { width: 15px; height: 15px; font-size: 9px; top: -4px; right: -6px; }

  /* Hero slider */
  .hero-slide           { height: 380px; }
  .hero-slide-label     { font-size: 10px; letter-spacing: 2px; margin-bottom: 12px; }
  .hero-slide-title     { font-size: 24px; margin-bottom: 18px; }
  .hero-slide-desc      { display: none; }
  .hero-slide-btn       { padding: 11px 24px; font-size: 11px; letter-spacing: 1px; }
  .heroSlider .slick-prev, .heroSlider .slick-next { display: none !important; }

  /* Capabilities */
  .capabilities-section { padding: 50px 0; }
  .cap-grid             { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  .cap-head             { margin-bottom: 36px; }

  /* Category grid */
  .cat-section          { padding-bottom: 50px; }
  .cat-grid             { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-card             { aspect-ratio: 2/3; }
  .cat-card-title       { font-size: 16px; }

  /* About / Promise */
  .about-home-section   { padding-bottom: 0; }
  .about-home-row       { flex-direction: column; }
  .about-home-img-col,
  .about-home-content-col { flex: 0 0 100%; max-width: 100%; min-height: auto; }
  .about-home-img-col   { min-height: 260px; }
  .about-home-content-col { padding: 36px 24px; }
  .about-home-title     { font-size: 24px; }

  .promise-section      { padding: 0; }
  .promise-row          { flex-direction: column-reverse; }
  .promise-img-col,
  .promise-content-col  { flex: 0 0 100%; max-width: 100%; min-height: auto; }
  .promise-img-col      { min-height: 240px; }
  .promise-content-col  { padding: 36px 24px; }
  .promise-title        { font-size: 24px; }

  /* Brands */
  .brands-section       { padding: 44px 0; }
  .brand-logo-text      { font-size: 15px; }

  /* Values */
  .values-home-section  { padding: 50px 0; }
  .values-home-grid     { flex-wrap: wrap; }
  .value-home-item      { flex: 0 0 50%; border-right: 1px solid var(--border); padding: 30px 16px; }
  .value-home-item:nth-child(even) { border-right: 1px solid var(--border); }

  /* Section titles */
  .section-title        { font-size: 22px; }
  .section-subtitle     { font-size: 13px; }

  /* Collections / product grid */
  .collections-section  { padding: 40px 0; }
  .collections-head     { margin-bottom: 24px; }
  .collections-filter   { flex-direction: column; gap: 10px; align-items: stretch; }
  .filter-btn           { justify-content: center; }
  .sort-select          { width: 100%; }
  .product-card-inner   { aspect-ratio: 4/5; }
  .product-name         { font-size: 13px; }
  .price                { font-size: 14px; }
  .view-all-wrap        { margin-top: 28px; }

  /* Promo banner */
  .promo-banner         { padding: 44px 0; }
  .promo-title          { font-size: 24px; }
  .promo-desc           { font-size: 13px; }
  .promo-image          { display: none; }

  /* Blog */
  .blog-section         { padding: 44px 0; }
  .blog-img img         { height: 180px; }

  /* Featured */
  .featured-section     { padding: 44px 0; }
  .featured-img         { min-height: 260px; padding: 20px; }
  .featured-title       { font-size: 22px; }
  .featured-price       { font-size: 22px; }
  .featured-info        { padding-left: 0; margin-top: 20px; }

  /* Footer */
  footer                { padding-top: 40px; }
  .footer-logo a        { font-size: 18px; }
  .footer-desc          { max-width: 100%; }
  .copyRight p          { font-size: 11px; }

  /* Back to top */
  .back-to-top          { bottom: 16px; left: 16px; width: 40px; height: 40px; font-size: 15px; }
  .toast-stack          { bottom: 16px; right: 16px; left: 16px; }
  .toast-item           { min-width: unset; max-width: 100%; }

  /* Cart drawer */
  .cart-drawer          { width: 100vw; }
}

/* -------------------------------------------------------
   SM  –  480px – 575px
   ------------------------------------------------------- */
@media (min-width: 480px) and (max-width: 575px) {
  .topBar               { display: none; }
  header                { height: 60px; }
  .centerLogo a         { font-size: 18px; }

  .hero-slide           { height: 420px; }
  .hero-slide-title     { font-size: 28px; }
  .hero-slide-desc      { font-size: 14px; }
  .heroSlider .slick-prev, .heroSlider .slick-next { display: none !important; }

  .cap-grid             { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .cat-grid             { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .about-home-row,
  .promise-row          { flex-direction: column; }
  .about-home-img-col,
  .about-home-content-col,
  .promise-img-col,
  .promise-content-col  { flex: 0 0 100%; max-width: 100%; min-height: auto; }
  .about-home-content-col,
  .promise-content-col  { padding: 36px 24px; }
  .promise-row          { flex-direction: column-reverse; }

  .values-home-grid     { flex-wrap: wrap; }
  .value-home-item      { flex: 0 0 50%; }

  .promo-image          { display: none; }
  .featured-info        { padding-left: 0; margin-top: 20px; }
  footer                { padding-top: 40px; }
  .back-to-top          { bottom: 16px; left: 16px; }
}

/* -------------------------------------------------------
   MD-SM  –  576px – 767px
   ------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 767px) {
  .topBar-left          { display: none; }
  header                { height: 62px; }

  .hero-slide           { height: 460px; }
  .hero-slide-title     { font-size: 32px; }
  .heroSlider .slick-prev, .heroSlider .slick-next { display: none !important; }

  .cap-grid             { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
  .cat-grid             { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .about-home-row,
  .promise-row          { flex-direction: column; }
  .about-home-img-col,
  .about-home-content-col,
  .promise-img-col,
  .promise-content-col  { flex: 0 0 100%; max-width: 100%; min-height: auto; }
  .about-home-content-col { padding: 40px 28px; }
  .promise-content-col  { padding: 40px 28px; }
  .promise-row          { flex-direction: column-reverse; }

  .values-home-grid     { flex-wrap: wrap; }
  .value-home-item      { flex: 0 0 50%; }

  .promo-image          { display: none; }
  .promo-title          { font-size: 30px; }
  .featured-info        { padding-left: 0; margin-top: 24px; }
}

/* -------------------------------------------------------
   ALL MOBILE  (max-width: 767px)
   ------------------------------------------------------- */
@media (max-width: 767px) {
  section               { padding: 48px 0; }
  .containerFull        { padding-left: 16px; padding-right: 16px; }
  .desktopNav           { display: none !important; }

  .section-title        { font-size: 24px; }
  .section-subtitle     { font-size: 13px; margin-top: 8px; }

  /* Capabilities */
  .cap-icon i           { font-size: 26px; }

  /* Collections filter */
  .collections-filter   { flex-wrap: wrap; gap: 10px; }
  .product-card-inner   { aspect-ratio: 1/1; }

  /* Blog */
  .blog-img img         { height: 200px; }

  /* Page hero */
  .page-hero            { padding: 28px 0; }
  .page-hero-title      { font-size: 22px; }

  /* Breadcrumb */
  .breadcrumb-list      { gap: 6px; }
  .breadcrumb-list li   { font-size: 12px; }

  /* Pagination */
  .pagination-wrap      { gap: 4px; margin-top: 36px; }
  .page-link-btn        { width: 34px; height: 34px; font-size: 12px; }

  /* Sidebar */
  .widget-title         { font-size: 12px; }

  /* Shop toolbar */
  .shop-toolbar         { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Product detail */
  .product-gallery      { position: static; margin-bottom: 28px; }
  .pd-title             { font-size: 22px; }
  .pd-price             { font-size: 22px; }
  .pd-review-bar        { flex-wrap: wrap; gap: 8px; }
  .product-tabs-nav     { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; gap: 0; }
  .prod-tab-btn         { padding: 10px 16px; font-size: 12px; }
  .add-cart-row         { flex-wrap: wrap; }
  .add-cart-row .btnTheme { width: 100%; justify-content: center; padding: 12px 0; }

  /* About page */
  .about-intro-section  { padding: 48px 0; }
  .about-heading        { font-size: 26px; }
  .stats-strip          { padding: 44px 0; }
  .stat-number          { font-size: 38px; }
  .values-section       { padding: 48px 0; }
  .team-section         { padding: 48px 0; }
  .team-img             { width: 120px; height: 120px; }

  /* Contact */
  .contact-section      { padding: 48px 0; }
  .contact-form-wrap    { padding: 22px 16px; }
  .ci-icon              { width: 42px; height: 42px; font-size: 16px; }
  .map-wrap             { height: 240px; margin-top: 20px; }

  /* Blog */
  .blog-listing-section  { padding: 48px 0; }
  .blog-detail-section   { padding: 48px 0; }
  .blog-full-title       { font-size: 18px; }
  .blog-full-meta        { gap: 10px; flex-wrap: wrap; }
  .blog-detail-title     { font-size: 22px; }
  .blog-detail-meta      { gap: 10px; flex-wrap: wrap; }
  .blog-detail-body      { font-size: 14px; }
  .author-box            { flex-direction: column; gap: 14px; padding: 22px; }
  .prev-next-nav         { flex-direction: column; gap: 10px; }
  .pn-card               { min-width: unset; text-align: left !important; }

  .related-section,
  .related-posts-section { padding: 44px 0; }

  /* Search overlay */
  .search-box input      { font-size: 20px; }
  .search-overlay-close  { top: 20px; right: 20px; font-size: 24px; }

  /* Cart drawer */
  .cart-drawer           { width: 100vw; }
  .sticky-add-bar        { padding: 10px 16px; }

  /* Footer */
  footer                 { padding-top: 44px; }
  .footer-desc           { max-width: 100%; }
  .social-icon-list      { flex-wrap: wrap; }
}

/* -------------------------------------------------------
   TABLET  –  768px – 991px
   ------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  section               { padding: 60px 0; }
  .containerFull        { padding-left: 20px; padding-right: 20px; }

  header                { height: 66px; }
  .desktopNav           { display: none !important; }
  .centerLogo a         { font-size: 20px; }

  /* Hero */
  .hero-slide           { height: 520px; }
  .hero-slide-title     { font-size: 40px; }

  /* Capabilities */
  .cap-grid             { grid-template-columns: repeat(4, 1fr); gap: 40px 24px; }

  /* Categories */
  .cat-grid             { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* About / Promise */
  .about-home-row,
  .promise-row          { flex-direction: column; }
  .about-home-img-col,
  .about-home-content-col,
  .promise-img-col,
  .promise-content-col  { flex: 0 0 100%; max-width: 100%; min-height: auto; }
  .about-home-img-col,
  .promise-img-col      { min-height: 400px; }
  .about-home-content-col { padding: 50px 40px; }
  .promise-content-col  { padding: 50px 40px; }
  .promise-row          { flex-direction: column-reverse; }
  .about-home-title,
  .promise-title        { font-size: 30px; }

  /* Values */
  .values-home-grid     { flex-wrap: wrap; }
  .value-home-item      { flex: 0 0 33.33%; }

  /* Section titles */
  .section-title        { font-size: 28px; }

  /* Promo */
  .promo-title          { font-size: 32px; }
  .promo-image img      { max-width: 300px; height: 200px; }

  /* Featured */
  .featured-info        { padding-left: 18px; }
  .featured-title       { font-size: 28px; }
  .featured-price       { font-size: 24px; }

  /* Page hero */
  .page-hero-title      { font-size: 26px; }

  /* About page */
  .about-heading        { font-size: 32px; }
  .stat-number          { font-size: 42px; }

  /* Product detail */
  .pd-title             { font-size: 26px; }
  .pd-price             { font-size: 24px; }

  /* Blog */
  .blog-detail-title    { font-size: 28px; }
  .blog-full-title      { font-size: 20px; }

  /* Contact */
  .contact-form-wrap    { padding: 28px; }

  /* Gallery */
  .gallery-main         { aspect-ratio: 1/1; }

  /* Footer */
  .footer-desc          { max-width: 100%; }
}

/* -------------------------------------------------------
   LAPTOP  –  992px – 1199px
   ------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
  .containerFull        { padding-left: 24px; padding-right: 24px; }

  .hero-slide           { height: 580px; }
  .hero-slide-title     { font-size: 52px; }

  .cap-grid             { gap: 40px 28px; }
  .cat-grid             { gap: 14px; }

  .about-home-content-col { padding: 50px 50px; }
  .promise-content-col  { padding: 50px 50px; }
  .about-home-title,
  .promise-title        { font-size: 34px; }

  .featured-title       { font-size: 30px; }
  .promo-title          { font-size: 38px; }

  .pd-title             { font-size: 28px; }
  .blog-detail-title    { font-size: 30px; }
}

/* -------------------------------------------------------
   STANDARD DESKTOP  –  1200px – 1399px
   ------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1399px) {
  .containerFull        { max-width: 1240px; padding-left: 24px; padding-right: 24px; }

  .hero-slide           { height: 620px; }
  .about-home-content-col { padding: 60px 60px; }
  .promise-content-col  { padding: 60px 60px; }
}

/* -------------------------------------------------------
   LARGE DESKTOP  –  1400px – 1599px
   ------------------------------------------------------- */
@media (min-width: 1400px) and (max-width: 1599px) {
  .containerFull        { max-width: 1380px; padding-left: 28px; padding-right: 28px; }

  .hero-slide           { height: 660px; }
  .hero-slide-title     { font-size: 68px; }
  .section-title        { font-size: 38px; }
  .featured-title       { font-size: 40px; }
  .promo-title          { font-size: 48px; }
}

/* -------------------------------------------------------
   WIDESCREEN  –  1600px – 1919px
   ------------------------------------------------------- */
@media (min-width: 1600px) and (max-width: 1919px) {
  .containerFull        { max-width: 1540px; padding-left: 30px; padding-right: 30px; }

  .hero-slide           { height: 700px; }
  .hero-slide-title     { font-size: 76px; }
  .section-title        { font-size: 42px; }
  .promo-title          { font-size: 54px; }
  .featured-title       { font-size: 44px; }
  .about-heading        { font-size: 46px; }
  .stat-number          { font-size: 60px; }
}

/* -------------------------------------------------------
   4K / ULTRA-WIDE  –  1920px+
   ------------------------------------------------------- */
@media (min-width: 1920px) {
  .containerFull        { max-width: 1800px; padding-left: 40px; padding-right: 40px; }

  body                  { font-size: 16px; }
  .hero-slide           { height: 760px; }
  .hero-slide-title     { font-size: 84px; }
  .section-title        { font-size: 46px; }
  .promo-title          { font-size: 60px; }
  .about-heading        { font-size: 52px; }
  .featured-title       { font-size: 48px; }
  .stat-number          { font-size: 68px; }
}

/* -------------------------------------------------------
   SHOP SIDEBAR: toggle on mobile
   ------------------------------------------------------- */
@media (max-width: 991px) {
  .shop-sidebar-col       { display: none; }
  .shop-sidebar-col.open  { display: block; }
}
@media (min-width: 992px) {
  .shop-sidebar-col       { display: block !important; }
  #filterToggleBtn        { display: none !important; }
}

/* -------------------------------------------------------
   PRINT
   ------------------------------------------------------- */
@media print {
  .topBar, header, .heroSlider, .promo-banner,
  .brands-section, .values-home-section,
  .back-to-top, .toast-stack, .search-overlay,
  .cart-drawer, .cart-backdrop, #pageLoader,
  .offcanvas { display: none !important; }
  .containerFull { max-width: 100%; }
  body { font-size: 12pt; color: #000; }
}