@media all {
  .reversed-link {
    text-decoration: none;
    background     : linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.35em) / 0 1px no-repeat;
    transition     : background-size 0.3s ease-in-out;
  }

  @media screen and (pointer: fine) {
    .group:hover .reversed-link {
      background-size: 100% 1px;
    }
  }

  .link-faded-reverse {
    transition: opacity 0.2s ease-in-out;
  }

  @media screen and (pointer: fine) {
    .link-faded-reverse:hover {
      opacity: 0.7;
    }
  }

  .text-with-icon {
    gap        : var(--spacing-3);
    align-items: center;
    display    : flex;
  }

  .text-with-icon>svg {
    flex-shrink: 0;
  }

  .social-media {
    gap      : var(--spacing-3) var(--spacing-6);
    flex-wrap: wrap;
    display  : flex;
  }

  .icon {
    display: block;
  }

  .icon-chevron-bottom {
    transition: transform 0.2s ease-in-out;
  }

  .header {
    --header-icon-list-spacing: var(--spacing-4);
    --header-link-list-spacing: var(--spacing-6);
    --header-logo-opacity     : 1;
    will-change               : transform;
    margin-inline-start       : auto;
    margin-inline-end         : auto;
    transition                : background 0.25s;
    display                   : block;
  }

  .header__wrapper {
    grid-template          : var(--header-grid-template);
    align-items            : center;
    gap                    : var(--header-part-gap);
    padding                : var(--header-padding-block) max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    color                  : rgb(var(--text-color));
    background             : rgb(var(--background) / var(--header-background-opacity));
    -webkit-backdrop-filter: blur(var(--header-background-blur-radius));
    backdrop-filter        : blur(var(--header-background-blur-radius));
    border-radius          : inherit;
    transition             : inherit;
    display                : grid;
  }

  .header__logo {
    max-width: max-content;
    grid-area: logo;
    display  : block;
    position : relative;
  }

  .header__logo-image {
    width  : var(--header-logo-width);
    height : var(--header-logo-height);
    opacity: var(--header-logo-opacity, 1);
  }

  .header__logo-image--transparent {
    opacity : calc(1 - var(--header-logo-opacity));
    position: absolute;
    top     : 0;
  }

  .header__logo-image--transparent:not( :lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }

  .header__main-nav {
    grid-area: main-nav;
  }

  .header__secondary-nav {
    justify-content: flex-end;
    justify-self   : end;
    align-items    : center;
    gap            : var(--spacing-3) var(--header-part-gap);
    flex-wrap      : wrap;
    grid-area      : secondary-nav;
    display        : flex;
  }

  .header__link-list {
    display: none;
  }

  .header__link-list .icon-chevron-bottom {
    position: relative;
    top     : 1px;
  }

  .header__icon-list {
    align-items: center;
    gap        : var(--header-icon-list-spacing);
    display    : flex;
  }

  @media screen and (min-width: 700px) {
    .header {
      --header-part-gap         : var(--spacing-6);
      --header-icon-list-spacing: var(--spacing-6);
    }
  }

  @media screen and (min-width: 1150px) {
    .header__link-list {
      gap    : var(--spacing-4) var(--header-link-list-spacing);
      display: flex;
    }
  }

  @media screen and (min-width: 1400px) {
    .header {
      --header-part-gap         : var(--spacing-10);
      --header-link-list-spacing: var(--spacing-10);
    }
  }

  .dropdown-menu {
    gap          : var(--spacing-3);
    width        : max-content;
    max-width    : 350px;
    padding      : var(--spacing-5) var(--spacing-7);
    background   : rgb(var(--header-background));
    color        : rgb(var(--header-text));
    border-radius: var(--rounded-sm);
    box-shadow   : var(--shadow), 0 0 0 1px rgb(var(--text-color) / 0.12);
    z-index      : 1;
    display      : grid;
    position     : absolute;
    top          : calc(100% + var(--spacing-4-5));
  }

  .dropdown-menu:before {
    content : "";
    width   : 100%;
    height  : var(--spacing-4-5);
    position: absolute;
    bottom  : 100%;
  }

  .dropdown-menu:not( :lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    left: calc(-1 * var(--spacing-4));
  }

  .dropdown-menu--restrictable {
    max-height: 80vh;
    overflow-y: auto;
  }

  .js .dropdown-menu {
    opacity   : 0;
    transition: opacity 0.2s ease-in-out;
  }

  .dropdown-menu__item {
    justify-content: space-between;
    align-items    : center;
    gap            : var(--spacing-6);
    opacity        : 0.7;
    transition     : opacity 0.2s ease-in-out;
    display        : flex;
  }

  .dropdown-menu__item:hover {
    opacity: 1;
  }

  .sr-only {
    width       : 1px;
    height      : 1px;
    clip        : rect(0, 0, 0, 0);
    white-space : nowrap;
    border-width: 0;
    margin      : -1px;
    padding     : 0;
    position    : absolute;
    overflow    : hidden;
  }

  .tap-area {
    position: relative;
  }

  .tap-area:before {
    content : "";
    inset   : calc(-1 * var(--spacing-2-5));
    position: absolute;
  }

  .contents {
    display: contents;
  }

  @media screen and (min-width: 700px) {
    .sm\:hidden {
      display: none;
    }
    
    .sm\:block {
      display: block;
    }
  }
  
  @media screen and (max-width: 699px) {
    .sm\:block {
      display: none;
    }
  }

  @media screen and (max-width: 1149px) {
    .lg\:hidden {
      display: block !important;
    }
  }

  @media screen and (min-width: 1150px) {
    .lg\:hidden {
      display: none;
    }
  }

  .relative {
    position: relative;
  }

  .wrap {
    flex-wrap: wrap;
  }

  .gap-2\.5 {
    gap: var(--spacing-2-5);
  }

  .bold {
    font-weight: bold;
  }
}

/* Navigation menu styles */
.hamburger-btn {
  background: none;
  border    : none;
  cursor    : pointer;
  padding   : 10px;
}

.hamburger-btn svg {
  display: block;
}

/* Show hamburger when menu is hidden (below 1150px) */
@media screen and (max-width: 1149px) {
  .hamburger-btn {
    display: block;
  }
}

/* Hide hamburger when menu is visible (1150px and above) */
@media screen and (min-width: 1150px) {
  .hamburger-btn {
    display: none;
  }
}

/* Drawer Overlay */
.drawer-overlay {
  position  : fixed;
  top       : 0;
  left      : 0;
  width     : 100%;
  height    : 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity   : 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index   : 998;
}

.drawer-overlay.active {
  opacity   : 1;
  visibility: visible;
}

/* Navigation Drawer */
.navigation-drawer {
  position      : fixed;
  top           : 0;
  left          : -100%;
  width         : 90%;
  max-width     : 400px;
  height        : 100%;
  background    : #fff;
  transition    : left 0.3s;
  z-index       : 999;
  display       : flex;
  flex-direction: column;
}

.navigation-drawer.open {
  left: 0;
}

/* Close Button */
.close-btn {
  position  : absolute;
  top       : 20px;
  right     : 20px;
  background: none;
  border    : none;
  cursor    : pointer;
  padding   : 10px;
  z-index   : 1000;
}

/* Panel Container */
.panel-list-wrapper {
  position: relative;
  flex    : 1;
  overflow: hidden;
}

.panel {
  position      : absolute;
  top           : 0;
  left          : 0;
  width         : 100%;
  height        : 100%;
  display       : flex;
  flex-direction: column;
  transition    : transform 0.3s, opacity 0.3s;
  overflow-y    : auto;
}

.panel.active {
  transform: translateX(0);
  opacity  : 1;
}

.panel.left {
  transform: translateX(-100%);
  opacity  : 0;
}

.panel.right {
  transform: translateX(100%);
  opacity  : 0;
}

/* Panel Content */
.panel-wrapper {
  padding   : 80px 30px 30px;
  flex      : 1;
  overflow-y: auto;
}

.panel ul {
  list-style: none;
}

.panel li {
  margin-bottom: 15px;
}

.menu-item {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  width          : 100%;
  background     : none;
  border         : none;
  padding        : 10px 0;
  text-align     : left;
  cursor         : pointer;
}

.menu-item:hover {
  opacity: 0.7;
}

.menu-link {
  display        : block;
  padding        : 10px 0;
  text-decoration: none;
}

.menu-link:hover {
  opacity: 0.7;
}

.back-btn {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  background   : none;
  border       : none;
  padding      : 10px 0;
  cursor       : pointer;
  margin-bottom: 20px;
}

.back-btn:hover {
  opacity: 0.7;
}

.chevron {
  width          : 24px;
  height         : 24px;
  border-radius  : 50%;
  background     : rgba(0, 0, 0, 0.1);
  display        : flex;
  align-items    : center;
  justify-content: center;
}

/* Panel Footer */
.panel-footer {
  padding   : 20px 30px;
  border-top: 1px solid #eee;
}

.social-media {
  display   : flex;
  gap       : 20px;
  list-style: none;
}

.social-media a {
  color     : #333;
  transition: opacity 0.2s;
}

.social-media a:hover {
  opacity: 0.7;
}

/* Search styles */

/* Search Drawer */
.search-drawer {
  position      : fixed;
  top           : 0;
  right         : -100%;
  width         : 100%;
  height        : 100%;
  padding       : var(--spacing-4);
  transition    : right 0.3s;
  z-index       : 999;
}

@media (min-width: 768px) {
  .search-drawer {
    width: 680px;
  }
}

.search-drawer.open {
  right: 0;
}

.search-drawer-inner {
  display       : flex;
  flex-direction: column;
  height        : 100%;
  background    : #fff;
}

/* Search Header */
.search-header {
  padding      : 30px;
  position     : relative;
}

/* Search Close Button */
.search-close-btn {
  background      : none;
  border          : none;
  cursor          : pointer;
  padding         : 10px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : #666;
  transition      : color 0.2s;
  flex-shrink     : 0;
}

.search-close-btn:hover {
  color: #333;
}

.search-input-wrapper {
  position    : relative;
  display     : flex;
  align-items : center;
}

.search-input {
  appearance          : none;
  width               : 0;
  padding             : 15px 50px 15px 20px;
  box-sizing          : border-box;
  border-style        : solid;
  border-width        : 0;
  border-color        : rgb(var(--text-color) / 0.12);
  border-bottom-width : 2px;
  background          : none;
  border-radius       : 0;
  outline             : none;
  flex-grow           : 1;
  font-size           : var(--text-h4);
  font-weight         : bolder;
  transition          : border-color 0.2s;
}

/* Search Tabs */
.search-tabs {
  display      : none;
  padding      : 0 30px;
  gap          : 20px;
}

.search-tab {
  padding      : 10px 0;
  background   : none;
  border       : none;
  border-bottom: 3px solid transparent;
  font-size    : 16px;
  font-weight  : bold;
  color        : #999;
  cursor       : pointer;
  transition   : all 0.2s;
}

.search-tab:hover {
  color: #666;
}

.search-tab.active {
  color: #333;
}

/* Search Content */
.search-content {
  flex      : 1;
  overflow-y: auto;
  padding   : 30px;
}

.search-tab-content {
  display: none;
}

.search-tab-content.active {
  display: block;
}

/* Empty State */
.search-empty {
  padding   : 60px 20px;
  text-align: center;
  color     : #999;
}

.search-result-item {
  display        : flex;
  gap            : 15px;
  padding        : 15px;
  align-items    : center;
  text-decoration: none;
  cursor         : pointer;
}

.search-result-image {
  width        : 80px;
  height       : 80px;
  border-radius: 8px;
  background   : #ddd;
  flex-shrink  : 0;
}

.search-result-info {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  justify-content: center;
}

.search-result-title {
  font-weight    : bold;
  margin-bottom  : 5px;
  color          : #333;
  text-decoration: none;
  background     : linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.35em) / 0 1px no-repeat;
  transition     : background-size 0.3s ease-in-out;
  width          : fit-content;
}

.search-result-item:hover .search-result-title {
  background-size: 100% 1px;
}

/* Cart Count Badge */
.cart-count-badge {
  position        : absolute;
  top             : -8px;
  right           : -8px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  min-width       : 20px;
  height          : 20px;
  padding         : 0 5px;
  border-radius   : 50%;
  background-color: white;
  color           : var(--clr-primary);
  font-size       : 11px;
  font-weight     : 700;
  line-height     : 1;
  z-index         : 1;
  box-shadow      : 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cart-count-badge:empty {
  display: none;
}

/* Responsive */
@media (max-width: 600px) {
  .search-header,
  .search-tabs,
  .search-content {
    padding: 20px;
  }
}