 <style>                       /* ============================================================
     FULLY RESPONSIVE CSS - Hiragino Kaku Gothic ProN for ALL text
     ============================================================ */

  /* Reset */
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      font-size: 12px;
      line-height: 1.88;
      color: #2E2E2E;
      background: #fff;
  }

  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }

  /* ===== HEADER ===== */
  .vs-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 10000;
      background: white;
      transition: background 0.3s ease, box-shadow 0.3s ease;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  }

  .vs-header.scrolled {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  .vs-header-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 32px;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
  }

  .vs-header-logo {
      flex-shrink: 0;
      margin-right: 24px;
  }

  .vs-header-logo img {
      height: 28px;
      width: auto;
      display: block;
  }

  /* Desktop Navigation */
  .vs-header-nav {
      display: flex;
      gap: 32px;
      align-items: center;
      margin: 0 auto;
  }

  .vs-header-nav a {
      color: #1a1311;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      font-size: 13px;
      letter-spacing: 0.03em;
      white-space: nowrap;
      transition: opacity 0.2s;
  }

  .vs-header-nav a:hover { opacity: 0.6; }

  /* Header Actions */
  .vs-header-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-shrink: 0;
      margin-left: 24px;
  }

  .vs-btn-reserve,
  .vs-btn-online-store {
      padding: 7px 18px;
      border-radius: 100px;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: opacity 0.2s;
      white-space: nowrap;
  }

  .vs-btn-reserve { background: #c8e8e0; }
  .vs-btn-online-store { background: #e8e6e2; }
  .vs-btn-reserve:hover, .vs-btn-online-store:hover { opacity: 0.8; }

  .vs-divider {
      width: 1px;
      height: 20px;
      background: #e0e0e0;
      margin: 0 2px;
  }

  .vs-btn-mypage,
  .vs-btn-cart {
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: opacity 0.2s;
      position: relative;
      white-space: nowrap;
  }

  .vs-btn-mypage:hover,
  .vs-btn-cart:hover { opacity: 0.7; }

  .vs-cart-count {
      position: absolute;
      top: -10px;
      right: -10px;
      background: #c8e8e0;
      font-size: 10px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  }

  /* Large desktop */
  @media (min-width: 1400px) {
      .vs-header-main { padding: 14px 20px; gap: 48px; }
      .vs-header-logo img { height: 36px; }
      .vs-header-logo { margin-right: 0; }
      .vs-header-nav { gap: 48px; }
      .vs-header-actions { margin-left: 0; gap: 20px; }
      .vs-btn-reserve,
      .vs-btn-online-store { padding: 8px 28px; font-size: 14px; }
      .vs-header-nav a { font-size: 15px; }
      .vs-btn-mypage,
      .vs-btn-cart { font-size: 14px; }
  }

  /* Medium desktop 1024&#8211;1399px */
  @media (min-width: 1024px) and (max-width: 1399px) {
      .vs-header-main { padding: 10px 24px; gap: 16px; justify-content: center; }
      .vs-header-logo img { height: 26px; }
      .vs-header-logo { margin-right: 0; }
      .vs-header-nav { gap: 14px; margin: 0 20px; }
      .vs-header-nav a { font-size: 12px; }
      .vs-header-actions { margin-left: 0; gap: 6px; }
      .vs-btn-reserve,
      .vs-btn-online-store { padding: 6px 12px; font-size: 11px; gap: 5px; }
      .vs-btn-mypage,
      .vs-btn-cart { font-size: 11px; gap: 4px; }
  }

  /* ===== HAMBURGER MENU ===== */
  .vs-hamburger {
      display: none;
      flex-direction: column;
      justify-content: space-between;
      width: 24px;
      height: 16px;
      cursor: pointer;
      margin-left: 0px;
  }



.vs-hamburger.vs-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vs-hamburger.vs-active span:nth-child(2) { opacity: 0; }
.vs-hamburger.vs-active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* ===== SHIPPING BANNER ===== */
  .vs-header-banner {
      background: #d8f1ed;
      text-align: center;
      padding: 8px 16px;
      font-size: clamp(10px, 1.2vw, 11px);
      width: 100%;
      margin-top:100px;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  }

  @media (min-width: 1024px) {
      .vs-header-banner { margin-top: 86px; }
  }

  /* ===== MOBILE MENU ===== */
  .vs-mobile-menu {
      position: fixed;
      top: 56px;
      left: 0;
      right: 0;
      background: white;
      z-index: 9999;
      display: none;
      flex-direction: column;
      padding: 20px;
      border-top: 1px solid #e0e0e0;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      max-height: calc(100vh - 56px);
      overflow-y: auto;
  }

  .vs-mobile-menu.vs-active { display: flex; }

  .vs-mobile-menu a {
      padding: 14px 0;
      border-bottom: 1px solid #f0f0f0;
      font-size: 18px;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      transition: opacity 0.2s;
  }

  .vs-mobile-menu a:last-child { border-bottom: none; }
  .vs-mobile-menu a:hover { opacity: 0.6; }

  /* ===== RESPONSIVE HEADER BREAKPOINTS ===== */
  @media (max-width: 1023px) {
      .vs-header-nav { display: none !important; }
      .vs-btn-reserve, .vs-btn-online-store, .vs-divider { display: none !important; }
      .vs-btn-mypage span, .vs-btn-cart span { display: none; }
      .vs-hamburger { display: flex !important; }
      .vs-header-main { padding: 10px 24px; }
      .vs-header-logo { margin-right: 0; }
      .vs-header-actions { margin-left: 0; }
  }

  @media (max-width: 767px) {
      .vs-header-main { padding: 8px 16px; }
      .vs-header-logo img { height: 24px; }
      .vs-btn-mypage svg, .vs-btn-cart svg { width: 18px; height: 18px; }
      .vs-hamburger { width: 22px; height: 14px; }
      .vs-cart-count { width: 12px; height: 12px; font-size: 8px; top: -6px; right: -6px; }
      .vs-header-banner { font-size: 10px; padding: 6px 12px; margin-top: 46px; }
      .vs-mobile-menu { top: 46px; }
      .vs-mobile-menu a { font-size: 16px; padding: 12px 0; }
  }

  @media (max-width: 480px) {
      .vs-header-main { padding: 25px 35px; }
      .vs-header-logo img { height: 20px; }
      .vs-btn-mypage svg, .vs-btn-cart svg { width: 16px; height: 16px; }
      .vs-hamburger { width: 20px; height: 13px; margin-left: 0px; }
      .vs-header-banner { margin-top: 78px; }
      .vs-mobile-menu { top: 42px; }
  }

  @media (min-width: 1024px) {
      .vs-header-nav { display: flex !important; }
      .vs-hamburger { display: none !important; }
      .vs-mobile-menu { display: none !important; }
      .vs-btn-reserve, .vs-btn-online-store, .vs-divider { display: flex; }
  }

  /* ===== RESERVE SECTION ===== */
  .top-reserve {
      position: relative;
      padding: 0;
      background: #FAFAFA;
      margin-top: 40px;
  }
  .vs-footer-brand:first-child {
      margin-top: 40px !important;
  }

  /* S'allier logo taller than vivum logo */
  .vs-footer-brand:last-child img {  height: 80px;  aspect-ratio: 444 / 535; width: 60px; }
  .vs-footer-brand:first-child img { height: 35px; width: auto; margin-bottom: 0px; }

  @media (min-width: 1024px) {
      .top-reserve::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 320px;
          height: 1px;
          background: #2E2E2E;
          display: block !important;
      }
  }

  @media (max-width: 1023px) {
      .top-reserve::before { display: none !important; }
  }

  .top-reserve .top-main {
      padding-top: 56px;
      padding-bottom: 80px;
  }

  .top-reserve .top-side-label { padding-top: 56px; }

  .top-reserve-banner {
      position: relative;
      display: block;
      width: 693px;
      height: 231px;
      overflow: hidden;
      border-radius: 0px;
  }

  .top-reserve-banner::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(46, 46, 46, 0.28);
  }

  .top-reserve-banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .top-reserve-pill {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      transform: translate(-50%, -50%);
      width: 423px;
      max-width: calc(100% - 40px);
      height: 69px;
      font-weight: 500;
      border-radius: 35px;
      background: #D8F1ED;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      font-size: 22px;
      line-height: 1;
      color: #2E2E2E;
      letter-spacing: 0.04em;
  }

  .top-reserve-mobile-label { display: none; }

  /* ===== STICKY RESERVE BUTTON ===== */
  .vs-sticky-reserve { display: none; }

  /* ===== FOOTER ===== */
  .vs-footer {
      background: #fff;
      margin-top: 20px;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  }

  @media (min-width: 1024px) { .vs-footer { border-top: 1px solid #2E2E2E; } }
  @media (max-width: 1023px) { .vs-footer { border-top: none !important; } }

  .vs-footer-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 48px 5% 32px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 90px;
  }

  .vs-footer-left { display: flex; flex-direction: column; gap: 16px; }
  .vs-footer-brands-row { display: flex; gap: 32px; flex-wrap: wrap; }
  .vs-footer-brand { display: flex; flex-direction: column; gap: 8px; }
  .vs-footer-brand img { height: 45px; width: auto; }

  .vs-footer-insta {
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      font-size: 11px;
      color: #777;
      display: flex;
      align-items: center;
      gap: 5px;
  }

  .vs-footer-nav-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: 350px;
      gap: 30px;
  }

  .vs-footer-nav-col { display: flex; flex-direction: column; gap: 14px; }
  .vs-footer-nav-col a {
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      font-size: 12px;
      color: #2E2E2E;
      transition: opacity 0.2s;
  }
  .vs-footer-nav-col a:hover { opacity: 0.5; }
  .vs-footer-nav-col a.vs-footer-nav-ja {
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      white-space: nowrap;
      font-size: 11px;
      color: #777;
  }

  .vs-footer-address {
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      font-size: 11px;
      color: #777;
      margin-top: 24px;
  }

  .vs-footer-copyright {
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      font-size: 10px;
      color: #A5A5A5;
      margin-top: 20px;
      text-align: center;
  }

  .vs-footer-ctas { display: flex; flex-direction: column; gap: 12px; }
  .vs-footer-cta-btn {
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      padding: 12px 24px;
      border-radius: 100px;
      font-size: 12px;
      text-align: center;
      transition: opacity 0.2s;
  }
  .vs-footer-cta-mint { background: #D8F1ED; }
  .vs-footer-cta-gray { background: #EDEDED; }
  .vs-footer-cta-btn:hover { opacity: 0.75; }

  /* ===== MOBILE FOOTER ===== */
  .vs-footer-mobile {
      display: none;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  }

  @media (max-width: 900px) {
      .vs-footer-inner { display: none; }
      .vs-footer-mobile { display: block; margin-top: 14px; }

      .vs-footer-mobile-about-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 14px 20px;
          border-bottom: 1px solid #e0e0e0;
      }

      .vs-footer-mobile-about {
          font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
          font-size: 13px;
          color: #1a1311;
      }

      .vs-footer-mobile-logos { display: flex; flex-direction: row; gap: 16px; align-items: center; }
      .vs-footer-mobile-logos img { height: 60px; width: auto; }

      .vs-footer-mobile-nav { display: flex; flex-direction: column; padding: 0 20px; }

      .vs-footer-mobile-nav > a {
          display: flex;
          align-items: baseline;
          gap: 16px;
          padding: 14px 0;
          border-bottom: 1px solid #e0e0e0;
          font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
          font-size: 13px;
          color: #1a1311;
          text-decoration: none;
      }

      .vs-footer-mobile-place { flex-direction: row !important; flex-wrap: wrap; }
      .vs-footer-mobile-address { font-size: 11px; color: #777; }
      .vs-footer-mobile-insta-row { flex-direction: row !important; }

      .vs-footer-mobile-handles {
          display: flex;
          gap: 16px;
          font-size: 12px;
          color: #555;
          font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      }

      .vs-footer-mobile-legal {
          padding: 16px 20px 0;
          display: flex;
          flex-wrap: wrap;
          gap: 4px 16px;
      }

      .vs-footer-mobile-legal a {
          font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
          font-size: 11px;
          color: #777;
          text-decoration: underline;
      }

      .vs-footer-mobile-bottom {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 32px 20px 24px;
          gap: 8px;
      }

      .vs-footer-mobile-bottom-logos { display: flex; align-items: center; gap: 5px; }
      .vs-footer-mobile-bottom-logos img { height: 40px; width: auto; }

      .vs-footer-mobile-copy {
          font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
          font-size: 10px;
          color: #A5A5A5;
      }
  }

  @media (max-width: 900px) {
      .vs-footer-inner { grid-template-columns: 1fr; gap: 36px; padding: 40px 5% 28px; }
      .vs-footer-brands-row { justify-content: center; }
      .vs-footer-brand { align-items: center; text-align: center; }
      .vs-footer-nav-grid { grid-template-columns: 1fr; gap: 0; }
      .vs-footer-nav-col a { display: block; padding: 16px 0; border-bottom: 1px solid #e0e0e0; }
      .vs-footer-nav-col a:last-child { border-bottom: none; }
      .vs-footer-ctas { flex-direction: row; justify-content: center; }
      .vs-footer-cta-btn { padding: 12px 20px; }
      .vs-footer-address { text-align: center; }
  }

  @media (max-width: 600px) {
      .vs-footer-ctas { flex-direction: column; align-items: center; }
      .vs-footer-cta-btn { width: 100%; max-width: 250px; }
  }

  /* ===== RESERVE RESPONSIVE ===== */
  @media (max-width: 1023px) {
      .top-reserve { margin-top: 0; padding-bottom: 0; }
      .top-reserve .top-main { padding-top: 0; padding-bottom: 0; }
      .top-reserve-banner { width: 100%; height: auto; aspect-ratio: 693/231; border-radius: 0px; display: block; }
      .top-reserve-pill { width: 220px; height: 54px; font-size: 17px; border-radius: 18px; }

      .top-reserve-mobile-label {
          display: block;
          padding: 28px 20px 16px;
          border-top: none;
          background: #FAFAFA;
      }

      .top-reserve-mobile-label span {
        font-size: 18px !important;
        color: #2E2E2E;
        letter-spacing: 0.04em;
    }
  }

  @media (max-width: 480px) {
      .top-reserve-pill { width: 150px; height: 35px; font-size: 13px; gap: 6px; }
      .top-reserve-pill svg { width: 12px; height: 12px; }
  }

  @media (max-width: 767px) {
      .vs-sticky-reserve {
          display: flex !important;
          position: fixed !important;
          bottom: 20px !important;
          right: 20px !important;
          z-index: 9999 !important;
          background: #D8F1ED !important;
          color: #1a1311 !important;
          padding: 8px 48px !important;
          border-radius: 999px !important;
          font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif !important;
          font-size: 16px !important;
          font-weight: 500 !important;
          align-items: center !important;
          gap: 12px !important;
          text-decoration: none !important;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
          transition: transform 0.2s ease, opacity 0.2s ease !important;
          white-space: nowrap !important;
      }
      .vs-sticky-reserve:hover { transform: scale(1.05) !important; opacity: 0.9 !important; }
      .vs-sticky-reserve svg { width: 14px !important; height: 14px !important; }
  }

  @media (min-width: 768px) { .vs-sticky-reserve { display: none !important; } }

  /* ===== SECTION DIVIDER ===== */
  .section-divider {
      width: 100%;
      height: 1px;
      background: #2E2E2E;
  }

  @media (min-width: 1024px) { .section-divider { display: none !important; } }

  @media (max-width: 1023px) {
      .section-divider { display: none !important; }
      .top-reserve-mobile-label { border-top: none; }
  }

  /* ===== LAYOUT ===== */
  .top-layout {
      max-width: 1366px;
      margin: 0 auto;
      padding: 0;
      display: grid;
      grid-template-columns: 320px 693px;
      column-gap: 160px;
      align-items: start;
  }

  .top-side { position: relative; min-height: 1px; }
  .top-side-label {
      display: block;
      padding-top: 56px;
      padding-left: 243px;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
      white-space: nowrap;
      color: #2E2E2E;
      letter-spacing: 0.03em;
  }

  .top-main { width: 693px; min-width: 0; }

  @media (max-width: 1023px) {
        .top-layout { display: block; padding: 0; }
      .top-side { display: none; }
      .top-main { width: 100%; }
  }

  /* ===== COLORM OVERRIDES ===== */
  #wrapper, #contents, #main, #main-contents, #mainContents {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      float: none !important;
  }

  #side, #sub, #right, #right_column, #sidebar, .side, .side_column {
      display: none !important;
  }

  #wrapper {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 20px;
  }

  /* ===== GENERAL ELEMENT OVERRIDES ===== */
  button, input, select, textarea, .btn, .button, .vs-btn,
  .menu-item, .menu-cat-label, .menu-item-name, .menu-item-price,
  .menu-other-btn, .breadcrumb, .hero-title {
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  }

  /* ============================================================
     PRODUCT LIST PAGE &#8212; global overrides
     ============================================================ */
  body.product-list-page #wrapper {
      max-width: 100% !important;
      padding: 0 !important;
  }

  @media (max-width: 640px) {
      body.product-list-page .product-list-page-grid {
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 16px !important;
      }
  }

  @media (min-width: 1024px) {
      body.product-list-page .product-list-page-catalog {
          border-top: 1px solid #1a1a1a !important;
          border-bottom: 1px solid #1a1a1a !important;
      }
  }

  @media (max-width: 1023px) {
      body.product-list-page .product-list-page-catalog {
          border-top: none !important;
          border-bottom: none !important;
      }
  }

  body.product-list-page .product-list-page-sidebar-wrap::before {
      content: "" !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      height: 1px !important;
      background: #1a1a1a !important;
  }

  body.product-list-page .product-list-page-inner {
      border-top: none !important;
  }

  /* Filter toggle pill */
  body.product-list-page .product-list-page-filter-toggle {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      min-height: 34px !important;
      padding: 0 14px !important;
      background: #ffffff !important;
      border: 1px solid #1a1a1a !important;
      border-radius: 999px !important;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif !important;
      font-size: 12px !important;
      font-weight: 400 !important;
      letter-spacing: 0.04em !important;
      color: #1a1a1a !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
  }

  body.product-list-page .product-list-page-filter-toggle:hover,
  body.product-list-page .product-list-page-filter-toggle.is-active {
      background: #1a1a1a !important;
      color: #ffffff !important;
  }

  /* Yellow badge inside toggle */
  body.product-list-page .product-list-page-filter-badge {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 18px !important;
      height: 18px !important;
      border-radius: 50% !important;
      background: #f0b429 !important;
      color: #fff !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      line-height: 1 !important;
      flex-shrink: 0 !important;
  }


  /* ===== ADDRESS - NO WRAP ===== */
  .place-info-bar {
      display: flex;
      gap: 20px;
      padding: 16px 0;
      margin-bottom: 28px;
      flex-wrap: nowrap !important;
  }

  .place-info-bar p { white-space: nowrap !important; flex-shrink: 0; }

  @media (min-width: 901px) {
      .vs-footer-address { white-space: nowrap !important; }
  }

  /* Subtle left shift */
  @media (min-width: 1200px) and (max-width: 1290px) {
      .top-reserve-banner {
          transform: translateX(-10px) !important;
      }
  }

  /* S'allier logo aspect ratio fix for mobile footer */
  .vs-footer-mobile-logos img:last-child{
      aspect-ratio: 444 / 535 !important;
      width: auto !important;
      height: auto !important;
      max-height: 60px !important;
      object-fit: contain !important;
  }

  /* Make Vivum logo width smaller */
  .vs-footer-mobile-logos img:first-child {
      width: 130px !important;  /* Adjust this value to desired width */
      height: 70px !important;
      object-fit: contain !important;
  }

  .vs-footer-mobile-bottom-logos img {
      height: 28px !important;  /* Same as header logo height */
      width: auto !important;
      object-fit: contain !important;
  }

  /* Make reserve section pill arrow same height as text */
  .top-reserve-pill svg {
      width: 1em !important;
      height: 1em !important;
      vertical-align: middle !important;
  }

  /* Make mobile sticky reserve button arrow same height as text */
  .vs-sticky-reserve svg {
      width: 1em !important;
      height: 1em !important;
      vertical-align: middle !important;
  }

  /* ===== FIX: Align footer gray line ===== */
  .vs-footer {
      border-top: 1px solid #2E2E2E;
      margin-top: 0;
  }

  .top-reserve {
      margin-bottom: 0;
  }

  /* Remove any gaps between Reserve and Footer */
  .top-reserve + .vs-footer {
      margin-top: 0;
  }

  .vs-mobile-place-link,
  .vs-mobile-insta-link {
      display: flex !important;
      flex-direction: row !important;
      align-items: baseline !important;
      gap: 16px !important;
  }   
  .vs-mobile-place-addr {
      font-size: 11px;
      color: #333;
  }

  .vs-mobile-insta-handles {
      display: flex;
      gap: 16px;
      font-size: 12px;
      color: #555;
  }

  .vs-mobile-reserve-btn {
      margin-top: 8px;
      background: #D8F1ED;
      border-radius: 999px;
      text-align: center;
      justify-content: center;
      font-size: 16px !important;
      padding: 14px 0 !important;
      border-bottom: none !important;
  }

  .vs-mobile-online-btn {
      margin-top: 8px;
      background: #EDEDED;
      border-radius: 999px;
      display: flex !important;
      justify-content: center;
      align-items: center;
      gap: 8px;
      font-size: 16px !important;
      padding: 14px 0 !important;
      border-bottom: none !important;
  }

  .vs-mobile-legal {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 12px;
      padding: 16px 0 8px;
      border-top: none;
  }

  .vs-mobile-legal a {
      font-size: 11px !important;
      color: #777 !important;
      text-decoration: underline;
      border-bottom: none !important;
      padding: 2px 0 !important;
  }

  /* Prevent footer brands row from wrapping on wide screens */
  @media (min-width: 1400px) {
      .vs-footer-brands-row {
          flex-direction: row !important;
          flex-wrap: nowrap !important;
          justify-content: flex-start !important;
      }
  }


  @media (max-width: 767px) {
      .vs-header-main { gap: 0; justify-content: flex-start; }
      .vs-header-logo { margin-right: 20px; }
      .vs-header-actions { margin-left: auto; gap: 8px; }
  }

  @media (max-width: 480px) {
      .top-reserve .top-layout { padding: 0 !important; }
  }




  .vs-btn-cart svg {
      width: 22px !important;
      height: 22px !important;
  }

  .vs-btn-mypage svg {
      width: 26px !important;
      height: 26px !important;
  }

  .vs-hamburger {
      width: 20px !important;
      height: 16px !important;
  }

    .vs-btn-cart svg,
  .vs-btn-mypage svg {
      stroke: #1a1311 !important;
      stroke-width: 1.3 !important;
  }


  .vs-hamburger {
      line-height: 0 !important;
      font-size: 0 !important;
  }

  .vs-hamburger span {
      display: block !important;
      width: 100% !important;
      height: 2px !important;
      background: #1a1311 !important;
      line-height: 0 !important;
      font-size: 0 !important;
      overflow: hidden !important;
      transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .vs-header-banner{
    display: none !important;
  }


/* Mobile header hide/show animation */
@media (max-width: 768px) {
    .vs-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 10000 !important;
        background: white !important;
        transition: top 0.3s ease-in-out !important;
    }
    
    .vs-header.scrolled {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
}

@media (max-width: 1020px) {
    .vs-header-main {
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 25px 100px !important;
    }
    
    .vs-header-logo {
        margin-right: 9px !important;
    }
    
    .vs-header-actions {
        margin-left: 0 !important;
        gap: 6px !important;
    }
    
    /* Hide text labels to save space */
    .vs-btn-cart span,
    .vs-btn-mypage span {
        display: none !important;
    }
}

/* Center header under 500px */
@media (max-width: 649px) {
    .vs-header-main {
        justify-content: center !important;
        gap: 8px !important;
        padding: 25px 16px !important;
    }
    
    .vs-header-logo {
        margin-right: 9px !important;
    }
    
    .vs-header-actions {
        margin-left: 0 !important;
        gap: 6px !important;
    }
    
    /* Hide text labels to save space */
    .vs-btn-cart span,
    .vs-btn-mypage span {
        display: none !important;
    }
}
/* Hide shipping banner completely */

/* Force header hide/show to work - ADD THIS AT THE VERY END */
@media (max-width: 768px) {
    .vs-header {
        transition: top 0.3s ease-in-out, background 0.3s ease, box-shadow 0.3s ease !important;
    }
    
    /* This ensures the inline style from JavaScript works */
    .vs-header[style*="top: -100px"] {
        top: -100px !important;
    }
    
  
}
.vs-hamburger {
    display: none;
    width: 24px;
    height: 16px;
    cursor: pointer;
    margin-left: 0px;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
}

.vs-hamburger span {
    display: block;
    width: 100%;
    height: 2px;  /* Keep 2px for stability */
    background: #1a1311;
    transform: scaleY(0.7);  /* вл Makes it visually 1.2px */
    transition: all 0.3s ease;
}

/* Active state (X) */
.vs-hamburger.vs-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) scaleY(0.7);
}

.vs-hamburger.vs-active span:nth-child(2) {
    opacity: 0;
}

.vs-hamburger.vs-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) scaleY(0.7);
}
</style>