/* การออกแบบซาลอน: ขาว ดำ และเขียวมะกอก */
:root {
  --navy: #25291f;
  --red: #74795a;
  --pale: #f4f5f0;
  --ink: #262924;
  --muted: #787b73;
  --line: #e2e4dc;
  --container: 1220px;
}
body {font-weight:400;color:var(--ink)}
h1,h2 {font-weight:500;letter-spacing:-1px}
h3 {font-weight:500}
.section {padding:95px 0}
.compact {padding:62px 0}
.kicker {font-size:14px;font-weight:400;color:#74795a;margin-bottom:20px}
.site-header {border-bottom:1px solid #ededeb;background:#fff}
.header-inner {display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;min-height:154px;padding-top:20px;align-items:center}
.header-inner .brand {justify-content:center;text-align:center;font-size:50px;font-weight:500;line-height:1.1}
.header-inner .brand small {font-size:11px;letter-spacing:0;font-weight:400;color:#555a51;margin-top:9px}
.header-phone {font-size:16px;line-height:1.6;justify-self:start}
.header-phone span {display:block;color:var(--muted);font-size:11px}
.header-actions {display:flex;align-items:center;justify-self:end;gap:23px}
.header-line {font-size:12px;border-bottom:1px solid #74795a;padding-bottom:4px}
.cart-toggle {background:transparent;border:1px solid #cdd1c4;color:var(--ink);width:43px;height:43px;border-radius:0}
.cart-count {background:#74795a;top:-6px;right:-7px;font-size:10px}
.main-nav {grid-column:1/-1;grid-row:2;justify-content:center;margin:19px 0 0;gap:48px;min-height:48px}
.main-nav a {font-size:14px;padding:11px 0 14px}
.main-nav a[aria-current=page] {color:#858864}
.main-nav a[aria-current=page]:after {height:1px}
.button {border-radius:0;font-size:14px;font-weight:400;min-height:48px;padding:12px 28px}
.red {background:#74795a}
.red:hover {background:#575c42}
.outline {border-color:#a0a58d;color:#50573f}
.text-link {color:#676e50;border-color:#b2b79f;font-size:14px}
.salon-hero {height:min(750px,calc(100svh - 160px));min-height:580px;position:relative;margin:10px 24px 0;overflow:hidden;background:#363a31}
.salon-slides,.salon-slide,.salon-hero-shade {position:absolute;inset:0}
.salon-slide img {width:100%;height:100%;object-fit:cover;object-position:center 54%}
.salon-slide[hidden] {display:none}
.salon-hero-shade {background:linear-gradient(180deg,rgba(0,0,0,.05) 20%,rgba(0,0,0,.22) 45%,rgba(0,0,0,.6) 100%);pointer-events:none}
.salon-hero-content {position:absolute;bottom:105px;left:15%;right:15%;text-align:center;color:white}
.salon-hero-content>span {font-size:13px;display:block;margin-bottom:18px}
.salon-hero-content h1 {font-size:clamp(48px,4.8vw,70px);font-weight:500;line-height:1.25;letter-spacing:-1px}
.salon-hero-content p {font-size:16px;margin-top:18px;color:#f1f0ed}
.hero-button {margin-top:25px;border-color:#f0f1eb;color:white;font-size:13px;background:transparent}
.hero-button:hover {background:white;color:#34382d}
.slide-arrow {position:absolute;top:48%;width:43px;height:55px;border:1px solid #ffffff60;background:#00000012;color:#fff;font-size:35px;font-weight:400;line-height:1;display:grid;place-items:center}
.previous-slide {left:25px}
.next-slide {right:25px}
.slide-bottom {position:absolute;bottom:25px;left:35px;right:35px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;color:#fff;font-size:11px}
.slide-bottom>span:last-child {text-align:right}
.slide-dots {display:flex;gap:9px;justify-content:center}
.slide-dot {width:7px;height:7px;border-radius:50%;background:#ffffff60;border:1px solid white;padding:0}
.slide-dot.active {background:#fff;width:22px;border-radius:6px}
.image-note {font-size:10px;margin-top:0;padding-top:11px}
.welcome-section {padding:90px 0 78px;text-align:center;max-width:900px}
.welcome-section h2 {font-size:clamp(36px,4.1vw,54px);margin-bottom:24px}
.welcome-lines {color:#72766c;font-size:15px;line-height:1.9}
.welcome-section .text-link {margin-top:27px}
.split {gap:85px}
.story-photo {height:540px}
.story-photo img {border-radius:0;object-position:58% center}
.story-photo>span {background:#74795a;color:#fff;left:0;bottom:30px;border-radius:0;padding:13px 24px;font-size:12px}
.story-copy h2 {font-size:43px;line-height:1.45}
.story-copy p {font-size:15px;line-height:1.95}
.reason-grid {gap:60px;margin-top:45px}
.reason-icon {color:#74795a;font-size:33px;border-bottom:1px solid #cdd1c0;padding-bottom:22px;margin-bottom:23px}
.reason-grid h3 {font-size:23px}
.reason-grid p {font-size:14px;line-height:1.9}
.section-heading h2 {font-size:43px}
.section-heading>p {font-size:14px}
.promotion {border-radius:0;background:#74795a;color:#fff;padding:0;grid-template-columns:1fr 1fr;gap:0;overflow:hidden}
.promotion>div:first-child {padding:55px}
.promotion .kicker {color:#e9ebdf}
.promotion h2 {font-size:43px}
.promotion p {color:#f0f1e8;font-size:14px}
.promotion small {color:#daddce}
.promotion .button {background:transparent;border-color:#e4e7db}
.promotion .button:hover {background:#fff;color:#51583f}
.promo-photo {height:100%;min-height:490px}
.promo-photo img {object-position:55% center}
.notice {background:#f4f5ef;color:#6b725a;border-left-color:#a8af90;font-size:12px}
.service-grid {gap:42px 28px}
.service-card {border:0;border-radius:0;background:transparent;overflow:visible}
.service-photo {height:340px;overflow:hidden}
.service-photo img {transition:transform .4s}
.service-card:hover .service-photo img {transform:scale(1.035)}
.service-photo span {border-radius:0;font-size:11px;background:#ffffffed;top:auto;bottom:15px;left:15px;color:#4b523e}
.service-info {padding:23px 0 0}
.service-info h3 {font-size:23px}
.service-info>p {min-height:48px;font-size:13px}
.service-bottom {border-top:1px solid #e3e5dc;margin-top:17px;padding-top:16px;flex-direction:row;align-items:flex-end}
.service-bottom small {font-size:10px}
.service-bottom strong {font-size:26px;font-weight:500;color:#626a4e}
.add-service {font-size:12px;border-color:#aeb59c;color:#626a4e}
.add-service b {font-size:18px;font-weight:400}
.article-grid {gap:30px}
.article-grid article {border-top:0;padding-top:0}
.article-image {width:100%;height:240px;object-fit:cover;margin-bottom:25px}
.article-grid h3 {font-size:22px}
.article-grid p {font-size:14px;line-height:1.9}
.reviews {background:#eff1e8}
.review-inner h2 {font-size:44px}
.review-inner p {font-size:14px;line-height:1.95}
.terms-grid {font-size:13px;gap:45px}
.terms-grid strong {font-weight:500}
.contact-grid {gap:70px}
.contact-grid h2 {font-size:44px}
.contact-grid>div>p {font-size:14px}
.map-wrap iframe {border-radius:0;filter:grayscale(.65)}
.contact-list strong {font-weight:400;font-size:16px}
.site-footer {background:#3f4631;color:#f4f5ef;padding-top:65px}
.footer-grid .brand {font-weight:400;font-size:41px}
.footer-grid .brand small {font-size:11px;letter-spacing:0}
.footer-grid p,.footer-grid address {color:#d0d5c5;font-size:13px}
.footer-grid h3 {font-weight:400;font-size:16px}
.footer-grid>div>a:not(.brand) {font-size:13px;color:#e0e4d6}
.footer-bottom {border-color:#6a725b;color:#cbd0bf}
.page-heading {text-align:center;padding-top:32px;padding-bottom:55px}
.page-heading .back {text-align:left;font-size:12px;margin-bottom:48px;color:#898d7f}
.page-heading h1 {font-size:60px;line-height:1.3}
.page-heading>p {margin:25px auto 0;font-size:14px}
.page-heading+.section {padding-top:20px}
.filters {justify-content:center;margin-bottom:40px}
.filters button {border-radius:0;border-color:#d5dac8;font-size:13px}
.filters button.active {background:#74795a;border-color:#74795a}
.policy h2 {font-weight:400;color:#636b4d}
.policy p {font-size:15px;line-height:1.95}
.cart-drawer {color:#30352a}
.cart-close {border-radius:0}
.cart-row img {border-radius:0}
.toast {background:#596246;border-radius:0}
@media(min-width:1500px){.salon-hero {height:780px;max-width:1800px;margin-inline:auto}.salon-hero-content {bottom:110px}}
@media(max-width:1050px){.main-nav {gap:33px}.header-inner .brand {font-size:44px}.header-actions {gap:14px}.header-line {font-size:11px}.split {gap:45px}.story-copy h2,.section-heading h2 {font-size:36px}.promotion>div:first-child {padding:35px}.service-photo {height:280px}.service-bottom {gap:6px}.service-info h3 {font-size:21px}.promo-photo {min-height:470px}}
@media(max-width:760px){
  .section {padding:62px 0}
  .compact {padding:44px 0}
  .container {width:calc(100% - 38px)}
  .header-inner {grid-template-columns:1fr auto 1fr;min-height:130px;padding-top:18px;gap:0}
  .header-inner .brand {grid-column:2;grid-row:1;font-size:36px;white-space:nowrap}
  .header-inner .brand small {font-size:8px;margin-top:6px}
  .header-phone {grid-column:1;grid-row:1;font-size:10px}
  .header-phone span {font-size:8px;max-width:70px}
  .header-actions {grid-column:3;grid-row:1;gap:0}
  .header-line {display:none}
  .cart-toggle {width:34px;height:34px;grid-column:auto;grid-row:auto}
  .cart-toggle svg {width:19px;height:19px}
  .main-nav {grid-column:1/-1;grid-row:2;gap:23px;margin:14px 0 0;padding:10px 0;justify-content:flex-start;min-height:43px}
  .main-nav a {font-size:11px;padding:6px 0}
  .salon-hero {margin:8px 12px 0;min-height:560px;height:calc(86svh - 130px);max-height:650px}
  .salon-hero-content {left:35px;right:35px;bottom:95px}
  .salon-hero-content>span {font-size:11px;margin-bottom:16px}
  .salon-hero-content h1 {font-size:42px;line-height:1.35}
  .salon-hero-content p {font-size:12px;max-width:30ch;margin:18px auto 0}
  .hero-button {font-size:11px;padding:10px 17px;min-height:43px;margin-top:20px}
  .slide-arrow {width:27px;height:41px;font-size:26px;top:38%;background:#00000020}
  .previous-slide {left:10px}
  .next-slide {right:10px}
  .slide-bottom {left:19px;right:19px;bottom:22px;font-size:10px;grid-template-columns:1fr 1fr 1fr}
  .slide-bottom>span:last-child {font-size:8px;max-width:95px;justify-self:end}
  .image-note {font-size:9px;line-height:1.7}
  .welcome-section {padding:55px 0 45px}
  .welcome-section h2 {font-size:37px;margin-bottom:20px}
  .welcome-lines {font-size:13px;line-height:2}
  .welcome-section .kicker {font-size:12px}
  .story-photo {height:390px}
  .story-copy h2,.section-heading h2,.contact-grid h2 {font-size:36px}
  .story-copy p {font-size:14px}
  .reason-grid {gap:30px}
  .reason-icon {border:0;padding:0;top:0}
  .reason-grid p {font-size:13px}
  .reason-grid h3 {font-size:21px}
  .promotion {grid-template-columns:1fr}
  .promotion>div:first-child {padding:36px 27px}
  .promotion h2 {font-size:36px}
  .promo-photo {height:290px;min-height:0}
  .service-grid {gap:30px 15px}
  .service-photo {height:225px}
  .service-info {padding-top:17px}
  .service-info h3 {font-size:18px}
  .service-info>p {font-size:11px;min-height:57px}
  .service-bottom {flex-direction:column;align-items:flex-start;margin-top:10px;padding-top:12px}
  .service-bottom strong {font-size:23px}
  .service-bottom small {font-size:9px}
  .service-photo span {font-size:9px;padding:4px 8px;bottom:10px;left:9px}
  .add-service {font-size:11px}
  .notice {font-size:11px}
  .article-grid {gap:35px}
  .article-image {height:270px;margin-bottom:18px}
  .article-grid h3 {font-size:22px}
  .article-grid p {font-size:13px}
  .review-inner h2 {font-size:34px}
  .review-inner p {font-size:13px}
  .contact-grid {gap:35px}
  .contact-list strong {font-size:15px}
  .page-heading {padding-top:25px;padding-bottom:35px}
  .page-heading h1 {font-size:39px}
  .page-heading>p {font-size:13px}
  .page-heading .back {margin-bottom:35px}
  .footer-grid .brand {font-size:36px}
  .filters {justify-content:flex-start;gap:8px}
  .filters button {font-size:11px}
}
@media(max-width:370px){.header-phone {font-size:9px}.header-phone span {font-size:7px}.header-inner .brand {font-size:31px}.header-inner .brand small {font-size:7px}.salon-hero-content h1 {font-size:36px}.service-grid {grid-template-columns:1fr}.service-photo {height:340px}.service-bottom {flex-direction:row;align-items:flex-end}.service-info>p {min-height:0}.main-nav {gap:20px}}