/** Shopify CDN: Minification failed

Line 263:42 Expected ":"

**/
/* Unebi brand layer (keep changes centralized; override Dawn/Rise defaults) */

:root {
  /* Lime accent as RGB tuple for use in rgba() */
  --unebi-accent: 185, 255, 42;
  /* #B9FF2A */
  --unebi-dark: 17, 19, 24;
  /* #111318 */

  /* Override font body family */
  --font-body-family: "Noto Sans Japanese", sans-serif;

  /* Typography scale - Mobile first */
  --unebi-h1-mobile: 2.4rem;
  --unebi-h1-desktop: 3.2rem;
  --unebi-h2-mobile: 2rem;
  --unebi-h2-desktop: 2.6rem;
  --unebi-h3-mobile: 1.8rem;
  --unebi-h3-desktop: 2.2rem;
  --unebi-body-mobile: 1.4rem;
  --unebi-body-desktop: 1.6rem;
  --unebi-small-mobile: 1.2rem;
  --unebi-small-desktop: 1.4rem;
}

/* Override color scheme variables for homepage header transparency */
body.template-index :root,
body.template-index {
  --color-background-scheme-6: transparent !important;
  --gradient-background-scheme-6: transparent !important;
}

/* Prevent horizontal scrolling globally */
html,
body:not(.template-index) {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Remove any margin/padding from html and body - CRITICAL */
html {
  margin: 0 !important;
  padding: 0 !important;
}

body {
  margin: 0 !important;
  overflow-y: hidden !important;

}

/* Homepage - keep overflow hidden but no width constraints */
body.template-index {
  overflow-x: hidden !important;
  margin: 0 !important;
  padding-top: 39px !important;
}

/* Ensure header-group starts at absolute top */
.shopify-section-group-header-group {
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile: ensure no gaps at top - HIGHEST PRIORITY */
@media screen and (max-width: 749px) {
  html {
    margin: 0 !important;
    padding: 0 !important;
  }

  body {
    margin: 0 !important;
  }

  body.template-index {
    padding-top: 39px !important;
    margin-top: 0 !important;
  }

  body:not(.template-index) {
    padding-top: 100px !important;
    margin-top: 0 !important;
  }

  /* Mobile: Force announcement and header to be fixed and visible - SAME AS PC */
  .shopify-section-group-header-group {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1001 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    /* Prevent any transform that might hide it */
  }

  /* Mobile: Announcement bar should always be at top and visible */
  .shopify-section[class*="announcement"],
  section[id*="announcement"],
  .announcement-bar-section {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1000 !important;
    margin: 0 !important;
    transform: none !important;
    /* Prevent any transform that might hide it */
    opacity: 1 !important;
    /* Ensure it's visible */
    visibility: visible !important;
    /* Ensure it's visible */
  }

  /* Mobile: Header should be fixed below announcement */
  .shopify-section.shopify-section-header,
  .section-header,
  section[id*="shopify-section"][id*="header"]:not([id*="announcement"]) {
    position: fixed !important;
    top: 39px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1001 !important;
    transform: none !important;
    /* Prevent any transform that might hide it */
    opacity: 1 !important;
    /* Ensure it's visible */
    visibility: visible !important;
    /* Ensure it's visible */
  }

  /* Mobile: Header wrapper height */
  .header-wrapper,
  sticky-header.header-wrapper {
    height: 61px !important;
  }

  /* Mobile: Prevent header from being hidden by StickyHeader JS */
  .shopify-section-header-hidden {
    top: 39px !important;
    /* Force header to stay below announcement */
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
  }

  /* Also prevent the section-header itself from being moved */
  .section-header.shopify-section-header-hidden {
    top: 39px !important;
    position: fixed !important;
  }

  /* Prevent any transform or translate that might hide header */
  .section-header {
    top: 39px !important;
    position: fixed !important;
  }
}

/* Global tone: a bit tighter and more "sporty" */
/* Apply 120px padding to all pages EXCEPT homepage */
body:not(.template-index) {
  letter-spacing: 0.02rem;
  color: #f7f7f7;
  /* Add padding for fixed header (announcement + header) */
  padding-top: 120px;
  /* 39px (announcement) + 81px (header) */
}

@media screen and (max-width: 749px) {
  body:not(.template-index) {
    padding-top: 100px;
    /* 39px (announcement) + 61px (header) */
  }
}

/* Homepage: only 39px padding (announcement bar only, header overlays content) */
/* MUST BE 39px - highest priority */
html body.template-index,
body.template-index,
body.template-index[class*="template"] {
  letter-spacing: 0.02rem;
  color: #f7f7f7;
  padding-top: 39px !important;
  margin-top: 0 !important;
}

@media screen and (max-width: 749px) {

  html body.template-index,
  body.template-index,
  body.template-index[class*="template"] {
    padding-top: 39px !important;
  }
}

.h0,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0.02em;
  font-weight: 700;
}

/* Link accent */
a,
.link {
  text-underline-offset: 0.25em;
}

a:hover,
.link:hover {
  text-decoration-thickness: 0.14rem;
}

/* Accent helpers */
.unebi-accent {
  color: rgb(var(--unebi-accent));
}

.unebi-accent-bg {
  background: rgb(var(--unebi-accent));
  color: rgb(var(--unebi-dark));
}

/* Homepage hero section fills viewport minus announcement bar */
/* Parent section: define width and height, children will use 100% */
/* Works for both image-banner and slideshow */
/* Use 100% instead of 100vw to prevent horizontal overflow */
/* ONLY apply height on homepage */
.template-index #MainContent>section[id*="hero"]:first-of-type,
.template-index #MainContent>.shopify-section:first-of-type,
.template-index section[id*="hero"].shopify-section,
.template-index #MainContent>section.shopify-section-slideshow:first-of-type,
.template-index section.shopify-section-slideshow[id*="hero"] {
  width: 100% !important;
  max-width: 100% !important;
  min-height: calc(100vh - 39px) !important;
  height: calc(100vh - 39px) !important;¥
  left: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Other pages: remove height constraints */
body:not(.template-index) #MainContent>section[id*="hero"]:first-of-type,
body:not(.template-index) #MainContent>.shopify-section:first-of-type,
body:not(.template-index) section[id*="hero"].shopify-section,
body:not(.template-index) #MainContent>section.shopify-section-slideshow:first-of-type,
body:not(.template-index) section.shopify-section-slideshow[id*="hero"] {
  width: 100% !important;
  max-width: 100% !important;
  /* Remove min-height and height */
  left: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Homepage hero banner - children use 100% of parent */
/* Works for both image-banner and slideshow */
#MainContent>section[id*="hero"]:first-of-type .banner,
#MainContent>.shopify-section:first-of-type .banner,
section[id*="hero"].shopify-section .banner,
#MainContent>section.shopify-section-slideshow:first-of-type .slideshow,
section.shopify-section-slideshow[id*="hero"] .slideshow,
#MainContent>section[id*="hero"]:first-of-type slideshow-component,
section[id*="hero"].shopify-section slideshow-component {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
}

/* Ensure slideshow-component fills parent section */
#MainContent>section[id*="hero"]:first-of-type slideshow-component,
section[id*="hero"].shopify-section slideshow-component {
  display: block !important;
  flex-direction: unset !important;
}

/* Remove gutter/margin from slideshow-component */
#MainContent>section[id*="hero"]:first-of-type slideshow-component.slider-mobile-gutter,
section[id*="hero"].shopify-section slideshow-component.slider-mobile-gutter {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Ensure .slideshow inside slideshow-component is 100% */
#MainContent>section[id*="hero"]:first-of-type slideshow-component .slideshow,
section[id*="hero"].shopify-section slideshow-component .slideshow {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

#MainContent>section[id*="hero"]:first-of-type .banner::before,
#MainContent>.shopify-section:first-of-type .banner::before,
section[id*="hero"].shopify-section .banner::before,
#MainContent>section[id*="hero"]:first-of-type .banner__media::before,
#MainContent>.shopify-section:first-of-type .banner__media::before,
section[id*="hero"].shopify-section .banner__media::before {
  padding-bottom: 0 !important;
  content: none !important;
  display: none !important;
}

/* Banner media (for image-banner) - keep absolute */
#MainContent>section[id*="hero"]:first-of-type .banner__media,
#MainContent>.shopify-section:first-of-type .banner__media,
section[id*="hero"].shopify-section .banner__media {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 0 !important;
}

/* Slideshow slides - MUST NOT be absolute for scrollLeft to work */
#MainContent>section.shopify-section-slideshow:first-of-type .slideshow__slide,
section.shopify-section-slideshow[id*="hero"] .slideshow__slide,
#MainContent>section[id*="hero"]:first-of-type .slideshow__slide,
section[id*="hero"].shopify-section .slideshow__slide {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  /* position: absolute を削除 - スライドショーのスクロール機能に必要 */
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
}

/* Slideshow container - needs to be scrollable */
#MainContent>section[id*="hero"]:first-of-type .slideshow,
section[id*="hero"].shopify-section .slideshow {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  position: relative !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
}

/* Slideshow media - can be absolute inside slide */
#MainContent>section.shopify-section-slideshow:first-of-type .slideshow__media,
section.shopify-section-slideshow[id*="hero"] .slideshow__media,
#MainContent>section[id*="hero"]:first-of-type .slideshow__media,
section[id*="hero"].shopify-section .slideshow__media,
#MainContent>section[id*="hero"]:first-of-type slideshow-component .slideshow__media,
section[id*="hero"].shopify-section slideshow-component .slideshow__media {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 0 !important;
}

/* Slideshow controls: position absolute, show only dots */
#MainContent>section[id*="hero"]:first-of-type .slideshow__controls,
section[id*="hero"].shopify-section .slideshow__controls,
#MainContent>section[id*="hero"]:first-of-type slideshow-component .slideshow__controls,
section[id*="hero"].shopify-section slideshow-component .slideshow__controls {
  position: absolute !important;
  bottom: 2rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Remove border from slideshow controls border radius classes */
#MainContent>section[id*="hero"]:first-of-type .slideshow__controls--border-radius-mobile,
section[id*="hero"].shopify-section .slideshow__controls--border-radius-mobile,
#MainContent>section[id*="hero"]:first-of-type slideshow-component .slideshow__controls--border-radius-mobile,
section[id*="hero"].shopify-section slideshow-component .slideshow__controls--border-radius-mobile {
  border: none !important;
  border-radius: 0 !important;
}

/* Remove border from slideshow controls border radius classes */
#MainContent>section[id*="hero"]:first-of-type .slideshow__controls--border-radius-mobile,
section[id*="hero"].shopify-section .slideshow__controls--border-radius-mobile,
#MainContent>section[id*="hero"]:first-of-type slideshow-component .slideshow__controls--border-radius-mobile,
section[id*="hero"].shopify-section slideshow-component .slideshow__controls--border-radius-mobile {
  border: none !important;
  border-radius: 0 !important;
}

/* Hide arrow buttons and pause button, show only dots */
/* IMPORTANT: Use visibility/opacity instead of display: none to keep buttons in DOM for JavaScript */
#MainContent>section[id*="hero"]:first-of-type .slider-button--prev,
#MainContent>section[id*="hero"]:first-of-type .slider-button--next,
section[id*="hero"].shopify-section .slider-button--prev,
section[id*="hero"].shopify-section .slider-button--next,
#MainContent>section[id*="hero"]:first-of-type .slideshow__autoplay,
section[id*="hero"].shopify-section .slideshow__autoplay {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* Show only slider-counter (dots) */
#MainContent>section[id*="hero"]:first-of-type .slider-counter,
section[id*="hero"].shopify-section .slider-counter,
#MainContent>section[id*="hero"]:first-of-type slideshow-component .slider-counter,
section[id*="hero"].shopify-section slideshow-component .slider-counter {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
}

/* Ensure slideshow__control-wrapper and dots are visible */
#MainContent>section[id*="hero"]:first-of-type .slideshow__control-wrapper,
section[id*="hero"].shopify-section .slideshow__control-wrapper,
#MainContent>section[id*="hero"]:first-of-type slideshow-component .slideshow__control-wrapper,
section[id*="hero"].shopify-section slideshow-component .slideshow__control-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.8rem !important;
}



/* Style the dot buttons */
#MainContent>section[id*="hero"]:first-of-type .slider-counter__link,
section[id*="hero"].shopify-section .slider-counter__link,
#MainContent>section[id*="hero"]:first-of-type slideshow-component .slider-counter__link,
section[id*="hero"].shopify-section slideshow-component .slider-counter__link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

/* Style the dots */
#MainContent>section[id*="hero"]:first-of-type .slider-counter__link .dot,
section[id*="hero"].shopify-section .slider-counter__link .dot,
#MainContent>section[id*="hero"]:first-of-type slideshow-component .slider-counter__link .dot,
section[id*="hero"].shopify-section slideshow-component .slider-counter__link .dot {
  width: 0.8rem !important;
  height: 0.8rem !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  display: block !important;
  transition: background-color 0.3s ease !important;
}

/* Active dot */
#MainContent>section[id*="hero"]:first-of-type .slider-counter__link[aria-current="true"] .dot,
section[id*="hero"].shopify-section .slider-counter__link[aria-current="true"] .dot,
#MainContent>section[id*="hero"]:first-of-type slideshow-component .slider-counter__link[aria-current="true"] .dot,
section[id*="hero"].shopify-section slideshow-component .slider-counter__link[aria-current="true"] .dot {
  background-color: rgba(255, 255, 255, 1) !important;
}

/* Smooth scrolling behavior for slideshow container */
/* Shopify slideshow uses scrollLeft for transitions, so we only need scroll-behavior */
#MainContent>section[id*="hero"]:first-of-type .slideshow,
section[id*="hero"].shopify-section .slideshow,
#MainContent>section[id*="hero"]:first-of-type slideshow-component .slideshow,
section[id*="hero"].shopify-section slideshow-component .slideshow {
  scroll-behavior: smooth !important;
}

/* Ensure ambient animation works on slideshow images */
/* Don't override transform/position for animated images */
/* #MainContent>section[id*="hero"]:first-of-type .animate--ambient,
section[id*="hero"].shopify-section .animate--ambient,
#MainContent>section[id*="hero"]:first-of-type slideshow-component .animate--ambient,
section[id*="hero"].shopify-section slideshow-component .animate--ambient {
  overflow: visible !important;
} */

#MainContent>section[id*="hero"]:first-of-type .animate--ambient>img,
section[id*="hero"].shopify-section .animate--ambient>img,
#MainContent>section[id*="hero"]:first-of-type slideshow-component .animate--ambient>img,
section[id*="hero"].shopify-section slideshow-component .animate--ambient>img {
  animation: animateAmbient 30s linear infinite !important;
  will-change: transform !important;
}

#MainContent>section[id*="hero"]:first-of-type .banner__media img,
#MainContent>.shopify-section:first-of-type .banner__media img,
section[id*="hero"].shopify-section .banner__media img,
/* Fade slideshow animation */
.slideshow.is-fade {
  overflow: hidden !important;
  position: relative !important;
}

.slideshow.is-fade .slideshow__slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  transition: opacity 1s ease-in-out !important;
  pointer-events: none !important;
}

.slideshow.is-fade .slideshow__slide.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}

#MainContent>section[id*="hero"]:first-of-type .banner__media video,
#MainContent>.shopify-section:first-of-type .banner__media video,
section[id*="hero"].shopify-section .banner__media video {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

@media screen and (max-width: 749px) {

  /* Parent section: same width and height on mobile - ONLY on homepage */
  .template-index #MainContent>section[id*="hero"]:first-of-type,
  .template-index #MainContent>.shopify-section:first-of-type,
  .template-index section[id*="hero"].shopify-section {
    width: 100vw !important;
    /* min-height: calc(100vh - 39px) !important;
    height: calc(100vh - 39px) !important; */
  min-height: 80vh !important;
  height: 80vh !important;
  }

  /* Other pages: remove height constraints on mobile */
  body:not(.template-index) #MainContent>section[id*="hero"]:first-of-type,
  body:not(.template-index) #MainContent>.shopify-section:first-of-type,
  body:not(.template-index) section[id*="hero"].shopify-section {
    width: 100vw !important;
    /* Remove min-height and height */
  }

  /* Children: use 100% of parent */
  #MainContent>section[id*="hero"]:first-of-type .banner,
  #MainContent>.shopify-section:first-of-type .banner,
  section[id*="hero"].shopify-section .banner {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  #MainContent>section[id*="hero"]:first-of-type .banner__media,
  #MainContent>.shopify-section:first-of-type .banner__media,
  section[id*="hero"].shopify-section .banner__media {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
  }
}

.section--image-banner .banner {
  min-height: 100vh;
}

.banner__content {
  max-width: 720px;
  gap: 1.2rem;
  padding: clamp(1.6rem, 4vw, 3.2rem);
}

.banner__heading {
  font-size: clamp(3.2rem, 5vw, 4.8rem);
  line-height: 1.05;
}

.banner__text {
  font-size: 1.6rem;
  line-height: 1.7;
  opacity: 0.95;
}

@media screen and (max-width: 749px) {
  .section--image-banner .banner {
    min-height: 75vh;
  }

  .banner__content {
    padding: clamp(1.2rem, 6vw, 2.4rem);
  }
}

/* Header group - Always fixed on all pages */
.shopify-section-group-header-group {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 999;
}

/* Announcement bar - Always fixed at top */
.shopify-section[class*="announcement"],
section[id*="announcement"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 1000 !important;
}

/* Announcement bar background - Default dark, transparent on homepage initially */
/* EXCEPT homepage */
body:not(.template-index) .utility-bar,
body:not(.template-index) .shopify-section[class*="announcement"],
body:not(.template-index) section[id*="announcement"] .utility-bar,
body:not(.template-index) .utility-bar *,
body:not(.template-index) .shopify-section[class*="announcement"] *,
body:not(.template-index) section[id*="announcement"] * {
  background-color: #1F2A2E !important;
  background: #1F2A2E !important;
}

/* Homepage: semi-transparent dark announcement bar initially (to keep text visible) */
.template-index .utility-bar:not(.scrolled),
.template-index .shopify-section[class*="announcement"]:not(.scrolled) {
  background-color: rgba(31, 42, 46, 0.9) !important;
  background: rgba(31, 42, 46, 0.9) !important;
  backdrop-filter: blur(10px);
}

.template-index .utility-bar:not(.scrolled) *,
.template-index .shopify-section[class*="announcement"]:not(.scrolled) *,
.template-index section[id*="announcement"]:not(.scrolled) * {
  background: transparent !important;
  background-color: transparent !important;
}

/* Homepage: dark announcement bar when scrolled */
.template-index .utility-bar.scrolled,
.template-index .shopify-section[class*="announcement"].scrolled,
.template-index section[id*="announcement"].scrolled .utility-bar,
.template-index .utility-bar.scrolled *,
.template-index .shopify-section[class*="announcement"].scrolled *,
.template-index section[id*="announcement"].scrolled * {
  background-color: #1F2A2E !important;
  background: #1F2A2E !important;
  transition: background-color 0.3s ease;
}

/* Header section - Fixed below announcement */
.shopify-section.shopify-section-header,
section[id*="shopify-section"][id*="header"]:not([id*="announcement"]) {
  position: fixed !important;
  top: 39px !important;
  /* Below announcement bar */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 999 !important;
}

/* Header height: PC 81px, Mobile 61px */
/* Default background for all header elements - EXCEPT homepage */
body:not(.template-index) .header-wrapper,
body:not(.template-index) sticky-header.header-wrapper,
body:not(.template-index) .header-wrapper *,
body:not(.template-index) sticky-header.header-wrapper *,
body:not(.template-index) .header,
body:not(.template-index) .header * {
  /* background: #1F2A2E; */
  background: #FFFFFF;
}

.header-wrapper,
sticky-header.header-wrapper {
  height: 61px;
  /* Mobile default */
  width: 100% !important;
  max-width: 100% !important;
}

@media screen and (min-width: 750px) {

  .header-wrapper,
  sticky-header.header-wrapper {
    height: 81px;
    /* PC */
  }
}

.header {
  height: 100%;
  /* display: flex;
  align-items: center; */
  width: 100% !important;
}

.shopify-policy__container {
  color: #1F2A2E;
  font-family: noto sans jp;
  padding-block: 28px;
}

.shopify-policy__title h1 {
  font-family: Helvetica,Noto Sans Japanese,sans-serif!important
}

.shopify-challenge__container .shopify-challenge__message,
.shopify-challenge__container .shopify-challenge__errors {
  color: #1F2A2E !important;
  font-family: noto sans jp;
}

/* Homepage: transparent initially, dark on scroll - ALL ELEMENTS */
.template-index .header-wrapper:not(.scrolled),
.template-index sticky-header.header-wrapper:not(.scrolled),
.template-index .header-wrapper:not(.scrolled) *,
.template-index sticky-header.header-wrapper:not(.scrolled) *,
.template-index .header:not(.scrolled),
.template-index .header:not(.scrolled) *,
.template-index .header *:not(.scrolled),
.template-index .header__heading:not(.scrolled),
.template-index .header__heading:not(.scrolled) *,
.template-index .header__menu:not(.scrolled),
.template-index .header__menu:not(.scrolled) *,
.template-index .header__menu-item:not(.scrolled),
.template-index .header__menu-item:not(.scrolled) *,
.template-index .list-menu:not(.scrolled),
.template-index .list-menu:not(.scrolled) *,
.template-index .list-menu__item:not(.scrolled),
.template-index .list-menu__item:not(.scrolled) *,
.template-index .header__icon:not(.scrolled),
.template-index .header__icon:not(.scrolled) *,
.template-index .header__icons:not(.scrolled),
.template-index .header__icons:not(.scrolled) *,
.template-index .header__search:not(.scrolled),
.template-index .header__search:not(.scrolled) *,
.template-index .header__account:not(.scrolled),
.template-index .header__account:not(.scrolled) *,
.template-index .header__cart:not(.scrolled),
.template-index .header__cart:not(.scrolled) * {
  background: transparent;
  background-image: none !important;
}

.template-index .header-wrapper.scrolled,
.template-index sticky-header.header-wrapper.scrolled,
.template-index .header-wrapper.scrolled *,
.template-index sticky-header.header-wrapper.scrolled *,
.template-index .header *:has(.scrolled),
.template-index .header__heading.scrolled,
.template-index .header__heading.scrolled *,
.template-index .header__menu.scrolled,
.template-index .header__menu.scrolled *,
.template-index .header__menu-item.scrolled,
.template-index .header__menu-item.scrolled *,
.template-index .list-menu.scrolled,
.template-index .list-menu.scrolled *,
.template-index .list-menu__item.scrolled,
.template-index .list-menu__item.scrolled *,
.template-index .header__icon.scrolled,
.template-index .header__icon.scrolled *,
.template-index .header__icons.scrolled,
.template-index .header__icons.scrolled *,
.template-index .header__search.scrolled,
.template-index .header__search.scrolled *,
.template-index .header__account.scrolled,
.template-index .header__account.scrolled *,
.template-index .header__cart.scrolled,
.template-index .header__cart.scrolled * {
  /* background: #1F2A2E; */
  transition: background-color 0.3s ease;
  justify-content: space-between;
}

/* Transparent backgrounds for homepage (only when not scrolled) - ALL ELEMENTS */
.template-index .header-wrapper:not(.scrolled),
.template-index sticky-header.header-wrapper:not(.scrolled),
.template-index .header-wrapper.color-scheme-6:not(.scrolled),
.template-index sticky-header.header-wrapper.color-scheme-6:not(.scrolled),
.template-index .header-wrapper:not(.scrolled) *,
.template-index sticky-header.header-wrapper:not(.scrolled) *,
.template-index .header:not(.scrolled),
.template-index .header:not(.scrolled) *,
.template-index .header *:not(.scrolled),
.template-index .header__heading:not(.scrolled),
.template-index .header__heading:not(.scrolled) *,
.template-index .header__menu:not(.scrolled),
.template-index .header__menu:not(.scrolled) *,
.template-index .header__menu-item:not(.scrolled),
.template-index .header__menu-item:not(.scrolled) *,
.template-index .list-menu:not(.scrolled),
.template-index .list-menu:not(.scrolled) *,
.template-index .list-menu__item:not(.scrolled),
.template-index .list-menu__item:not(.scrolled) * {
  background: transparent;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: none !important;
  justify-content: space-between;
  font-family: noto sans jp;
}


/* All announcement bar elements get dark background when scrolled */
.template-index .utility-bar.scrolled,
.template-index .utility-bar.scrolled *,
.template-index .announcement-bar.scrolled,
.template-index .announcement-bar.scrolled *,
.template-index .announcement-bar__message.scrolled {
  background-color: #1F2A2E !important;
  background: #1F2A2E !important;
}

/* Dark background when scrolled on homepage */
.template-index .header-wrapper.scrolled,
.template-index sticky-header.header-wrapper.scrolled {
  background-color: #1F2A2E !important;
  /* background: #1F2A2E !important; */
  background: #FFFFFF !important;
  transition: background-color 0.3s ease;
}

/* Make .gradient background transparent on homepage */
.template-index .gradient,
.template-index body.gradient,
body.template-index.gradient {
  background: transparent !important;
  background-image: none !important;
  background-attachment: scroll !important;
}



/* White text for transparent header */
.template-index .announcement-bar,
/* Exclude announcement-bar__message and its children from white color */
.template-index .announcement-bar *:not(.announcement-bar__message):not(.announcement-bar__message *),
.template-index .header-wrapper:not(.scrolled) .header,
.template-index .header-wrapper:not(.scrolled) .header *,
.template-index .header-wrapper:not(.scrolled) .header__heading,
.template-index .header-wrapper:not(.scrolled) .header__heading-link,
.template-index .header-wrapper:not(.scrolled) .header__menu-item,
.template-index .header-wrapper:not(.scrolled) .header__menu-item span,
.template-index .header-wrapper:not(.scrolled) .list-menu__item>a,
.template-index .header-wrapper:not(.scrolled) .menu-drawer__navigation-item,
.template-index .header-wrapper:not(.scrolled) .announcement-bar a:not(.announcement-bar__message a) {
  color: rgba(255, 255, 255, 0.95) !important;
}
.template-index .header-wrapper.scrolled,
body:not(.template-index) .header-wrapper {
  border-bottom: 1px solid rgba(18,18,18, .08);
}
#menu-drawer {
  background: #FFFFFF !important;
}
.link--text,
.template-index .scrolled .header__menu-item span,
body:not(.template-index) .header-wrapper .header__menu-item span {
  color: #1F2A2E !important;
}
.template-index .scrolled .header__icon path,
body:not(.template-index) .header-wrapper .header__icon path {
  fill: #1F2A2E !important;

}
.announcement-bar__message {
  color: #ccff00 !important;
}

.announcement-bar__message span {
  color: #ccff00 !important;
}

/* Ensure homepage announcement message is also #ccff00 */
.template-index .announcement-bar__message {
  color: #ccff00 !important;
}

.template-index .announcement-bar__message span {
  color: #ccff00 !important;
}

/* Arrow icon in announcement message should be #ccff00 - HIGHER SPECIFICITY */
.announcement-bar__message .icon-arrow,
.announcement-bar__message svg,
.announcement-bar__message .icon {
  fill: #ccff00 !important;
  color: #ccff00 !important;
}

.template-index .announcement-bar__message .icon-arrow,
.template-index .announcement-bar__message svg,
.template-index .announcement-bar__message .icon,
.template-index .announcement-bar__message .icon-arrow path,
.template-index .announcement-bar__message svg path,
.template-index .announcement-bar__message svg * {
  fill: #ccff00 !important;
  color: #ccff00 !important;
}

.template-index .header__icon,
.template-index .header__icon svg,
.template-index .icon {
  fill: #1F2A2E !important;
  color: #1F2A2E !important;
}

/* Announcement bar SVG (except message icons) */
.template-index .announcement-bar svg:not(.announcement-bar__message svg) {
  fill: #1F2A2E !important;
  color: #1F2A2E !important;
}

/* Remove underline on announcement bar link hover */
.announcement-bar__link:hover {
  text-decoration: none !important;
}

/* First content section (hero) starts at viewport top, header overlays it */
/* Override body grid layout for homepage */
html body.template-index,
body.template-index {
  margin-top: 0 !important;
  padding-top: 39px !important;
  /* Keep announcement bar padding - OVERRIDE ALL OTHER RULES */
  grid-template-rows: none !important;
  display: block !important;
}

/* Force 39px padding on homepage - highest specificity */
html body.template-index {
  padding-top: 39px !important;
}

@media screen and (max-width: 749px) {
  html body.template-index {
    padding-top: 39px !important;
  }
}

.template-index #MainContent,
.template-index #MainContent.content-for-layout {
  margin-top: 0 !important;
  padding-top: 0 !important;
  z-index: 1000 !important;
  top: 0 !important;
}

/* Remove any spacing from content wrapper */
.template-index .content-for-layout {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Hero section starts from top of viewport, behind header */
.template-index .shopify-section:first-of-type {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  top: 0 !important;
}

/* Ensure hero banner section starts at absolute top - pull it up to cover header space */
.template-index #MainContent>.shopify-section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative !important;
  top: 0 !important;
}

/* Pull hero section up to start from viewport top */
.template-index #MainContent {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Override section-header sticky on homepage - now fixed */
.template-index .section-header {
  position: fixed !important;
  margin-bottom: 0 !important;
}

/* Remove spacing between sections on homepage - override base.css */
.template-index .shopify-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.template-index .shopify-section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Override base.css spacing variables for homepage */
.template-index {
  --spacing-sections-desktop: 0 !important;
  --spacing-sections-mobile: 0 !important;
}

/* Override base.css .section + .section margin */
.template-index .section+.section,
.template-index .shopify-section+.shopify-section {
  margin-top: 0 !important;
}

.template-index .shopify-section:first-of-type+.shopify-section {
  margin-top: 0 !important;
}

.template-index .shopify-section:first-of-type .banner,
.template-index .section--image-banner:first-of-type .banner {
  min-height: 100vh !important;
}

@media screen and (max-width: 749px) {
  .template-index .shopify-section:first-of-type .banner {
    min-height: 75vh !important;
  }
}

/* Buttons: sharper + subtle glow on hover (works with theme variables) */
.button {
  border-radius: max(0px, var(--buttons-radius));
}

.button:hover {
  box-shadow: 0 0 0 0.3rem rgba(var(--unebi-accent), 0.18);
}

/* Cards: slightly more contrasty */
.card,
.card-wrapper {
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.card-wrapper:hover .card,
.card-wrapper:hover {
  transform: translateY(-2px);
}

/* Blog: clearer hierarchy */
.main-blog .title--primary,
.main-article .article-template__title {
  position: relative;
}

.main-blog .title--primary::after,
.main-article .article-template__title::after {
  content: '';
  display: block;
  width: 6.4rem;
  height: 0.3rem;
  margin-top: 1.2rem;
  background: rgb(var(--unebi-accent));
}

/* Card grids: tighter gaps and mild lift */
.multicolumn,
.featured-collection,
.unebi-link-cards {
  --grid-desktop-vertical-spacing: 1.8rem;
  --grid-desktop-horizontal-spacing: 1.8rem;
}

/* ============================================
   GLOBAL TYPOGRAPHY SYSTEM
   ============================================ */

/* Section headings - consistent sizing */
.section-header h2,
.section-header .h1,
.section-header .h2,
.section-header h1 {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  font-size: var(--unebi-h2-mobile);
  line-height: 1.3;
}

@media screen and (min-width: 750px) {

  .section-header h2,
  .section-header .h1,
  .section-header .h2,
  .section-header h1 {
    font-size: var(--unebi-h2-desktop);
  }
}

/* Section subheadings */
.section-header .rte,
.section-header p {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: var(--unebi-body-mobile);
  line-height: 1.7;
  color: rgba(var(--unebi-dark), 0.8);
}

@media screen and (min-width: 750px) {

  .section-header .rte,
  .section-header p {
    font-size: var(--unebi-body-desktop);
  }
}

/* ============================================
   FEATURED COLLECTION SECTIONS
   (best-sellers, all-products)
   ============================================ */

/* Hide best-sellers section */
section[id*="best-sellers"] {
  display: none !important;
}

section[id*="all-products"] {
  background-color: #ffffff !important;
}

section[id*="best-sellers"] .featured-collection,
section[id*="all-products"] .featured-collection {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media screen and (min-width: 750px) {

  section[id*="best-sellers"] .featured-collection,
  section[id*="all-products"] .featured-collection {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* Hide best-sellers section */
section[id*="best-sellers"] {
  display: none !important;
}

/* All products section styling */
section[id*="all-products"] .collection__title {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 1.5rem;
}

@media screen and (min-width: 750px) {
  section[id*="all-products"] .collection__title {
    margin-bottom: 4rem;
    padding: 0 2rem;
  }
}

section[id*="all-products"] .collection__title .title,
section[id*="all-products"] .collection__title h2,
section[id*="all-products"] .collection__title .h1,
section[id*="all-products"] .collection__title .h2,
section[id*="all-products"] .collection__title .inline-richtext {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  color: rgb(var(--unebi-dark));
  font-size: var(--unebi-h2-mobile);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1rem;
}

@media screen and (min-width: 750px) {

  section[id*="all-products"] .collection__title .title,
  section[id*="all-products"] .collection__title h2,
  section[id*="all-products"] .collection__title .h1,
  section[id*="all-products"] .collection__title .h2,
  section[id*="all-products"] .collection__title .inline-richtext {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

section[id*="all-products"] .collection__description,
section[id*="all-products"] .collection__title .rte,
section[id*="all-products"] .collection__title p {
  font-family: 'Noto Sans JP', sans-serif !important;
  color: rgba(var(--unebi-dark), 0.8);
  font-size: var(--unebi-body-mobile);
  line-height: 1.7;
  margin-top: 1rem;
}

@media screen and (min-width: 750px) {

  section[id*="all-products"] .collection__description,
  section[id*="all-products"] .collection__title .rte,
  section[id*="all-products"] .collection__title p {
    font-size: var(--unebi-body-desktop);
  }
}

/* All products section - View all button styling */
section[id*="all-products"] .collection__view-all {
  margin-top: 4rem;
  text-align: center;
}

section[id*="all-products"] .collection__view-all .button--primary {
  background-color: #B9FF2A !important;
  color: rgb(var(--unebi-dark)) !important;
  border: none !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 600;
  padding: 1.2rem 2.4rem;
  border-radius: 0.4rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-width: auto;
}

section[id*="all-products"] .collection__view-all .button--primary:hover {
  background-color: #A8E626 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(185, 255, 42, 0.3);
}

section[id*="all-products"] .collection__view-all .button--primary .button-arrow {
  font-size: 1.6rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

section[id*="all-products"] .collection__view-all .button--primary:hover .button-arrow {
  transform: translateX(4px);
}

@media screen and (max-width: 749px) {
  section[id*="all-products"] .collection__view-all {
    margin-top: 3rem;
  }

  section[id*="all-products"] .collection__view-all .button--primary {
    padding: 1rem 2rem;
    font-size: 1.4rem;
  }
}

/* ============================================
   COLLECTION PAGE STYLING
   ============================================ */

/* Collection page - overall background */
.template-collection .main-collection-product-grid,
.template-collection .main-collection-banner,
.template-collection .collection {
  background-color: #ffffff !important;
}

/* Collection page - page padding */
.template-collection #MainContent {
  padding-top: 0;
  padding-bottom: 0;
}

.template-collection .main-collection-product-grid .section-padding,
.template-collection .main-collection-product-grid [class*="section-"] {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media screen and (min-width: 750px) {

  .template-collection .main-collection-product-grid .section-padding,
  .template-collection .main-collection-product-grid [class*="section-"] {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* Collection hero banner - title styling */
.collection-hero__title,
.collection-hero__title h1 {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  color: rgb(var(--unebi-dark)) !important;
  font-size: var(--unebi-h2-mobile);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 1rem;
}

@media screen and (min-width: 750px) {

  .collection-hero__title,
  .collection-hero__title h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

/* Collection hero description */
.collection-hero__description {
  font-family: 'Noto Sans JP', sans-serif !important;
  color: rgba(var(--unebi-dark), 0.8);
  font-size: var(--unebi-body-mobile);
  line-height: 1.7;
  text-align: center;
  margin-top: 1rem;
}

@media screen and (min-width: 750px) {
  .collection-hero__description {
    font-size: var(--unebi-body-desktop);
  }
}

/* Collection product grid - title wrapper (if collection title is shown) */
.template-collection .collection__title,
.template-collection .title-wrapper {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 1.5rem;
}

@media screen and (min-width: 750px) {

  .template-collection .collection__title,
  .template-collection .title-wrapper {
    margin-bottom: 4rem;
    padding: 0 2rem;
  }
}

.template-collection .collection__title .title,
.template-collection .collection__title h1,
.template-collection .collection__title h2,
.template-collection .title-wrapper .title,
.template-collection .title-wrapper h1,
.template-collection .title-wrapper h2 {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  color: rgb(var(--unebi-dark));
  font-size: var(--unebi-h2-mobile);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1rem;
}

@media screen and (min-width: 750px) {

  .template-collection .collection__title .title,
  .template-collection .collection__title h1,
  .template-collection .collection__title h2,
  .template-collection .title-wrapper .title,
  .template-collection .title-wrapper h1,
  .template-collection .title-wrapper h2 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

.template-collection .collection__description,
.template-collection .title-wrapper .rte,
.template-collection .title-wrapper p {
  font-family: 'Noto Sans JP', sans-serif !important;
  color: rgba(var(--unebi-dark), 0.8);
  font-size: var(--unebi-body-mobile);
  line-height: 1.7;
  margin-top: 1rem;
}

@media screen and (min-width: 750px) {

  .template-collection .collection__description,
  .template-collection .title-wrapper .rte,
  .template-collection .title-wrapper p {
    font-size: var(--unebi-body-desktop);
  }
}

/* Collection product grid - spacing and layout */
.template-collection .product-grid {
  gap: 2rem;
  margin-top: 2rem;
}

@media screen and (min-width: 750px) {
  .template-collection .product-grid {
    gap: 3rem;
    margin-top: 3rem;
  }
}

/* Collection page - filter sidebar styling */
.template-collection .facets-wrapper,
.template-collection .facets {
  background-color: #ffffff;
  border-radius: 0.4rem;
  padding: 2rem;
}

.template-collection .facets__form,
.template-collection .facets__form-vertical {
  font-family: 'Noto Sans JP', sans-serif;
}

.template-collection .facets__summary,
.template-collection .facets__disclosure summary,
.template-collection .facets__disclosure-vertical summary {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 600;
  color: rgb(var(--unebi-dark));
  font-size: var(--unebi-small-desktop);
}

.template-collection .facets__display,
.template-collection .facets__display-vertical,
.template-collection .facets__list {
  font-family: 'Noto Sans JP', sans-serif;
  color: rgba(var(--unebi-dark), 0.8);
  font-size: var(--unebi-body-mobile);
}

.template-collection .facets__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  color: rgb(var(--unebi-dark));
}

/* Collection page - vertical filter sidebar */
.template-collection .facets-vertical .facets__form-vertical {
  background-color: #ffffff;
  border: 1px solid rgba(var(--unebi-dark), 0.1);
  border-radius: 0.4rem;
  padding: 2rem;
}

.template-collection .facets__heading--vertical {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  color: rgb(var(--unebi-dark));
  font-size: var(--unebi-h3-mobile);
  font-weight: 600;
  margin-bottom: 2rem;
}

@media screen and (min-width: 750px) {
  .template-collection .facets__heading--vertical {
    font-size: var(--unebi-h3-desktop);
  }
}

.template-collection .facets__disclosure-vertical {
  border-top: 1px solid rgba(var(--unebi-dark), 0.1);
  margin-top: 1rem;
  padding-top: 1.5rem;
}

.template-collection .facets__disclosure-vertical:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.template-collection .facets__summary-vertical {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 600;
  color: rgb(var(--unebi-dark));
  font-size: var(--unebi-small-desktop);
  padding: 0.8rem 0;
}

.template-collection .facets__item {
  font-family: 'Noto Sans JP', sans-serif;
  color: rgba(var(--unebi-dark), 0.8);
  font-size: var(--unebi-body-mobile);
  margin-bottom: 0.8rem;
}

.template-collection .facet-checkbox__text-label {
  font-family: 'Noto Sans JP', sans-serif;
  color: rgba(var(--unebi-dark), 0.8);
  font-size: var(--unebi-body-mobile);
}

/* Collection page - product count */
.template-collection .product-count,
.template-collection .product-count-vertical {
  font-family: 'Noto Sans JP', sans-serif;
  color: rgba(var(--unebi-dark), 0.7);
  font-size: var(--unebi-small-mobile);
}

/* Collection page - active filters */
.template-collection .active-facets {
  margin-bottom: 2rem;
}

.template-collection .active-facets__button {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: rgba(var(--unebi-dark), 0.1);
  color: rgb(var(--unebi-dark));
  border: none;
  border-radius: 0.4rem;
  padding: 0.6rem 1.2rem;
  font-size: var(--unebi-small-mobile);
  transition: all 0.3s ease;
}

.template-collection .active-facets__button:hover {
  background-color: rgba(var(--unebi-dark), 0.2);
}

/* Collection page - pagination */
.template-collection .pagination {
  margin-top: 4rem;
  text-align: center;
}

.template-collection .pagination__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

.template-collection .pagination__item {
  font-family: 'Noto Sans JP', sans-serif;
}

.template-collection .pagination__link {
  color: rgb(var(--unebi-dark));
  text-decoration: none;
  padding: 0.8rem 1.2rem;
  border-radius: 0.4rem;
  transition: all 0.3s ease;
}

.template-collection .pagination__link:hover,
.template-collection .pagination__item--current .pagination__link {
  background-color: rgba(var(--unebi-accent), 0.2);
  color: rgb(var(--unebi-dark));
}

/* Collection page - empty state */
.template-collection .collection--empty {
  text-align: center;
  padding: 4rem 2rem;
}

.template-collection .collection--empty .title {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  color: rgb(var(--unebi-dark));
  font-size: var(--unebi-h2-mobile);
  margin-bottom: 1.5rem;
}

@media screen and (min-width: 750px) {
  .template-collection .collection--empty .title {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

/* Collection page - mobile adjustments */
@media screen and (max-width: 749px) {
  .template-collection .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: auto;
  }

  .template-collection .facets-wrapper,
  .template-collection .facets {
    padding: 1.5rem;
  }
}

/* ============================================
   PRODUCT CARD STYLING
   ============================================ */

/* Product card title - clear and readable */
.card__heading,
.card__heading a {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: var(--unebi-small-mobile);
  font-weight: 600;
  color: rgb(var(--unebi-dark));
  line-height: 1.4;
  text-decoration: none;
}

@media screen and (min-width: 750px) {

  .card__heading,
  .card__heading a {
    font-size: var(--unebi-small-desktop);
  }
}

.card__heading a:hover {
  color: rgb(var(--unebi-dark));
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Product card price - clear and readable */
.card-information .price,
.card__information .price {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: var(--unebi-small-mobile);
  font-weight: 600;
  color: rgb(var(--unebi-dark));
  line-height: 1.5;
  margin-top: 0.5rem;
}

@media screen and (min-width: 750px) {

  .card-information .price,
  .card__information .price {
    font-size: var(--unebi-small-desktop);
  }
}

.card-information .price .price-item--regular,
.card__information .price .price-item--regular {
  font-size: var(--unebi-small-mobile);
}

@media screen and (min-width: 750px) {

  .card-information .price .price-item--regular,
  .card__information .price .price-item--regular {
    font-size: var(--unebi-small-desktop);
  }
}

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */

section[id*="testimonials"] .multicolumn {
  background-color: #ffffff !important;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media screen and (min-width: 750px) {
  section[id*="testimonials"] .multicolumn {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

section[id*="testimonials"] .multicolumn .section-header,
section[id*="testimonials"] .title-wrapper,
section[id*="testimonials"] .multicolumn__title {
  text-align: center !important;
  margin-bottom: 3rem;
  padding: 0 1.5rem;
}

section[id*="testimonials"] .multicolumn__title,
section[id*="testimonials"] .testimonials-title {
  text-align: center !important;
}

section[id*="testimonials"] .multicolumn__title .title,
section[id*="testimonials"] .testimonials-title .title {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  text-align: center !important;
  margin: 0 auto;
  width: 100%;
  color: #1F2A2E;
}

@media screen and (min-width: 750px) {

  section[id*="testimonials"] .multicolumn .section-header,
  section[id*="testimonials"] .title-wrapper {
    margin-bottom: 4rem;
    padding: 0 2rem;
  }
}

section[id*="testimonials"] .multicolumn .section-header h2,
section[id*="testimonials"] .multicolumn .section-header .h1,
section[id*="testimonials"] .multicolumn .section-header .h2,
section[id*="testimonials"] .title-wrapper h2,
section[id*="testimonials"] .title-wrapper .h1,
section[id*="testimonials"] .title-wrapper .h2 {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  color: rgb(var(--unebi-dark));
  font-size: var(--unebi-h2-mobile);
}

@media screen and (min-width: 750px) {

  section[id*="testimonials"] .multicolumn .section-header h2,
  section[id*="testimonials"] .multicolumn .section-header .h1,
  section[id*="testimonials"] .multicolumn .section-header .h2,
  section[id*="testimonials"] .title-wrapper h2,
  section[id*="testimonials"] .title-wrapper .h1,
  section[id*="testimonials"] .title-wrapper .h2 {
    font-size: var(--unebi-h2-desktop);
  }
}

.multicolumn .section-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 1.5rem;
}

@media screen and (min-width: 750px) {
  .multicolumn .section-header {
    margin-bottom: 4rem;
    padding: 0 2rem;
  }
}

.multicolumn .section-header h2,
.multicolumn .section-header .h1,
.multicolumn .section-header .h2 {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  color: rgb(var(--unebi-dark));
  font-size: var(--unebi-h2-mobile);
}

@media screen and (min-width: 750px) {

  .multicolumn .section-header h2,
  .multicolumn .section-header .h1,
  .multicolumn .section-header .h2 {
    font-size: var(--unebi-h2-desktop);
  }
}

/* Testimonials section card content - match site tone */
section[id*="testimonials"] .multicolumn-card__info h3 {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  font-size: var(--unebi-h3-mobile);
  color: rgb(var(--unebi-dark));
  margin-bottom: 1.2rem;
  font-weight: 600;
}

@media screen and (min-width: 750px) {
  section[id*="testimonials"] .multicolumn-card__info h3 {
    font-size: var(--unebi-h3-desktop);
  }
}

section[id*="testimonials"] .multicolumn-card__info .rte,
section[id*="testimonials"] .multicolumn-card__info p {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: var(--unebi-body-mobile);
  line-height: 1.7;
  color: rgba(var(--unebi-dark), 0.8);
}

@media screen and (min-width: 750px) {

  section[id*="testimonials"] .multicolumn-card__info .rte,
  section[id*="testimonials"] .multicolumn-card__info p {
    font-size: var(--unebi-body-desktop);
  }
}

section[id*="testimonials"] .multicolumn-card__info p strong {
  font-weight: 600;
  color: rgb(var(--unebi-dark));
  margin-top: 0.8rem;
  display: block;
}

/* Testimonials button styling - match site tone */
section[id*="testimonials"] .button--primary {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: var(--unebi-body-mobile);
  font-weight: 600;
  padding: 1rem 2.4rem;
  background-color: rgba(var(--unebi-accent), 0.1);
  color: rgb(var(--unebi-dark));
  border: 1px solid rgba(var(--unebi-dark), 0.2);
  border-radius: 0.4rem;
  text-decoration: none;
  display: inline-block;
  margin-top: 3rem;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

@media screen and (min-width: 750px) {
  section[id*="testimonials"] .button--primary {
    font-size: var(--unebi-body-desktop);
    padding: 1.2rem 3rem;
    margin-top: 4rem;
  }
}

section[id*="testimonials"] .button--primary:hover {
  background-color: rgba(var(--unebi-accent), 0.2);
  border-color: rgba(var(--unebi-accent), 0.3);
  transform: translateY(-2px);
}

/* Testimonials slider - show 3 on desktop, 1 on mobile */
section[id*="testimonials"] slider-component {
  position: relative;
  overflow: hidden !important;
}

section[id*="testimonials"] .slider,
section[id*="testimonials"] .multicolumn-list {
  scroll-behavior: smooth;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 2rem;
  /* Override grid */
  grid-template-columns: none !important;
  grid-auto-flow: unset !important;
  /* Hide scrollbar */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
section[id*="testimonials"] .slider::-webkit-scrollbar,
section[id*="testimonials"] .multicolumn-list::-webkit-scrollbar {
  display: none;
}

/* Desktop: show 3 cards, slide 1 by 1 */
@media screen and (min-width: 768px) {
  section[id*="testimonials"] .multicolumn-list__item {
    flex: 0 0 calc(33.333% - 1.33rem) !important;
    min-width: calc(33.333% - 1.33rem) !important;
    max-width: calc(33.333% - 1.33rem) !important;
    scroll-snap-align: start;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Override grid item styles */
    width: auto !important;
  }
}

/* Mobile: show 1 card */
@media screen and (max-width: 767px) {
  section[id*="testimonials"] .multicolumn-list__item {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Testimonials card - position relative for icon */
section[id*="testimonials"] .multicolumn-card {
  position: relative;
}

/* Testimonials quote icon - top left */
section[id*="testimonials"] .testimonials-quote-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 32px;
  height: 32px;
  color: rgba(var(--unebi-dark), 0.2);
  pointer-events: none;
}

section[id*="testimonials"] .testimonials-quote-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media screen and (max-width: 767px) {
  section[id*="testimonials"] .testimonials-quote-icon {
    width: 24px;
    height: 24px;
  }
}

/* Testimonials card info - add padding for icon */
section[id*="testimonials"] .testimonials-card-info {
  position: relative;
  padding-top: 2.5rem;
}

@media screen and (max-width: 767px) {
  section[id*="testimonials"] .testimonials-card-info {
    padding-top: 2rem;
  }
}

/* Testimonials card image - circular */
section[id*="testimonials"] .multicolumn-card__image-wrapper {
  margin-bottom: 1.5rem;
  width: 60%;
  margin: 0 auto;
}

section[id*="testimonials"] .multicolumn-card__image {
  border-radius: 50%;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Testimonials slider controls - show on desktop too */
section[id*="testimonials"] .slider-buttons,
section[id*="testimonials"] .testimonials-slider-controls {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* Hide slide counter */
section[id*="testimonials"] .slider-counter {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================
   FOOTER SECTION - Dark Theme Layout
   ============================================ */

/* Footer background - dark theme */
.footer {
  /* background-color: #1F2A2E !important; */
  /* color: #ffffff !important; */
  color: #1F2A2E !important;
  /* border-top: none !important; */
}

/* Footer section padding override - remove padding-bottom on all devices */
.footer[class*="section-"][class*="-padding"],
footer[class*="section-"][class*="-padding"] {
  padding-bottom: 0 !important;
}

/* Mobile: remove padding-top too */
@media screen and (max-width: 749px) {

  .footer[class*="section-"][class*="-padding"],
  footer[class*="section-"][class*="-padding"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* PC: keep padding-top, remove padding-bottom */
@media screen and (min-width: 750px) {

  .footer[class*="section-"][class*="-padding"],
  footer[class*="section-"][class*="-padding"] {
    padding-bottom: 0 !important;
    /* padding-top is kept from section settings */
  }
}

/* Footer content top - 2 column layout on desktop */
.footer__content-top {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media screen and (min-width: 750px) {
  .footer__content-top {
    padding-top: 0rem;
    padding-bottom: 6rem;
  }

  /* PC: Left (navigation) and Right (social) layout */
  .footer__blocks-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4rem;
    align-items: start;
  }

  /* Left column - navigation links */
  .footer__blocks-wrapper .footer-block:first-child {
    grid-column: 1;
  }

  /* Right column - social media */
  .footer__blocks-wrapper .footer-block:last-child,
  .footer-block--newsletter {
    grid-column: 2;
    text-align: right;
  }
}

/* Ensure footer blocks are visible */
.footer-block {
  display: block !important;
  visibility: visible !important;
}

.footer-block:empty {
  display: none !important;
}

/* Mobile: vertical layout */
@media screen and (max-width: 749px) {
  .footer__blocks-wrapper {
    display: flex !important;
    flex-direction: column;
    gap: 3rem;
  }

  .footer-block {
    text-align: center;
  }
}

/* Footer headings - white text */
.footer-block__heading {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  /* color: #ffffff !important; */
  color: #1F2A2E !important;
  font-size: var(--unebi-h3-mobile);
  font-weight: 600;
  margin-bottom: 2rem;
}

@media screen and (min-width: 750px) {
  .footer-block__heading {
    font-size: var(--unebi-h3-desktop);
  }
}

/* Footer links - white text */
.footer-block__details-content,
.footer-block__details-content .rte,
.footer-block__details-content p {
  font-family: 'Noto Sans JP', sans-serif !important;
  /* color: #ffffff !important; */
  color: #1F2A2E !important;
  font-size: var(--unebi-body-mobile);
  line-height: 1.8;
}

@media screen and (min-width: 750px) {

  .footer-block__details-content,
  .footer-block__details-content .rte,
  .footer-block__details-content p {
    font-size: var(--unebi-body-desktop);
  }
}

.footer-block__details-content .list-menu__item--link {
  font-family: 'Noto Sans JP', sans-serif !important;
  /* color: #ffffff !important; */
  color: #1F2A2E !important;
  font-size: var(--unebi-body-mobile);
  text-decoration: none;
  display: block;
  padding: 0.4rem 0;
  transition: opacity 0.3s ease;
}

@media screen and (min-width: 750px) {
  .footer-block__details-content .list-menu__item--link {
    font-size: var(--unebi-body-desktop);
  }

  .footer-block__details-content .list-menu__item--link:hover {
    opacity: 0.7;
  }
}

/* Social icons - white */
.footer__list-social .list-social__item .icon {
  /* color: #ffffff !important; */
  /* fill: #ffffff !important; */
  color: #1F2A2E !important;
  fill: #1F2A2E !important;
}

.footer__list-social .list-social__link {
  /* color: #ffffff !important; */
  color: #1F2A2E !important;
}

.footer__list-social .list-social__link:hover {
  opacity: 0.7;
}

/* Footer content bottom - separator line */
.footer__content-bottom {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* Footer links row */
.footer__copyright {
  text-align: center;
  margin-bottom: 2rem;
  opacity: 0.8;
}

.copyright__content,
.copyright__content a {
  font-family: 'Noto Sans JP', sans-serif !important;
  /* color: rgba(255, 255, 255, 0.8) !important; */
  color: #1F2A2E !important;
  font-size: var(--unebi-small-mobile);
  text-decoration: none;
}

@media screen and (min-width: 750px) {

  .copyright__content,
  .copyright__content a {
    font-size: var(--unebi-small-desktop);
  }

  .copyright__content a:hover {
    /* color: #ffffff !important; */
  color: #1F2A2E !important;
    text-decoration: underline;
  }
}

/* Policies links */
.policies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.policies li {
  display: inline;
}

.policies li::before {
  content: '';
  padding: 0;
}

.policies li a {
  /* color: rgba(255, 255, 255, 0.8) !important; */
  color: #1F2A2E !important;
  opacity: 0.8;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: var(--unebi-small-mobile);
  text-decoration: none;
  transition: color 0.3s ease;
}

@media screen and (min-width: 750px) {
  .policies li a {
    font-size: var(--unebi-small-desktop);
  }

  .policies li a:hover {
    /* color: #ffffff !important; */
  color: #1F2A2E !important;
    text-decoration: underline;
  }
}

/* Payment icons */
.footer__payment {
  margin-top: 2rem;
  text-align: center;
}

.list-payment {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  align-items: center;
}

.list-payment__item {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.list-payment__item:hover {
  opacity: 1;
}

.list-payment__item .icon {
  width: auto;
  height: 2.4rem;
}

/* Newsletter section - if enabled */
.footer-block--newsletter {
  text-align: center;
}

@media screen and (min-width: 750px) {
  .footer-block--newsletter {
    text-align: right;
  }
}

.footer-block__newsletter h2 {
  /* color: #ffffff !important; */
  color: #1F2A2E !important;
}

.footer-block__newsletter-description {
  font-family: 'Noto Sans JP', sans-serif !important;
  /* color: rgba(255, 255, 255, 0.8) !important; */
  color: #1F2A2E !important;
  font-size: var(--unebi-body-mobile);
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

@media screen and (min-width: 750px) {
  .footer-block__newsletter-description {
    font-size: var(--unebi-body-desktop);
  }
}

/* Brand info section */
.footer-block__brand-info {
  /* color: #ffffff !important; */
  color: #1F2A2E !important;
}

.footer-block__brand-info .rte {
  /* color: rgba(255, 255, 255, 0.8) !important; */
  color: #1F2A2E !important;
  opacity: 0.8;
}

/* Combined footer section (navigation + logo+catchphrase) */
.footer__combined-section {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 3rem 0;
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media screen and (min-width: 750px) {
  .footer__combined-section {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* Reverse order on PC: navigation links first, logo+catchphrase second */
  .footer__navigation-links {
    order: 1;
  }

  .footer-block--logo-catchphrase {
    order: 2;
  }
}

/* Footer navigation links section - between newsletter and bottom */
.footer__navigation-links {
  padding: 0;
  margin: 0;
}

.footer__navigation-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: flex-start;
  padding: 0;
}

@media screen and (min-width: 750px) {
  .footer__navigation-wrapper {
    padding: 0;
  }
}

.footer-navigation-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 990px) {
  /* Footer left menu -> 2 columns (PC only) */
  .footer-navigation-list {
    display: block;          /* override flex */
    columns: 2;
    column-gap: 4rem;
  }

  .footer-navigation-list > li {
    break-inside: avoid;
    margin: 0 0 1.2rem 0;    /* vertical spacing between items */
  }
}

.footer-navigation-link {
  font-family: 'Noto Sans JP', sans-serif !important;
  /* color: #ffffff !important; */
  color: #1F2A2E !important;
  font-size: var(--unebi-body-mobile);
  text-decoration: none;
  transition: opacity 0.3s ease;
  display: block;
}

@media screen and (min-width: 750px) {
  .footer-navigation-link {
    font-size: var(--unebi-body-desktop);
  }
}

.footer-navigation-link:hover {
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media screen and (max-width: 749px) {
  .footer__combined-section {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 0;
    padding-bottom: 1rem;
    padding-top: 1rem;
  }

  .footer__navigation-wrapper {
    flex-direction: column;
    gap: 2rem;
  }

  .footer-navigation-list {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Footer logo and catchphrase section */
.footer-block--logo-catchphrase {
  text-align: center;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

@media screen and (min-width: 750px) {
  .footer-block--logo-catchphrase {
    text-align: right;
    margin-top: 0;
    padding-top: 0;
    flex-shrink: 0;
    width: 70%;
  }
}

.footer__logo-wrapper {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer__logo-link {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.footer__logo-link:hover {
  opacity: 0.8;
}

.footer__logo {
  max-width: 100%;
  height: auto;
}

.footer__catchphrase {
  padding: 0 1rem;
  border-bottom: 2px solid #ccff00;
  width: fit-content;
  margin: 0 auto;
  box-shadow: 0 4px 0 0px rgba(204, 255, 0, 0.2);
}

.footer__catchphrase-text {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  /* color: #ffffff !important; */
  color: #1F2A2E !important;
  font-size: var(--unebi-body-mobile);
  line-height: 1.6;
  margin: 0;
  white-space: pre-line;
}

@media screen and (min-width: 750px) {
  .footer__catchphrase-text {
    font-size: var(--unebi-body-desktop);
    text-align: center;
  }
}

/* Footer bottom section - Policy links, Payment methods, Copyright */


.footer__content-bottom-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2.5rem !important;
}

/* Policy links section */
.footer__policy-links {
  width: 100%;
  display: flex;
  justify-content: center;
}

.footer__policy-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__policy-link {
  font-family: 'Noto Sans JP', sans-serif !important;
  /* color: #ffffff !important; */
  color: #1F2A2E !important;
  font-size: 12px;
  text-decoration: none;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

@media screen and (min-width: 750px) {
  .footer__policy-link {
    font-size: var(--unebi-body-desktop);
  }
}

.footer__policy-link:hover {
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Payment methods section */
.footer__payment {
  display: none;
  width: 100%;
  justify-content: center;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.footer__payment .list-payment {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__payment .list-payment__item {
  background-color: #ffffff;
  border-radius: 0.4rem;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 40px;
}

.footer__payment .list-payment__item .icon {
  width: auto;
  height: 2.4rem;
  max-width: 100%;
}

/* Copyright section */
.footer__copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer__copyright .copyright__content {
  font-family: 'Noto Sans JP', sans-serif !important;
  /* color: #ffffff !important; */
  color: #1F2A2E !important;
  font-size: var(--unebi-small-mobile);
  margin: 0;
}

/* Footer copyright social icons */
.footer__copyright-social {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__copyright-social .list-social__item {
  margin: 0;
}

.footer__copyright-social .list-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  /* color: #ffffff !important; */
  color: #1F2A2E !important;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  padding: 0 !important;
}

.footer__copyright-social .list-social__link:hover {
  opacity: 1;
}

.footer__copyright-social .svg-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.footer__copyright-social .svg-wrapper svg {
  width: 100%;
  height: 100%;
  /* fill: #ffffff; */
  fill: #1F2A2E;
  /* color: #ffffff !important; */
  color: #1F2A2E !important;
}

@media screen and (min-width: 750px) {
  .footer__copyright .copyright__content {
    font-size: var(--unebi-small-desktop);
  }
  
  .footer__copyright {
    flex-wrap: nowrap;
  }
}

@media screen and (max-width: 749px) {
  .footer__copyright {
    flex-direction: column;
    gap: 1rem;
  }
  
  /* Change order: social links first, copyright second */
  .footer__copyright .copyright__content {
    order: 2;
  }
  
  .footer__copyright-social {
    order: 1;
  }
}

@media screen and (max-width: 749px) {
  .footer__content-bottom-wrapper {
    gap: 2rem !important;
  }

  .footer__policy-list {
    gap: 1rem 1.5rem;
  }

  .footer__payment .list-payment {
    gap: 0.8rem;
  }

  .footer__payment .list-payment__item {
    padding: 0.6rem 0.8rem;
    min-width: 50px;
    height: 35px;
  }

  .footer__payment .list-payment__item .icon {
    height: 2rem;
  }
}

/* Testimonials slider buttons */
section[id*="testimonials"] .slider-button {
  background-color: rgba(var(--unebi-dark), 0.1);
  border: 1px solid rgba(var(--unebi-dark), 1);
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

section[id*="testimonials"] .slider-button:hover:not(:disabled) {
  background-color: rgba(var(--unebi-accent), 1);
  border-color: rgba(var(--unebi-accent), 1);
}

section[id*="testimonials"] .slider-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* General multicolumn card styling */
.multicolumn-card__info h3 {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  font-size: var(--unebi-h3-mobile);
  color: rgb(var(--unebi-dark));
  margin-bottom: 1rem;
}

@media screen and (min-width: 750px) {
  .multicolumn-card__info h3 {
    font-size: var(--unebi-h3-desktop);
  }
}

.multicolumn-card__info .rte,
.multicolumn-card__info p {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: var(--unebi-body-mobile);
  line-height: 1.7;
  color: rgba(var(--unebi-dark), 0.8);
}

@media screen and (min-width: 750px) {

  .multicolumn-card__info .rte,
  .multicolumn-card__info p {
    font-size: var(--unebi-body-desktop);
  }
}

/* ============================================
   BLOG SECTION
   ============================================ */

section[id*="blog"] {
  background-color: #ffffff !important;
}

section[id*="blog"] .blog {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media screen and (min-width: 750px) {
  section[id*="blog"] .blog {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

section[id*="blog"] .title-wrapper-with-link {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 1.5rem;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

@media screen and (min-width: 750px) {
  section[id*="blog"] .title-wrapper-with-link {
    margin-bottom: 4rem;
    padding: 0 2rem;
    justify-content: center;
    flex-direction: column;
    
  }
}

section[id*="blog"] .blog__title {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  color: rgb(var(--unebi-dark));
  font-size: var(--unebi-h2-mobile);
}

@media screen and (min-width: 750px) {
  section[id*="blog"] .blog__title {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

.article-card__title {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: var(--unebi-small-mobile);
  font-weight: 600;
}

@media screen and (min-width: 750px) {
  .article-card__title {
    font-size: var(--unebi-small-desktop);
  }
}

/* ============================================
   SOCIAL CTA SECTION
   ============================================ */

section[id*="social-cta"] .multicolumn {
  background-color: #ffffff !important;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media screen and (min-width: 750px) {
  section[id*="social-cta"] .multicolumn {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

section[id*="social-cta"] .multicolumn-card__info h3 {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  font-size: var(--unebi-h3-mobile);
  color: rgb(var(--unebi-dark));
}

@media screen and (min-width: 750px) {
  section[id*="social-cta"] .multicolumn-card__info h3 {
    font-size: var(--unebi-h3-desktop);
  }
}

section[id*="social-cta"] .multicolumn-card__info .rte,
section[id*="social-cta"] .multicolumn-card__info p {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: var(--unebi-body-mobile);
  color: rgba(var(--unebi-dark), 0.8);
}

@media screen and (min-width: 750px) {

  section[id*="social-cta"] .multicolumn-card__info .rte,
  section[id*="social-cta"] .multicolumn-card__info p {
    font-size: var(--unebi-body-desktop);
  }
}

/* ============================================
   NEWSLETTER SECTION
   ============================================ */

section[id*="newsletter"] {
  background-color: #ffffff !important;
}

section[id*="newsletter"] .newsletter {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media screen and (min-width: 750px) {
  section[id*="newsletter"] .newsletter {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

section[id*="newsletter"] .newsletter__wrapper h2,
section[id*="newsletter"] .newsletter__wrapper .h3 {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  font-size: var(--unebi-h3-mobile);
  color: rgb(var(--unebi-dark));
}

@media screen and (min-width: 750px) {

  section[id*="newsletter"] .newsletter__wrapper h2,
  section[id*="newsletter"] .newsletter__wrapper .h3 {
    font-size: var(--unebi-h3-desktop);
  }
}

section[id*="newsletter"] .newsletter__wrapper .rte,
section[id*="newsletter"] .newsletter__wrapper p {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: var(--unebi-body-mobile);
  color: rgba(var(--unebi-dark), 0.8);
}

@media screen and (min-width: 750px) {

  section[id*="newsletter"] .newsletter__wrapper .rte,
  section[id*="newsletter"] .newsletter__wrapper p {
    font-size: var(--unebi-body-desktop);
  }
}

/* ============================================
   PAGE HERO STYLING - Match site tone
   ============================================ */

.unebi-page-hero {
  background-color: #ffffff !important;
}

.unebi-page-hero__kicker {
  font-family: 'Noto Sans JP', sans-serif !important;
  color: rgba(var(--unebi-dark), 0.7);
  font-size: var(--unebi-small-mobile);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media screen and (min-width: 750px) {
  .unebi-page-hero__kicker {
    font-size: var(--unebi-small-desktop);
  }
}

.unebi-page-hero__title {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  color: rgb(var(--unebi-dark));
  font-size: var(--unebi-h2-mobile);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

@media screen and (min-width: 750px) {
  .unebi-page-hero__title {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

.unebi-page-hero__lead {
  font-family: 'Noto Sans JP', sans-serif !important;
  color: rgba(var(--unebi-dark), 0.8);
  font-size: var(--unebi-body-mobile);
  line-height: 1.7;
  text-align: center;
  margin: 0 auto;
}

@media screen and (min-width: 750px) {
  .unebi-page-hero__lead {
    font-size: var(--unebi-body-desktop);
  }
}

.unebi-page-hero__inner {
  text-align: center;
}

/* ============================================
   CONCEPT DETAIL SECTION STYLING
   ============================================ */

.unebi-concept-detail {
  background-color: #ffffff !important;
}

.unebi-concept-detail .page-width {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

@media screen and (max-width: 749px) {
  .unebi-concept-detail .page-width {
    padding: 0 1.5rem;
  }
}

/* Wrapper for image and content */
.unebi-concept-detail__wrapper {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.unebi-concept-detail__wrapper--with-image {
  gap: 1rem;
}

.unebi-concept-detail__wrapper--with-gallery {
  gap: 1rem;
}

/* Header wrapper for title and lead */
.unebi-concept-detail__header-wrapper {
  width: 100%;
}

/* Mobile: Always title+subtitle → gallery → texts */
@media screen and (max-width: 749px) {

  .unebi-concept-detail__wrapper--with-gallery,
  .unebi-concept-detail__wrapper--with-image {
    flex-direction: column;
  }

  /* Title+subtitle first */
  .unebi-concept-detail__header-wrapper {
    order: 1;
  }

  /* Gallery second */
  .unebi-concept-detail__gallery-wrapper--left,
  .unebi-concept-detail__gallery-wrapper--right,
  .unebi-concept-detail__gallery-wrapper--top,
  .unebi-concept-detail__image-wrapper--left,
  .unebi-concept-detail__image-wrapper--right,
  .unebi-concept-detail__image-wrapper--top {
    order: 2;
  }

  /* Content (texts) third */
  .unebi-concept-detail__content-wrapper {
    order: 3;
  }
}

@media screen and (min-width: 750px) {

  /* PC: Reset order - title and lead stay in header-wrapper, content in content-wrapper */
  .unebi-concept-detail__header-wrapper {
    order: 0;
    width: 100%;
    flex-basis: 100%;
    /* Force full width */
  }

  .unebi-concept-detail__content-wrapper {
    order: 0;
  }

  /* Apply to both with-gallery and with-image */
  .unebi-concept-detail__wrapper--with-gallery.unebi-concept-detail__wrapper--image-left,
  .unebi-concept-detail__wrapper--with-image.unebi-concept-detail__wrapper--image-left,
  .unebi-concept-detail__wrapper--image-left {
    flex-direction: row;
    flex-wrap: wrap;
    /* Allow header-wrapper to wrap to new line */
    align-items: flex-start;
    gap: 5rem;
  }

  /* Left: gallery first, content second */
  .unebi-concept-detail__wrapper--with-gallery.unebi-concept-detail__wrapper--image-left .unebi-concept-detail__gallery-wrapper--left,
  .unebi-concept-detail__wrapper--with-image.unebi-concept-detail__wrapper--image-left .unebi-concept-detail__image-wrapper--left {
    order: 1;
  }

  .unebi-concept-detail__wrapper--with-gallery.unebi-concept-detail__wrapper--image-left .unebi-concept-detail__content-wrapper,
  .unebi-concept-detail__wrapper--with-image.unebi-concept-detail__wrapper--image-left .unebi-concept-detail__content-wrapper {
    order: 2;
  }

  /* Right: content first, gallery second */
  .unebi-concept-detail__wrapper--with-gallery.unebi-concept-detail__wrapper--image-right,
  .unebi-concept-detail__wrapper--with-image.unebi-concept-detail__wrapper--image-right,
  .unebi-concept-detail__wrapper--image-right {
    flex-direction: row;
    flex-wrap: wrap;
    /* Allow header-wrapper to wrap to new line */
    align-items: flex-start;
    gap: 5rem;
  }

  .unebi-concept-detail__wrapper--with-gallery.unebi-concept-detail__wrapper--image-right .unebi-concept-detail__gallery-wrapper--right,
  .unebi-concept-detail__wrapper--with-image.unebi-concept-detail__wrapper--image-right .unebi-concept-detail__image-wrapper--right {
    order: 2;
  }

  .unebi-concept-detail__wrapper--with-gallery.unebi-concept-detail__wrapper--image-right .unebi-concept-detail__content-wrapper,
  .unebi-concept-detail__wrapper--with-image.unebi-concept-detail__wrapper--image-right .unebi-concept-detail__content-wrapper {
    order: 1;
  }
}

/* Image wrapper */
.unebi-concept-detail__image-wrapper {
  flex-shrink: 0;
  width: 100%;
}

.unebi-concept-detail__image-wrapper--top {
  width: 100%;
  margin-bottom: 2rem;
}

@media screen and (min-width: 750px) {

  .unebi-concept-detail__image-wrapper--left,
  .unebi-concept-detail__image-wrapper--right {
    width: 45%;
    max-width: 500px;
  }

  .unebi-concept-detail__image-wrapper--top {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 3rem;
  }
}

.unebi-concept-detail__image {
  width: 100%;
  height: auto;
  border-radius: 0.4rem;
  object-fit: cover;
}

/* Content wrapper */
.unebi-concept-detail__content-wrapper {
  flex: 1;
  max-width: 100%;
  /* Ensure it doesn't overflow */
  min-width: 0;
  /* Allow shrinking */
}

@media screen and (min-width: 750px) {

  .unebi-concept-detail__wrapper--image-left .unebi-concept-detail__content-wrapper,
  .unebi-concept-detail__wrapper--image-right .unebi-concept-detail__content-wrapper {
    width: 55%;
    max-width: 55%;
    /* Add max-width to prevent overflow */
  }
}

/* Title styling */
.unebi-concept-detail__title {
  font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important;
  color: rgb(var(--unebi-dark));
  font-size: var(--unebi-h2-mobile);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 2rem;
  margin-top: 0 !important;
}


@media screen and (min-width: 750px) {
  .unebi-concept-detail__title {
    font-size: calc(var(--font-heading-scale) * 3.2rem);
    margin-bottom: 3rem;
  }


}

/* Lead text styling */
.unebi-concept-detail__lead {
  font-family: 'Noto Sans JP', sans-serif !important;
  color: rgba(var(--unebi-dark), 0.9);
  font-size: var(--unebi-body-mobile);
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
  padding: 0 1rem;
}

@media screen and (min-width: 750px) {
  .unebi-concept-detail__lead {
    font-size: var(--unebi-body-desktop);
    padding: 0 2rem;
  }
}

/* Content styling - text next to image */
.unebi-concept-detail__content {
  font-family: 'Noto Sans JP', sans-serif !important;
  color: rgba(var(--unebi-dark), 0.8);
  font-size: var(--unebi-body-mobile);
  line-height: 1.9;
  text-align: left;
  max-width: 100%;
  /* Add max-width to prevent overflow */
  word-wrap: break-word;
  /* Allow long words to break */
  overflow-wrap: break-word;
  /* Additional word breaking support */
}

.unebi-concept-detail__content p {
  font-family: 'Noto Sans JP', sans-serif !important;
  color: rgba(var(--unebi-dark), 0.8);
  font-size: var(--unebi-body-mobile);
  line-height: 1.9;
  margin-bottom: 2rem;
}

.unebi-concept-detail__content p:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 750px) {
  .unebi-concept-detail__content {
    font-size: var(--unebi-body-desktop);
    line-height: 2;
    max-width: 100%;
    /* Ensure text doesn't overflow container */
  }

  .unebi-concept-detail__content p {
    font-size: var(--unebi-body-desktop);
    line-height: 2;
    margin-bottom: 2.5rem;
  }
}

/* Concept Gallery Styling */
.unebi-concept-gallery {
  width: 100%;
}

.unebi-concept-gallery__main {
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;
}

.unebi-concept-gallery__main-item {
  display: none;
  width: 100%;
}

.unebi-concept-gallery__main-item.is-active {
  display: block;
}

.unebi-concept-gallery__main-image {
  width: 100%;
  height: auto;
  border-radius: 0.4rem;
  object-fit: cover;
  display: block;
}

.unebi-concept-gallery__thumbnails {
  display: flex;
  gap: 0.8rem;
  flex-wrap: nowrap;
  /* Changed from wrap to nowrap - keep all thumbnails on one line */
  justify-content: flex-start;
  /* Changed from center to flex-start */
  width: 100%;
}

.unebi-concept-gallery__thumbnail {
  flex: 0 0 auto;
  min-width: 0;
  /* Allow shrinking if needed */
  height: 80px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.4rem;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Width based on count classes - dynamically calculated */
.thumbnails-count-2 .unebi-concept-gallery__thumbnail {
  width: calc((100% - (1 * 0.8rem)) / 2);
}

.thumbnails-count-3 .unebi-concept-gallery__thumbnail {
  width: calc((100% - (2 * 0.8rem)) / 3);
}

.thumbnails-count-4 .unebi-concept-gallery__thumbnail {
  width: calc((100% - (3 * 0.8rem)) / 4);
}

.thumbnails-count-5 .unebi-concept-gallery__thumbnail {
  width: calc((100% - (4 * 0.8rem)) / 5);
}

.unebi-concept-gallery__thumbnail:hover {
  border-color: rgba(var(--unebi-accent), 0.5);
  transform: scale(1.05);
}

.unebi-concept-gallery__thumbnail.is-active {
  border-color: rgb(var(--unebi-accent));
}

.unebi-concept-gallery__thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 750px) {
  .unebi-concept-gallery__thumbnails {
    gap: 1rem;
  }

  .unebi-concept-gallery__thumbnail {
    height: 100px;
  }

  /* Width based on count classes - desktop */
  .thumbnails-count-2 .unebi-concept-gallery__thumbnail {
    width: calc((100% - (1 * 1rem)) / 2);
  }

  .thumbnails-count-3 .unebi-concept-gallery__thumbnail {
    width: calc((100% - (2 * 1rem)) / 3);
  }

  .thumbnails-count-4 .unebi-concept-gallery__thumbnail {
    width: calc((100% - (3 * 1rem)) / 4);
  }

  .thumbnails-count-5 .unebi-concept-gallery__thumbnail {
    width: calc((100% - (4 * 1rem)) / 5);
  }
}

/* Gallery wrapper positioning */
.unebi-concept-detail__gallery-wrapper {
  flex-shrink: 0;
  width: 100%;
}

.unebi-concept-detail__gallery-wrapper--top {
  width: 100%;
  margin-bottom: 2rem;
}

@media screen and (min-width: 750px) {

  .unebi-concept-detail__gallery-wrapper--left,
  .unebi-concept-detail__gallery-wrapper--right {
    width: 45%;
    max-width: 500px;
    flex-shrink: 0;
    /* Prevent shrinking */
  }

  .unebi-concept-detail__gallery-wrapper--top {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 3rem;
  }
}

@media screen and (min-width: 750px) {
  .shopify-policy__title h1 {
    color: #1F2A2E !important;
    font-family: Helvetica, 'Noto Sans Japanese', sans-serif !important
  }

  .shopify-policy__body {
    color: #1F2A2E !important;
  }
}

/* Featured Blog - Mobile vs Desktop counter display */
.blog .slider-counter--total-mobile {
  display: inline;
}

.blog .slider-counter--total-desktop {
  display: none;
}

@media screen and (min-width: 750px) {
  .blog .slider-counter--total-mobile {
    display: none;
  }

  .blog .slider-counter--total-desktop {
    display: inline;
  }
}