/* ============================================
   SHISEI SALON — Warm Luxury Redesign
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Noto+Sans+JP:wght@200;300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* ---- palette ---- */
  --bg:          #FAFAF7;
  --bg-warm:     #F5F1EC;
  --bg-card:     #FFFFFF;
  --bg-dark:     #1C1C1C;
  --bg-section:  #F0EBE4;

  --text:        #2D2D2D;
  --text-light:  #6B6560;
  --text-muted:  #9E9690;
  --heading:     #1A1A1A;

  --accent:      #B8977E;
  --accent-light:#D4C3B0;
  --accent-pale: #EDE6DD;
  --accent-dark: #96775E;

  --border:      #E5DFD8;
  --border-light:#F0ECE6;

  --white:       #FFFFFF;
  --black:       #1A1A1A;

  /* ---- fonts ---- */
  --f-display: 'Playfair Display', 'Cormorant Garamond', serif;
  --f-serif:   'Cormorant Garamond', 'Noto Serif JP', serif;
  --f-body:    'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- motion ---- */
  --ease: cubic-bezier(.23,1,.32,1);
  --dur:  .5s;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
  --shadow:    0 4px 20px rgba(0,0,0,.05);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.08);
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after { box-sizing: border-box; }

body {
  font-family: var(--f-body) !important;
  font-weight: 300 !important;
  color: var(--text) !important;
  background: var(--bg) !important;
  letter-spacing: .04em;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent-light); border-radius: 10px; }

img { border-radius: 3px; }

a {
  color: var(--accent-dark);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--accent) !important; }

/* ============================================
   HEADER
   ============================================ */
.l-header,
header.l-header,
.l-header__inner {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border-light) !important;
  box-shadow: none !important;
  transition: background var(--dur) var(--ease);
}

/* scrolled */
.l-header.is-scrolled,
.l-header.-scrolled {
  background: rgba(255,255,255,.97) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* logo */
.c-headLogo a,
.c-headLogo__txt {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  color: var(--heading) !important;
  letter-spacing: .18em !important;
  font-size: 1.4rem !important;
}

/* nav */
.c-gnav a,
.l-header .c-gnav a,
.l-header__menu a {
  font-family: var(--f-body) !important;
  font-weight: 400 !important;
  font-size: .78rem !important;
  color: var(--text) !important;
  letter-spacing: .14em !important;
  position: relative;
  transition: color var(--dur) var(--ease) !important;
}

.c-gnav a:hover { color: var(--accent) !important; }

.c-gnav > li > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 1.5px;
  background: var(--accent);
  transition: width var(--dur) var(--ease), left var(--dur) var(--ease);
}
.c-gnav > li > a:hover::after { width: 70%; left: 15%; }

/* hamburger */
.c-menuBtn span,
.p-spMenu__btn span { background: var(--heading) !important; }

/* ============================================
   HERO / MAIN VISUAL
   ============================================ */
.p-mainVisual {
  position: relative;
  overflow: hidden;
}

.p-mainVisual::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(28,28,28,.15) 0%,
    rgba(28,28,28,.02) 30%,
    rgba(28,28,28,.35) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.p-mainVisual__slide img,
.p-mainVisual__img img {
  animation: slowZoom 20s ease-in-out infinite alternate;
}
@keyframes slowZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

.p-mainVisual__textLayer,
.p-mainVisual__text { z-index: 2; position: relative; }

.p-mainVisual__text,
.p-mainVisual__title {
  font-family: var(--f-display) !important;
  color: #fff !important;
  font-weight: 400 !important;
  letter-spacing: .18em !important;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--f-serif) !important;
  color: var(--heading) !important;
  font-weight: 500 !important;
  letter-spacing: .06em;
  line-height: 1.6;
}

/* --- h2 --- */
.post_content h2,
.c-headingLv2 {
  font-family: var(--f-serif) !important;
  font-size: 1.55rem !important;
  font-weight: 500 !important;
  color: var(--heading) !important;
  background: none !important;
  border: none !important;
  text-align: center !important;
  padding: .6em 0 !important;
  margin: 3em 0 1.8em !important;
  position: relative;
}
.post_content h2::before {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: var(--accent);
  margin: 0 auto .9em;
}
.post_content h2::after {
  content: '' !important;
  display: block !important;
  width: 32px !important; height: 1px !important;
  background: var(--accent) !important;
  margin: .9em auto 0 !important;
  border: none !important;
}

/* --- h3 --- */
.post_content h3 {
  font-size: 1.22rem !important;
  color: var(--heading) !important;
  border: none !important;
  background: none !important;
  padding: .6em 0 .6em 1.1em !important;
  border-left: 2px solid var(--accent) !important;
  margin: 2.4em 0 1.2em !important;
}

/* --- h4 --- */
.post_content h4 {
  font-family: var(--f-body) !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  margin: 2em 0 1em !important;
}

/* body text */
p, li, dd, dt, td, th {
  font-weight: 300;
  color: var(--text);
  line-height: 2.15;
}

strong, b { font-weight: 500; color: var(--heading); }

/* ============================================
   LAYOUT / CONTENT WRAPPER
   ============================================ */
.l-content,
.l-container,
.l-mainContent__inner { background: transparent !important; }

.l-mainContent__body,
article,
.post_content { background: transparent !important; }

/* single post body → wrapped in white card */
.l-mainContent > .l-mainContent__body {
  background: var(--bg-card) !important;
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 3em 3.5em !important;
  margin-bottom: 2.5em;
}
@media (max-width:599px) {
  .l-mainContent > .l-mainContent__body {
    padding: 1.8em 1.4em !important;
    border-radius: 0;
  }
}

/* ============================================
   POST CARDS  (Top / Archive)
   ============================================ */
.p-postList__item {
  background: var(--bg-card) !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease) !important;
}
.p-postList__item:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.p-postList__thumb { overflow: hidden; }
.p-postList__thumb img {
  transition: transform .9s var(--ease) !important;
}
.p-postList__item:hover .p-postList__thumb img {
  transform: scale(1.06) !important;
}

.p-postList__title {
  font-family: var(--f-body) !important;
  font-weight: 400 !important;
  color: var(--heading) !important;
  letter-spacing: .02em;
  line-height: 1.65;
}

.p-postList__meta,
.p-postList__date {
  color: var(--text-muted) !important;
  font-size: .75rem !important;
  letter-spacing: .06em;
}

/* category badge */
.c-postTag,
.p-postList__cat,
.c-categoryBadge,
.cat-label {
  background: var(--accent) !important;
  color: #fff !important;
  font-size: .65rem !important;
  font-weight: 500 !important;
  letter-spacing: .1em !important;
  border-radius: 2px !important;
  padding: .15em .7em !important;
}

/* ============================================
   SECTION BACKGROUNDS (alternate)
   ============================================ */
.post_content > .swell-block-fullWide:nth-child(even),
.post_content > section:nth-child(even) {
  background: var(--bg-warm) !important;
}

.post_content > .swell-block-fullWide:nth-child(odd),
.post_content > section:nth-child(odd) {
  background: var(--bg) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.swell-block-button a,
.wp-block-button__link,
.c-btn,
input[type="submit"],
button[type="submit"] {
  background: var(--heading) !important;
  color: #fff !important;
  border: 1.5px solid var(--heading) !important;
  border-radius: 50px !important;
  font-family: var(--f-body) !important;
  font-weight: 400 !important;
  font-size: .82rem !important;
  letter-spacing: .18em !important;
  padding: .9em 2.8em !important;
  transition: all var(--dur) var(--ease) !important;
  position: relative;
  overflow: hidden;
}
.swell-block-button a:hover,
.wp-block-button__link:hover,
.c-btn:hover,
input[type="submit"]:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(184,151,126,.3) !important;
}

/* outline */
.swell-block-button.-style-outline a,
.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--heading) !important;
}
.swell-block-button.-style-outline a:hover,
.is-style-outline .wp-block-button__link:hover {
  background: var(--heading) !important;
  color: #fff !important;
}

/* ============================================
   SWELL BLOCKS
   ============================================ */
/* FAQ */
.swell-block-faq .swell-block-faq__item {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 1.4em 0 !important;
  background: transparent !important;
}
.swell-block-faq .swell-block-faq__q {
  font-weight: 400 !important;
  color: var(--heading) !important;
}

/* Balloon */
.swell-block-balloon .swell-block-balloon__body {
  background: var(--bg-warm) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  color: var(--text) !important;
}

/* Cap block */
.swell-block-capBlock {
  border-color: var(--border) !important;
  border-radius: 4px !important;
  background: var(--bg-card) !important;
}
.swell-block-capBlock .swell-block-capBlock__title {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 400 !important;
}

/* Step */
.swell-block-step .swell-block-step__number {
  background: var(--accent) !important;
  color: #fff !important;
}

/* ============================================
   TABLE
   ============================================ */
.post_content table { border-collapse: collapse; border: none !important; }

.post_content table th {
  background: var(--bg-dark) !important;
  color: #fff !important;
  font-weight: 400 !important;
  letter-spacing: .04em;
  border: none !important;
  padding: .9em 1.2em !important;
}
.post_content table td {
  background: var(--bg-card) !important;
  border: none !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: .9em 1.2em !important;
  color: var(--text) !important;
}
.post_content table tr:hover td {
  background: var(--bg-warm) !important;
}

/* ============================================
   BLOCKQUOTE
   ============================================ */
blockquote,
.post_content blockquote {
  background: var(--bg-warm) !important;
  border: none !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 4px 4px 0 !important;
  padding: 1.6em 2em !important;
  color: var(--text-light) !important;
  font-style: italic;
}

/* ============================================
   SIDEBAR
   ============================================ */
.l-sidebar .widget,
.l-sidebar .widget_block {
  background: var(--bg-card) !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 1.6em !important;
  margin-bottom: 1.8em !important;
}

.l-sidebar .widget-title,
.l-sidebar .widgettitle {
  font-family: var(--f-serif) !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  color: var(--heading) !important;
  text-align: center;
  border: none !important;
  padding-bottom: .8em !important;
  margin-bottom: 1em !important;
  position: relative;
}
.l-sidebar .widget-title::after,
.l-sidebar .widgettitle::after {
  content: '';
  display: block;
  width: 24px; height: 1px;
  background: var(--accent);
  margin: .7em auto 0;
}

/* ============================================
   FOOTER
   ============================================ */
.l-footer,
footer.l-footer {
  background: var(--bg-dark) !important;
  color: rgba(255,255,255,.6) !important;
  padding: 4em 0 0 !important;
}

.l-footer a {
  color: rgba(255,255,255,.6) !important;
}
.l-footer a:hover {
  color: var(--accent-light) !important;
}

.l-footer .widget-title,
.l-footer .widgettitle {
  font-family: var(--f-display) !important;
  color: rgba(255,255,255,.85) !important;
  font-weight: 400 !important;
  letter-spacing: .14em;
  font-size: 1rem !important;
}

.l-footer__copyright,
.c-copyright {
  background: rgba(0,0,0,.2) !important;
  color: rgba(255,255,255,.35) !important;
  font-size: .7rem !important;
  letter-spacing: .08em;
  padding: 1.2em 0 !important;
  margin-top: 3em !important;
}

/* ============================================
   MOBILE BOTTOM BAR
   ============================================ */
.p-fixBtnWrap,
.l-fixBottom {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--border-light) !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,.04) !important;
}
.p-fixBtnWrap a,
.l-fixBottom a {
  color: var(--text) !important;
  font-size: .68rem !important;
}

/* ============================================
   MOBILE DRAWER
   ============================================ */
.p-spMenu__inner,
.c-drawer__body {
  background: var(--bg-card) !important;
}
.p-spMenu__inner a,
.c-drawer__body a {
  color: var(--text) !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
  border-color: var(--border-light) !important;
}
.p-spMenu__inner a:hover,
.c-drawer__body a:hover {
  color: var(--accent) !important;
}

/* ============================================
   BREADCRUMB
   ============================================ */
.c-breadcrumb,
.p-breadcrumb {
  background: transparent !important;
  font-size: .73rem !important;
  color: var(--text-muted) !important;
}
.c-breadcrumb a { color: var(--text-muted) !important; }
.c-breadcrumb a:hover { color: var(--accent) !important; }

/* ============================================
   PAGINATION
   ============================================ */
.c-pagination .page-numbers {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 50% !important;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem !important;
  transition: all var(--dur) var(--ease);
}
.c-pagination .page-numbers.current,
.c-pagination .page-numbers:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* ============================================
   FORMS
   ============================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  background: var(--bg-card) !important;
  font-family: var(--f-body) !important;
  font-weight: 300 !important;
  color: var(--text) !important;
  padding: .85em 1.1em !important;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(184,151,126,.15) !important;
  outline: none !important;
}

/* ============================================
   SINGLE POST
   ============================================ */
.c-postTitle,
.post_title,
.entry-title {
  font-family: var(--f-serif) !important;
  font-weight: 500 !important;
  color: var(--heading) !important;
  letter-spacing: .04em;
  line-height: 1.55;
  font-size: 1.6rem !important;
}

.c-postMetas { color: var(--text-muted) !important; font-size: .78rem !important; }

/* author box */
.c-authorBox,
.p-authorBox {
  background: var(--bg-warm) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 2em !important;
}

/* related posts heading */
.p-relatedPosts__title {
  font-family: var(--f-serif) !important;
  font-weight: 500 !important;
}

/* ============================================
   SALON BOOKING
   ============================================ */
.sln-salon {
  font-family: var(--f-body) !important;
}
.sln-salon .sln-btn,
.sln-salon .btn-primary {
  background: var(--accent) !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 400 !important;
  letter-spacing: .1em !important;
  transition: all var(--dur) var(--ease) !important;
}
.sln-salon .sln-btn:hover,
.sln-salon .btn-primary:hover {
  background: var(--accent-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(184,151,126,.3) !important;
}

/* ============================================
   HR / SEPARATOR
   ============================================ */
hr,
.wp-block-separator {
  border-top: 1px solid var(--border) !important;
  opacity: 1;
}
.wp-block-separator.is-style-dots::before {
  color: var(--accent) !important;
}

/* ============================================
   PAGE TOP
   ============================================ */
.c-pageTop,
.p-fixPageTop {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 44px !important; height: 44px !important;
  box-shadow: var(--shadow) !important;
  transition: all var(--dur) var(--ease) !important;
}
.c-pageTop:hover,
.p-fixPageTop:hover {
  background: var(--accent-dark) !important;
  transform: translateY(-3px);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.p-postList__item {
  animation: fadeUp .7s var(--ease) both;
}
.p-postList__item:nth-child(1) { animation-delay: .05s; }
.p-postList__item:nth-child(2) { animation-delay: .12s; }
.p-postList__item:nth-child(3) { animation-delay: .19s; }
.p-postList__item:nth-child(4) { animation-delay: .26s; }
.p-postList__item:nth-child(5) { animation-delay: .33s; }
.p-postList__item:nth-child(6) { animation-delay: .40s; }

/* ============================================
   SWELL COLOR OVERRIDES
   ============================================ */
.has-swl-main-color { color: var(--accent) !important; }
.has-swl-main-background-color { background-color: var(--accent) !important; }
.has-swl-main-thin-background-color { background-color: var(--bg-warm) !important; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:959px) {
  .post_content h2 { font-size: 1.35rem !important; }
  .post_content h3 { font-size: 1.1rem !important; }
}

@media (max-width:599px) {
  body { font-size: .9rem !important; }

  .post_content h2 {
    font-size: 1.18rem !important;
    margin: 2.2em 0 1.4em !important;
  }

  .c-headLogo a,
  .c-headLogo__txt {
    font-size: 1.15rem !important;
    letter-spacing: .12em !important;
  }

  .swell-block-button a,
  .c-btn {
    padding: .8em 2em !important;
    font-size: .78rem !important;
  }

  .l-footer { padding: 2.5em 0 0 !important; }
}