/* PENNY BEAUTY V1.8 — Homepage density & mobile UX optimization
   Load AFTER site-v17.css / site-v172.css / navigation-v1747.css
*/

/* ---------- Desktop polish ---------- */
@media (min-width: 1001px){

  /* Services: 5 items in one row */
  .service-image-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:16px !important;
  }

  .service-image-card{
    min-width:0 !important;
  }

  .service-media{
    aspect-ratio:4/3 !important;
  }

  .service-image-card .service-body{
    padding:18px 16px 16px !important;
  }

  .service-image-card .service-body h3{
    font-size:20px !important;
    line-height:1.35 !important;
  }

  .service-image-card .service-body p{
    font-size:13px !important;
    line-height:1.6 !important;
  }

  .service-duration{
    font-size:12px !important;
    padding-top:10px !important;
  }

  .service-link{
    font-size:12px !important;
    margin-top:8px !important;
  }

  /* About: slightly tighter */
  .about-section{
    padding-top:68px !important;
    padding-bottom:68px !important;
  }

  /* Locations: lower card height */
  .locations{
    padding-top:68px !important;
    padding-bottom:68px !important;
  }

  .location-grid article{
    padding:20px 18px !important;
    min-height:150px !important;
  }

  .location-grid h3{
    margin:14px 0 8px !important;
  }

  .location-grid p{
    margin:0 !important;
  }

  /* Footer slightly tighter */
  footer{
    padding-top:34px !important;
    padding-bottom:56px !important;
  }
}

/* Hide empty journal section on homepage */
.home-articles:has(.empty){
  display:none !important;
}
.section.soft:has(.home-articles .empty){
  display:none !important;
}

/* ---------- Mobile UX ---------- */
@media (max-width:700px){

  /* Keep sticky header compact */
  header .nav{
    height:64px !important;
  }

  .logo b{
    font-size:18px !important;
  }

  .logo small{
    font-size:10px !important;
  }

  /* Hero image stays dominant, text area becomes compact */
  .hero-copy{
    padding-top:22px !important;
    padding-bottom:26px !important;
  }

  .hero-copy .kicker{
    display:none !important;
  }

  .hero-copy h1{
    font-size:34px !important;
    line-height:1.14 !important;
    margin:0 0 12px !important;
  }

  .hero-copy > p{
    font-size:14px !important;
    line-height:1.65 !important;
    margin:0 !important;
  }

  .hero-copy .actions{
    margin-top:18px !important;
    gap:8px !important;
  }

  .hero-copy .actions a{
    min-height:44px !important;
    font-size:14px !important;
    padding:0 12px !important;
  }

  .hero-copy .hero-tags{
    margin-top:12px !important;
    gap:6px !important;
  }

  .hero-copy .hero-tags span{
    font-size:12px !important;
    padding:7px 11px !important;
  }

  /* Trust strip */
  .trust-strip{
    padding:10px 0 !important;
  }

  .trust-strip .wrap{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px 12px !important;
  }

  .trust-strip span{
    font-size:12px !important;
    line-height:1.35 !important;
    text-align:center !important;
  }

  /* General section density */
  .section{
    padding-top:46px !important;
    padding-bottom:46px !important;
  }

  .section-head{
    margin-bottom:18px !important;
  }

  .section-head h2{
    font-size:30px !important;
    line-height:1.25 !important;
    margin-top:6px !important;
  }

  .section-head > p{
    font-size:14px !important;
    line-height:1.6 !important;
  }

  /* Services: horizontal slider, slightly smaller cards */
  .service-image-grid{
    display:flex !important;
    overflow-x:auto !important;
    grid-template-columns:none !important;
    gap:12px !important;
    margin-left:-14px !important;
    margin-right:-14px !important;
    padding:0 14px 12px !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .service-image-grid::-webkit-scrollbar{
    display:none !important;
  }

  .service-image-card{
    flex:0 0 78% !important;
    max-width:78% !important;
    scroll-snap-align:start !important;
  }

  .service-image-card .service-body{
    padding:16px !important;
  }

  .service-image-card .service-body h3{
    font-size:20px !important;
    margin-bottom:6px !important;
  }

  .service-image-card .service-body p{
    font-size:14px !important;
    line-height:1.55 !important;
    margin-bottom:10px !important;
  }

  .service-duration{
    padding-top:10px !important;
    font-size:13px !important;
  }

  .service-link{
    margin-top:8px !important;
    font-size:12px !important;
  }

  /* About Penny: reduce vertical space */
  .about-section{
    padding-top:42px !important;
    padding-bottom:42px !important;
  }

  .about{
    gap:22px !important;
  }

  .about-photo{
    aspect-ratio:4/4.4 !important;
  }

  .about h2{
    font-size:34px !important;
    line-height:1.2 !important;
    margin:8px 0 12px !important;
  }

  .about h2 small{
    display:block !important;
    font-size:20px !important;
    line-height:1.45 !important;
    margin-top:10px !important;
  }

  .about blockquote{
    font-size:20px !important;
    line-height:1.65 !important;
    margin:18px 0 !important;
  }

  .about p{
    font-size:14px !important;
    line-height:1.75 !important;
    margin:0 !important;
  }

  .about-actions{
    gap:14px !important;
    margin-top:18px !important;
    font-size:14px !important;
    flex-wrap:wrap !important;
  }

  /* Works: keep 2 x 2 but compact */
  .works{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .works article{
    border-radius:16px !important;
  }

  .works article > div{
    padding:12px 14px !important;
  }

  .works h3{
    font-size:17px !important;
    margin:4px 0 !important;
  }

  /* Reviews: swipe horizontally */
  .review-grid{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto !important;
    gap:12px !important;
    margin-left:-14px !important;
    margin-right:-14px !important;
    padding:0 14px 10px !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .review-grid::-webkit-scrollbar{
    display:none !important;
  }

  .review-grid article{
    flex:0 0 82% !important;
    max-width:82% !important;
    min-height:190px !important;
    padding:20px 18px !important;
    border-radius:18px !important;
    scroll-snap-align:start !important;
  }

  .review-grid .stars{
    font-size:17px !important;
    margin-bottom:12px !important;
  }

  .review-grid p{
    font-size:17px !important;
    line-height:1.5 !important;
    margin:0 0 14px !important;
  }

  .review-grid b{
    font-size:13px !important;
  }

  /* Hide empty Beauty Journal on homepage */
  .home-articles:has(.empty){
    display:none !important;
  }

  .section.soft:has(.home-articles .empty){
    display:none !important;
  }

  /* Locations: significantly shorter */
  .locations{
    padding-top:42px !important;
    padding-bottom:38px !important;
  }

  .locations .section-head{
    margin-bottom:18px !important;
  }

  .location-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .location-grid article{
    min-height:0 !important;
    padding:16px 18px !important;
    border-radius:16px !important;
  }

  .location-grid span{
    display:block !important;
    margin-bottom:6px !important;
    font-size:9px !important;
    line-height:1.2 !important;
  }

  .location-grid h3{
    font-size:22px !important;
    line-height:1.25 !important;
    margin:0 0 5px !important;
  }

  .location-grid p{
    font-size:14px !important;
    line-height:1.4 !important;
    margin:0 !important;
  }

  .locations .center-action{
    margin-top:16px !important;
  }

  /* Bottom CTA */
  .cta{
    padding:48px 0 54px !important;
  }

  .cta .wrap{
    display:block !important;
  }

  .cta h2{
    font-size:31px !important;
    line-height:1.35 !important;
    max-width:12em !important;
    margin:8px 0 12px !important;
  }

  .cta p{
    font-size:14px !important;
    line-height:1.65 !important;
    margin-bottom:18px !important;
  }

  .cta .actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:18px !important;
  }

  .cta .actions a{
    min-height:44px !important;
    font-size:14px !important;
    padding:0 10px !important;
    margin-top:0 !important;
  }

  /* Footer compact */
  footer{
    padding-top:34px !important;
    padding-bottom:84px !important;
  }

  .footer-grid{
    gap:18px !important;
  }

  .footer-nav{
    gap:10px 16px !important;
  }

  .copyright{
    margin-top:18px !important;
    padding-top:16px !important;
    font-size:12px !important;
  }

  /* Sticky mobile CTA: thinner */
  .mobilebar{
    padding:6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    min-height:64px !important;
    align-items:center !important;
  }

  .mobilebar a{
    padding:9px 8px !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:15px !important;
  }

  body{
    padding-bottom:68px !important;
  }
}

@media (max-width:390px){
  .service-image-card{
    flex-basis:84% !important;
    max-width:84% !important;
  }

  .review-grid article{
    flex-basis:86% !important;
    max-width:86% !important;
  }

  .hero-copy h1{
    font-size:31px !important;
  }

  .cta h2{
    font-size:28px !important;
  }
}
/* ===== V1.8.1 中文標題字體優化 ===== */

/* 全站大型中文標題 */
.section-head h2,
.locations h2,
.reviews h2,
.about h2,
.cta h2 {
    font-family:
        "Noto Sans TC",
        "PingFang TC",
        "Microsoft JhengHei",
        sans-serif !important;

    font-weight: 600 !important;
    letter-spacing: -0.035em;
}

/* 桌機大型標題 */
@media (min-width: 701px) {
    .section-head h2,
    .locations h2,
    .reviews h2 {
        font-size: 42px !important;
        line-height: 1.25 !important;
    }
}

/* 手機 */
@media (max-width: 700px) {
    .section-head h2,
    .locations h2,
    .reviews h2 {
        font-weight: 600 !important;
        letter-spacing: -0.04em;
    }
}

/* =========================================================
   V1.8.2 FINAL TYPOGRAPHY — MUST REMAIN AT END OF THIS FILE
   Exact selectors beat the older serif Hero rule.
   ========================================================= */
html body .hero .hero-copy h1,
html body .hero h1,
html body .section-head h2,
html body .about h2,
html body .locations h2,
html body .cta h2,
html body .section h2{
  font-family:"Microsoft JhengHei","PingFang TC",Arial,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-0.04em !important;
}

html body .hero .hero-copy h1{
  line-height:1.16 !important;
}

@media(max-width:700px){
  html body .hero .hero-copy h1{
    line-height:1.18 !important;
  }
}

/* =========================================================
   V1.8.5 SERVICE IMAGE TOP-GAP FIX
   Root cause:
   site-v17.css has `.service-card > div { padding-top:25px; margin-top:auto; ... }`
   and the image wrapper `.service-media` is also a direct child of .service-card.
   That rule creates the visible beige strip above the image.
   ========================================================= */
html body .service-card.service-image-card > .service-media{
  display:block !important;
  justify-content:initial !important;
  margin-top:0 !important;
  padding-top:0 !important;
  padding-right:0 !important;
  padding-bottom:0 !important;
  padding-left:0 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  line-height:0 !important;
  overflow:hidden !important;
  border-radius:18px 18px 0 0 !important;
}

html body .service-card.service-image-card > .service-media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  object-fit:cover !important;
}

/* Keep the text area as a normal block; don't inherit old `.service-card > div` flex rule. */
html body .service-card.service-image-card > .service-body{
  display:block !important;
  justify-content:initial !important;
  margin-top:0 !important;
}



/* =========================================================
   V1.8.7 GLOBAL FONT + BRAND LOGO
   ========================================================= */
html body, html body button, html body input, html body select, html body textarea {
  font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC",Arial,sans-serif !important;
}
html body h1, html body h2, html body h3, html body h4,
html body .subhero h1, html body .section-head h2, html body .article-card h2,
html body .service-subhero h1, html body .booking-hero h1, html body .booking-title,
html body .about h2, html body .locations h2, html body .cta h2 {
  font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC",Arial,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-0.035em !important;
}
/* Keep English micro-labels clean, not serif */
html body .kicker {
  font-family:Arial,"Microsoft JhengHei",sans-serif !important;
  letter-spacing:.18em !important;
}
/* Real brand logo in global TOP */
html body header .brand-logo {
  display:flex !important; align-items:center !important; gap:10px !important;
  min-width:0; height:72px;
}
html body header .brand-logo-img {
  display:block !important; width:56px !important; height:56px !important;
  object-fit:contain !important; flex:0 0 56px; border-radius:10px;
}
html body header .brand-logo-text { display:block; line-height:1.25; }
html body header .brand-logo-text b { font-family:Georgia,serif !important; letter-spacing:.08em; }
html body header .brand-logo-text small { margin-top:3px; }
@media(max-width:700px){
  html body header .brand-logo-img { width:50px !important; height:50px !important; flex-basis:50px; }
  html body header .brand-logo { height:72px; gap:8px !important; }
  html body header .brand-logo-text b { font-size:16px !important; }
  html body header .brand-logo-text small { font-size:10px !important; }
}


/* =========================================================
   V1.8.8 HEADER + MOBILE HERO FINAL OVERRIDE
   ========================================================= */
.site-header{
  position:sticky !important; top:0 !important; z-index:9999 !important;
  background:rgba(255,253,251,.97) !important;
  border-bottom:1px solid #eadbd2 !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.site-header .nav{
  height:88px !important; display:flex !important; align-items:center !important;
  justify-content:space-between !important; gap:28px !important;
}
.site-header .brand-lockup{
  display:flex !important; align-items:center !important; gap:13px !important;
  flex:0 0 auto !important; min-width:0 !important;
}
.site-header .brand-logo-img{
  display:block !important; width:64px !important; height:64px !important;
  min-width:64px !important; max-width:64px !important; max-height:64px !important;
  object-fit:cover !important; border-radius:12px !important;
  margin:0 !important; padding:0 !important; position:static !important;
  inset:auto !important; transform:none !important; box-shadow:none !important;
}
.site-header .brand-copy{display:flex !important; flex-direction:column !important; line-height:1.15 !important;}
.site-header .brand-copy b{
  font-family:Georgia,"Times New Roman",serif !important; font-size:20px !important;
  font-weight:600 !important; letter-spacing:.08em !important; color:#302925 !important;
  white-space:nowrap !important;
}
.site-header .brand-copy small{
  display:block !important; margin-top:6px !important; font-size:11px !important;
  color:#80695d !important; white-space:nowrap !important;
}
.site-header .desktop-nav{display:flex !important; align-items:center !important; gap:24px !important; margin-left:auto !important; font-size:14px !important;}
.site-header .desktop-nav a{white-space:nowrap !important;}
.site-header .nav-cta{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  min-height:42px !important; padding:0 19px !important; border-radius:999px !important;
  background:#8d6856 !important; color:#fff !important; font-size:13px !important; white-space:nowrap !important;
}
@media(max-width:1000px){.site-header .desktop-nav{display:none !important;}}
@media(max-width:700px){
  .site-header .nav{height:72px !important; padding-top:0 !important; padding-bottom:0 !important; gap:10px !important;}
  .site-header .brand-lockup{gap:9px !important;}
  .site-header .brand-logo-img{
    width:48px !important; height:48px !important; min-width:48px !important;
    max-width:48px !important; max-height:48px !important; flex-basis:48px !important;
    border-radius:10px !important; object-fit:cover !important;
  }
  .site-header .brand-copy b{font-size:16px !important; letter-spacing:.055em !important;}
  .site-header .brand-copy small{font-size:9px !important; margin-top:4px !important;}
  .site-header .nav-cta{display:none !important;}

  /* Hero must begin below header; never let logo/image overlay it */
  html body .hero.hero-v172.hero-full{margin-top:0 !important; position:relative !important; z-index:1 !important;}
  html body .hero .hero-bg{position:relative !important; z-index:0 !important;}
  html body .hero .hero-content{position:relative !important; z-index:2 !important;}
}