/* Shared responsive improvements for all MORTEX Sports pages */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
.container, .container-fluid { min-width: 0; }

.navbar { z-index: 1030; }
.navbar-brand { white-space: nowrap; }
.navbar-toggler { border: 1px solid rgba(16,24,32,.2); padding: .45rem .6rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,77,0,.18); }
.navbar .dropdown-menu { border: 0; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: .6rem; }
.navbar .dropdown-item { border-radius: 9px; padding: .55rem .8rem; }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background: rgba(255,77,0,.1); color: var(--primary, #ff4d00); }
.nav-icons { display: flex; align-items: center; gap: 14px; }
.nav-icons a { margin-left: 0 !important; }
.header-actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.header-actions .cart-header-link { min-height: 42px; padding: 8px 11px; border: 1px solid #e3e6ea; border-radius: 12px; color: #17212b; background: #fff; transition: .2s; }
.header-actions .cart-header-link:hover { color: var(--primary, #ff4d00); border-color: rgba(255,77,0,.35); background: #fff8f4; }
.header-actions .cart-count { top: -7px; left: 25px; box-shadow: 0 0 0 3px #fff; }
.header-user { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 5px 11px 5px 6px; color: #17212b; border: 1px solid #e3e6ea; border-radius: 12px; text-decoration: none; background: #fff; transition: .2s; }
.header-user:hover { color: #17212b; border-color: rgba(255,77,0,.35); background: #fff8f4; }
.header-user-icon { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 31px; color: #fff; background: #142433; border-radius: 9px; }
.header-user-icon svg { width: 17px; height: 17px; }
.header-user-copy { display: grid; line-height: 1.05; }
.header-user-copy small { color: #77818b; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
.header-user-copy strong { max-width: 82px; margin-top: 3px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.header-logout-form { margin: 0; }
.header-logout { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: #65717c; border: 1px solid #e3e6ea; border-radius: 12px; background: #fff; transition: .2s; }
.header-logout:hover { color: #b52b20; border-color: #f0c5c0; background: #fff4f2; }
.header-logout svg { width: 18px; height: 18px; }
.header-logout span { display: none; }
.header-login, .header-register { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; }
.header-login { color: #17212b; border: 1px solid #dfe4e8; }
.header-register { color: #fff; background: var(--primary, #ff4d00); }

section { overflow: hidden; }
.row > * { min-width: 0; }
.display-1, .display-2, .display-3, .display-4, h1 { overflow-wrap: anywhere; }

@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
  .navbar-nav { align-items: center; }
  .navbar .nav-link { white-space: nowrap; font-size: 14px; }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .navbar .container { max-width: 100%; padding-left: 18px; padding-right: 18px; }
  .navbar-brand { font-size: 22px !important; }
  .navbar .nav-link { font-size: 12px; margin-left: 2px !important; margin-right: 2px !important; padding-left: 5px !important; padding-right: 5px !important; }
  .nav-icons { gap: 9px; }
  .nav-icons a { font-size: 17px !important; }
  .header-actions { gap: 6px; }
  .header-actions .cart-header-link { padding-inline: 8px; }
  .header-actions .cart-link-label, .header-user-copy small { display: none; }
  .header-user { padding-right: 8px; }
  .header-user-copy strong { max-width: 58px; }
}

@media (max-width: 991.98px) {
  .top-bar .container { justify-content: center !important; text-align: center; }
  .navbar { position: sticky; top: 0; }
  .navbar-collapse { max-height: calc(100vh - 90px); overflow-y: auto; padding: .75rem 0 1rem; }
  .navbar-nav { width: 100%; }
  .navbar .nav-link { margin: 0 !important; padding: .7rem .35rem !important; }
  .navbar .dropdown-menu { position: static !important; transform: none !important; box-shadow: none; background: #f7f7f7; margin: 0 0 .4rem; }
  .nav-icons { margin-top: .7rem !important; padding-top: .8rem; border-top: 1px solid #eee; }
  .header-actions { width: 100%; margin-top: .8rem; padding-top: .9rem; border-top: 1px solid #eceff1; flex-wrap: wrap; }
  .header-actions .cart-header-link { margin-right: auto; }
  .header-actions .cart-link-label, .header-user-copy small { display: inline; }
  .header-user-copy strong { max-width: 150px; }
  .header-logout { width: auto; padding: 0 13px; display: inline-flex; gap: 7px; }
  .header-logout span { display: inline; font-size: 12px; font-weight: 700; }
  .hero, .page-hero, .about-hero { min-height: auto !important; padding: 80px 0 !important; }
  .hero h1, .page-hero h1, .about-hero h1 { font-size: clamp(2rem, 8vw, 2.8rem) !important; }
  .promo-card, .mission-box, .cta-box { padding: 34px 24px !important; }
}

@media (max-width: 767.98px) {
  .top-bar { font-size: 12px !important; }
  .top-bar .container { gap: 4px !important; }
  .top-bar span { width: 100%; }
  section, .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .section-title { margin-bottom: 28px !important; }
  .section-title h2 { font-size: clamp(1.55rem, 7vw, 2.1rem); }
  .product-card img, .product-img img, .team-card img, .category-banner img { height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
  .about-img img { height: auto !important; max-height: 420px; }
  .table-responsive { border-radius: 12px; }
}

@media (max-width: 575.98px) {
  .navbar .container { padding-left: 14px; padding-right: 14px; }
  .navbar-brand { font-size: 20px !important; }
  .hero, .page-hero, .about-hero { padding: 62px 0 !important; text-align: center; }
  .hero p, .page-hero p, .about-hero p { font-size: 15px; }
  .btn, .btn-orange, .details-btn { max-width: 100%; white-space: normal; }
  .category-content { left: 20px !important; right: 20px !important; bottom: 20px !important; }
  footer { padding-top: 42px !important; }
}