@view-transition {
  navigation: auto;
}

:root {
  /* ——— Colors ——— */
  --color-text: #000;
  --color-bg: #fff;
  --color-gray-100: #fafafa;
  --color-gray-200: #f5f5f5;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #bdbdbd;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;

  /* ——— Typography ——— */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-module: 1.5rem; /* 24px */
  --font-size-page: 2rem;    /* 32px */

  /* ——— Spacing ——— */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */

  /* Font family */
  --font-regular: 'Ysabeau', sans-serif;
  --font-heading: 'GFS Neohellenic', serif;

  --search-container-width: 1024px;
}

form a:not(.btn) {
  text-decoration: none;

  b {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }
  }

  &:hover b::after {
    transform: scaleX(1);
  }
}


/* Journal css  overrides */
div.main-products.product-grid {
  row-gap: 3rem !important;
}

/* SOF Header */

html.desktop-header-active.route-common-home:not(.header-sticky) {
  .cart-label,
  .menu-trigger-1 .links-text,
  .menu-trigger-1 a::before {
    color: #fff !important;
  }
}

.desktop-search-wrapper {
  display: none !important;
}

/* Center logo absolutely in mid-bar */
.header-sm .mid-bar {
  position: relative;
}

.header-sm .desktop-logo-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#cart .fa-shopping-cart {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: auto;

  #cart-items {
    position: relative;
    inset: auto !important;
    transform: none !important;
    margin-left: 0px;
    box-shadow: none;
    order: 2;
  }
}

.mobile-cart-content-wrapper .cart-totals .table tr {
  display: none;

  &:last-child {
    display: table-row;
  }
}

.desktop-header-active .mobile-container.desktop-mobile-main-menu-container { /* main menu off canvas fullscreen */
  max-width: 100% !important;
  width: 100% !important;

  .offcanvas-search-wrapper {
    width: 100%;
    max-width: var(--search-container-width, 1024px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .desktop-offcanvas-quick-links {
    display: flex;
    gap: var(--space-md);
    margin-left: auto;

    a {
      text-transform: uppercase;
      font-weight: 500;
      color: var(--color-text);
      font-size: var(--font-size-sm);
    }
  }

  .x {
    margin-left: 0;
    order: -1;
  }

  .mobile-wrapper-header {
    padding: 2rem;
  }

  .c--inner {
    max-width: var(--search-container-width, 1024px);
    width: 100%;
    margin: 0 auto;
    margin-top: 2rem;
  }
}

/* Off-canvas: search wrapper */
.offcanvas-search-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;

  #search {
    width: 100%;
  }

  .dropdown-menu {
    position: relative;
    display: flex;
    opacity: 1;
    width: 100% !important;
    transform: none !important;
    padding: 0px !important;

    &::before {
      display: none !important;
    }
  }

  .search-trigger {
    display: none;
  }

  .header-search {
    display: flex;

    input {
      height: 40px;
    }
  }

  .search-back-btn {
    display: none;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;

    svg {
      flex-shrink: 0;
    }

    &:hover {
      color: var(--color-gray-800);
    }
  }
}

.desktop-mobile-main-menu-container.search-active .search-back-btn,
.mobile-main-menu-container.search-active .search-back-btn {
  display: inline-flex;
}

/* Off-canvas: search active state — hide menu, show latest products */
.offcanvas-search-results {
  display: none;
}

.desktop-mobile-main-menu-container.search-active .c--inner,
.mobile-main-menu-container.search-active .c--inner {

  .desktop-mobile-main-menu-wrapper,
  .mobile-main-menu-wrapper,
  .module-accordion_menu,
  .module-catalog_blocks,
  .grid-rows {
    display: none;
  }

  .offcanvas-search-results {
    display: block;
  }

  .c--search-categories {
    margin-bottom: 2rem;
  }

  .search-categories-list {
    display: flex;
    gap: 1rem;
    padding: 0px;
    margin: 0px;
    list-style-type: none;

    a {
      color: var(--color-text);
      font-weight: 500;
      text-transform: uppercase;
      font-size: var(--font-size-sm);
    }
  }

  .c--search-tags {
    margin-bottom: 2rem;
  }

  .search-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style-type: none;

    a {
      display: block;
      padding: 0.25rem 0.75rem;
      border: 1px solid var(--color-gray-200);
      border-radius: 999px;
      color: var(--color-text);
      font-size: var(--font-size-sm);
      text-decoration: none;
      transition: background-color 0.2s, border-color 0.2s;

      &:hover {
        background-color: var(--color-gray-100);
        border-color: var(--color-gray-400);
      }
    }
  }
}

/* Off-canvas: search loader */
.search-loader {
  display: flex;
  justify-content: center;
  padding: 3rem 0;

  span {
    display: block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-gray-200);
    border-top-color: var(--color-text);
    border-radius: 50%;
    animation: search-spin 0.6s linear infinite;
  }
}

@keyframes search-spin {
  to { transform: rotate(360deg); }
}

/* Off-canvas: section titles */
.search-section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray-600);
  margin-block: 0 var(--space-sm);
}

/* Off-canvas: category search results */
/* .search-categories {
  margin-bottom: var(--space-md);

  .search-categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin: 0;

    li a {
      display: block;
      padding: var(--space-xs) var(--space-sm);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-sm, 4px);
      font-size: var(--font-size-sm);
      color: var(--color-gray-800);
      text-decoration: none;
    }
  }

  .search-no-results {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
  }
} */

.desktop-header-active .mobile-container .mega-menu-catalog-block .tab-container .nav-tabs {
  a { cursor: pointer; }
}

.mega-menu-catalog-block .tab-container {
  flex-wrap: nowrap;
  gap: 4rem;
}
/* Mega menu catalog block — 3rd column parent image preview */
.mega-menu-catalog-block .tab-content .tab-pane {
  display: none;

  &.active {
    display: flex;
    gap: var(--space-md);
  }

  .catalog-preview-image {
    flex: 0 0 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      padding: 1rem;
      z-index: 99;
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;

      background-image: linear-gradient(180deg,rgba(0,0,0,.67),rgba(0,0,0,.54) 20%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 70%,rgba(0,0,0,.54) 90%,rgba(0,0,0,.67));
    }
  }
}

/* Mobile menu */
.mobile-main-menu-wrapper .accordion-menu {
    height: 100%;
    margin-top: 10px;

    .menu-title {
        width: 100%;
        text-align: center;
        padding-right: 30px;
    }

    ul.j-menu {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        position: relative;
    }
    .dropdown {
        .collapse,
        .collapsing {
            position: absolute;
            width: 100%;
            height: 100% !important;
            background-color: #fff;
            left: 100% !important;
            transition: none;
            display: block;
            z-index: 100;
            top: 0;
            margin-top: 0 !important;

            &.in {
                left: 0 !important;
                margin-top: 0 !important;
            }
        }
    }

    .j-menu .menu-item.parent {
        & > a {
            .open-menu {
                right: auto;
                left: -8px;
            }
        }
    }

    .fa.fa-minus.first-item {
        transform: rotate(180deg);
    }

    .open-menu.collapsed#custom-back-button {
        display: flex;

        .fa {
            top: 0 !important;
        }
    }
}

.mobile-main-menu-wrapper ul li {
    position: unset !important;
}


/* Mega menu headings & shop all */
.mega-menu-catalog-block {
  .mega-menu-heading {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-500);
    margin: 0 0 var(--space-xs);
  }

  .mega-menu-shop-all {
    margin-bottom: 3rem;

    .mega-menu-link {
      font-size: var(--font-size-sm);
      color: var(--color-text);
      text-transform: uppercase;
      font-weight: 500;
    }
  }
}

/* Top-bar account links (My Account / Wishlist) */
.top-bar-account-links {
  display: flex;
  gap: var(--space-md);
  margin-left: auto;

  a {
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

/* EOF Header */

/* ——— Shared Cart Product Styles (mini-cart, cart page, checkout cart) ——— */

.cart-products,
.cart-table .table tbody,
.cart-section .table tbody {
  .product-category {
    text-transform: uppercase;
    color: var(--color-gray-600);
    font-size: var(--font-size-xs);
    line-height: 1;
  }

  .cart-product-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .stepper {
    display: flex;
    border: none;
    margin-block: 8px;

    button {
      border-radius: 999px;
      width: 26px;
      height: 26px;
      min-height: 1px;
      aspect-ratio: 1;
    }
  }

  .cart-remove {
    display: block;
    background: transparent;
    text-transform: uppercase;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: underline;
  }

  .btn-wishlist {
    background-color: transparent;
  }
}

/* ——— Free Shipping Progress Bar ——— */

.free-shipping-bar {
  padding-inline: 1rem;

  .free-shipping-text {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-sm);
  }

  .progress {
    height: 6px;
    border-radius: 3px;
    background: var(--color-gray-200);
    overflow: hidden;
  }

  .progress-bar {
    height: 100%;
    background: var(--color-text);
    border-radius: 3px;
    transition: width 0.4s ease;
  }

  &.free-shipping-reached .progress-bar {
    background: #2e7d32;
  }
}

/* ——— Product Card: Cart button over image ——— */
.product-thumb .image-group {
  position: relative;

  .image-cart-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    transition: opacity 0.25s ease;
  }

  &:hover .image-cart-btn {
    opacity: 1;
  }
}

.product-thumb .product-category {
  text-transform: uppercase;
  color: var(--color-gray-600);
  margin-top: 6px;
  line-height: 1;
  font-size: var(--font-size-xs);
}

/* ——— Product Card: Slide-in second image ——— */
.product-thumb .product-img {
  overflow: hidden;

  img.img-second {
    visibility: visible;
    opacity: 1;
    transform: translateX(100%);
    transition: transform 0.45s ease;
  }

  &.has-second-image:hover img.img-second {
    transform: translateX(0);
  }
}

.products-filter {
  .filters {
    display: none;

    .mobile-filter-active & {
      display: flex;
    }

    .mobile-filter-trigger-desktop {
      display: flex;
      color: var(--color-text);
      font-size: var(--font-size-base);
      text-transform: uppercase;
      font-weight: 500;
      margin-right: 2rem;

      &::before {
        content: '\e919' !important;
        font-family: icomoon !important;
        margin-right: 7px;
      }
    }

    .active-filters {
      gap: 1rem;
    }
  }
}

/* ——— Active Filter Tags ——— */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 1rem;
}

.active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-gray-300);
  font-size: var(--font-size-sm);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.active-filter-remove {
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  color: var(--color-gray-600);
  font-size: 0;

  &::after {
    content: '\e9c5' !important;
    font-family: icomoon !important;
    font-size: var(--font-size-xs);
  }

  &:hover {
    color: var(--color-text);
  }
}

.refine-categories .auto-grid-items {
  display: flex !important;
  gap: 1rem;

  .refine-item .refine-name {
    margin: 0 !important
  }
}

.category-description {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;

  img {
    order: 2;
    width: 50%;
    margin-right: -1rem; /* make it seem like fullwidth */
    }

  .category-text {
    order: 1;
    max-width: 40%;
    margin-right: auto;
  }

  &::after {
    display: none;
  }
}

.module-filter .filter-checkbox {
  column-count: 2;
}

/* ——— Mobile Filter: Apply Button ——— */
.mobile-filter-container {
  display: flex;
  flex-direction: column;

  .mobile-filter-wrapper {
    flex: 1;
    overflow-y: auto;
  }

  .mobile-filter-apply {
    position: sticky;
    bottom: 0;
    display: block;
    width: 100%;
    padding: var(--space-md);
    background: var(--color-text);
    color: var(--color-bg);
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

.desktop-header-active .mobile-filter-trigger {
  display: none;
}

.mobile-header-active .mobile-filter-trigger {
  display: block;
}

/* Mobile main menu — c--inner wrapper */
.mobile-main-menu-container {
  .mobile-wrapper-header {
    justify-content: space-between;
  }
  .x {
    margin-left: 0;
    min-width: 42px;
  }
  .c--inner {
    padding: var(--space-md);
  }
}

/* Mobile menu — quick links (Account + Wishlist) */
.mobile-menu-quick-links {
  a {
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-text);
    text-decoration: none;

    &:hover {
      color: var(--color-gray-600);
    }
  }
}

@media only screen and (max-width: 1500px) {
  :root {
    --search-container-width: 780px;
  }

  .mega-menu-catalog-block .tab-container {
    gap: 2rem;
  }
}

@media only screen and (max-width: 1200px) {
  .mobile-filter-trigger {
    display: none;
  }

  div.main-products.product-grid {
    row-gap: 1rem !important;
  }
  .mobile-filter-trigger span,
  .products-filter .filters .mobile-filter-trigger-desktop {
    display: none;
  }

  .mobile-filter-trigger {
    top: 120px;
    bottom: auto !important;
  }

  .search-back-btn .search-back-text {
    display: none;
  }
}

@media only screen and (max-width: 900px) {
  .category-description {
    flex-direction: column;

    .category-text {
      max-width: 100%;
      order: 2;
    }

    img {
      width: 100%;
      margin: 0px;
      order: 1;
    }
  }
}

@media only screen and (max-width: 767px) {
  .offcanvas-search-wrapper {
    margin-bottom: 1rem;
  }
  .search-categories-list {
    flex-wrap: wrap;
    row-gap: 2px !important;
  }

  .search-tags-list {
    gap: 0.375rem;
  }
}