/* ==========================================================================
   TechStore — Responsive stylesheet
   Breakpoints follow Bootstrap 5.3 so utilities and this file stay in sync.
   Order: 1399.98 → 1199.98 → 991.98 → 767.98 → 575.98 → 420
   ========================================================================== */

/* --------------------------------------------------------------------------
   XL — 1400px and down: tighten the desktop shell
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
  :root {
    --header-h: 68px;
  }

  .main-menu__inner {
    gap: 1rem;
  }

  .main-logo img {
    max-height: 52px;
  }

  .brand-mark {
    font-size: 1.32rem;
  }

  .brand-mark__logo {
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
  }

  .cat-nav__link {
    padding-inline: 0.9rem;
    font-size: 0.92rem;
  }

  .menu-action {
    padding-inline: 0.4rem;
  }
}

/* --------------------------------------------------------------------------
   LG — 1200px and down: shrink the action bar
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  :root {
    --header-h: 62px;
  }

  .main-logo img {
    max-height: 46px;
  }

  .brand-mark__sub {
    display: none;
  }

  .menu-action span {
    display: none;
  }

  .menu-action {
    padding: 0.4rem 0.5rem;
  }

  .menu-action i {
    font-size: 1.25rem;
  }

  .menu-badge {
    top: -2px;
    right: -2px;
  }

  .btn-sys-builder span {
    display: none;
  }

  .btn-sys-builder {
    padding: 0.5rem 0.7rem;
  }

  .support-box1 {
    width: 54px;
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   MD — 992px and down: switch to the mobile shell
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  :root {
    --header-h: 58px;
  }

  /* Desktop logo + system builder are replaced by the mobile bar */
  .main-logo,
  .btn-sys-builder,
  .top-menu-section .menu-action--label,
  .cat-nav {
    display: none !important;
  }

  .main-menu__inner {
    flex-wrap: wrap;
    min-height: var(--header-h);
    padding-block: 0.6rem;
    row-gap: 0.65rem;
  }

  .menu-logo-button {
    display: flex;
  }

  /* Search drops onto its own full-width row */
  .search-with-box {
    order: 3;
    flex: 1 0 100%;
  }

  .main-menu__inner > .top-menu-section {
    margin-left: auto;
  }

  .main-menu__inner > .top-menu-section .menu-action {
    padding: 0.35rem 0.55rem;
  }

  /* Mobile action row: show the labels back for the drawer triggers */
  .main-menu__inner > .top-menu-section .menu-action span {
    display: block;
    font-size: 0.62rem;
  }

  /* Hero collapses to a single column */
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-side {
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }

  .hero-ticker {
    grid-column: 1 / -1;
  }

  .hero-slide {
    aspect-ratio: 16 / 9;
  }

  /* Showcase stacks */
  .showcase,
  .showcase--flip {
    flex-direction: column;
  }

  .showcase__media {
    flex: 0 0 auto;
    width: 100%;
    padding: 2rem 0;
  }

  .showcase--flip .showcase__media {
    order: 0;
  }

  /* Category rail gets comfortable touch targets */
  .category-row {
    justify-content: flex-start;
    gap: 0.25rem;
    margin-inline: -0.5rem;
    padding-inline: 0.5rem;
  }

  .category-row > li {
    flex: 0 0 84px;
    min-width: 84px;
  }

  .category-icon {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
  }

  /* Support boxes go 2-up */
  .support-box2 h3 {
    font-size: 0.9rem;
  }

  /* Mega menu is not used below this width */
  .cat-nav__panel {
    display: none !important;
  }

  /* Quick view stacks */
  .quick-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .quick-media {
    padding: 1.25rem;
  }

  .quick-media img {
    max-height: 260px;
  }

  /* Footer link columns: 2-up with breathing room */
  .main-footer h4 {
    margin-bottom: 0.7rem;
  }
}

/* --------------------------------------------------------------------------
   SM — 768px and down: phone layout
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  :root {
    --fs-hero: 1.75rem;
    --gutter-section: 2rem;
  }

  body {
    font-size: 0.9rem;
  }

  .brand-mark {
    font-size: 1.2rem;
  }

  .brand-mark__logo {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .search-form .form-control {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
  }

  /* Hero: shorter slides, no side promos, hide arrows */
  .hero {
    padding-block: 0.85rem;
  }

  .hero-slide {
    aspect-ratio: 4 / 3;
  }

  .hero-slide__body {
    padding: 1rem;
  }

  .hero-slide__text {
    display: none;
  }

  .hero-slide__title {
    max-width: 18ch;
  }

  .hero-slider .swiper-button-next,
  .hero-slider .swiper-button-prev {
    display: none;
  }

  .hero-side {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .hero-promo {
    min-height: 116px;
  }

  .hero-ticker {
    font-size: 0.78rem;
    text-align: center;
    justify-content: center;
  }

  /* Section heads stack */
  .section-head__top {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.6rem;
  }

  .home-header-text {
    font-size: 1.25rem;
  }

  .home-header-line {
    width: 56px;
  }

  /* Product grid: 2-up */
  .product-grid > [class*="col-"] {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding-inline: 0.4rem;
  }

  .product-card__actions {
    opacity: 1;
    transform: none;
  }

  .product-card__name {
    font-size: 0.78rem;
    min-height: 2.7em;
  }

  .product-card__price {
    font-size: 1rem;
  }

  /* Support boxes: full width rows */
  .support-box {
    height: 100%;
  }

  .promo-strip__list {
    gap: 0.3rem 0.9rem;
    font-size: 0.78rem;
    justify-content: flex-start;
  }

  .promo-strip__sep {
    display: none;
  }

  /* Stats: 2-up */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 0.75rem;
  }

  /* Post cards: keep 1-up on tablet for readable text */
  .brand-grid {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 0.55rem;
  }

  .brand-chip {
    min-height: 78px;
    padding: 0.65rem 0.4rem;
  }

  .brand-chip__name {
    font-size: 0.88rem;
  }

  /* Newsletter stacks */
  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form .btn {
    width: 100%;
  }

  .newsletter-form .invalid-feedback {
    top: calc(100% + 4px);
    left: 0.6rem;
  }

  /* Offcanvas full width */
  .offcanvas {
    --bs-offcanvas-width: 100%;
  }

  /* Toasts and back-to-top stack vertically */
  .toast-stack {
    right: 0.75rem;
    left: 0.75rem;
    bottom: 0.75rem;
    max-width: none;
  }

  .back-to-top {
    right: 0.75rem;
    bottom: 0.75rem;
    width: 40px;
    height: 40px;
  }

  .drawer-item__img {
    width: 58px;
    height: 58px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .readmore {
    -webkit-line-clamp: 6;
  }
}

/* --------------------------------------------------------------------------
   XS — 576px and down: small phones
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  :root {
    --gutter-section: 1.75rem;
  }

  .hero-slide__title {
    font-size: 1.1rem;
  }

  .hero-slide__body .btn {
    width: 100%;
  }

  /* Product card actions become a horizontal row under the price */
  .product-card__actions {
    position: static;
    flex-direction: row;
    justify-content: center;
    margin-top: 0.55rem;
  }

  .product-card__body {
    padding: 0.7rem 0.6rem 0.85rem;
  }

  .product-card__media {
    aspect-ratio: 4 / 3;
  }

  .product-card__rating {
    display: none;
  }

  .product-card__foot .btn-label-long {
    display: none;
  }

  .feature-card {
    padding: 1.1rem 1rem;
  }

  .showcase__body {
    padding: 1.1rem;
  }

  .newsletter {
    padding: 1.35rem 1.1rem;
  }

  .quick-info,
  .quick-media {
    padding: 1.1rem;
  }

  .quick-price {
    font-size: 1.45rem;
  }
}

/* --------------------------------------------------------------------------
   420px and down: narrow phones
   -------------------------------------------------------------------------- */
@media (max-width: 419.98px) {
  .main-menu__inner > .top-menu-section .menu-action span {
    display: none;
  }

  .category-row > li {
    flex: 0 0 76px;
    min-width: 76px;
  }

  .category-icon {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
  }

  .product-card__name {
    font-size: 0.74rem;
  }

  .stats-grid {
    gap: 1rem 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   Landscape phones — reclaim vertical space
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --header-h: 54px;
  }
}

/* --------------------------------------------------------------------------
   Coarse pointer: no hover-reveal affordances
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .product-card__actions {
    opacity: 1;
    transform: none;
  }

  .footer-links a::before {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   High contrast / forced colors
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .product-card,
  .feature-card,
  .support-box,
  .brand-chip,
  .post-card {
    border: 1px solid CanvasText;
  }

  .icon-btn,
  .carousel-btn,
  .btn-brand {
    forced-color-adjust: none;
  }
}