/* ===============================
   DESERT ROSE スマホヘッダー調整
   ログイン / カート / メニューを右寄せで横並び
   =============================== */
   
.sale-wrapper#wrapper {
    margin-top: 90px;
}

.side-title {
    text-align: center;
}

.side-search input, .side-search select {
    color: #000;
}

@media screen and (max-width: 768px) {
  /* ヘッダー全体をflexで左右に分ける */
  .header-inner-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;     /* ← space-between をやめる */
    padding: 8px 10px;
    box-sizing: border-box;
  }

  /* ロゴまわり */
  .shop-name {
    margin: 0;
    flex: 0 0 auto;
  }
  .shop-name img {
    max-width: 160px;
    height: auto;
  }

  /* スマホではカテゴリ・PC専用ナビ・テキストカートは非表示 */
  .header-category-wrap,
  .header-cart {
    display: none !important;
  }
  .global-nav .pc-only {
    display: none !important;
  }

  /* ▼ 右側エリア（ログイン / カート / ハンバーガー） ▼ */

  /* 既存のposition指定・余計なmarginを打ち消す */
  .global-nav,
  .header-cart-btn,
  .header-drawer-btn {
    position: static !important;
    margin: 0;
  }

  /* ログイングループを右側に押しやる */
  .global-nav {
    margin-left: auto;                /* ロゴの右に余白、右側に寄せるポイント */
    display: flex !important;
    align-items: center;
  }

  /* アカウントナビ（ログイン系）を横並びに */
  .global-nav .account-nav {
    display: flex !important;
    align-items: center;
    gap: 8px;
  }
    
         /* ログイン非表示 */
    .global-nav .account-nav {
    display: none !important;
}

  /* 「新規会員登録」は非表示 */
  .global-nav .account-nav li:nth-child(2) {
    display: none !important;
  }

  .global-nav .account-nav li {
    display: flex;
    align-items: center;
  }

  .global-nav .account-nav a,
  .global-nav .account-nav span,
  .global-nav .account-nav i {
    color: #555 !important;           /* 見えるグレーに */
    font-size: 11px;
    white-space: nowrap;
    line-height: 1;
  }

  /* カートアイコン＆ハンバーガーの見た目と並び */
  .header-cart-btn {
    margin-left: 8px;
  }
  .header-drawer-btn {
    margin-left: 8px;
  }

  .header-cart-btn a i {
    font-size: 20px;
    color: #000 !important;
  }
  #drawer-btn i {
    font-size: 22px;
    color: #000 !important;
  }
}

@media screen and (min-width: 769px) {
  [data-element-id].side {
    display: block;
  }
  
  .side {
    display: none;
  }
  
  [data-element-id] header {
    position: static;
  }
  
  header {
    position: fixed;
  }
}