/**
 * OMEGA Sarajevo — Responsive Styles
 * Breakpoints: 480, 768, 1024, 1280, 1536
 */

/* ════════════════════════════════════════════════════════════
   BASE MOBILE-FIRST ADJUSTMENTS (< 480px handled as default)
   ════════════════════════════════════════════════════════════ */

:root {
  --grid-cols-product: 2;
  --grid-cols-category: 1;
}

/* ════════════════════════════════════════════════════════════
   SMALL (480px+)
   ════════════════════════════════════════════════════════════ */

@media (min-width: 480px) {
  :root {
    --container-padding: var(--space-4);
    --grid-cols-category: 2;
  }

  .product-grid {
    gap: var(--space-3);
  }

  .subcategory-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefits-strip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why-omega {
    grid-template-columns: 1fr;
  }

  .form-row--2 {
    grid-template-columns: 1fr;
  }

  .checkout-form-grid {
    grid-template-columns: 1fr;
  }

  .payment-methods {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════
   MEDIUM (768px+)
   ════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-5);
    --grid-cols-product: 3;
    --grid-cols-category: 3;
  }

  .container {
    padding-inline: var(--container-padding-lg);
  }

  h1, .h1 {
    font-size: var(--text-5xl);
  }

  .page-header {
    padding-block: var(--space-8) var(--space-6);
  }

  .page-header__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
  }

  .section {
    padding-block: var(--space-12);
  }

  .section--lg {
    padding-block: var(--space-20);
  }

  /* Header: show full search, hide mobile toggle */
  .header-menu-toggle {
    display: none;
  }

  .site-logo__tagline {
    display: block;
  }

  .benefits-strip__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .why-omega {
    grid-template-columns: repeat(3, 1fr);
  }

  .form-row--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .checkout-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .payment-methods {
    grid-template-columns: repeat(3, 1fr);
  }

  .category-page__seo-content {
    columns: 2;
  }

  .mega-menu__inner {
    grid-template-columns: repeat(3, 1fr);
  }

  .site-footer__grid {
    grid-template-columns: 1.5fr repeat(2, 1fr);
  }

  .b2b-cta {
    grid-template-columns: 1fr auto;
  }

  .shop-hero {
    grid-template-columns: 1fr auto;
  }

  .pdp-gallery__thumbs {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ════════════════════════════════════════════════════════════
   LARGE (1024px+)
   ════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  :root {
    --grid-cols-product: 4;
    --grid-cols-category: 4;
  }

  /* Shop sidebar visible */
  .shop-layout {
    grid-template-columns: var(--sidebar-width) 1fr;
  }

  .shop-layout__sidebar {
    display: block;
  }

  .filter-toggle {
    display: none;
  }

  /* PDP 2-column */
  .pdp__layout {
    grid-template-columns: 1fr 1fr;
  }

  .pdp-details__grid {
    grid-template-columns: 2fr 1fr;
  }

  /* Cart & Checkout 2-col */
  .cart-page__layout {
    grid-template-columns: 1fr 22rem;
  }

  .checkout-layout {
    grid-template-columns: 1fr 24rem;
  }

  .cart-table__header,
  .cart-table__row {
    display: grid;
  }

  .mega-menu__inner {
    grid-template-columns: repeat(4, 1fr);
  }

  .site-footer__grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }

  .site-nav__list {
    display: flex;
  }

  .header-search {
    display: block;
  }

  .header-action__label {
    display: block;
  }

  .sticky-atc {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════
   XL (1280px+)
   ════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {
  :root {
    --grid-cols-product: 4;
  }

  .header-main__inner {
    gap: var(--space-8);
  }

  .header-search {
    max-width: 40rem;
  }

  .pdp__layout--wide-gallery {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .product-grid--compact {
    grid-template-columns: repeat(5, 1fr);
  }

  .shop-layout {
    gap: var(--space-8);
  }

  .cart-page__layout {
    grid-template-columns: 1fr 24rem;
  }

  .checkout-layout {
    grid-template-columns: 1fr 26rem;
  }

  .mega-menu__inner {
    padding: var(--space-8);
    gap: var(--space-8);
  }
}

/* ════════════════════════════════════════════════════════════
   2XL (1536px+)
   ════════════════════════════════════════════════════════════ */

@media (min-width: 1536px) {
  :root {
    --grid-cols-product: 5;
  }

  .container--wide {
    max-width: var(--container-wide);
  }

  .product-grid {
    gap: var(--space-5);
  }

  .section--lg {
    padding-block: var(--space-24);
  }

  .pdp__layout {
    gap: var(--space-12);
  }

  .shop-layout__sidebar {
    padding: var(--space-6);
  }
}

/* ════════════════════════════════════════════════════════════
   BELOW 1024px — TABLET / MOBILE OVERRIDES
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  /* Header compact */
  .header-main__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
  }

  .header-search {
    display: none;
  }

  .header-search--mobile {
    display: block;
    grid-column: 1 / -1;
    order: 10;
    max-width: none;
    padding-bottom: var(--space-3);
  }

  .header-menu-toggle {
    display: flex;
  }

  .header-action__label {
    display: none;
  }

  .header-action {
    min-width: auto;
    padding: var(--space-2);
  }

  .site-logo__tagline {
    display: none;
  }

  /* Desktop category rail is hidden below 1024px; mobile uses .mobile-nav (see header.css). */
  .site-nav {
    display: none !important;
  }

  .mega-menu__inner {
    grid-template-columns: 1fr;
    padding: var(--space-4);
    gap: var(--space-4);
  }

  /* Shop layout: no sidebar column */
  .shop-layout {
    grid-template-columns: 1fr;
  }

  .shop-layout__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(20rem, 90vw);
    z-index: var(--z-drawer);
    max-height: none;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    box-shadow: var(--shadow-drawer);
  }

  .shop-layout__sidebar.is-open {
    transform: translateX(0);
  }

  .filter-toggle {
    display: inline-flex;
  }

  /* PDP single column */
  .pdp__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .pdp-gallery {
    position: static;
  }

  .pdp-info__title {
    font-size: var(--text-2xl);
  }

  .pdp-details__grid {
    grid-template-columns: 1fr;
  }

  /* Cart responsive */
  .cart-page__layout {
    grid-template-columns: 1fr;
  }

  .cart-summary {
    position: static;
  }

  .cart-table__header {
    display: none;
  }

  .cart-table__row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .cart-table__product {
    grid-row: 1;
  }

  .cart-table__unit-price::before {
    content: "Cijena: ";
    color: var(--color-text-muted);
  }

  .cart-table__qty {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .cart-table__qty::before {
    content: "Količina";
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
  }

  .cart-table__line-total {
    text-align: left;
    font-size: var(--text-md);
  }

  .cart-table__line-total::before {
    content: "Ukupno: ";
    font-weight: var(--weight-regular);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .cart-table__remove {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
  }

  .cart-table__row {
    position: relative;
    padding-right: var(--space-10);
  }

  /* Checkout single column */
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .checkout-summary {
    position: static;
    order: -1;
  }

  .checkout-progress {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .checkout-progress__line {
    width: 1.5rem;
  }

  /* Sticky mobile ATC visible on PDP */
  .sticky-atc {
    display: flex;
  }

  body.has-sticky-atc {
    padding-bottom: var(--sticky-atc-height);
  }

  /* Footer stack */
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  /* B2B CTA stack */
  .b2b-cta {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .b2b-cta__features {
    justify-content: center;
  }

  .b2b-cta__actions {
    align-items: stretch;
  }

  /* Promo banner stack */
  .promo-banner {
    flex-direction: column;
    text-align: center;
  }

  .promo-banner__content {
    flex-direction: column;
  }

  /* Shop hero stack */
  .shop-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .shop-hero__stats {
    justify-content: center;
  }

  .shop-hero__image {
    margin-inline: auto;
  }

  /* Topbar hide links on tablet */
  .topbar__links {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════
   BELOW 768px — MOBILE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  :root {
    --grid-cols-product: 2;
    --header-height: 3.75rem;
    --container-padding: var(--space-4);
  }

  .topbar {
    display: none;
  }

  :root {
    --header-total: var(--header-height);
  }

  .section {
    padding-block: var(--space-8);
  }

  .section__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header__title {
    font-size: var(--text-2xl);
  }

  .product-grid {
    gap: var(--space-2);
  }

  .product-card__body {
    padding: var(--space-3);
  }

  .product-card__image {
    padding: var(--space-2);
  }

  .product-card__footer {
    flex-direction: column;
  }

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

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-bar__sort {
    margin-left: 0;
    width: 100%;
  }

  .filter-bar__sort select {
    flex: 1;
  }

  .benefits-strip__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .why-omega {
    grid-template-columns: 1fr;
  }

  .brands-wall {
    grid-template-columns: repeat(3, 1fr);
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .site-footer__legal {
    justify-content: center;
  }

  .category-page__seo-content {
    columns: 1;
  }

  .subcategory-grid {
    grid-template-columns: 1fr;
  }

  .pdp-gallery__thumbs {
    grid-template-columns: repeat(4, 1fr);
  }

  .pdp-info__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .pdp-info__actions .btn--primary {
    min-width: 0;
  }

  .pdp-info__secondary-actions {
    justify-content: center;
  }

  .cart-table__coupon {
    flex-direction: column;
    max-width: none;
    width: 100%;
  }

  .cart-table__footer {
    flex-direction: column;
    gap: var(--space-3);
  }

  .pagination {
    flex-wrap: wrap;
  }

  .pagination__info {
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-top: var(--space-2);
  }

  .order-confirm__actions {
    flex-direction: column;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
    max-width: none;
  }

  .modal {
    max-height: calc(100dvh - var(--space-4));
    border-radius: var(--radius-lg);
  }

  .modal__header,
  .modal__body,
  .modal__footer {
    padding-inline: var(--space-4);
  }

  .checkout-section {
    padding: var(--space-4);
  }

  .checkout-progress__step span:not(.checkout-progress__dot) {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════
   BELOW 480px — SMALL MOBILE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 479px) {
  :root {
    --grid-cols-product: 1;
  }

  .product-grid--2-mobile {
    --grid-cols-product: 2;
  }

  .product-grid--2-mobile {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-card__brand,
  .product-card__sku {
    display: none;
  }

  .product-card__title {
    font-size: var(--text-xs);
    -webkit-line-clamp: 3;
  }

  .price__current {
    font-size: var(--text-md);
  }

  .brands-wall {
    grid-template-columns: repeat(2, 1fr);
  }

  .header-actions {
    gap: 0;
  }

  .site-logo__name {
    font-size: var(--text-md);
  }

  .site-logo__mark {
    width: 2rem;
    height: 2rem;
  }

  .pdp-gallery__thumbs {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-1);
  }

  .pdp-info__price-block {
    padding: var(--space-4);
  }

  .sticky-atc {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--sticky-atc-height);
    padding-block: var(--space-2);
  }

  .sticky-atc__actions {
    width: 100%;
  }

  .sticky-atc .btn--primary {
    flex: 1;
    min-width: 0;
  }

  .shop-hero {
    padding: var(--space-4);
  }

  .shop-hero__title {
    font-size: var(--text-2xl);
  }

  .shop-hero__stats {
    gap: var(--space-4);
  }

  .b2b-cta {
    padding: var(--space-5);
  }

  .b2b-cta__title {
    font-size: var(--text-xl);
  }

  .cart-drawer {
    max-width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════
   PRINT
   ════════════════════════════════════════════════════════════ */

@media print {
  .site-header,
  .site-footer,
  .topbar,
  .site-nav,
  .sticky-atc,
  .cart-drawer,
  .drawer-overlay,
  .toast-container,
  .filter-bar,
  .shop-layout__sidebar,
  .header-search,
  .pagination,
  .btn,
  .skip-link {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  .container {
    max-width: none;
    padding: 0;
  }

  .product-card,
  .cart-table,
  .checkout-section,
  .spec-table {
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: "";
  }
}

/* ════════════════════════════════════════════════════════════
   HOVER CAPABILITY — disable hover effects on touch
   ════════════════════════════════════════════════════════════ */

@media (hover: none) {
  .product-card:hover .product-card__image {
    transform: none;
  }

  .category-card:hover .category-card__image {
    transform: none;
  }

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

/* ════════════════════════════════════════════════════════════
   LANDSCAPE PHONE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 767px) and (orientation: landscape) {
  .pdp-gallery__main {
    aspect-ratio: 4 / 3;
    max-height: 50vh;
  }

  .sticky-atc {
    height: auto;
    min-height: 3rem;
  }
}