/*
 * Abady Store - desktop refinement v1
 * Scope: laptop and desktop only. Mobile remains unchanged.
 * Paste this entire file into Salla > Custom CSS.
 */

@media (min-width: 1024px) {
  body#app.index {
    --abady-desktop-max: 1180px;
    --abady-surface: #ffffff;
    --abady-page: #f7f6fb;
    --abady-border: rgba(35, 31, 30, 0.08);
    --abady-shadow: 0 10px 26px rgba(38, 24, 73, 0.08);
    --abady-shadow-hover: 0 16px 34px rgba(38, 24, 73, 0.14);
    --abady-focus: #f6b81a;
  }

  /* Header: compact and cleaner without changing its functional layout. */
  body#app.index .store-header {
    position: relative;
    z-index: 40;
  }

  body#app.index .store-header .main-nav-container {
    min-height: 76px;
    border-bottom: 1px solid var(--abady-border);
    box-shadow: 0 6px 20px rgba(31, 20, 58, 0.05);
  }

  body#app.index .store-header .main-nav-container .container {
    width: calc(100% - 48px);
    max-width: var(--abady-desktop-max) !important;
  }

  body#app.index .store-header .header-inner-wrapper {
    min-height: 76px;
    height: 76px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
  }

  body#app.index .store-header .navbar-brand {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body#app.index .store-header .navbar-brand img.main-logo {
    width: auto !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 56px !important;
    object-fit: contain;
  }

  body#app.index .store-header .header-signInBtn {
    min-height: 42px;
    padding-inline: 18px !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
    transition: transform 180ms ease, box-shadow 180ms ease;
  }

  body#app.index .store-header .header-signInBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
  }

  body#app.index .store-header .header-signInBtn:focus-visible {
    outline: 3px solid var(--abady-focus);
    outline-offset: 3px;
  }

  /* Page rhythm and a calmer desktop canvas. */
  body#app.index #main-content {
    padding-bottom: 72px;
    background:
      radial-gradient(circle at 50% 0%, rgba(116, 83, 190, 0.06), transparent 34%),
      var(--abady-page);
  }

  body#app.index #main-content > .s-block--banners.container {
    width: calc(100% - 48px) !important;
    max-width: var(--abady-desktop-max) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  body#app.index #main-content > .home-sec-0 {
    margin-top: 32px !important;
  }

  body#app.index #main-content > .home-sec-1 {
    margin-top: 28px !important;
  }

  body#app.index #main-content > .home-sec-3,
  body#app.index #main-content > .home-sec-5 {
    margin-top: 48px !important;
  }

  body#app.index .home-sec-0 > .grid {
    gap: 22px !important;
  }

  body#app.index .home-sec-1 > .grid,
  body#app.index .home-sec-3 > .grid,
  body#app.index .home-sec-5 > .grid {
    gap: 22px !important;
  }

  body#app.index #main-content > .s-block-division {
    --mt-desk: 0px !important;
    margin-top: 0 !important;
  }

  body#app.index .home-sec-5 > .grid {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
  }

  /* Banner and category cards. */
  body#app.index #main-content .s-block--banners .banner-outer {
    min-width: 0;
  }

  body#app.index #main-content .s-block--banners .banner-entry {
    overflow: hidden;
    border: 1px solid var(--abady-border);
    border-radius: 18px !important;
    background: var(--abady-surface);
    box-shadow: var(--abady-shadow);
    transform: translateZ(0);
    transition: transform 200ms ease, box-shadow 200ms ease;
  }

  body#app.index #main-content .home-sec-0 .banner-entry {
    aspect-ratio: 3 / 2;
    height: auto !important;
    border-radius: 22px !important;
  }

  body#app.index #main-content .home-sec-0 .banner-img {
    aspect-ratio: 3 / 2;
    height: auto !important;
  }

  body#app.index #main-content .home-sec-1 .banner-entry,
  body#app.index #main-content .home-sec-3 .banner-entry,
  body#app.index #main-content .home-sec-5 .banner-entry {
    aspect-ratio: 1 / 1;
    height: auto !important;
  }

  body#app.index #main-content .s-block--banners .banner-img {
    display: block;
    width: 100% !important;
    object-fit: cover !important;
    transform: scale(1) !important;
    transition: transform 200ms ease !important;
  }

  body#app.index #main-content .s-block--banners .banner-outer:hover .banner-entry {
    transform: translateY(-3px);
    box-shadow: var(--abady-shadow-hover);
  }

  body#app.index #main-content .s-block--banners.zoom-effect .banner-outer:hover .banner-img {
    transform: scale(1.015) !important;
  }

  body#app.index #main-content .s-block--banners .banner-outer a:focus-visible {
    outline: 3px solid var(--abady-focus);
    outline-offset: 4px;
    border-radius: 18px;
  }

  /* Dark-mode companion styles. */
  html.dark body#app.index #main-content,
  body#app.index.color-mode-dark #main-content {
    --abady-surface: #181621;
    --abady-page: #100f17;
    --abady-border: rgba(255, 255, 255, 0.1);
    --abady-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
    --abady-shadow-hover: 0 16px 34px rgba(0, 0, 0, 0.34);
  }

  html.dark body#app.index .store-header .main-nav-container,
  body#app.index.color-mode-dark .store-header .main-nav-container {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }
}

/* Six compact category cards make three complete rows for the current 18 items. */
@media (min-width: 1200px) {
  body#app.index .home-sec-1 > .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* Respect visitors who prefer less motion. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  body#app.index .store-header .header-signInBtn,
  body#app.index #main-content .s-block--banners .banner-entry,
  body#app.index #main-content .s-block--banners .banner-img {
    transition: none !important;
  }

  body#app.index .store-header .header-signInBtn:hover,
  body#app.index #main-content .s-block--banners .banner-outer:hover .banner-entry,
  body#app.index #main-content .s-block--banners.zoom-effect .banner-outer:hover .banner-img {
    transform: none !important;
  }
}