@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');



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

  body {
      font-family: 'Libre Baskerville', serif;
      line-height: 1.6;
      color: #050505;
      overflow-x: hidden;
  }

.announcement a:hover {
  text-decoration: underline;
}
.arrow:after{

  margin-left: 8px;
  font-weight: bold;


}

  .slider-dots {
      visibility: hidden;
  }

  .review-slider-dot {
      visibility: hidden;
  }

  .nav-logo {
      display: flex;
      align-items: end;
      gap: 66px;
  }

  /* Header Styles */
  .header {
      width: 100%;
      background: white;
      border-bottom: 1px solid #F5F2EC;
      position: relative;
  }

  .header-top {
      padding: 20px 100px;
      display: flex;
      align-items: end;

  }

  .logo {
      width: 178px;
      height: 60px;
      background: #ddd;
      flex-shrink: 0;
  }

  .header-right {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: flex-end;
  }

  .header-info {
      display: flex;
      gap: 27px;
      align-items: center;
  }

  .header-info span {
      color: #050505;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.7px;
  }

  .phone-number {
      display: flex;
      align-items: center;
      gap: 5px;
  }

  .phone- {
      width: 14px;
      height: 18px;
      border: 1px solid #050505;
  }

  .phone-text {
      color: #050505;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 1.6px;
  }

  .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .main-nav {
      display: flex;
      gap: 40px;
  }

  .main-nav a {
      color: #050505;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.8px;
      text-decoration: none;
  }

  .social-icons {
      display: flex;
      gap: 30px;
      align-items: center;
  }

  .social-icon {
      width: 20px;
      height: 20px;
  }

  /* Mobile Menu */
  .mobile-menu-btn {
      display: none;
      flex-direction: column;
      cursor: pointer;
      padding: 10px;
  }

  .mobile-menu-btn span {
      width: 31px;
      height: 1px;
      background: #121212;
      margin: 3px 0;
      transition: 0.3s;
  }

  .mobile-nav {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: white;
      z-index: 1000;
      padding: 20px;
      overflow-y: auto;
  }

  .mobile-nav.active {
      display: block;
  }

  .mobile-nav-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid #F5F2EC;
  }

  .close-btn {
      font-size: 28px;
      cursor: pointer;
      height: 53px;
  }

  .search-container {
      border: 2px solid #050505;
      margin-bottom: 30px;
  }

  .search-box {
      width: 100%;
      padding: 15px;
      border: 1px solid #ddd;
      font-size: 16px;
      position: relative;
  }

  .mobile-nav-section {
      margin-bottom: 30px;
  }

  .mobile-nav-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 15px;
      color: #050505;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
  }

  .mobile-nav-list {
      list-style: none;
      padding-left: 20px;
  }

  .news-info {
      gap: 40px;
      display: flex;
  }

  .mobile-nav-list li {
      margin: 10px 0;
      font-size: 16px;
      color: #050505;
  }

  .mobile-nav-list li:before {
      content: "●";
      margin-right: 10px;
  }

  /* Hero Section */
  .hero-section {
      width: 100%;
      height: 700px;
      position: relative;
      display: flex;
  }

  .hero-text2 {
      transform: translate(0px, -64px);
      visibility: hidden;
      display: flex;
      align-items: center;
      width: 100%;
      flex-direction: column;
      gap: 40px;
  }

  .hero-left {
      flex: 1;
      position: relative;
      overflow: hidden;
  }

  .hero-pattern {
      background-image: url("assets/hero11.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      /* optional, to fill the area */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

  }


  .hero-text {
      position: absolute;
      left: 148px;
      top: 122px;
      z-index: 2;
  }

  .hero-text .vertical-text {
      writing-mode: vertical-rl;
      color: #050505;
      font-size: 32px;
      font-weight: 400;
      line-height: 38.4px;
      letter-spacing: 1.6px;
      margin-right: 18px;
      display: inline-block;
  }

  .vertical-text1 {
      display: none;

  }

  .ig-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 20px;
      background: #050505;
      color: white;
      text-decoration: none;
      font-size: 18px;
      font-weight: 600;
      line-height: 27px;
      letter-spacing: 0.9px;
      width: fit-content;
      margin-top: 20px;
      /* spacing from images */
  }

  .ig-btn::before {
      content: '';
      width: 8px;
      height: 8px;
      background: white;
      border-radius: 50%;
  }
a:hover {
  text-decoration: none;
  opacity: 0.8;
  cursor: pointer;
}

.header a:hover,
footer a:hover {
  opacity: 1; /* don’t fade in header/footer */
}
.catalog-request h2,
.store-section h2 {
  margin-bottom: 20px;
  line-height: 1.4;
}


  .hero-button {
      position: absolute;
      left: 116px;
      top: 556px;
      background: #050505;
      color: white;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      z-index: 2;
  }

  .hero-button::before {
      content: '';
      width: 8px;
      height: 8px;
      background: white;
      border-radius: 50%;
  }

  .hero-button span {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.9px;
  }

  .hero-center,
  .hero-right {
      width: 531px;
      height: 700px;
      background: #F5F2EC;
      position: relative;
  }

  .hero-center img,
  .hero-right img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .hero-overlay-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: absolute;
      bottom: 26px;
      right: 0px;
      color: white;
      font-family: 'Libre Baskerville', serif;
      font-size: 86px;
      font-weight: 400;
      letter-spacing: 8.6px;
      opacity: 0.6;
  }

  /* Catalog Button */
  .catalog-btn {
      position: absolute;
      right: 26px;
      bottom: -52px;
      width: 110px;
      height: 110px;
      background: #050505;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      text-decoration: none;
      color: white;
      z-index: 10;
  }

  .catalog-btn .icon {
      display: flex;
      /* make icon a flex container */
      justify-content: center;
      align-items: center;
      width: 20.76px;
      height: 18.22px;
      margin-bottom: 0;
      /* remove bottom margin so it stays perfectly centered */
  }

  .catalog-btn span {
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      line-height: 16.8px;
  }

  /* News Section */
  .news-section {
      width: 100%;
      padding: 20px 200px;
      background: white;
      border-bottom: 1px solid #F5F2EC;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* Arrow pushed to far right */
      gap: 60px;
  }

  .news-left {
      display: flex;
      align-items: center;
      gap: 60px;
      flex: 1;
      /* Take up remaining space */
      min-width: 0;
      /* Allow ellipsis */
  }

  .news-date {
      color: #050505;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 1.6px;
      white-space: nowrap;
      flex-shrink: 0;
  }

  .news-content {
      color: #050505;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      letter-spacing: 0.8px;
      white-space: nowrap;
      /* Prevent wrap */
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .news-arrow {
      color: #050505;
      font-size: 20px;
      flex-shrink: 0;
      /* Prevent arrow from shrinking */
  }


  /* About Section */

  /* Wrapper for the section */
  .about-section {
      margin-bottom: 140px;
      width: 100%;
      height: 860px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      padding: 0 100px;
  }

  /* Left & Right images */
  .about-image-left,
  .about-image-right {
      width: 590px;
      height: 527px;
      position: absolute;
  }

  .about-image-left {
      left: 0;
      bottom: 0;
      transform: translateX(-20%);
      /* push half out */
  }

  .about-image-right {
      right: 0;
      top: 0;
      transform: translateX(10%);
      /* push half out */
  }

  .about-image-left img,
  .about-image-right img {
      width: auto;
      height: 100%;
      object-fit: cover;
  }

  /* Middle content */
  .about-left {
      max-width: 600px;
      /* adjust as needed */
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .about-title {
      display: flex;
      /* make the titles line up horizontally */
      align-items: flex-start;
      /* align top */
      margin-bottom: 40px;
      gap: 20px;
      /* space between titles */
  }

  .about-title .vertical-title {
      writing-mode: vertical-rl;
      color: #050505;
      font-size: 32px;
      font-weight: 400;
      line-height: 30.4px;
      letter-spacing: 1.6px;
      display: inline-block;
      margin-left: 0;
      /* remove extra margin since gap handles spacing */
  }

  .about-text {
      writing-mode: vertical-rl;
      display: inline-block;
      color: #050505;
      font-size: 16px;
      font-weight: 400;
      line-height: 46px;
      letter-spacing: 0.8px;
      height: 400px;
  }

  .about-text p {
      white-space: nowrap;
      margin: 0;
      /* remove extra spacing */
  }

  .container {
   
      max-width: 1524px;
      margin: 0 auto;
      position: relative;
  }

  /* Hero Section */
  .hero-section1 {
  
      width: 100%;
      height: 294px;
      position: relative;
      background: #F5F2EC;
      padding: 30px;
  }

  .hero-section2 {
      margin-top: 200px;
      width: 100%;
      height: 294px;
      position: relative;
      background: #F5F2EC;
      padding: 30px;
  }

  .hero-content1 {
   
      position: absolute;
      left: 50%;
      top: 44%;
      transform: translate(-50%, -50%);

      align-items: center;
      gap: 80px;
      width: 100%;
      max-width: 1200px;
  }

  .hero-image2 img {
      width: 50%;
      height: auto;
      border-radius: 8px;
      position: absolute;
      bottom: 0;
      left: -34%;
  }

  .hero-content2 {
      margin-left: 45px;
      position: absolute;
      top: 44%;
      right: 0;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 150px;
      width: 100%;
      max-width: 1200px;
      justify-content: center;
  }

  .hero-text1 {
      width: 560px;
      display: flex;
      flex-direction: column;
      gap: 40px;
  }

  .hero-title1 {
      color: #050505;
      font-size: 48px;
      font-weight: 400;
      letter-spacing: 4.8px;
      line-height: 52px;
      margin-bottom: 20px;
  }

  .hero-description1 {
      color: #050505;
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;
      letter-spacing: 0.8px;
  }

  .hero-button1 {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 20px;
      background: #050505;
      color: white;
      text-decoration: none;
      font-size: 18px;
      font-weight: 600;
      line-height: 27px;
      letter-spacing: 0.9px;
      width: fit-content;
  }

  .decorative-line img {
      height: 137%;
      width: 26%;
  }

  .decorative-line {
      display: flex;
      gap: 5px;
  }

  .decorative-line1 img {
      height: auto;
      width: 15%;
  }

  .decorative-line1 {
      display: flex;
      gap: 5px;
  }

  .hero-button1::before {
      content: '';
      width: 8px;
      height: 8px;
      background: white;
      border-radius: 50%;
  }

  .hero-image1 {
    overflow: hidden;
      flex: 1;
      display: flex;
      justify-content: center;
  }

  .hero-image1 img {
      width: 50%;

      height: auto;
      border-radius: 8px;

      position: absolute;
      bottom: 0;
      /* align bottom */
      right: -15%;
      /* half off-screen */
  }


  .product-showcase-section {
      padding-top: 100px;
      flex-direction: column;
      width: 100%;
      background-color: #F5F2EC;
      position: relative;
      display: flex;
      align-items: center;
      /* justify-content: center; */
  }

  .product-grid {
      gap: 103px;
      display: flex;
  }

  .showcase-container {
      width: 1524px;
      height: 903px;
      position: relative;
  }

  .showcase-background {
      width: 1400px;
      height: 779px;
      padding: 30px;
      position: absolute;
      left: 0px;
      top: 124px;
      background: #F5F2EC;
  }

  .showcase-products {
      position: absolute;
      left: 101px;
      top: 573px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 39px;
  }

  .showcase-featured {
      position: absolute;
      left: 0px;
      top: 150px;
      width: 560px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 40px;
  }

  .featured-content {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 20px;
      width: 100%;
  }

  .featured-title {
      width: 205px;
      height: 52px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      color: #050505;
      font-size: 48px;
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      letter-spacing: 4.8px;
      word-wrap: break-word;
  }

  .featured-description {
      height: 151px;
      color: #050505;
      font-size: 16px;
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      line-height: 32px;
      letter-spacing: 0.8px;
      word-wrap: break-word;
  }

  .featured-button {
      padding: 10px 20px;
      background: #050505;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      text-decoration: none;
  }

  .button-dot {
      width: 8px;
      height: 8px;
      background: white;
      border-radius: 50%;
  }

  .featured-button {
      color: white;
      font-size: 18px;
      font-family: 'Noto Serif JP', serif;
      font-weight: 600;
      line-height: 27px;
      letter-spacing: 0.9px;
      word-wrap: break-word;
  }

  .product-card {
      width: 580px;
      display: flex;
      align-items: center;
      gap: 20px;
  }

  .product-image {
      width: 280px;
      height: 250px;
      background: #F5F2EC;
      padding: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
  }

  .product-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;
  }

  .product-info {
      width: 280px;
      display: flex;
      flex-direction: column;
      gap: 30px;
  }

  .product-name {
      color: #050505;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 0.8px;
  }

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

  .product-price {
      color: #050505;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 0.8px;
  }

  .add-button {
      bottom: 20px;
      right: 24px;
      background: #000;
      color: #fff;
      font-size: 23px;
      padding: 3px 6px;
      border-radius: 100px;
      font-weight: lighter;
  }



  /* Categories Section */
  .categories-section {
      padding: 80px 30px;
  }

  .categories-container {
      max-width: 1200px;
      margin: 0 auto;
  }

  .categories-header {
      margin-bottom: 50px;
  }

  .categories-title {
      color: #050505;
      font-size: 32px;
      font-weight: 400;
      line-height: 48px;
      letter-spacing: 1.6px;
      margin-bottom: 10px;
  }

  .categories-subtitle {
      color: #050505;
      font-size: 16px;
      font-family: 'Libre Baskerville', serif;
      font-weight: 400;
      letter-spacing: 1.6px;
  }

  .categories-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
  }

  .categories-grid1 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
  }

  .category-card {
      position: relative;
      width: 100%;
      height: 386px;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
  }

  .category-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .category-card1 {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
  }

  .category-card1 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .category-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 30px;
  }

  .category-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .category-info1 {
      display: flex;
      justify-content: space-between;
      align-items: end;
  }

  .category-name {
      color: white;
      font-size: 32px;
      font-weight: 400;
      line-height: 48px;
      letter-spacing: 1.6px;
  }

  .category-arrow {
      width: 40px;
      height: 40px;
      background: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
  }

  .category-arrow::after {
      content: '→';
      color: #050505;
      font-size: 18px;
      font-weight: bold;
  }

  .category-arrow1 {
      width: 40px;
      height: 40px;
      background: #050505;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
  }

  .category-arrow1::after {
      content: '→';
      color: white;
      font-size: 18px;
      font-weight: bold;
  }

  .recommended-section {
      background: #fafafa;
  }

  .section-title {
      padding: 30px 30px;
      font-size: 20px;
      letter-spacing: 2px;
  }

  .section-title span {
      font-size: 16px;
      color: #777;
      display: block;
  }

  .recommended-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      /* 4 columns */
      grid-template-rows: repeat(2, auto);
      /* 2 rows */
  }


  .product-card1 {
      position: relative;
      overflow: hidden;
  }

  .image-container {
      position: relative;
  }

  .image-container img {
      width: 100%;
      display: block;
      transition: transform 0.3s ease;
  }

  .image-container:hover img {
      transform: scale(1.05);
  }

  /* Heart Button */
  .heart-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 32px;
      height: 32px;
      background: url('./assets/heart.png') no-repeat center/contain;
      border: none;
      cursor: pointer;
      z-index: 2;
  }

  .heart-btn.active {
      background: url('./assets/heart-filled.png') no-repeat center/contain;
  }


  /* Overlay */
  .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgb(0 0 0 / 40%);
      color: #fff;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: end;
      align-items: start;
      transform: translateY(100%);
      transition: transform 0.3s ease;
  }

  .image-container:hover .overlay {
      transform: translateY(0);
      /* slide up to fill container */
  }

  .overlay h3 {
      font-weight: 100;
      margin: 0;
      font-size: 18px;
  }

  .overlay-arrow {
      position: absolute;
      bottom: 20px;
      right: 24px;
      background: #000;
      color: #fff;
      font-size: 18px;
      padding: 5px 10px;
      border-radius: 100px;
  }

  .price {
      font-weight: 100;
      margin: 0;
      font-size: 18px;
  }

  .banner {
      width: 100%;
      height: 500px;
      margin-top: 150px;
      /* top & bottom margin */
      overflow: hidden;
      position: relative;
  }

  .banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }



  .story-section {
      width: 100%;
      height: 860px;
      background: url('./assets/pattern-bg.png') repeat;
      /* pattern background */
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 60px;
      position: relative;
  }

  /* Wrap box + vertical title together */
  .story-box-wrapper {
      justify-content: center;
      width: 100%;
      display: flex;
      align-items: flex-start;
      /* align title with top of box */
      gap: 30px;
      /* space between title and box */
      position: relative;
  }

  /* Vertical title */
  .story-box-wrapper h1 {
      font-size: 16px;
      font-weight: 100;
      writing-mode: sideways-lr;
      text-orientation: mixed;
      transform: rotate(180deg);
      /* so it reads top to bottom */
      margin: 0;
      line-height: 1;
  }

  /* Story Box */
  .story-box {
      width: 75%;
      /* bigger than 59%, smaller than 100% */
      height: 492px;
      background: #f5f3ef;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      position: relative;
      text-align: center;
  }

  /* Play Button */
  .story-play {
      width: 15%;
      font-size: 18px;
      color: #fff;
      padding: 12px 24px;
      border-radius: 30px;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: background 0.3s ease;
  }

  .story-play:hover {
      background: rgba(0, 0, 0, 0.8);
  }

  .play-icon {
      border-radius: 5px;
      height: 38%;
      width: 38%;

      background-color: white;
      color: #050505;
      font-size: 16px;
  }

  .story-play p {
      white-space: nowrap;
      /* Prevent text from wrapping */
  }

  .section1 {
      padding: 60px 20px;
      max-width: 1200px;
      margin: 0 auto;
  }
.content h3{
      font-weight: bold;
    font-size: 25px;
}
  /* Section 1: Staff Assistance */
  #staff-assistance {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 40px;
  }

  #staff-assistance img {
      width: 500px;
      max-width: 100%;
      border-radius: 16px;
  }

  #staff-assistance .content {
      flex: 1;
  }

  #staff-assistance h2 {
      font-weight: 100;
      font-size: 28px;
      margin-bottom: 20px;
  }

  #staff-assistance p {
      font-size: 16px;
      margin-bottom: 20px;
  }


  .recommended-grid1 {
      gap: 20px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      /* 4 columns */
  }

  /* Section 2: Repair Support */
  #repair-support {
      height: 431px;
      align-items: center;
      background: url('./assets/Repair.png') center/cover no-repeat;
      /* replace with your bg image or color */
      color: #fff;
      display: flex;
      justify-content: flex-start;
      /* align content to left */

  }

  #repair-support .content {
      align-items: flex-start;
      max-width: 641px;
      padding-left: 180px;
      display: flex;
      flex-direction: column;
      gap: 9px;
  }




  #repair-support .button {
      display: inline-block;
      padding: 10px 20px;
      background: #fff;
      color: #333;
      text-decoration: none;
      border-radius: 8px;
      font-weight: bold;
      transition: background 0.3s;
  }

  #repair-support .button:hover {
      background: #ddd;
  }



  #repair-support .content {
      align-items: flex-start;
      max-width: 641px;
      padding-left: 180px;
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  #repair-support h2 {
      font-size: 28px;
      font-weight: 100;
      margin-bottom: 10px;
  }

  #repair-support p {
      font-size: 16px;
      line-height: 1.6;
  }

  #repair-support .button {
      display: inline-block;
      padding: 10px 20px;
      background: #fff;
      color: #333;
      text-decoration: none;
      border-radius: 8px;
      font-weight: bold;
      transition: background 0.3s;
  }

  #repair-support .button:hover {
      background: #ddd;
  }

  .banner1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 40px;
      border: 1px solid #f0f0f0;
      background: #fff;
      max-width: 960px;
      margin: 60px auto;
      border: 4px solid #F4F1EB;

  }

  .banner-text {
      font-size: 18px;
      color: #333;
      line-height: 1.8;
      position: relative;
  }

  .banner-text::before {
      content: "";
      position: absolute;
      top: 50%;
      left: -60px;
      transform: translateY(-50%);
      background: url(./assets/PatternsLogo.png) no-repeat center / contain;
      width: 159px;
      height: 110px;

  }

  .highlight {
      color: #c18b2c;
      font-weight: bold;
  }

  .banner-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
  }

  .banner-logo img {
      height: auto;
      width: auto;
  }

  .banner-logo span {
      font-size: 16px;
      font-weight: 600;
      color: #222;
  }

  .reviews-section {
      padding: 60px 20px;
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
  }

  .reviews-section h2 {
      font-size: 24px;
      margin-bottom: 8px;
      font-weight: 600;
  }

  .reviews-section p.subtitle {
      font-size: 14px;
      color: #555;
      margin-bottom: 40px;
      letter-spacing: 1px;
  }

  .reviews-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 69px;
  }

  .review-card {
      width: 112%;
      background: #f8f6f2;
      padding: 28px 24px;
      text-align: left;
      position: relative;
      border-radius: 4px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  }

  .review-card h3 {
      font-size: 18px;
      margin-bottom: 12px;
      font-weight: 600;
      color: #222;
  }

  .review-card p {
      font-size: 15px;
      line-height: 1.8;
  }

  /* flower image overlay */
  .review-card .flower-img {
      position: absolute;
      width: 80px;
      /* adjust size */
      height: auto;
      opacity: 0.8;
      pointer-events: none;
      /* avoid blocking text selection */
  }

  .review-card .flower-img.bottom {
      bottom: -30px;
      right: 16px;
  }
.Ig-section {
  position: relative; /* Add this */
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.ig-img {
    display: none;
    position: absolute;
    top: -58px;
    right: 65px;
    width: 80px;
}

  .ig-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
  }

  .ig-card {

      margin-top: 45px;
      border-radius: 4px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  }

  /* Section 2: Repair Support */
  #repair-support1 {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      /* keep image inside */
      min-height: 400px;
  }

  /* background image as <img> */
  #repair-support1 .bg-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      object-fit: cover;
      z-index: 0;
  }

  /* overlay content */
  #repair-support1 .content {
      padding-top: 12px;
      align-items: center;
      position: relative;
      z-index: 1;
      max-width: 641px;
      display: flex;
      flex-direction: column;
      gap: 3px;
  }

  #repair-support1 h2 {
      text-align: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
  }

  #repair-support1 p {
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 20px;
  }

  #repair-support1 .button {
      display: inline-block;
      padding: 10px 20px;
      background: #050505;
      color: white;
      text-decoration: none;
      font-weight: 100;
      transition: background 0.3s;
  }


/* === Calendar Section === */
.calendar-section {
    background: #f9f7f2;
    padding: 60px 20px;
    text-align: center;
}

.calendar-section h2 {
    font-size: 28px;
    margin-bottom: 5px;
    font-weight: normal;
    letter-spacing: 2px;
}

.calendar-section .subtitle {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
    font-style: italic;
    letter-spacing: 1px;
}

.calendar-section p {
    font-size: 14px;
    color: #333;
    margin-bottom: 40px;
}

.calendar-container {
    display: flex;
    justify-content: center;
    gap: 120px;
    flex-wrap: wrap;
}

.calendar {
    text-align: center;
}

.calendar h3 {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: normal;
}

.calendar table {
    margin: 0 auto;
    border-spacing : 3px;
}

.calendar th,
.calendar td {
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 14px;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    border: none;
}

.calendar th {
    font-weight: normal;
    color: #666;
    padding-bottom: 10px;
}

.calendar td {
    position: relative;
}

.holiday {
    background: #000;
    color: #fff;
    font-weight: bold;
}
  /* === Shopping Guide === */
  .guide-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 60px 20px;
      text-align: center;
  }

  .guide-container h2 {
      font-size: 22px;
      margin-bottom: 5px;
      font-weight: bold;
  }

  .guide-container p.subtitle {
      font-size: 14px;
      color: #777;
      margin-bottom: 40px;
  }

  .guide-sections {
      display: flex;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap;
      text-align: left;
  }

  .guide-section {
      flex: 1;
      min-width: 280px;
  }

  .guide-section h3 {
      font-size: 18px;
      margin-bottom: 15px;
      border-bottom: 1px solid #eee;
      padding-bottom: 5px;
  }

  .guide-section p {
      font-size: 14px;
      color: #555;
      margin-bottom: 10px;
  }

  /* === Footer === */
  footer {
      background: #fff;
      border-top: 1px solid #eee;
      padding: 40px 20px;
  }

  .footer-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 40px;
  }

  .footer-left {
      flex: 1;
      min-width: 250px;
  }

  .footer-left>img {
      height: 40px;
      margin-bottom: 15px;
  }

  .social-icons2 {
      display: flex;
      gap: 5px;
      align-items: center;
  }

  .social-icons1 {
      height: 20px;
      width: 20px;
      display: inline-block;
      margin-right: 10px;
      font-size: 20px;
      color: #000;
      text-decoration: none;
  }

  .footer-links {
      flex: 2;
      min-width: 250px;
      display: grid;
      grid-template-columns: repeat(3, auto);
      gap: 10px 40px;
  }

  .footer-links a {
      text-decoration: none;
      color: #333;
      font-size: 14px;
  }

  .copyright {
      margin: 0 auto;
      max-width: 1200px;
      text-align: start;
      margin-top: 30px;
      font-size: 12px;
      color: #050505;
  }



  /* Container */
  .mokab-product-wrapper {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 20px;
  }

  .mokab-breadcrumb {
      display: flex;
      align-items: center;
      padding-left: 107px;
      font-size: 14px;
      font-weight: 400;
  }

  .mokab-breadcrumb-home {
      color: #050505;
  }

  .mokab-breadcrumb-separator {
      /* width: 3px; */
      height: 17px;
      background: white;
      /* outline: 1px #050505 solid; */
      outline-offset: -0.5px;
      margin: 0 10px;
  }

  .mokab-breadcrumb-current {
      color: #050505;
      font-weight: 500;
  }

  /* Main Product Container */
  .mokab-product-container {
      display: grid;
      grid-template-columns: 560px 1fr;
      gap: 60px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
  }

  /* Main Product Image */
  .mokab-main-image {
      width: 100%;
  }

  .mokab-main-image img {
      width: 100%;
      height: auto;
      object-fit: cover;
  }

  /* Product Information */
  .mokab-product-info {
      display: flex;
      flex-direction: column;
      gap: 30px;
      padding-top: 20px;
  }

  .mokab-title-section {
      display: flex;
      flex-direction: column;
      gap: 5px;
  }

  .mokab-product-title {
      font-size: 28px;
      font-weight: 400;
      line-height: 1.2;
      color: #050505;
  }

  .mokab-product-code {
      font-size: 15px;
      font-weight: 400;
      line-height: 1.7;
      color: #050505;
  }

  .mokab-price {
      font-size: 18px;
      font-weight: 400;
      color: #050505;
  }

  /* Form Section */
  .mokab-form-section {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .mokab-product-type,
  .mokab-quantity {
      display: flex;
      flex-direction: column;
      gap: 5px;
  }

  .mokab-label {
      font-size: 16px;
      font-weight: 400;
      line-height: 2;
      color: #050505;
  }

  .mokab-select-wrapper {
      position: relative;
      width: 250px;
  }

  .mokab-select {
      width: 100%;
      height: 42px;
      padding: 0 16px;
      background: white;
      border: 1px solid #050505;
      font-size: 16px;
      font-weight: 400;
      color: #050505;
      appearance: none;
      font-family: 'Noto Serif JP', serif;
  }

.mokab-select-arrow {
    position: absolute;
    right: 25px;
    top: 25%;
    /* transform: translateY(-50%) rotate(90deg); */
    width: 3px;
    height: 7px;
    outline-offset: -0.5px;
    pointer-events: none;
}

  .mokab-quantity-input {
      width: 96px;
      height: 42px;
      padding: 0 16px;
      border: 1px solid #050505;
      font-size: 16px;
      font-weight: 400;
      color: #050505;
      text-align: center;
      font-family: 'Noto Serif JP', serif;
  }

  /* Action Buttons */
  .mokab-action-buttons {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .mokab-add-cart,
  .mokab-add-favorite {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 70px;
      padding: 0 130px;
      font-size: 18px;
      font-weight: 400;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: 'Noto Serif JP', serif;
  }

  .mokab-add-cart {
      background: #050505;
      color: white;
  }

  .mokab-add-cart:hover {
      background: #333;
  }

  .mokab-add-favorite {
      background: white;
      color: #050505;
      border: 1px solid #050505;
  }

  .mokab-add-favorite:hover {
      background: #f5f5f5;
  }

  .mokab-cart-icon,
  .mokab-heart-icon {
      width: 20px;
      height: 20px;
  }



  /* Inquiry Section */
  .mokab-inquiry-section {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 11px;
  }

  .mokab-inquiry-text {
      font-size: 15px;
      font-weight: 400;
      line-height: 1.7;
      color: #050505;
  }

  .mokab-inquiry-decoration {
      width: 100%;
      max-width: 271px;
      height: auto;
  }

  /* Thumbnails Grid */
  .mokab-thumbnails-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 15px;
      width: 100%;
      max-width: 740px;
      margin-top: 20px;
      padding-left: 173px;
  }

  .mokab-thumbnail {
      width: 100%;
      height: 98px;
      object-fit: cover;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid transparent;
  }


  .mokab-thumbnail:hover {
      opacity: 0.8;
  }

  .mokab-thumbnail.active {
      border: 1px solid #050505;
  }

  /* Wrapper to hold all floating buttons (fixed position) */
  .mokab-floating-wrapper {

      position: fixed;
      right: 30px;
      bottom: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      /* space between buttons */
      z-index: 1000;
  }

  .mokab-floating-small:nth-child(2) {
      border: 2px solid #00000087;

  }

  .mokab-floating-small {
      visibility: hidden;
      width: 60px;
      height: 60px;
      background: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .mokab-floating-small img {
      width: 28px;
      height: 28px;
  }

  .mokab-floating-small:hover {
      background: #333;
      transform: scale(1.05);
  }

  /* Main floating cart */
  .mokab-floating-cart {
      width: 110px;
      height: 110px;
      background: #050505;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      cursor: pointer;

  }

  .mokab-floating-cart:hover {
      background: #333;
      transform: scale(1.05);
  }

  .mokab-floating-icon {
      width: 20px;
      height: 20px;
  }

  .mokab-floating-text {
      text-align: center;
      color: white;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.2;
  }

  /* Tab Navigation */
  .mokab-tab-navigation {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin: 138px 0;
      padding: 0 20px;
      flex-wrap: wrap;
  }

  .mokab-tab {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 40px;
      background: #050505;
      color: white;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.9px;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .mokab-tab:hover {
      background: #333;
  }

  .mokab-tab.active {
      background: #222;
  }

  .mokab-tab-arrow svg {
      width: 117%;
      height: 171%;

  }

  /* Showcase Image */
  .mokab-showcase-image {
      text-align: center;
      margin: 40px 0;
      padding: 0 20px;
  }

  .mokab-showcase-image img {
      max-width: 1000px;
      width: 100%;
      height: auto;
  }

  /* Features Section */
  .mokab-features-section {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 20px;
  }

  .mokab-features-content {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .mokab-features-title {
      font-size: 20px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 2px;
      color: #050505;
  }

  .mokab-features-description {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.8px;
      color: #050505;
  }

  /* Details Grid */
  .mokab-details-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
      max-width: 1081px;
      margin: 80px auto;
      /* padding: 30px 20px; */
      /* background: #F5F2EC; */
  }

  .mokab-detail-item {
      display: flex;
      flex-direction: column;
      gap: 30px;
  }

  .mokab-detail-item img {
      width: 100%;
      max-width: 480px;
      height: auto;
      padding: 25px;
  }

  .mokab-detail-text {
    padding: 0px 25px;
      max-width: 467px;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.8px;
      color: #050505;
      text-align: center;
  }

  /* Small Images */
  .mokab-small-images {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 1000px;
      margin: 40px auto;
      padding: 0 20px;
  }

  .mokab-small-images img {
      width: 100%;
      height: auto;
      padding: 25px;
  }

  /* Uesugi Model Section */
  .mokab-uesugi-model-section {
      max-width: 1000px;
      margin: 40px auto;
      padding: 20px;
      border: 1px solid #050505;
  }

  .mokab-uesugi-title {
      text-align: start;
      font-size: 20px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 2px;
      color: #050505;
  }

  /* Section Titles */
  .mokab-size-section,
  .mokab-benefits-section {
      text-align: center;
      margin: 60px 0;
      padding: 0 20px;
  }

  .mokab-section-title {
      font-size: 32px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 1.6px;
      color: #050505;
      margin-bottom: 10px;
  }

  .mokab-section-subtitle {
      font-size: 16px;
      font-family: 'Libre Baskerville', serif;
      font-weight: 400;
      letter-spacing: 1.6px;
      color: #050505;
  }

  /* Size Image */
  .mokab-size-image {
      text-align: center;
      margin: 40px 0;
      padding: 0 20px;
  }

  .mokab-size-image img {
      max-width: 700px;
      width: 100%;
      height: auto;
  }

  /* Specifications Table */
  .mokab-specs-table {
      max-width: 800px;
      margin: 0 auto 60px;
      background: white;
      overflow: hidden;
  }

  .mokab-spec-row {
      display: grid;
      grid-template-columns: 200px 1fr;
      border-bottom: 1px solid #DDDDDD;
  }

  .mokab-spec-row:last-child {
      border-bottom: none;
  }

  .button1 {
      display: none;
  }

  .mokab-spec-label {
      padding: 20px 30px;
      text-align: center;
      font-size: 15px;
      font-weight: 400;
      line-height: 1.1;
      color: #050505;

  }

  .mokab-spec-value {
      padding: 20px;
      font-size: 15px;
      font-weight: 400;
      line-height: 1.5;
      color: #050505;
  }

  /* Benefits Grid */
  .mokab-benefits-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
      max-width: 1081px;
      margin: 60px auto;

  }

  .mokab-benefit-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
  }

  .mokab-benefit-item img {
      width: 100%;
      max-width: 480px;
      height: auto;
      padding: 25px;
  }
.mokab-detail-item .mokab-detail-text{
    text-align: start;
    align-items: start;
}
  .mokab-benefit-content {
      display: flex;
      padding: 25px;
      flex-direction: column;
      gap: 10px;
  }

  .mokab-benefit-title {
      font-size: 20px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 2px;
      color: #050505;
  }

  .mokab-benefit-text {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.8px;
      color: #050505;
      max-width: 467px;
  }

  /* Notice Section */
  .mokab-notice-section {
      max-width: 1000px;
      margin: 60px auto;
      padding: 60px;
      background: white;
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .mokab-notice-decoration {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      flex-wrap: wrap;
  }

  .mokab-notice-dots {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
  }

  .mokab-dot {
      background: white;
      outline: 1px #E8D2A8 solid;
      outline-offset: -0.5px;
  }

  .mokab-dot-large {
      width: 27.51px;
      height: 9.21px;
  }

  .mokab-dot-medium {
      width: 18.67px;
      height: 5.59px;
  }

  .mokab-dot-small {
      width: 10.98px;
      height: 3.46px;
  }

  .mokab-dot-tiny {
      width: 2.99px;
      height: 1.50px;
  }

  .mokab-dot-large-alt {
      width: 24.18px;
      height: 6.11px;
  }

  .mokab-dot-medium-alt {
      width: 15.34px;
      height: 3.25px;
  }

  .mokab-dot-small-alt {
      width: 8.10px;
      height: 1.54px;
  }

  .mokab-dot-tiny-alt {
      width: 2.73px;
      height: 0.91px;
  }

  .mokab-notice-title {
      font-size: 20px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 2px;
      color: #050505;
      margin-left: 20px;
  }

  .mokab-notice-text {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.8px;
      color: #050505;
  }

  .customer-testimonials-wrapper {
      height: 171vh;
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
      position: relative;
  }

  .user-feedback-card {
      margin-bottom: 45px;
      width: 100%;
      padding: 80px;
      background: #F5F2EC;
      /* margin-bottom: 0; */
  }

  .testimonial-content-area {
      display: flex;
      flex-direction: column;
      gap: 40px;
  }

  .customer-profile-section {
      width: 286px;
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .profile-header-row {
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .user-avatar-container {
      width: 40px;
      height: 40px;
      padding: 10px;
      background: white;
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
  }

  .avatar-icon-small {
      width: 8.45px;
      height: 8.45px;
      border: 1px solid #050505;
  }

  .avatar-icon-large {
      width: 18.72px;
      height: 8.72px;
      border: 1px solid #050505;
  }

  .customer-name-text {
      color: #050505;
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      letter-spacing: 0.80px;
  }

  .customer-demographic {
      color: #050505;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 0.80px;
  }

  .rating-timestamp-row {
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .star-rating-display {
      display: flex;
      align-items: center;
      gap: 2px;
  }

  .star-icon {
      width: 12px;
      height: 12px;
      background: #050505;
  }

  .star-icon.star-wide {
      width: 14px;
      height: 12px;
  }

  .star-icon.star-medium {
      width: 13px;
      height: 12px;
  }

  .post-timestamp {
      color: #050505;
      font-size: 14px;
      font-weight: 400;
      line-height: 21px;
      letter-spacing: 0.70px;
  }

  .testimonial-text-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .feedback-title-text {
      color: #050505;
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      letter-spacing: 0.80px;
  }

  .feedback-content-text {
      color: #050505;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 0.80px;
  }

  .shop-response-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .shop-response-title {
      color: #050505;
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      letter-spacing: 0.80px;
  }

  .shop-response-content {
      color: #050505;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 0.80px;
  }

  .shop-response-timestamp {
      color: #050505;
      font-size: 14px;
      font-weight: 400;
      line-height: 21px;
      letter-spacing: 0.70px;
  }

  .submit-feedback-button-container {
      display: flex;
      justify-content: center;
      width: 100%;
      position: relative;
      top: 6px;
  }

  .post-testimonial-btn {
      padding: 10px 20px;
      background: #050505;
      border: none;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      border-radius: 0;
  }

  .button-indicator-dot {
      width: 8px;
      height: 8px;
      background: white;
      border-radius: 50%;
  }

  .button-label-text {
      color: white;
      font-size: 18px;
      font-family: 'Noto Serif JP', serif;
      font-weight: 600;
      line-height: 27px;
      letter-spacing: 0.90px;
  }

  .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
  }

  /* Header/Breadcrumb */
  .breadcrumb-nav {
      padding: 40px 0 20px;
  }

  .breadcrumb-nav .container {
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .breadcrumb-separator {
      width: 3px;
      height: 7px;
      background: white;
      border: 1px solid #050505;
  }

  .breadcrumb-text {
      font-size: 14px;
      font-weight: 400;
  }

  .breadcrumb-current {
      font-weight: 500;
  }

  /* Main Header */
  .main-header {
      text-align: center;
      padding: 60px 0;
  }

  .page-title {
      font-size: 32px;
      font-weight: 400;
      line-height: 48px;
      letter-spacing: 1.6px;
      margin-bottom: 10px;
  }

  .page-subtitle {
      font-family: 'Libre Baskerville', serif;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 1.6px;
  }

  /* Intro Text */
  .intro-text {
      text-align: center;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0.8px;
      margin-bottom: 80px;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
  }

/* Award Section */
.award-section {
    background: white;
    border: 5px solid #F5F2EC;
    padding: 40px 60px;   /* ✅ more spacing inside */
    margin: 0 auto;       /* ✅ center horizontally */
    max-width: 1000px;    /* ✅ keeps it neat */
    position: relative;
    display: flex;        /* ✅ center content vertically if needed */
    justify-content: center;

}

.award-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.award-text {
    flex: 1;
}

.award-title {
    font-weight: 100;
    font-size: 26px;
    line-height: 39px;
    letter-spacing: 2.6px;
    margin-bottom: 10px;
}

.award-description {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.8px;
    max-width: 390px;
}

.award-images {
    display: flex;
    gap: 20px;
}

.award-image {
    width: 200px;
    height: 179px;
    background: #F5F2EC;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}


  /* Decorative Pattern */
  .decorative-pattern {
      position: absolute;
      top: -50px;
      left: -50px;
      width: calc(100% + 100px);
      height: calc(100% + 100px);
      pointer-events: none;
      z-index: -1;
  }

  /* Store Section */
  .store-section {
      margin-top: 443px;
      background: #F5F2EC;
      padding: 60px 0 100px;
      position: relative;
  }

  .store-hero {
      position: relative;
      /* make this the positioning context */
      display: flex;
      align-items: center;
      gap: 60px;
      margin-bottom: 80px;
  }


  .store-text {
      flex: 1;
  }

  .store-title {
    font-weight: 100;
      font-size: 48px;
      letter-spacing: 4.8px;
      margin-bottom: 30px;
  }

  .store-description {
      font-size: 16px;
      line-height: 32px;
      letter-spacing: 0.8px;
  }



 .store-image {
    overflow: hidden;
    position: absolute;
    top: -320px;
    right: -181px;
    z-index: 1;
}
  .store-image img {
       overflow: hidden;
      height: auto;
      border-radius: 400px 0 0 400px;
  }

  /* Store Details */
  .store-details {
      display: flex;
      gap: 80px;
  }

  .store-access,
  .store-schedule {
      flex: 1;
  }

  .section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
  }

  .section-title {
      font-size: 20px;

      letter-spacing: 2px;
  }

  .contact-info {
      margin-bottom: 20px;
  }

  .address {
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
  }

  .google-map-link {
      display: flex;
      align-items: center;
      gap: 9px;

      color: #050505;
      font-weight: 500;
  }

  .map-icon {
      width: 17px;
      height: 22px;
  }

  .schedule-table {
      width: 100%;
  }

  .schedule-row {
      display: flex;
      gap: 20px;
      padding: 20px 0;
      border-bottom: 1px solid #DDDDDD;
  }

  .schedule-row:first-child {
      padding-top: 0;
  }

  .schedule-time {
      width: 150px;
      font-weight: 600;
      flex-shrink: 0;
  }

  .schedule-details {
      flex: 1;
  }

  .schedule-details strong {
      font-weight: 700;
  }

  /* Catalog Button */
  .catalog-button {
      position: fixed;
      bottom: 50px;
      right: 50px;
      width: 110px;
      height: 110px;
      background: #050505;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: white;
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      line-height: 1.2;
      z-index: 1000;
      transition: transform 0.3s ease;
  }

  .catalog-button:hover {
      transform: scale(1.05);
  }

  .second-store {
      margin-top: 443px;
      background: #F5F2EC;
      padding: 60px 0 100px;
      position: relative;
  }

  .second-store-hero {
      height: 300px;
      display: flex;
      align-items: start;
      gap: 238px;

  }

  .second-store-image {
      flex-shrink: 0;
      max-width: 400px;
      /* control width */
  }

  .second-store-image img {
      transform: translate(-247px, -281px);
      height: auto;
      border-radius: 8px;
  }

  .second-store-text {
      flex: 1;
  }

  .second-store-title {
    font-weight: 100;
      font-size: 36px;
      letter-spacing: 3.6px;
      margin-bottom: 20px;
  }

  .second-store-description {
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0.8px;
  }

  .catalog-main-container {
      width: 100%;
      min-height: 100vh;
      background: white;
      overflow-x: hidden;
  }

  .catalog-header-section {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 27px 0px 50px;
      text-align: center;
  }

  .catalog-title-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-bottom: 50px;
  }

  .catalog-main-title {
      color: #050505;
      font-size: clamp(24px, 5vw, 32px);
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 1.6px;
      word-wrap: break-word;
  }

  .catalog-subtitle-english {
      color: #050505;
      font-size: clamp(14px, 3vw, 16px);
      font-family: 'Libre Baskerville', serif;
      font-weight: 400;
      letter-spacing: 1.6px;
  }

  .catalog-description-text {
      max-width: 1000px;
      margin: 0 auto;
      text-align: center;
      color: #050505;
      font-size: clamp(14px, 2.5vw, 16px);
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      line-height: 1.8;
      letter-spacing: 0.8px;
      padding: 0 20px;
  }

  .catalog-products-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      /* exactly 4 cards per row */
      gap: 20px;
      padding: 50px 20px;
      max-width: 1200px;
      margin: 0 auto;
  }

  .catalog-product-card {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%;
  }

  .catalog-product-image {
      width: 100%;
      height: 280px;

      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #888;
      font-family: 'Noto Serif JP', serif;
  }

  .catalog-product-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
  }

  .catalog-product-name {
      color: #050505;
      font-size: clamp(16px, 3vw, 20px);
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 1px;
      flex: 1;
  }

  .catalog-download-button {
      font-size: 24px;
      color: white;
      width: 40px;
      height: 40px;
      background: #050505;
      border-radius: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.2s ease;
      flex-shrink: 0;
  }

  .catalog-download-button:hover {
      transform: scale(1.1);
  }

  .catalog-download-arrow {
      width: 6px;
      height: 2px;
      background: white;
      transform: rotate(45deg);
      position: relative;
  }

  .catalog-download-arrow::after {
      content: '';
      position: absolute;
      width: 2px;
      height: 6px;
      background: white;
      top: -2px;
      right: 0;
      transform: rotate(90deg);
  }

  .catalog-contact-section {
      background: white;
      border: 5px solid #F5F2EC;
      margin: 50px 20px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding: clamp(30px, 5vw, 60px);
  }

  .catalog-qr-placeholder {
      width: clamp(120px, 20vw, 188px);
      height: clamp(120px, 20vw, 180px);
      background: black;
      margin-bottom: 40px;
  }

  .catalog-contact-content {
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: center;
  }

  .catalog-contact-info {
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 500px;
      text-align: start;
  }

  .catalog-contact-title {
      color: #050505;
      font-size: clamp(20px, 4vw, 20px);
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 2.6px;
  }

  .catalog-contact-description {
      color: #050505;
      font-size: clamp(14px, 2.5vw, 11px);
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      line-height: 1.8;
      letter-spacing: 0.8px;
  }

  .catalog-contact-buttons {
      display: flex;
      flex-direction: row;
      gap: 20px;
      justify-content: center;
  }

  .catalog-email-button,
  .catalog-line-button {
      background: #050505;
      color: white;
      padding: 15px 22px;
      text-decoration: none;
      font-family: 'Noto Serif JP', serif;
      font-weight: 600;
      font-size: clamp(14px, 2.5vw, 16px);
      letter-spacing: 1.6px;
      transition: background 0.3s ease;
      border-radius: 4px;
      min-height: 60px;

      /* make content inline-flex so icon + text align */
      display: inline-flex;
      align-items: center;
      gap: 10px;
  }

  .catalog-email-button:hover,
  .catalog-line-button:hover {
      background: #333;
  }

  /* Email icon */
  .catalog-email-icon {
      width: 22px;
      height: 15px;

  }


  /* LINE icon */
  .catalog-line-icon {
      width: 18px;
      height: 18px;
      border-radius: 2px;
  }



  /* ===== RESPONSIVE STYLES ===== */
  /* Responsive Design */
  @media (max-width: 1400px) {
    .about-image-left, .about-image-right{
        position: static;
    }
    .store-image {
    overflow: hidden;
    position: absolute;
    top: -320px;
    right: -72px;
    z-index: 1;
}
    .catalog-products-grid {
        display: grid
;
        grid-template-columns: repeat(3 , 1fr);
        gap: 20px;
        padding: 50px 20px;
        max-width: 1200px;
        margin: 0 auto;
    }
  
      .hero-content1, .hero-content2 {
        flex-direction: column;
        position: static;
        transform: none;
        gap: 30px;
        max-width: 100%;
    }
    .hero-image1 img {
    width: 50%;
    height: auto;
    border-radius: 8px;
    position: absolute;
    bottom: 0;
    right: 0%;
}
      .showcase-container {
          width: 100%;
          max-width: 1200px;
      }

      .showcase-background {
          width: 90%;
          left: 5%;
      }

      .showcase-products {
          left: 50px;
          flex-wrap: wrap;
      }
.main-nav a {
    white-space: nowrap;
    color: #050505;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-decoration: none;
}
.header-info span {
    white-space: nowrap;
    color: #050505;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.7px;
}
.phone-text {
    white-space: nowrap;
    color: #050505;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.header-top{
    display: flex;
  padding: 20px 10px;
}
.hero-image2 img {
   
    left: -20%;
}
.hero-image1 img {
  
    right: 0%;
}
  }

  /* Tablet and smaller desktop styles (max-width: 1200px) */
 @media (max-width: 1220px) {
  
        .hero-section1, .hero-section2
 {
        background: linear-gradient(to top, #F5F2EC 71%, transparent 50%);
        padding: 25px 15px;
    }
      .about-image-left img,
  .about-image-right img {
  width: auto;
           height: 67%;
    object-fit: cover;
  }
  .about-image-right {
    right: 0;
    top: -100%;
    transform: translateX(26%);
}
    .contact-info p{
        margin-bottom: 24px;
    }
   .break {
  display: block;   /* ✅ makes span behave like <br> */
}
    .second-store{
        background: linear-gradient(to top, #F5F2EC 100%, transparent 50%);
    }
    .ig-img{
        display: block;
    }
    .social-icons {
    display: flex
;
    gap: 14px;
    }
    .banner-logo img{
        height: 85%;
        width: 85%;
    }
      .catalog-product-name {
          width: fit-content;
          margin-left: 26px;
          color: #050505;
          font-size: clamp(16px, 3vw, 20px);
          font-family: 'Noto Serif JP', serif;
          font-weight: 400;
          line-height: 1.5;
          letter-spacing: 1px;

          flex: none;
      }

      .catalog-product-info {
          display: flex;
          justify-content: left;
          align-items: center;
          gap: 15px;
      }

      .header-top {
          justify-content: space-between;
      }

      .store-section {
        background: linear-gradient(to top, #F5F2EC 88%, transparent 50%);
          margin-top: 0px;
          overflow-x: hidden;
      }

      .second-store-image img {
          width: 90vw;
          height: 100%;
          transform: translate(2px, -281px);
          /* height: auto; */
          border-radius: 8px;
      }

      .award-description {
          margin-top: 9px;
          max-width: 100vw;
          width: 100%;
      }

      .award-text {
          align-items: center;
      }

      .second-store-hero {
          gap: 0px;
      }

      .second-store-text {
        padding: 0px 20px;
          margin-top: 9px;
          text-align: start;
          width: 93%;
          margin-top: 252px;
          position: absolute;
          flex: 1;
      }

      .second-store-image {
          position: absolute;
      }

      .text {
          display: flex;
          flex-direction: column;
          position: absolute;
          left: 32px;
          top: 36px;
          z-index: 2;
      }

      .vertical-text1 {
          gap: 45px;
          font-size: 22px;
          writing-mode: vertical-rl;
          color: #050505;
          font-weight: 400;
          line-height: 38.4px;
          letter-spacing: 1.6px;
          margin-right: 18px;
          display: block;
          z-index: 1000;
      }

       .button1 {
        background: #050505;
        color: white;
        padding: 10px 20px;
        display: flex
;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        z-index: 1000;
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        margin: 44px auto 0;
    }

      .button1::before {
          content: '';
          width: 8px;
          height: 8px;
          background: white;
          border-radius: 50%;
      }

      .button1 span {
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 0.9px;
      }

      .button1 span {
          font-size: 16px;
      }

      .social-icons2 {
          justify-content: center;
      }

      .container {
          padding: 0 15px;
      }

      .copyright {
          text-align: center;
      }

      .hero-pattern {
          top: -50px;
      }

      .page-title {
          font-size: 24px;
      }

   

        .award-section {
        margin: 20px;
        padding: 64px 5px;
    }

      .award-content {
          align-items: center;
          flex-direction: column;
      }



      .award-image {
          width: 100%;
          height: 120px;
      }

      .award-image img {
          width: 100%;
      }

      .address {
          flex-direction: column;
      }

      .store-text {
          text-align: start;
      }

      .address p {
          margin-bottom: 9px;
      }

      .store-hero {
          padding: 20px;
          flex-direction: column-reverse;
          text-align: start;
          align-items: start;
          /* text-align: center; */
      }

      .second-store-hero {

          flex-direction: column;
          text-align: center;
      }

      .store-image {
          position: static;
          overflow: hidden;
      }

      .store-image img {
          width: 100%;
      }

      .store-image {

          width: 100%;
      }

      .second-store-image {
          width: 93%;
      }

      .store-title {
          font-size: 32px;
      }
.schedule-time br{
    display: none;
}
      .second-store-title {
          font-size: 28px;
      }

      .store-details {
          padding: 20px;
          flex-direction: column;
          gap: 40px;
      }

      .catalog-button {
          width: 80px;
          height: 80px;
          font-size: 12px;
          bottom: 20px;
          right: 20px;
      }

      .schedule-row {
          flex-direction: column;
          gap: 10px;
      }

      .schedule-time {
          width: 100%;
          font-size: 14px;
      }

      .user-feedback-card {
          padding: 60px 40px;
      }

      .customer-profile-section {
          width: 100%;
      }

      .profile-header-row {
          flex-wrap: wrap;
          gap: 8px;
      }

      .rating-timestamp-row {
          flex-wrap: wrap;
          gap: 8px;
      }

      .customer-name-text,
      .customer-demographic {
          font-size: 15px;
      }

      .feedback-title-text,
      .feedback-content-text,
      .shop-response-title,
      .shop-response-content {
          font-size: 15px;
      }

      .button-label-text {
          font-size: 16px;
      }

      .product-showcase-section {
          padding: 40px 20px;
      }

      .featured-title {
          font-size: 36px;
          letter-spacing: 3.6px;
      }

      .product-card {
          width: 100%;
          flex-direction: column;
          text-align: center;
      }

      .product-image,
      .product-info {
          width: 100%;
      }

      .categories-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .category-card {
          height: 300px;
      }

      .header-top {
          padding: 15px 20px;
          flex-wrap: wrap;
      }

      .logo {
          width: 120px;
          height: 40px;
      }

      .header-right {
          flex-direction: row;
          gap: 15px;
      }

      .phone-text {
          display: none;
      }

      .main-nav {
          display: none;
      }

      .logo img {
          height: 112%;
      }

      .mobile-menu-btn {
          gap: 4px;
          display: flex;
          opacity: 0.7;
      }

      .hero-center img,
      .hero-right img {
          height: 100%;
          width: 100%;
      }

      .hero-section {
          height: auto;
      }

      .hero-left {
          height: 250px;
      }

      .hero-center,
      .hero-right {
          height: 100%;
      }

      .hero-text .vertical-text {
          font-size: 20px;
      }

      .news-section {
          padding: 15px 20px;
          flex-direction: column;
          gap: 10px;
          text-align: center;
      }

      .news-left {
          flex-direction: column;
          gap: 5px;
      }

      .news-content {
          white-space: normal;
          /* Allow wrapping on small screens */
      }

      .news-arrow {
          font-size: 18px;
      }

      .about-section {
          overflow-x: hidden;
          padding: 30px 20px;
      }

      .about-title .vertical-title {
          writing-mode: vertical-lr;
          font-size: 20px;
      }

      .mokab-floating-small {
          visibility: visible;
      }

      .about-image-left {
          left: 0;
          bottom: 0;
      }

      .add-button {
          display: none;
      }

      .about-text {
        writing-mode: horizontal-tb;
          display: flex;
          justify-content: center;
          /* center horizontally */
          align-items: flex-start;
          /* keep it on top */
          gap: 15px;
          /* space between each <p> */
          margin-top: 10px;
          /* adjust spacing from top */
      }


      .header-top {
          padding: 15px 20px;
          flex-wrap: wrap;
          gap: 15px;
      }

      .logo {
          width: 120px;
          height: 40px;
      }

      .header-right {
          flex-direction: row;
          gap: 10px;
      }

      .header-info {
          gap: 10px;
      }

      .header-info span {
          font-size: 12px;
          display: none;
      }

      .phone-number {
          display: flex;
      }

      .phone-text {
          font-size: 14px;
      }

      .main-nav {
          display: none;
      }

      .mobile-menu-btn {
          display: flex;
      }

      .hero-section {
          margin-top: 10px;
          height: auto;
      }

      .hero-left {
          height: 250px;
      }
#staff-assistance .content{
    text-align: start;
}
  .review-card .flower-img {
    display: none;
  }

      .hero-text .vertical-text {
          font-size: 20px;
      }

      .hero-overlay-text {
          font-size: 24px;
          letter-spacing: 1px;
      }

      .catalog-btn {
          width: 80px;
          height: 80px;
          right: 15px;
          bottom: -40px;
      }

      .catalog-btn span {
          font-size: 12px;
      }

      .news-section {
          padding: 15px 20px;
          flex-direction: column;
          gap: 15px;
          text-align: left;
      }

      .news-left {
          flex-direction: column;
          gap: 10px;
      }

      .news-content {
          white-space: normal;
          font-size: 14px;
      }

      .news-date {
          font-size: 14px;
      }

      .about-section {
          padding: 40px 20px;
          margin-bottom: 60px;
      }

      .about-title .vertical-title {
          font-size: 20px;
      }

      .about-text {
          font-size: 14px;
          line-height: 1.6;
      }

      .hero-section1,
      .hero-section2 {
          padding: 30px 20px;
          height: auto;
      }

      .hero-title1 {
          font-size: 30px;
          letter-spacing: 1.5px;
          line-height: 1.3;
      }

      .hero-description1 {
          font-size: 14px;
          line-height: 1.6;
      }

      .product-showcase-section {
          padding: 40px 20px;
      }

      .featured-title {
          font-size: 28px;
          letter-spacing: 1.5px;
      }

      .featured-description {
          font-size: 14px;
          line-height: 1.6;
      }

      .product-card {
          flex-direction: column;
          text-align: center;
      }

      .product-image,
      .product-info {
          width: 100%;
      }

      .product-name {
          font-size: 14px;
      }

      .categories-section {
          padding: 40px 20px;
      }

    

      .category-card {
          height: 250px;
      }

      .category-name {
          font-size: 24px;
      }

   

      .recommended-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
      }

      .section-title {
          font-size: 24px;
          padding: 16px;
      }

      .decorative-line1 img {
          height: 62%;
          width: 15%;
      }

      .banner {
          margin-top: 60px;
      }

      .story-section {
          padding: 40px 20px;
          height: auto;
      }

      .story-box {
          height: 250px;
      }

      .story-play {
          font-size: 16px;
      }

      .section1 {
          padding: 40px 20px;
      }

      #staff-assistance h2 {
          font-size: 22px;
      }

      .banner1 {
     padding: 15px;
        margin: 78px 15px;
      }

      .banner-text {
          font-size: 16px;
      }

      .banner-text::before {
          width: 80px;
          height: 55px;
          left: -40px;
      }
#repair-support {
    position: relative; /* Required for overlay positioning */
    height: 422px;
    align-items: center;
    background: url(./assets/Repair.png) center / cover no-repeat;
    color: #fff;
    display: flex;
    justify-content: flex-start;
    overflow: hidden; /* Prevent overlay overflow */
}


#repair-support::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Adjust opacity for darkness */
    z-index: 1;
}

#repair-support > * {
    position: relative; /* Bring content above overlay */
    z-index: 2;
}
      #repair-support .content {
          padding-left: 30px;
      }

      #repair-support h2,
      #repair-support1 h2 {
          font-size: 22px;
      }

      .reviews-section {
          padding: 40px 20px;
      }

      .ig-container {
          grid-template-columns: repeat(3, 1fr);
          gap: 15px;
      }

      .Ig-section {
          padding: 0px;
      }

      .ig-card img {
          width: 100%;
      }

      #repair-support1 .bg-img {
          position: absolute;
          top: 0;
          left: -77px;
          width: 230%;
          height: auto;
          object-fit: contain;
          z-index: 0;
      }

      .footer-container {
          padding: 0px;
      }

      .calendar-section {
          padding: 40px 20px;
      }

      .calendar-container {
          flex-direction: column;
          gap: 30px;
      }

      .guide-container {
          padding: 40px 20px;
      }

      .footer-container {
          padding: 30px 20px;
      }

      .footer-links {
          display: none;
          grid-template-columns: 1fr;
          gap: 15px;
      }

      .mokab-breadcrumb {
          padding: 15px;
          font-size: 12px;
      }

      .mokab-product-container {
          padding: 15px;
          gap: 30px;
      }

      .mokab-product-title {
          font-size: 24px;
      }

      .mokab-price {
          font-size: 16px;
      }

      .mokab-select-wrapper {
          width: 100%;
          max-width: 300px;
      }

      .mokab-add-cart,
      .mokab-add-favorite {
          padding: 0 40px;
          font-size: 16px;
          height: 60px;
      }

      .mokab-thumbnails-grid {
          grid-template-columns: repeat(5, 1fr);
          gap: 10px;
          padding: 0 15px;
      }

      .mokab-thumbnail {
          height: 70px;
      }

      .mokab-tab-navigation {
          gap: 10px;
      }

      .mokab-tab {
          padding: 8px 20px;
          font-size: 16px;
      }

      .mokab-details-grid {
          gap: 30px;
          padding: 20px 15px;
      }

      .mokab-small-images {
          gap: 15px;
          padding: 0 15px;
      }

      .mokab-section-title {
          font-size: 28px;
      }

      .mokab-specs-table {
          margin: 0 15px 60px;
          border-radius: 20px;
      }

      .mokab-spec-row {
          grid-template-columns: 1fr;
      }

      .mokab-spec-label {
          border-bottom: 1px solid #DDDDDD;
          background: #f0f0f0;
      }

      .mokab-benefits-grid {
          gap: 30px;
          padding: 20px 15px;
      }

      .mokab-notice-section {
          padding: 40px 20px;
          margin: 40px 15px;
      }

      .mokab-notice-dots {
          gap: 5px;
      }

      .mokab-notice-title {
          margin-left: 10px;
          font-size: 18px;
      }

      .news-arrow {
          display: none;
      }


      .hero-text {
          display: none;
      }

      .hero-button {
          display: none;
      }


.banner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
      .second-store-hero {
          height: 344px;
      }
      

.about-text p {
    writing-mode: vertical-lr;
    white-space: nowrap;
    margin: 0;
}
  }

  @media (max-width: 1024px) {
    .catalog-contact-buttons {
        margin: 45px 0px;
        display: flex
;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
    }
   .catalog-products-grid {
        display: grid
;
        grid-template-columns: repeat(2 , 1fr);
        gap: 20px;
        padding: 50px 20px;
        max-width: 1200px;
        margin: 0 auto;
    }
     .about-image-left, .about-image-right{
        position: absolute;
    }
      .mokab-product-container {
          grid-template-columns: 1fr;
          gap: 40px;
          max-width: 100%;
      }

      .mokab-main-image {
          order: 1;
          max-width: 600px;
          margin: 0 auto;
      }

      .mokab-product-info {
          order: 2;
          max-width: 600px;
          margin: 0 auto;
      }

      .mokab-floating-cart {
          right: 20px;
          width: 80px;
          height: 80px;
      }

      .mokab-floating-text {
          font-size: 12px;
      }

      .mokab-floating-icon {
          width: 16px;
          height: 16px;
      }
  }

  /* Tablet styles (max-width: 968px) */
  @media (max-width: 968px) {
        .categories-grid {
          grid-template-columns: repeat(1, 1fr);
      }
      .hero-section {
          flex-direction: column;
          height: auto;
      }

      .hero-left {
          height: 300px;
      }

      .hero-center,
      .hero-right {
          width: 100%;
          height: 400px;
      }

      .hero-text {
          position: static;
          padding: 40px 20px;
          text-align: center;
      }

      .hero-text .vertical-text {
          writing-mode: horizontal-tb;
          font-size: 24px;
          display: block;
          margin-bottom: 10px;
      }

      .hero-button {
          position: static;
          margin: 20px auto;
          width: fit-content;
      }

      .hero-overlay-text {
          font-size: 36px;
          letter-spacing: 2px;
      }

      .catalog-btn {
          position: static;
          margin: 20px auto;
      }

      .about-section {
          flex-direction: column;
          height: auto;
          padding: 40px 20px;
      }

      .about-left {
          padding-right: 0;
          margin-bottom: 40px;
      }

      .about-title .vertical-title {
     
          font-size: 24px;
          margin-left: 0;
          margin-bottom: 10px;
      }

  

      .about-image {
          width: 100%;
          height: 300px;
          max-width: 500px;
          margin: 0 auto;
      }

      .header-top {
          padding: 15px 30px;
      }

      .main-nav {
          gap: 20px;
      }

      .main-nav a {
          font-size: 14px;
      }

      .hero-section {
          flex-direction: column;
          height: auto;
      }

      .hero-left {
          height: 300px;
          width: 100%;
      }

      .hero-center,
      .hero-right {
          width: 100%;
          height: 400px;
      }

      .hero-text {
          position: static;
          padding: 30px 20px;
          text-align: center;
      }

      .hero-text .vertical-text {
          writing-mode: horizontal-tb;
          font-size: 24px;
          display: block;
          margin-bottom: 10px;
          margin-right: 0;
      }

      .hero-button {
          position: static;
          margin: 20px auto;
          width: fit-content;
      }

      .hero-overlay-text {
          font-size: 36px;
          letter-spacing: 2px;
          position: absolute;
          bottom: 20px;
          right: 20px;
      }

      .catalog-btn {
          position: static;
          margin: 20px auto;
      }

      .news-section {
          padding: 20px 30px;
      }

      .about-section {
          flex-direction: column;
          height: auto;
          padding: 60px 30px;
          margin-bottom: 80px;
      }

      .about-image-left,
      .about-image-right {
          /* position: static; */
          transform: none;
          width: 100%;
          max-width: 387px;
          height: 300px;
          margin: 0 auto 30px auto;
      }

      .about-image-right {
        right: -159px;
          top: -36px;
      }

      .about-left {
          max-width: 100%;
          margin-bottom: 30px;
      }

      .about-title {
          justify-content: center;
          text-align: center;
      }

 

      .about-text {
          height: auto;
          text-align: start;
          line-height: 1.8;
      }

      .about-text p {
          writing-mode: vertical-lr;
          white-space: nowrap;
          margin-bottom: 10px;
      }

      .hero-section1,
      .hero-section2 {
          height: auto;
          padding: 40px 30px;
      }

      .hero-content1,
      .hero-content2 {
          flex-direction: column;
          position: static;
          transform: none;
          gap: 30px;
          max-width: 100%;
      }

      .hero-image1 img,
      .hero-image2 img {
          position: static;
          width: 100%;
          max-width: 400px;
      }

      .hero-text2 {
          visibility: visible;
      }

      .hero-text1 {
        margin-top: 10px;
          display: block;
          justify-content: center;
          align-items: center;
          width: 100%;
      }
.hero-text1 a{
    display: none;
}
      .hero-title1 {
          font-size: 30px;
          letter-spacing: 2px;
      }

      .product-grid {
          flex-direction: column;
          gap: 30px;
          align-items: center;
      }

      .product-card {
          width: 100%;
          max-width: 500px;
      }

      .categories-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;
      }

      .categories-grid1 {
          grid-template-columns: 1fr;
          gap: 20px;
      }

      .recommended-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 15px;
      }

      .story-section {
          height: auto;
          padding: 60px 30px;
      }

      .story-box {
          width: 100%;
          height: 300px;
      }

      .section1 {
          padding: 40px 30px;
      }

      #staff-assistance {
          flex-direction: column;
          text-align: center;
      }

      #staff-assistance img {
          width: 100%;
          max-width: 400px;
          order: -1;
      }

      .banner1 {
          flex-direction: column;
          text-align: center;
          padding: 30px;
          margin: 40px 20px;
      }

      .banner-text::before {
        
          width: 100px;
          height: 70px;
          margin: 0 auto 20px auto;
      }

      #repair-support .content {
          padding-left: 60px;
          max-width: 90%;
      }

      #repair-support1 .content {
          padding: 40px 20px;
      }

      .reviews-container {
          grid-template-columns: 1fr;
          gap: 30px;
      }

      .review-card {
          width: 100%;
      }

      .ig-container {
                padding: 30px 15px;
          grid-template-columns: 1fr;
          gap: 20px;
      }

      .calendar-container {
          gap: 40px;
      }

      .guide-sections {
          flex-direction: column;
          gap: 30px;
      }

      .footer-container {
          flex-direction: column;
          gap: 30px;
          text-align: center;
      }

      .footer-links {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  @media (max-width: 700px) {
    .category-card img {
      width: 100%;
      height: 100%;
      object-fit: contain;
  }
      .banner {
          flex-direction: column;
          text-align: center;
          gap: 20px;
      }

      .banner-text::before {
          display: none;
      }
  }

  /* Mobile styles (max-width: 768px) */
 

  /* Mobile styles (max-width: 480px) */
  @media (max-width: 600px) {
    .category-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
        .categories-grid {
          grid-template-columns: repeat(1, 1fr);
      }
      .award-images {
          gap: 0px;
          width: 100%;
          justify-content: center;
      }

      .award-image {
          width: 100%;
          height: 120px;
      }

      .award-image img {
          width: 100%;
      }

      .catalog-products-grid {
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          /* ✅ one column */
          gap: 20px;
          padding: 50px 20px;
          max-width: 1200px;
          margin: 0 auto;
      }

      .user-feedback-card {
          padding: 40px 20px;
      }

      .testimonial-content-area {
          gap: 30px;
      }

      .profile-header-row {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
      }

      .user-avatar-container {
          align-self: flex-start;
      }

      .rating-timestamp-row {
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
      }

      .customer-name-text,
      .customer-demographic {
          font-size: 14px;
      }

      .feedback-title-text,
      .feedback-content-text,
      .shop-response-title,
      .shop-response-content {
          font-size: 14px;
          line-height: 22px;
      }

      .post-timestamp,
      .shop-response-timestamp {
          font-size: 13px;
      }

      .button-label-text {
          font-size: 15px;
      }

      .featured-title {
          font-size: 28px;
          letter-spacing: 2.8px;
      }

      .featured-description {
          font-size: 14px;
          line-height: 28px;
      }

      .category-name {
          font-size: 24px;
      }

      .header-top {
          padding: 10px 15px;
      }

      .hero-text {
          padding: 20px 15px;
      }

      .text {
          display: flex;
          flex-direction: column;
          position: absolute;
          left: 32px;
          top: 42px;
          z-index: 2;
      }

      .hero-section2 {
          margin-top: 0px;
      }

  

      .hero-button span {
          font-size: 16px;
      }

      .catalog-btn {
          position: absolute;
          margin: 0px;
          width: 80px;
          height: 80px;
      }

      .news-info {
          margin-left: 0px;
          width: 96%;
          gap: 3px;
          display: flex;
          flex-direction: column;
          align-items: left;
          padding-right: 70px;
      }



      .catalog-btn span {
          font-size: 12px;
      }

      .news-arrow {
          display: none;
      }

      .news-section {
          padding: 15px;
      }

       #repair-support {
        height: 425px;
        margin: 20px;
    }

      .about-section {
          overflow-x: hidden;
          padding: 20px 15px;
      }

      .header-top {
          padding: 10px 15px;
      }

      .logo {
          width: 100px;
          height: 35px;
      }

      .phone-text {
          font-size: 12px;
      }

      .hero-left {
          height: 200px;
      }

      .hero-center,
      .hero-right {
          height: auto;
      }

      .hero-text {
          padding: 20px 15px;
      }

      .hero-text .vertical-text {
          font-size: 18px;
      }

      .hero-button span {
          font-size: 16px;
      }




      .hero-overlay-text {
          font-size: 28;
          letter-spacing: 0.5px;
      }

      .catalog-btn {
          width: 70px;
          height: 70px;
          right: 10px;
          bottom: -35px;
      }

      .catalog-btn span {
          font-size: 11px;
      }

      .news-section {
          padding: 15px;
      }

      .news-date,
      .news-content {
          font-size: 13px;
      }

      .about-section {
          overflow-x: hidden;
          padding: 30px 15px;
      }

      .about-title .vertical-title {
          writing-mode: vertical-lr;
          font-size: 11px;
      }

    .about-image-right{
                right: -160px;
        top: 0;
        transform: translateX(26%);
    }

      .about-image-left img, .about-image-right img {
        width: auto;
        height: 37%;
        object-fit: cover;
    }
        .about-image-left {
        left: 48px;
        bottom: -90px;
        transform: translate(-88px, -345px);
    }

      .store-details {
          padding: 0px;
      }

      .store-hero {
          padding: 0px;
          flex-direction: column-reverse;
          text-align: start;
          align-items: start;
      }

      .overlay h3 {
          font-size: 12px;
      }

      .price {
          font-size: 12px;
      }

      .overlay-arrow {
          display: none;
      }

      .banner img {
          width: 100%;
          height: 29%;
          object-fit: contain;
          display: block;
      }

      .story-play {
          padding: 0px;
      }

      .banner {
          height: auto;
      }

      .overlay {
          position: static;
          font-size: 56px;
          color: #050505;

          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: white;
          color: #050505;
          padding: 5px;
          display: flex;
          flex-direction: column;
          justify-content: end;
          align-items: start;

          transform: none;
      }

      .hero-content2 {
          margin-left: 0px;
      }

      .about-text {
          font-size: 13px;
      }

      .about-title {
          display: flex;
          align-items: flex-start;
          margin-bottom: 40px;
          gap: 2px;
      }

      .hero-section1,
      .hero-section2 {
            background: linear-gradient(to top, #F5F2EC 71%, transparent 50%);

          padding: 25px 15px;
      }

    

      .hero-description1 {
          font-size: 13px;
      }

      .product-showcase-section {
          padding: 30px 15px;
      }

      .featured-title {
          font-size: 24px;
          letter-spacing: 1px;
      }

      .featured-description {
          font-size: 13px;
      }

      .product-name {
          font-size: 13px;
      }

      .product-price {
          font-size: 14px;
      }

      .categories-section {
          padding: 30px 15px;
      }

      .category-card {
          height: 200px;
      }

      .category-name {
          font-size: 20px;
      }

   

      .second-store-image img {
          width: 100%;
          transform: none;
          height: auto;
          border-radius: 8px;
      }

      .second-store-hero {
          height: 400px;
      }

      .section-title {
          font-size: 20px;
   
      }

      .story-section {
          padding: 30px 15px;
      }

      .story-box {
          height: 200px;
      }

      .section1 {
          padding: 30px 15px;
      }

      #staff-assistance h2 {
          font-size: 20px;
      }

      .story-box-wrapper {
          gap: 5px;
      }

  

      .banner-text {
          font-size: 14px;
      }

      #repair-support .content {
          padding-left: 20px;
      }

      .hero-left {
          display: none;
      }

      #repair-support1 h2 {
          font-size: 14px;
      }

      .reviews-section {
          padding: 30px 15px;
      }

      .review-card {
          padding: 20px;
      }

      .review-card h3 {
          font-size: 16px;
      }

      .social-icon:nth-child(2) {
          display: none;
      }

      .review-card p {
          font-size: 14px;
      }

      .hero-text {
          display: none;
      }

      .calendar-section {
          padding: 30px 15px;
      }

      .guide-container {
          padding: 30px 15px;
      }

      .guide-section h3 {
          font-size: 16px;
      }

      .guide-section p {
          font-size: 13px;
      }

      footer {
          padding: 30px 15px;
      }

      .display {
          display: flex;
          flex-direction: column;
          /* stack vertically */
          align-items: center;
          /* center horizontally */
          justify-content: center;
          /* center vertically if parent has height */
          gap: 16px;
          /* space between buttons */
          margin-top: 20px;
          /* optional spacing from above */
      }

      .display .button {
          display: inline-flex;
          align-items: center;
          padding: 10px 20px;
          background: #050505;
          color: white;
          text-decoration: none;
          font-size: 16px;
          font-weight: 600;

      }

      .mokab-breadcrumb {
          padding: 10px;
      }

      .mokab-breadcrumb-separator {
          margin: 0 5px;
      }

      .mokab-product-container {
          padding: 10px;
          gap: 20px;
      }

      .mokab-product-title {
          font-size: 20px;
      }

      .mokab-product-code {
          font-size: 14px;
      }

      .mokab-price {
          font-size: 15px;
      }

      .mokab-form-section {
          gap: 15px;
      }

      .mokab-action-buttons {
          gap: 15px;
      }

      .mokab-add-cart,
      .mokab-add-favorite {
          padding: 0 20px;
          font-size: 14px;
          height: 50px;
      }

      .mokab-thumbnails-grid {
          grid-template-columns: repeat(4, 1fr);
          gap: 8px;
          padding: 0 10px;
      }

      .mokab-thumbnail {
          height: 60px;
      }

      .mokab-floating-small {
          visibility: visible;
      }

      .mokab-floating-cart {
          right: 15px;
          width: 81px;
          height: 76px;
      }

      .mokab-floating-text {
          font-size: 10px;
      }

      .mokab-floating-icon {
          width: 22px;
          height: 21px;
      }

      .mokab-tab-navigation {
          flex-direction: column;
          gap: 10px;
          padding: 0 10px;
      }

      .mokab-tab {
          padding: 10px 20px;
          font-size: 14px;
          justify-content: center;
      }

      .mokab-features-title {
          font-size: 18px;
      }

      .mokab-features-description {
          font-size: 14px;
      }

      .mokab-details-grid {
          grid-template-columns: 1fr;
          gap: 20px;
          padding: 15px 10px;
      }

      .mokab-detail-text {
          font-size: 14px;
      }

      .mokab-small-images {
          grid-template-columns: 1fr;
          gap: 10px;
          padding: 0 10px;
      }

      .mokab-uesugi-model-section {
          margin: 20px auto;
          padding: 15px;
      }

      .mokab-uesugi-title {
          font-size: 18px;
      }

      .mokab-section-title {
          font-size: 24px;
      }

      .mokab-section-subtitle {
          font-size: 14px;
      }

      .mokab-benefits-grid {
          grid-template-columns: 1fr;
          gap: 20px;
          padding: 15px 10px;
      }

      .mokab-benefit-title {
          font-size: 18px;
      }

      .mokab-benefit-text {
          font-size: 14px;
      }

      .mokab-notice-section {
          padding: 20px 15px;
          margin: 20px 10px;
      }

      .mokab-notice-decoration {
          flex-direction: column;
          align-items: flex-start;
          gap: 15px;
      }

      .mokab-notice-title {
          margin-left: 0;
          font-size: 16px;
      }

      .mokab-notice-text {
          font-size: 14px;
      }

      .store-image img {
          width: 100%;
      }

      .catalog-contact-buttons {
          margin: 45px 0px;
          display: flex;
          flex-direction: column;
          gap: 20px;
          justify-content: center;
      }

      .catalog-contact-info {
          text-align: center;
      }

      .store-section {
          margin-top: 0px;
      }

      .second-store {
          margin-top: 0px;
          padding: 0px;
      }

      .social-icons2 {
          justify-content: center;
      }

      .copyright {
          text-align: center;
      }

      .product-name {
          text-align: start;
      }

      .add-button {
          display: none;
      }

      .br {
          display: none;
      }

      .award-title {
          white-space: inherit;
          font-weight: 100;
          font-size: 26px;
          line-height: 39px;
          letter-spacing: 2.6px;
          margin-bottom: 10px;
          display: inline;
          /* default = show */

      }
  }

  /* Specific 375px mobile styles */
  @media (max-width: 375px) {
      .catalog-header-section {
          padding: 40px 15px 30px;
      }



      .catalog-product-image {
          height: 250px;
      }

      .catalog-contact-section {
          margin: 30px 15px;
          padding: 30px 20px;
      }

      .catalog-contact-buttons {
          flex-direction: column;
          width: 100%;
      }

      .catalog-email-button,
      .catalog-line-button {
          width: 100%;
          justify-content: center;
          padding: 15px 20px;
      }

      .catalog-contact-title {
          font-size: 18px;
          letter-spacing: 1.5px;
      }

      .main-header {
          padding: 40px 0;
      }

      .intro-text {
          font-size: 14px;
          margin-bottom: 60px;
      }

      .award-section {
          padding: 20px 15px;
          margin-bottom: 60px;
      }

      .award-title {
          font-size: 22px;
          line-height: 32px;
      }

      .award-images {
          flex-direction: column;
          align-items: center;
      }

      .store-section {
          padding: 40px 0 60px;
      }

      .store-title {
          font-size: 28px;
          letter-spacing: 2.8px;
      }

      .second-store {
          padding: 60px 0;
      }

      .second-store-title {

          font-size: 24px;
          letter-spacing: 2.4px;
      }

      .catalog-button {
          width: 70px;
          height: 70px;
          font-size: 11px;
          bottom: 15px;
          right: 15px;
      }

      .user-feedback-card {
          padding: 30px 15px;
      }

      .testimonial-content-area {
          gap: 25px;
      }

      .customer-profile-section {
          gap: 8px;
      }

      .user-avatar-container {
          width: 35px;
          height: 35px;
          padding: 8px;
      }

      .avatar-icon-small {
          width: 7px;
          height: 7px;
      }

      .avatar-icon-large {
          width: 16px;
          height: 7px;
      }

      .star-icon {
          width: 10px;
          height: 10px;
      }

      .star-icon.star-wide {
          width: 12px;
          height: 10px;
      }

      .star-icon.star-medium {
          width: 11px;
          height: 10px;
      }

      .customer-name-text,
      .customer-demographic {
          font-size: 13px;
          line-height: 20px;
      }

      .feedback-title-text,
      .feedback-content-text,
      .shop-response-title,
      .shop-response-content {
          font-size: 13px;
          line-height: 20px;
          letter-spacing: 0.60px;
      }

      .post-timestamp,
      .shop-response-timestamp {
          font-size: 12px;
          line-height: 18px;
      }

      .post-testimonial-btn {
          padding: 8px 16px;
      }

      .button-indicator-dot {
          width: 6px;
          height: 6px;
      }

      .button-label-text {
          font-size: 14px;
          line-height: 21px;
          letter-spacing: 0.70px;
      }

      .header-top {
          padding: 8px 12px;
      }

      .logo {
          width: 90px;
          height: 30px;
      }

      .phone-text {
          font-size: 11px;
      }

      .hero-left {
          height: 180px;
      }

      .hero-center,
      .hero-right {
          height: 220px;
      }

      .hero-text .vertical-text {
          font-size: 16px;
      }

    

      .catalog-btn {
          width: 60px;
          height: 60px;
          right: 8px;
          bottom: -30px;
      }

      .catalog-btn span {
          font-size: 10px;
          line-height: 1.2;
      }

      .news-section {
          padding: 12px;
      }

    
      .featured-title {
          font-size: 22px;
      }

      .category-card {
          height: 180px;
      }

      .category-name {
          font-size: 18px;
      }

      .section-title {
          font-size: 18px;
          padding: 25px 5%;
      }

      .recommended-grid {
          gap: 15px;
      }

      .story-box {
          height: 180px;
      }

      .banner1 {
          padding: 12px;
      }

      .banner-text {
          font-size: 13px;
      }

      .reviews-section,
      .calendar-section,
      .guide-container {
          padding: 25px 12px;
      }

      .review-card {
          padding: 16px;
      }

      .calendar-container {
          gap: 20px;
      }

      .calendar th,
      .calendar td {
          width: 25px;
          height: 25px;
          font-size: 12px;
      }

      .mokab-breadcrumb {
          padding: 8px;
          font-size: 11px;
      }

      .mokab-product-container {
          padding: 8px;
          gap: 15px;
      }

      .mokab-product-title {
          font-size: 18px;
      }

      .mokab-price {
          font-size: 14px;
      }

      .mokab-add-cart,
      .mokab-add-favorite {
          padding: 0 15px;
          font-size: 13px;
          height: 45px;
      }

      .mokab-thumbnails-grid {
          grid-template-columns: repeat(3, 1fr);
          gap: 6px;
          padding: 0 8px;
      }

      .mokab-thumbnail {
          height: 50px;
      }

      .mokab-floating-cart {
          right: 10px;
          width: 50px;
          height: 50px;
      }

      .mokab-floating-text {
          font-size: 9px;
      }

      .mokab-floating-icon {
          width: 10px;
          height: 10px;
      }

      .mokab-tab {
          padding: 8px 15px;
          font-size: 13px;
      }

      .mokab-features-title {
          font-size: 16px;
      }

      .mokab-features-description {
          font-size: 13px;
      }

      .mokab-details-grid {
          padding: 12px 8px;
      }

      .mokab-detail-text {
          font-size: 13px;
      }

      .mokab-small-images {
          padding: 0 8px;
      }

      .mokab-section-title {
          font-size: 20px;
      }

      .mokab-section-subtitle {
          font-size: 13px;
      }

      .mokab-benefit-title {
          font-size: 16px;
      }

      .mokab-benefit-text {
          font-size: 13px;
      }

      .mokab-notice-section {
          padding: 15px 10px;
          margin: 15px 8px;
      }

      .mokab-notice-title {
          font-size: 14px;
      }

      .mokab-notice-text {
          font-size: 13px;
      }

      .mokab-spec-label,
      .mokab-spec-value {
          padding: 15px;
          font-size: 13px;
      }
  }

  /* Accessibility improvements */
  @media (prefers-reduced-motion: reduce) {
      * {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
      }

      .mokab-floating-cart:hover {
          transform: translateY(-50%) scale(1);
      }
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
      .mokab-add-cart {
          border: 2px solid white;
      }

      .mokab-add-favorite {
          border: 2px solid #050505;
      }

      .mokab-thumbnail.active {
          border: 3px solid #050505;
      }
  }