/* ── Font import (LINE Seed Sans TH – self-hosted) ────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:ital,wght@0,100..800;1,100..800&display=swap');

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

:root {
    --hw-green-dark:   #4a6741;   /* headings, badge */
    --hw-green-mid:    #6b8f5e;   /* sub-heading, body text */
    --hw-green-light:  #e8f0e4;   /* right-column bg */
    --hw-green-xlight: #f2f6ef;   /* left-column bg */
    --hw-btn-color:   #2d5a27;   /* button text */
    --hw-btn-border:   #9db894;   /* button border */
    --hw-text-body:    #4a5e45;   /* paragraph text */
    --hw-text-muted:   #7a9070;   /* secondary text */
    --hw-icon-color:   #2d5a27;   /* button text */
    --hw-border:  #d8e8d2;
    --hw-pill-bg: #f0f4ed;
    --hw-dark:    #205926;
    --hw-mid:     #4a7a3a;
    --hw-sage:    #5E7A59;
    --hw-cream:   #f5f7f3;
    --hw-muted:   #8aaa80;
    --hw-text:    #2a3d24;
    --hw-white:   #ffffff;
    --hw-radius:  14px;
    --hw-gap:     1rem;
    --hw-dur:     0.72s;
    --hw-ease:    cubic-bezier(0.22, 1, 0.36, 1);  /* expo out */

    --hw-footer-heading-color: #205926;
    --hw-footer-text-color: #5E7A59;
    --hw-footer-link-color: #5E7A59;
    --hw-footer-link-hover-color: #205926;
    --hw-footer-copy-color: #c0dcbb;
    
    /* Custom Variables for Haewon Theme */
    --gm-header-h: 64px; /* default header height (desktop) */
    --gm-topbar-h: 36px; /* default top bar height (desktop) */
    
    /* Container max width for content alignment */
    --container-max-width: 1200px;
}

body {
    font-family: "Wix Madefor Text", ui-sans-serif, system-ui, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.haewon-breadcrumbs {
    z-index: 10;
    position: relative;
}

/* ── WordPress Alignment Classes ───────────────────────────────────────── */
.alignleft  { float: left;  margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left:  1.5rem; margin-bottom: 1rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide  { max-width: 110%; margin-left: -5%; }
.alignfull  { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }

/* About page (page ID 101) – hide overflow to prevent hero image from bleeding outside the page wrapper */
.page-id-101 .haewon-page {overflow: hidden; position: relative;}
@media (max-width: 640px) {
    .about-para { 
        padding: 1rem 0.5rem!important;
    }
    .about-para p {
        padding: 0 0.5rem!important;
        margin: 1.5rem auto 1rem !important;
    }
    .page-id-101 .alignwide {
        margin-left: 0!important;
    }
}

/* ── Skip Link ─────────────────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.sr-only:focus {
    all: unset;
}

/* ── Prose Overrides ───────────────────────────────────────────────────── */
.entry-content a:not(.gm-btn, .gm-badge, .gm-btn-*, .text-*) {
    color: #C18300;  /* gold-500 */
}
.entry-content a:not(.gm-btn, .gm-badge, .gm-btn-*, .text-*) :hover {
    color: #A36B00; /* gold-600 */
}


/* ── WordPress Generated Classes ───────────────────────────────────────── */
.wp-caption { max-width: 100%; }
.wp-caption-text {
    font-size: 0.85rem;
    color: #6b7280;
    text-align: center;
    margin-top: 0.5rem;
}

/* ── Search Form ───────────────────────────────────────────────────────── */
.search-form {
    display: flex;
    gap: 0.5rem;
}
.search-field {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
}
.search-field:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14,165,233,.2);
}
.search-submit {
    background: #0ea5e9;
    color: white;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.search-submit:hover { background: #0284c7; }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.haewon-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 2.5rem 0;
  flex-wrap: wrap;
}

.haewon-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0.5rem 0.75rem;
  border-bottom: 1.5px solid #fff;
  color: #16324a;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.25s ease;
}

.haewon-pagination .page-numbers.current {
  border-color: #2f6b46;
}

.haewon-pagination a.page-numbers:hover {
  color: #2f6b46;
}
.haewon-pagination .prev,
.haewon-pagination .next {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 400;
  color: #2f6b46;
  text-decoration: none;
}

.haewon-pagination .prev .prev-icon,
.haewon-pagination .next .next-icon {
  font-weight: 700;
  color: var(--hw-btn-color, #2f6b46);
  margin-bottom: 0.5rem;
  padding: 0 0.75rem;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.haewon-pagination .prev .prev-icon svg,
.haewon-pagination .next .next-icon svg {
    fill: var(--hw-btn-color, #2f6b46);
    color: var(--hw-btn-color, #2f6b46);
}

.haewon-pagination .prev:hover,
.haewon-pagination .next:hover {
  opacity: 0.8;
}

.haewon-pagination .dots {
  border: none;
  background: transparent;
  color: #9aa5ac;
  pointer-events: none;
}

/* responsive */
@media (max-width: 480px) {
  .haewon-pagination .page-numbers {
    min-width: 34px;
    height: 34px;
    font-size: 0.8rem;
    padding: 0 0.5rem;
  }
}



/* ==========================================================================
   Sticky Header
   ========================================================================== */

/* Sticky header base – uses fixed positioning so it can animate off-screen */
.gm-header {
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid var(--hw-border);
}

.home .gm-header {
    border-bottom: 0;
}
/* Applied by JS when user scrolls down */
.gm-header--hidden {
    transform: translateY(-100%);
}

.gm-header.gm-header--scrolled{
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
body.home .gm-header.gm-header--at-top .menu-item > a > span,
body.haewon-has-hero .gm-header.gm-header--at-top .menu-item > a > span {
    color: var(--hw-btn-color)!important;
}
body.home .gm-header.gm-header--at-top #gm-search-toggle svg,
body.home .gm-header.gm-header--at-top #gm-nav-modal-toggle svg,
body.haewon-has-hero .gm-header.gm-header--at-top #gm-search-toggle svg,
body.haewon-has-hero .gm-header.gm-header--at-top #gm-nav-modal-toggle svg {
    /* stroke: #fff!important; */
}

body.haewon-has-hero .gm-header.gm-header--at-top .gm-submenu-toggle svg,
body.home .gm-header.gm-header--at-top .gm-submenu-toggle svg {
    /* stroke: #fff!important; */
}

/* ==========================================================================
   Menu Item Hover Effect
   ========================================================================== */
.gm-header .menu-item {
  position: relative;
  overflow: hidden; 
}

.gm-header .menu-item::before {
  content: "";
  position: absolute;
  bottom: 0; 
  left: 0;
  right: 0;
  height: 1px; 
  
  background-color: var(--hw-btn-color, #388062);
  z-index: 1;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease; 
} 

.gm-header .menu-item:hover::before {
  transform: scaleX(1); 
}


/* ==========================================================================
   Header Logo left (desktop)
   ========================================================================== */
.gm-header--logo-left .gm-header__logo img {
    max-height: 70px;
    max-width: 140px;
    width: auto;
}

/* Base state – height comes from the h-24 Tailwind class already on
   .gm-header__logo-row in header.php (96px); we only add the
   transition here so the shrink below can animate smoothly. */
.gm-header--logo-left .gm-header__logo-row {
    transition: height .3s ease;
}
.gm-header--logo-left .gm-header__logo img {
    opacity: 0;
    animation: logoPop 0.8s ease forwards;
}

/* Applied by JS (adds .gm-header--scrolled) once the user scrolls
   past the offset – shrinks the logo row to 65px and zooms the logo
   down to match */
.gm-header--logo-left.gm-header--scrolled .gm-header__logo-row {
    height: 85px;
}
.gm-header--logo-left.gm-header--scrolled .gm-header__logo img {
    transform: scale(.65); /* zoom effect when collapsed */
    max-width: 140px;
    max-height: 55px;
}

/* Hide the secondary desktop-nav row (border included) when logo is
   centered, based on scroll direction – see .gm-header__nav-row in
   header.php */
.gm-header--logo-left .gm-header__nav-row {
    transition: opacity .25s ease, transform .25s ease;
}
.gm-header--logo-left .gm-header__nav-row.gm-menu--hidden {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    height: 12px;
}

/* ==========================================================================
   Header Logo centering (desktop)
   ========================================================================== */
.gm-header--logo-center .gm-header__logo img {
    max-width: 70px;
}

/* Base state – height comes from the h-24 Tailwind class already on
   .gm-header__logo-row in header.php (96px); we only add the
   transition here so the shrink below can animate smoothly. */
.gm-header--logo-center .gm-header__logo-row {
    transition: height .3s ease;
}
.gm-header--logo-center .gm-header__logo img {
    opacity: 0;
    animation: logoPop 0.8s ease forwards;
}

/* Applied by JS (adds .gm-header--scrolled) once the user scrolls
   past the offset – shrinks the logo row to 65px and zooms the logo
   down to match */
.gm-header--logo-center.gm-header--scrolled .gm-header__logo-row {
    height: 85px;
}
.gm-header--logo-center.gm-header--scrolled .gm-header__logo img {
    transform: scale(.65); /* zoom effect when collapsed */
    max-width: 60px;
}

/* Hide the secondary desktop-nav row (border included) when logo is
   centered, based on scroll direction – see .gm-header__nav-row in
   header.php */
.gm-header--logo-center .gm-header__nav-row {
    transition: opacity .25s ease, transform .25s ease;
}
.gm-header--logo-center .gm-header__nav-row.gm-menu--hidden {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    height: 12px;
}

/* 
   Shrink the logo row and zoom the logo down when the user scrolls
   past the offset (see header.js). This is only applied when the logo
   is centered, so it doesn't affect left-aligned logos. */

@keyframes logoPop {

    0% {
        opacity: 0;
        transform: scale(1.6);
    }

    60% {
        opacity: 1;
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}

/* Offset page content so it doesn't sit behind the fixed header */
body:not(.haewon-has-hero, .home) {
    padding-top: calc(var(--gm-header-h, 64px) + var(--gm-topbar-h, 36px));
}

/* ==========================================================================
   Floating CTA Widget (bottom-right, above back-to-top)
   ========================================================================== */

.gm-cta-float {
    position: fixed;
    /* sit just above the back-to-top button (bottom-6 = 24px, h-10 = 40px, gap 10px) */
    bottom: 82px;
    right: 20px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* ── Collapsible list ──────────────────────────────── */
.gm-cta-list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    /* collapsed */
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition:
        max-height 0.32s cubic-bezier(0.4,0,0.2,1),
        opacity    0.28s ease,
        transform  0.28s ease;
}

/* open state — toggled by JS adding .is-open to .gm-cta-float */
.gm-cta-float.is-open .gm-cta-list {
    max-height: 600px;   /* large enough for all buttons */
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ── Each button pill ─────────────────────────────── */
.gm-cta-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var( --btn-color, #000);
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    line-height: 1;
}
.gm-cta-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 28px rgba(0,0,0,.22);
    color: #fff;
}
.gm-cta-btn svg {
    flex-shrink: 0;
}

/* ── Toggle button ────────────────────────────────── */
.gm-cta-toggle {
    padding: 12px 12px;
    font-size: 0.9rem;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.gm-cta-toggle:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 28px rgba(0,0,0,.22);
}

.gm-cta-btn.gm-cta-toggle svg {
    fill: #fff;
    color: #fff;
}
/* swap icons based on open state */
.gm-cta-toggle .gm-cta-icon-close { display: none; }
.gm-cta-float.is-open .gm-cta-toggle .gm-cta-icon-open  { display: none; }
.gm-cta-float.is-open .gm-cta-toggle .gm-cta-icon-close { display: block; color:#fff; }

/* ── Colours ──────────────────────────────────────── */
.gm-cta-phone:hover { background: var(--btn-hover-color); }
.gm-cta-line:hover  { background: #06c755; }
.gm-cta-fb:hover    { background: #1877F2; }
.gm-cta-ig:hover    { background: linear-gradient(135deg,#F58529,#DD2A7B,#8134AF,#515BD4); }
.gm-cta-yt:hover    { background: #FF0000; }
.gm-cta-tt:hover    { background: #010101; }

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 640px) {
    .gm-cta-float {
        bottom: 76px;
        gap: 8px;
    }
    .gm-cta-btn {
        padding: 11px;
        border-radius: 50%;
    }
    .gm-cta-label {
        display: none;
    }
    .gm-cta-toggle {
        padding: 12px;
    }
}

/* admin-bar */
.gm-header.admin-bar-show {
   top: 32px;
}
@media (max-width: 782px) {
 .gm-header.admin-bar-show {
      top: 46px;
 }
}

/* ==========================================================================
   Top Bar (above header) — phone (left) + custom menu (right)
   ========================================================================== */
.gm-topbar {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 41; /* above header so it stays visible while header can hide on scroll */
    height: 36px;
    background: #00522D;
    color: #fff;
    font-size: .75rem;
    line-height: 1;
}

.gm-topbar__left,
.gm-topbar__right { display: flex; align-items: center; height: 100%; }

.gm-topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: .01em;
    opacity: .95;
    transition: opacity .2s ease;
}
.gm-topbar__phone:hover { opacity: 1; text-decoration: underline; }

.gm-topbar__menu {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.gm-topbar__menu a {
    color: #fff;
    text-decoration: none;
    opacity: .9;
    font-weight: 500;
    transition: opacity .2s ease;
}
.gm-topbar__menu a:hover { opacity: 1; text-decoration: underline; }

/* Push header (and its own admin-bar offset) down by the top bar's height
   when the top bar is enabled. */
.gm-header.gm-header--has-topbar {
    top: 36px;
}
.gm-header.gm-header--has-topbar.admin-bar-show {
    top: calc(36px + 32px);
}
@media (max-width: 782px) {
    .gm-header.gm-header--has-topbar.admin-bar-show {
        top: calc(36px + 46px);
    }
}

/* Top bar itself must also respect the WP admin bar offset */
.gm-topbar.admin-bar-show { top: 32px; }
@media (max-width: 782px) {
    .gm-topbar.admin-bar-show { top: 46px; }
}

@media (max-width: 640px) {
    .gm-topbar { height: auto; padding: .5rem 0; }
    .gm-topbar .max-w-7xl { flex-direction: column; gap: .375rem; align-items: flex-start; }
    .gm-topbar__menu { flex-wrap: wrap; gap: .75rem; }
}

/* ==========================================================================
   Anchor offset — prevents fixed header from covering scroll targets
   ========================================================================== */
#about,
#blog,
#promotion,
#review,
#service {
    scroll-margin-top: calc(var(--gm-header-h, 64px) + 12px);
}

/* ==========================================================================
   Scrollspy — active nav link highlight
   ========================================================================== */

/* Active anchor link in desktop + mobile nav */
#site-navigation a.gm-nav-active,
#mobile-menu a.gm-nav-active {
    color: var(--gm-gold, #C18300);
    font-weight: 700;
}

/* Animated underline bar */
#site-navigation a.gm-nav-active > span,
#mobile-menu a.gm-nav-active > span {
    background-image: linear-gradient(90deg, var(--gm-gold, #C18300), var(--gm-gold, #C18300));
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 100%;
}

/* Desktop: underline appears via a bottom border on the <li> */
#site-navigation li.gm-nav-active > a > span {
    background-image: linear-gradient(90deg, var(--gm-gold, #C18300), var(--gm-gold, #C18300));
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 100%;
    padding-bottom: 2px;
}

/* Mobile: left accent bar */
#mobile-menu li.gm-nav-active {
    border-left: 3px solid var(--gm-gold, #C18300);
    padding-left: 8px;
}

/* ==========================================================================
   Desktop Dropdown Sub-menus (#site-navigation)
   Hidden by default, revealed on hover / focus / click-toggle.
   Supports 3 levels: top-level -> sub-menu -> sub-menu (flyout).
   ========================================================================== */
#site-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#site-navigation > ul > li,
#site-navigation .sub-menu li {
    position: relative;
}

/* Parent item: link + caret toggle sit inline together */
#site-navigation .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
}

.gm-submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: 0.25rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    flex-shrink: 0;
}

.gm-submenu-caret {
    width: 0.6rem;
    height: 0.6rem;
    transition: transform 0.2s ease;
}

/* Nested (level 2+) carets point right by default, since their panel flies out sideways */
#site-navigation .sub-menu .gm-submenu-caret {
    transform: rotate(-90deg);
}

#site-navigation > ul > li.menu-item-has-children:hover > .gm-submenu-toggle .gm-submenu-caret,
#site-navigation > ul > li.menu-item-has-children.gm-submenu-open > .gm-submenu-toggle .gm-submenu-caret {
    transform: rotate(180deg);
}
#site-navigation .sub-menu li.menu-item-has-children:hover > .gm-submenu-toggle .gm-submenu-caret,
#site-navigation .sub-menu li.menu-item-has-children.gm-submenu-open > .gm-submenu-toggle .gm-submenu-caret {
    transform: rotate(90deg);
}

/* Level-1 dropdown panel */
#site-navigation > ul > li > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    min-width: 14rem;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.15), 0 4px 12px -4px rgba(0, 0, 0, 0.08);
    padding: 0.4rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 60;
}

/* Level-2 and Level-3 panels fly out to the right of their parent item */
#site-navigation .sub-menu .sub-menu {
    top: -0.4rem;
    left: 100%;
    margin-top: 0;
    margin-left: 0.375rem;
    z-index: 61;
}

/* Reveal on hover, keyboard focus, or click-toggle — at every level */
#site-navigation .menu-item-has-children:hover > .sub-menu,
#site-navigation .menu-item-has-children:focus-within > .sub-menu,
#site-navigation .menu-item-has-children.gm-submenu-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

#site-navigation .sub-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

#site-navigation .sub-menu li a span {
    font-weight: 300;
    color: #374151!important;
}

#site-navigation .sub-menu li a:hover,
#site-navigation .sub-menu li.gm-submenu-open > a {
    background-color: #f9fafb;
}

#site-navigation .sub-menu li a:hover span,
#site-navigation .sub-menu li.gm-submenu-open > a span {
    color: #111827;
}
/* remove border top */
.header-none-shabow #site-navigation {
    border-top: none!important;
}

/* Modal (mobile) — indent a 3rd nesting level so it stays visually distinct */
.gm-nav-modal__list .sub-menu .sub-menu {
    margin: 0.125rem 0 0.375rem;
    padding-left: 0.85rem;
    border-left-color: rgba(255, 255, 255, 0.08);
}
.gm-nav-modal__list .sub-menu .sub-menu li a {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}
.gm-nav-modal__list .sub-menu .sub-menu li a:hover {
    color: #fff;
}

/* Nav-modal active links */
#gm-nav-modal .gm-nav-modal__list a.gm-nav-active {
    color: var(--gm-gold, #C18300);
}

/* Prevent body scroll while modal is open */
body.gm-modal-open {
    overflow: hidden;
}

/* Mobile menu toggle icon swap */
.gm-hamburger,
#menu-toggle {
    position: relative;
}

.gm-hamburger .gm-menu-toggle__icon,
#menu-toggle .gm-menu-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.gm-hamburger .gm-menu-toggle__icon--close,
#menu-toggle .gm-menu-toggle__icon--close {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(0.85) rotate(-12deg);
}

.gm-hamburger[aria-expanded="true"] .gm-menu-toggle__icon--open,
#menu-toggle[aria-expanded="true"] .gm-menu-toggle__icon--open {
    opacity: 0;
    transform: scale(0.85) rotate(12deg);
}

.gm-hamburger[aria-expanded="true"] .gm-menu-toggle__icon--close,
#menu-toggle[aria-expanded="true"] .gm-menu-toggle__icon--close {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* ── Loading Wrap Screen ─────────────────────────────────────────────────── */
#gm-loading-wrap {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#gm-loading-wrap.gm-loading--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.gm-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.gm-loading-logo {
    width: 120px;
    height: auto;
    object-fit: contain;
    animation: gm-logo-pulse 1.8s ease-in-out infinite;
}

@keyframes gm-logo-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: .7; transform: scale(0.95); }
}

/* Three-dot spinner */
.gm-loading-spinner {
    display: flex;
    gap: 8px;
    align-items: center;
}

.gm-loading-spinner span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-color, #C18300);
    animation: gm-dot-bounce 1.2s ease-in-out infinite;
}

.gm-loading-spinner span:nth-child(2) { animation-delay: 0.2s; }
.gm-loading-spinner span:nth-child(3) { animation-delay: 0.4s; }

@keyframes gm-dot-bounce {
    0%, 80%, 100% { transform: translateY(0);    opacity: .4; }
    40%           { transform: translateY(-10px); opacity: 1;  }
}

/* The secondary nav row (.gm-header__nav-row, wraps #site-navigation)
   hides on scroll-down and reveals on scroll-up independently of the
   header itself — see main.js and the .gm-header__nav-row rules above. */

/* ==========================================================================
   Full-Screen Navigation Modal  (#gm-nav-modal)
   ========================================================================== */

/* ── Overlay ──────────────────────────────────────────────────────────── */
.gm-nav-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: linear-gradient(180deg, #ffffff, #F9F6EF);
    overflow-y: auto;
    /* Closed state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition:
        opacity    0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform  0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gm-nav-modal.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ── Close button ─────────────────────────────────────────────────────── */
.gm-nav-modal__close {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 10;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    color: var(--hw-btn-color, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.gm-nav-modal__close:hover  { background: rgba(255, 255, 255, 0.20); }
.gm-nav-modal__close:focus  { outline: 0; outline-offset: 0; }

/* Admin-bar offset for the close button */
.admin-bar .gm-nav-modal__close        { top: calc(1.25rem + 32px); }
@media (max-width: 782px) {
    .admin-bar .gm-nav-modal__close    { top: calc(1.25rem + 46px); }
}

/* ── Inner container ──────────────────────────────────────────────────── */
.gm-nav-modal__inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 5.5rem 1.5rem 3rem;
    width: 100%;
    min-height: 100%;
    display: flex;
}

/* ── 2-column grid ────────────────────────────────────────────────────── */
.gm-nav-modal__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
}
@media (min-width: 1024px) {
    .gm-nav-modal__grid {
        grid-template-columns: 1fr 1fr;
        gap: 6rem;
    }
}

.gm-nav-modal__logo img {
    max-width: 200px;
    height: auto;
    object-fit: contain;
}
/* ── Left column — main menu ──────────────────────────────────────────── */
.gm-nav-modal__eyebrow {
    color: #fff;
    font-size: 1.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.75rem;
}

.gm-nav-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gm-nav-modal__list > li > a {
    display: block;
    color: var(--hw-btn-color, #fff);
    font-size: clamp(2.75rem, 3.5vw, 3.25rem);
    font-weight: 100;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-decoration: none;
    padding: 0.35rem 0;
    transition: color 0.2s ease, transform 0.2s ease;
    -webkit-font-smoothing: subpixel-antialiased;
}
.gm-nav-modal__list > li > a:hover {
    color: var(--hw-btn-border, #C18300);
    transform: translateX(0.5rem);
}

/* Sub-menu */
.gm-nav-modal__list .sub-menu {
    list-style: none;
    margin: 0.25rem 0 0.5rem;
    padding: 0 0 0 1rem;
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.gm-nav-modal__list .sub-menu li a {
    display: block;
    color: rgba(255, 255, 255, 1);
    font-size: 1.25rem;
    font-weight: 300;
    text-decoration: none;
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}

.gm-nav-modal__list .sub-menu li a:hover { color: #fff; transform: translateX(0.5rem); }

/* Scrollspy active state */
#gm-nav-modal .gm-nav-modal__list > li.gm-nav-active > a,
#gm-nav-modal .gm-nav-modal__list a.gm-nav-active {
    color: var(--gm-gold, #C18300);
}

/* ── Right column — contact info ──────────────────────────────────────── */
.gm-nav-modal__right {
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    justify-content: flex-start;
}
@media (min-width: 1024px) {
    .gm-nav-modal__right {
        border-top: none;
        padding-top: 2.75rem; /* align with menu start (below eyebrow) */
    }
}
.gm-nav-modal__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
}

.gm-nav-modal__contact-heading {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.gm-nav-modal__contact-tagline {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.25rem;
    line-height: 1.65;
    margin: 0;
}

/* Contact list (phone, LINE, etc.) */
.gm-nav-modal__contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.gm-nav-modal__contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem
}
.gm-nav-modal__contact-list li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.9);
}
.gm-nav-modal__contact-list li a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}
.gm-nav-modal__contact-list li a:hover { color: #fff; }


.gm-nav-modal__footer-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.5rem;
}
.gm-nav-modal__footer-menu a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}
.gm-nav-modal__footer-menu a:hover { color: #fff; }


/* Social icon buttons */
.gm-nav-modal__social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1.5rem;
}
.gm-nav-modal__social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
    transition: background 0.2s ease;
}
.gm-nav-modal__social-btn:hover  { background: rgba(255, 255, 255, 0.20); }
.gm-nav-modal__social-btn svg    { width: 1.0625rem; height: 1.0625rem; }

/* CTA pill button */
.gm-nav-modal__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    background: var(--hw-btn-color, #C18300);
    color: #fff;
    border-radius: 9999px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
    align-self: flex-start;
}
.gm-nav-modal__cta:hover  { background: var(--btn-hover-color, #a36b00); color: #fff; }

/* Search Modal */
.gm-search-modal {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.gm-search-modal.is-open {
    opacity: 1;
    pointer-events: all;
}
.gm-search-modal__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    color: var(--hw-btn-color, #C18300);
    border-radius: 9999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    line-height: 1;
    transition: background 0.2s;
}
.gm-search-modal__close:hover { border-color: var(--btn-hover-color, #a36b00);; background: rgba(193, 131, 0, 0.08); }
.gm-search-modal__inner {
    width: 100%;
    max-width: 640px;
    text-align: center;
}
.gm-search-modal__label {
    display: block;
    color: rgba(56, 128, 98, 0.55);
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.gm-search-modal__form {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.30);
    transition: border-color 0.2s;
}
.gm-search-modal__form:focus-within {
    border-color: var(--btn-hover-color, #2f6b46);
}
.gm-search-modal__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--hw-btn-color, #388062);
    font-size: clamp(1.25rem, 4vw, 2rem);
    padding: 0.75rem 0;
    caret-color: var(--hw-btn-color, #388062);
    border-bottom: 2px solid var(--btn-hover-color, #388062);
}
.gm-search-modal__input::placeholder {
    color: rgba(56, 128, 98, 0.30);
}
.gm-search-modal__submit {
    background: transparent;
    border: none;
    color: var(--hw-btn-color, #388062);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.gm-search-modal__submit:hover { color: var(--btn-hover-color, #2f6b46); }
.gm-search-modal__submit svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   Site Footer  (.gm-footer)
────────────────────────────────────────────────────────────────────────── */
.gm-footer {
    color: var(--hw-footer-text-color, rgba(255,255,255,0.55));
}

.gm-footer__inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
}

@media (min-width: 640px)  { .gm-footer__inner { padding: 4rem 2rem 2.5rem; } }
@media (min-width: 1024px) { .gm-footer__inner { padding: 5rem 3rem 3rem; } }

/* Main 2-column grid */
.gm-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .gm-footer__grid {
        grid-template-columns: 1fr 2fr;
        gap: 16rem;
    }
}

/* Left brand col */
.gm-footer__logo { display: inline-block; margin-bottom: 1.25rem; max-width: 170px; height: auto;}
.gm-footer__logo-img { width: 100%; }
.gm-footer__site-name {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    margin-bottom: 1.25rem;
}

.gm-footer__company {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.gm-footer__company-name {
    color: var(--hw-footer-text-color, #fff);
    margin: 0;
    letter-spacing: 0.02em;
}
.gm-footer__company-sub {
    color: rgba(255,255,255,0.45);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    margin: 0;
}

.gm-footer__contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.gm-footer__contact-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
}

.gm-footer__contact-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.gm-footer__contact-link {
    text-decoration: none;
    transition: color 0.2s;
}
.gm-footer__contact-link:hover {
    text-decoration: underline;
 }

/* Social row */
.gm-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.gm-footer__social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: var(--hw-btn-color, #C18300);
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.gm-footer__social-btn:hover { opacity: 0.8; }
.gm-footer__social-btn svg { width: 1rem; height: 1rem; }


/* Right col */
.gm-footer__right {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* Standards block */
.gm-footer__standards {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.10);
}

.gm-footer__standards-heading {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.55);
    margin: 0 0 0.375rem;
}

.gm-footer__standards-sub {
    color: rgba(255,255,255,0.40);
    font-size: 0.75rem;
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.gm-footer__standards-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2rem;
}

.gm-footer__standards-logos img {
    height: 3rem;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.55;
    transition: opacity 0.3s;
}

.gm-footer__standards-logos img:hover { opacity: 1; }

/* Menus 3-col */
.gm-footer__menus {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

.gm-footer__menu-title {
    letter-spacing: 0.1em;
    color: var(--hw-footer-heading-color, rgba(255,255,255,0.75));
    margin: 0 0 1.25rem;
}

/* Mobile accordion toggle button (title) */
.gm-footer__menu-toggle {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
}

.gm-footer__menu-icon {
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 400;
    margin-left: 0.75rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Collapsible panel wrapping the menu list (mobile) */
.gm-footer__menu-panel {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.gm-footer__menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gm-footer__menu-list li { margin: 0; }

.gm-footer__menu-list a {
    color: var(--hw-footer-link-color, rgba(255,255,255,0.75));
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.2s;
    position: relative;
    width: 100%;
    display: block;
}
.gm-footer__menu-list a::before{
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    background: var(--hw-footer-link-color, rgba(255,255,255,0.75));
    transition: width .3s;
    bottom: -5px;
}
.gm-footer__menu-list a:hover { 
    color: var(--hw-footer-link-hover-color, #fff);
}
.gm-footer__menu-list a:hover::before{
    width: 100%;
    transition: width .3s;
}

/* Bottom bar 2 columns */
.gm-footer__bottom {
    background: rgba( 242, 246, 239, 1);
    border-top: 1px solid var(--hw-border, rgba(255,255,255,0.12));
    padding: 1rem 1.5rem 2rem;

}
.gm-footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.gm-footer__copy {
    margin: 0;
    text-align: center;
}

@media (min-width: 640px) { .gm-footer__copy { text-align: left; } }
@media (max-width: 640px) {
    .gm-footer__menus {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .gm-footer__menu-col {
        border-bottom: 1px solid var(--hw-border);
    }

    .gm-footer__menu-col:last-child {
        border-bottom: none;
    }

    /* Accordion: collapsed by default on mobile */
    .gm-footer__menu-panel {
        max-height: 0;
    }
    .gm-footer__menu-panel.is-open {
        max-height: var(--gm-footer-panel-height, 500px);
    }
    .gm-footer__menu-title {
        margin-bottom: 0;
        padding: 1rem 0;
        border-top: 1px solid rgba(255,255,255,0.12);
    }
    .gm-footer__menu-col:last-child .gm-footer__menu-panel {
        border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    .gm-footer__menu-panel .gm-footer__menu-list {
        padding-bottom: 1rem;
    }
    .gm-footer__company-address {
        line-height: 1.5;
        width: 100%;
        position: relative;
    }
}

/* Desktop: menus always expanded, toggle is non-interactive plain heading */
@media (min-width: 641px) {
    .gm-footer__menu-toggle {
        cursor: default;
        pointer-events: none;
    }
    .gm-footer__menu-icon {
        display: none;
    }
    .gm-footer__menu-panel {
        max-height: none !important;
    }
}

/* ==========================================================================
   Share Buttons
   ========================================================================== */

.haewon-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transition: opacity .2s, transform .1s;
}
.haewon-share-btn:hover { opacity: .9; transform: scale(1.08); }

.haewon-copy-link-btn {
    position: relative;
}

.haewon-tooltip {
    position: absolute;
    bottom: calc(100% + 8px); 
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background-color: #1f2937;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    z-index: 50;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.haewon-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #1f2937 transparent transparent transparent;
}

.haewon-copy-link-btn.show-tooltip .haewon-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ── button Read More Color ───────────────────────────────────────────── */
.gm-btn-readmore {
  font-weight: 100;
  position: relative;
  display: inline-flex;
  width: max-content;
  padding: .6rem 1rem;
  border: 0.5px solid var(--hw-btn-color, #388062); 
  color: var(--hw-btn-color, #388062);
  background-color: transparent;
  overflow: hidden;
  z-index: 0;
  text-decoration: none;
  transition: color 0.05s ease;
  box-shadow: 0 0 0 0.25px var(--hw-btn-color, #388062);
}

.gm-btn-readmore::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--hw-btn-color, #388062);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left; 
  transition: transform 0.35s ease; 
} 

.gm-btn-readmore:hover::before {
  transform: scaleX(1); 
}

.gm-hover-readmore:hover .gm-btn-readmore,
.gm-btn-readmore:hover {
  color: #fff!important;
}

.gm-hover-readmore:hover .gm-btn-readmore::before,
.gm-btn-readmore:hover::before {
  transform: scaleX(1); 
}

/* ── button Read More White ───────────────────────────────────────────── */
.gm-btn-readmore-white {
  font-weight: 100;
  position: relative;
  display: inline-flex;
  width: max-content;
  padding: .6rem 1rem;
  border: 0.5px solid #ffffff; 
  color: #ffffff;
  background-color: transparent;
  overflow: hidden;
  z-index: 0;
  text-decoration: none;
  transition: color 0.05s ease;
}

.gm-btn-readmore-white::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease; 
}

.gm-btn-readmore-white:hover::before {
  transform: scaleX(1);
}
.gm-hover-readmore:hover .gm-btn-readmore-white,
.gm-btn-readmore-white:hover {
  color: var(--hw-btn-color, #388062)!important;
}
.gm-hover-readmore:hover .gm-btn-readmore-white::before,
.gm-btn-readmore-white:hover::before {
  transform: scaleX(1);
}

.gm-btn-readmore-green {
  font-weight: 100;
  position: relative;
  display: inline-flex;
  width: max-content;
  padding: .6rem 1rem;
  border: 0.5px solid var(--hw-btn-color, #388062); 
  color: #fff;
  background-color: var(--hw-btn-color, #388062);
  overflow: hidden;
  z-index: 0;
  text-decoration: none;
  transition: color 0.05s ease;
}
.gm-btn-readmore-green::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #F2F6EF;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease; 
}

.gm-btn-readmore-green:hover::before {
  transform: scaleX(1);
}
.gm-hover-readmore:hover .gm-btn-readmore-green,
.gm-btn-readmore-green:hover {
  color: var(--hw-btn-color, #388062)!important;
}
.gm-hover-readmore:hover .gm-btn-readmore-green::before,
.gm-btn-readmore-green:hover::before {
  transform: scaleX(1);
}


/* ── button Read More Underline ───────────────────────────────────────────── */
.gm-btn-readmore-underline {
  position: relative;
  display: inline-flex;
  width: max-content;
  padding: .6rem .8rem;
  border-bottom: 0.5px solid var(--hw-btn-color, #388062); 
  color: var(--hw-btn-color, #388062);
  background-color: transparent;
  overflow: hidden;
  z-index: 0;
  text-decoration: none;
  transition: color 0.05s ease;
}

.gm-btn-readmore-underline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--hw-btn-color, #388062);
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s ease; 
} 

.gm-btn-readmore-underline:hover::before {
  transform: scaleY(1);
}

.gm-hover-readmore:hover .gm-btn-readmore-underline,
.gm-btn-readmore-underline:hover {
  color: #fff!important;
}
.gm-hover-readmore:hover .gm-btn-readmore-underline::before,
.gm-btn-readmore-underline:hover::before {
  transform: scaleY(1);
}



/* ── Main Content ───────────────────────────────────────────── */
#main-content {
    background-color:transparent ;
}

/* ── Select Style ───────────────────────────────────────────── */
.gm-select-wrapper {
    position: relative;
    user-select: none;
    width: 280px; 
    font-family: FC Minimal, sans-serif;
}

.gm-select-wrapper select {
    display: none;
}

.gm-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.gm-select-trigger:hover {
    border-color: #9ca3af;
}

.gm-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    padding: 14px 50px 14px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #374151;
    background-color: #ffffff;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s;
}

.gm-select-trigger:hover {
    border-color: #388062;
}

.gm-select-trigger::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background-color: #388062;
    border-left: 1px solid #388062; 
    
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    
    transition: background-color 0.2s ease; 
}

.gm-select-wrapper.open .gm-select-trigger {
    border-color: #388062; 
    box-shadow: 0 0 0 1px #388062;
}

.gm-select-wrapper.open .gm-select-trigger::after {
    background-color: #388062;
    border-left-color: #388062;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='18 15 12 9 6 15'%3e%3c/polyline%3e%3c/svg%3e");
}

.gm-options {
    position: absolute;
    top: 110%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #388062;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 999;
    max-height: 250px;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none;
}

.gm-select-wrapper.open .gm-options {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.gm-option {
    padding: 10px 16px;
    font-size: 14px;
    color: #4b5563;
    cursor: pointer;
    transition: background 0.2s;
}

.gm-option:hover {
    background-color: #77C3A4;
    color: #ffffff;
}

.gm-option.selected {
    background-color: #388062;
    color: #fff;
    font-weight: 500;
}

/* ── Background Zoom Effect ───────────────────────────────────────────── */
.bg-zoom {
    position: relative;
    overflow: hidden; 
    text-align: center;
}

.bg-zoom > img {
    width: 92%!important;
    height: 100%;
    margin-left: auto!important;
    margin-right: auto!important;
    object-fit: cover; 
}


/* content-left, content-right in two columns */
.content-left, .content-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;

}
.content-left {
    padding-left: max(20px, (100vw - var(--container-max-width)) / 2);
    align-items: flex-start;
}

.content-right {
    padding-right: max(20px, (100vw - var(--container-max-width)) / 2);
    max-width: 675px;
    align-items: flex-start;
}

@media (max-width: 999px) {
    .content-left, .content-right {
        padding-left: 1rem!important;
        padding-right: 1rem!important;
        max-width: 100%;
    }
}


/* ── Content in the middle post of hw-news, hw-article types ───────────────────────────────────────────── */
.hw-the-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    max-width: 675px;
    margin-left: auto!important;
    margin-right: auto!important;
}
.hw-the-content p{
    margin: 0 0 1.25rem 0;
}
.hw-the-content h1,
.hw-the-content h2,
.hw-the-content h3,
.hw-the-content h4,
.hw-the-content h5,
.hw-the-content h6 {
    margin: 1.5rem 0 .75rem;
    font-weight: 600;
    line-height: 1.3;
}
.hw-the-content h1 { font-size: 2.25rem; }
.hw-the-content h2 { font-size: 1.875rem; }
.hw-the-content h3 { font-size: 1.5rem; }
.hw-the-content h4 { font-size: 1.25rem; }
.hw-the-content h5 { font-size: 1.125rem; }
.hw-the-content h6 { font-size: 1rem; }
.hw-the-content a {
    color: var(--hw-btn-color, #388062);
    text-decoration: underline;
}
.hw-the-content a:hover {
    color: var(--btn-hover-color, #2c6b4f);
    text-decoration: none;
}
.hw-the-content strong {
    font-weight: 600;
}
.hw-the-content ul, .hw-the-content ol {
    margin: 0 0 1.25rem 0;
    padding-left: 1.5rem;
}
.hw-the-content ul li, .hw-the-content ol li {
    margin: 0.5rem 0;
}
.hw-the-content ul li{
    list-style-type: disc;
}
.hw-the-content ol li{
    list-style-type: decimal;
}
.hw-the-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--hw-btn-color, #388062);
    background-color: rgba(56, 128, 98, 0.05);
    font-style: italic;
}
.hw-the-content code {
    background-color: rgba(56, 128, 98, 0.05);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: monospace;
}
.hw-the-content pre {
    background-color: rgba(56, 128, 98, 0.05);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
}
.hw-the-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
}
.hw-the-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}
.hw-the-content table th, .hw-the-content table td {
    border: 1px solid rgba(56, 128, 98, 0.1);
    padding: 0.5rem;
    text-align: left;
}
.hw-the-content table th {
    background-color: rgba(56, 128, 98, 0.05);
    font-weight: 600;
}
.hw-the-content table tr:nth-child(even) {
    background-color: rgba(56, 128, 98, 0.02);
}


/* ── List with Checkmark Icon ───────────────────────────────────────────── */
.hw-list-check-style,
.hw-list-check-style-white {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}
.hw-list-check-style li,
.hw-list-check-style-white li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  line-height: 1.6;
}
.hw-list-check-style li::before,
.hw-list-check-style-white li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px; 
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23193F78' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.hw-list-check-style-white li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}


.hw-machinery-machine .wp-block-column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}
.hw-machinery-machine .wp-block-column > div{ 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}
.hw-machinery-machine .wp-block-column > div > div { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.hw-machinery-machine .wp-block-column h5{ 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    min-height: 3rem; /* Adjust based on your font size and line height */
    
}
.hw-machinery-machine .wp-block-column img{
    max-height: 120px;
    width: 100%;
}

/* ── Accordion Style ───────────────────────────────────────────── */
.hw-accordion details{
    margin-bottom: 12px;
}

.hw-accordion summary {
    list-style: none;
    display: flex; 
    align-items: center;
    gap: 16px; 
}

.hw-accordion summary::-webkit-details-marker {
    display: none;
}

.hw-accordion summary::before {
    content: "";
    display: inline-block;
    width: 20px; 
    height: 20px; 
    
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23193F78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    transition: transform 0.3s ease; 
}

.hw-accordion[open] summary::before,
details.hw-accordion[open] summary::before {
    transform: rotate(90deg);
}

/* ── Table Style ───────────────────────────────────────────── */
.hw-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    /* responsive */
    overflow-x: auto;
}
.hw-table table{
    min-width: 700px;
}
.hw-table th, .hw-table td {
    border-bottom: 1px solid rgba(56, 128, 98, 0.1);
    border-right: 0;
    border-left: 0;
}

/* - td (1) width 48 and color #333,
    - td (2) width 200 and color #193F78,
    - td (3) width 150 and color #333,
    - td (4) width auto and color #333,
    */
.hw-table-catalog-test table thead tr th:nth-child(1),
.hw-table-catalog-test table tbody tr td:nth-child(1) {
    width: 48px!important;
    color: #333;
    font-weight: 400;
    text-align: center;
}
.hw-table-catalog-test table tbody tr td:nth-child(2),
.hw-table-catalog-test table thead tr th:nth-child(2) {
    width: 200px;
    color: var(--primary-color, #193F78);
    font-weight: 500;
}
.hw-table-catalog-test table tbody tr td:nth-child(3),
.hw-table-catalog-test table thead tr th:nth-child(3) {
    width: 150px;
    color: #333;
    font-weight: 700;
}
.hw-table-catalog-test table tbody tr td:nth-child(4),
.hw-table-catalog-test table thead tr th:nth-child(4)  {
    width: auto;
    color: #333;
    font-weight: 400;
    line-height: 1.5;
}
.hw-table-catalog-test table thead tr th{
    font-weight: 700!important;
    background-color:#E8EDF5;
    color: var(--primary-color, #193F78)!important;
}

/* ── Responsive Columns for Mobile ───────────────────────────────────────────── */
@media (max-width: 781px) {
    .wp-block-columns.hw-col-mb-2 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 16px !important; 
    }

    .wp-block-columns.hw-col-mb-2 > .wp-block-column {
        flex-basis: calc(50% - 8px) !important;
        width: calc(50% - 8px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ── Figure Style ───────────────────────────────────────────── */
.figure {
    cursor: pointer;
}

/* ── WP Block Button ───────────────────────────────────────────── */
.wp-block-button .has-background {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
.wp-block-button:hover .has-background {
    opacity: 0.85;
}



/* ==========================================================================
   Consent Cookies Banner
   ========================================================================== */
.gm-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #ffffff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

/* State class added by JS when banner should be visible */
.gm-cookie-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.gm-cookie-inner {
    max-width: var(--container-max-width, 1200px);
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Tablet & Desktop Layout */
@media (min-width: 768px) {
    #gm-cookie-main-view {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.gm-cookie-content {
    flex: 1;
}

.gm-cookie-heading {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-color, #1B3564);
    margin: 0 0 0.5rem 0;
}

.gm-cookie-desc {
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.5;
    margin: 0;
}

.gm-cookie-desc a{
    text-decoration: underline;
}

/* Actions & Buttons */
.gm-cookie-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.gm-cookie-actions-full {
    justify-content: flex-end;
    margin-top: 1rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
}

.gm-cookie-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.gm-cookie-btn-solid {
    background-color: var(--hw-btn-color, #388062);
    color: #ffffff;
}

.gm-cookie-btn-solid:hover {
    background-color: var(--btn-hover-color, #2c6b4f);
}

.gm-cookie-btn-outline {
    background-color: transparent;
    border-color: var(--hw-btn-color, #388062);
    color: var(--hw-btn-color, #388062);
}

.gm-cookie-btn-outline:hover {
    background-color: rgba(56, 128, 98, 0.1);
}

/* Toggle Switches for Preferences */
.gm-cookie-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}

.gm-cookie-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 0.875rem;
    color: #374151;
}

.gm-cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* The Toggle Slider */
.gm-cookie-slider {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background-color: #d1d5db;
    border-radius: 24px;
    transition: 0.3s;
    flex-shrink: 0;
    margin-left: 1rem;
}

.gm-cookie-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}

/* Checked State */
.gm-cookie-toggle input:checked + .gm-cookie-slider {
    background-color: var(--hw-btn-color, #388062);
}

.gm-cookie-toggle input:checked + .gm-cookie-slider:before {
    transform: translateX(20px);
}

/* Disabled State (For Required Cookies) */
.gm-cookie-toggle input:disabled + .gm-cookie-slider {
    background-color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.7;
}
.gm-cookie-toggle input:disabled ~ .gm-cookie-toggle-label {
    opacity: 0.7;
}
/* Styling for Cookie Options with Descriptions */
.gm-cookie-options {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0.5rem;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.gm-cookie-option-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 1rem;
}

.gm-cookie-option-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.gm-cookie-option-info {
    flex: 1;
}

.gm-cookie-toggle-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.gm-cookie-option-desc {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.4;
    margin: 0;
}

/* Adjust toggle container alignment */
.gm-cookie-toggle {
    cursor: pointer;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    margin-top: 2px;
}

.gm-cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.gm-cookie-actions-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.gm-cookie-policy-link {
    font-size: 0.85rem;
    color: #4b5563; 
    text-decoration: underline;
    transition: color 0.2s ease-in-out;
}

.gm-cookie-policy-link:hover {
    color: #111827; 
}

@media (max-width: 480px) {
    .gm-cookie-actions-footer {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .gm-cookie-actions-footer .gm-cookie-btn {
        width: 100%;
    }
}

.haewon-line{
    width: 100%;
    margin: 1.5rem 0;
    min-height: 100px;
    position: relative;
}
.haewon-line::before {
    content: "";
    display: block;
    height: 100%;
    border-left: 1px solid var(--hw-border);
    margin-left: 10px;
    position: absolute;
}







/* ==========================================================================
   Haewon – Single Product Fullscreen & Sidebar
   ========================================================================== */

.hw-sp-single {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}
/* ── Single slide ────────────────────────────────────────────────────────── */
.hw-sp-single-img {
    background: linear-gradient(to right, #f7f5f0, #e8e8e8, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
    overflow: hidden;
}
.hw-sp-single--green .hw-sp-single-img{
    background: linear-gradient(to right, #F2F6EF, #E8F0E4, #fff);
}
.hw-sp-single--blue .hw-sp-single-img{
    background: linear-gradient(to right, #E8F0F6, #E4E8F0, #fff);
}
/*
.hw-sp-single--pink .hw-sp-single-img{
    background: linear-gradient(to right, #F6E8F0, #F0E4E8, #fff);
}  */ 

.hw-sp-single-img img {
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
    display: block;
    transition: transform .5s ease;
    filter: drop-shadow(0 12px 32px rgba(45,90,39,.14));
}
.hw-sp-single--active {
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 2;
}
.hw-sp-single--active .hw-sp-single-img img {
    transform: translateY(-4px);
}
.hw-sp-single-detail {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    padding: 3rem 2.5rem 3rem 3rem;
}
/* content body post */
.hw-sp-single-content {
    font-size: 0.9rem;
    color: #616161;
    line-height: 1.5;
    margin: 24px 0;
}
.hw-sp-single-content ul {
    list-style: disc;
    margin: 12px 0;
    padding: 0;
}
.hw-sp-single-content ul li {
    margin-left: 1.5rem;
    margin-bottom: .5rem;
}
.hw-sp-single-content ol {
    list-style: decimal;
    margin: 12px 0;
    padding: 0;
}
.hw-sp-single-content ol li {
    margin-left: 1.5rem;
    margin-bottom: .5rem;
}
.hw-sp-single-content a {
    color: var(--hw-btn-color, #388062);
    text-decoration: underline;
}
    
/* category pill on slide */
.hw-sp-single-cat {
    display: inline-block;
    padding: .35rem 1rem;
    border-radius: 100px;
    border: 1.5px solid var(--hw-border);
    font-size: .8125rem;
    color: var(--hw-sage);
    background: transparent;
    font-weight: 400;
    align-self: flex-start;
}
.hw-sp-single-title {
    font-size: clamp(1.6rem, 2.8vw, 2.5rem);
    font-weight: 400;
    color: var(--hw-dark);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.hw-sp-single-subtitle {
    color: var(--hw-sage);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.hw-sp-single-sub {
    font-size: clamp(.95rem, 1.3vw, 1.125rem);
    font-weight: 300;
    color: #616161;
    margin: 0;
    line-height: 1.35;
}
.hw-sp-single-fda {
    font-size: .9rem;
    color: var(--hw-muted);
    margin: 0;
    line-height: 1.35;
}
.hw-sp-single-halal-logo {
    width: 60px;
    height: auto;
    display: block;
    margin-top: .5rem;
}
.hw-sp-single-fda--label {
    font-weight: 500;
    color: #616161;
}
.hw-sp-single-feats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .375rem;
}
.hw-sp-single-feats li {
    font-size: .9rem;
    color: var(--hw-text);
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.5;
}
.hw-sp-single-feats li::before {
    content: '·';
    position: absolute;
    left: .25rem;
    color: var(--hw-sage);
    font-weight: 700;
}
.hw-sp-single-readmore {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--hw-text);
    text-decoration: none;
    font-weight: 400;
    padding-top: .25rem;
}



/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hw-sp-single-img { padding: 2rem 1.5rem; min-height: 240px; }
    .hw-sp-single-img img { max-height: 260px; }
    .hw-sp-single-detail {
        border-left: none;
        border-top: 1px solid var(--hw-border);
        padding: 2rem 1.5rem;
    }
}
@media (max-width: 540px) {
    .hw-sp-single-img  { padding: 1.5rem 1rem; }
    .hw-sp-single-detail { padding: 1.5rem 1rem; }
    .hw-ps-viewall { padding: 1.25rem 1rem; }
}


/* ── Main Layout ─────────────────────────────────────────────────────────── */
/* ==========================================================================
   Haewon – Single Product Fullscreen 3 Columns
   ========================================================================== */

/* ── Main Layout ─────────────────────────────────────────────────────────── */
.hw-sp-single-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding-top: 64px;
    background: var(--hw-white);
}

.hw-sp-single-main {
    position: relative;
    width: 100%;
    min-height: 100vh;
    border-top: 1px solid var(--hw-border);
}

/* ── Fullscreen 3-Column Override ────────────────────────────────────────── */
.hw-sp-single-fullscreen {
    display: grid;
    /* 
      Column 1 (Sidebar): width 320px
      Column 2 (image): 1.2 
      Column 3 (detail): 1
    */
    grid-template-columns: 320px minmax(0, 1.2fr) minmax(0, 1fr);
    min-height: 100vh;
    width: 100%;
    border-bottom: none;
    background: #ffffff;
}

/* Column 1: Sidebar */
.hw-sp-single-sidebar {
    flex: 0 0 320px; 
    width: 320px;
    height: 100vh; 
    display: flex;
    flex-direction: column;
    background: var(--hw-white);
    border-right: 1px solid var(--hw-border);
}

/* Column 2 */
.hw-sp-single-fullscreen .hw-sp-single-img {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Column 3 */
.hw-sp-single-fullscreen .hw-sp-single-detail {
    height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding-right: 0;
}
.hw-sp-single-fullscreen .hw-sp-single-detail-inner {
    height: 100vh;
    overflow-y: auto; 
    display: flex;
    flex-direction: column;
    justify-content: start;
    box-sizing: border-box;
    padding-right: 2rem;
    padding-bottom: 4rem;
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

.hw-sp-single-share {
    margin-top: 12px;
}

.hw-sp-single-fullscreen .hw-ps-single-slide-img img {
    max-height: 80vh; 
    object-fit: contain;
}
.hw-sp-single-fullscreen .hw-ps-single-slide-title {
    font-size: clamp(2rem, 4vw, 3.5rem); 
}

/* ── Sidebar Styles ──────────────────────────────────────────────────────── */
.hw-sp-single-sidebar-header {
    flex-shrink: 0; /* ไม่ให้ header หดตัว */
    padding: 2rem;
    border-bottom: 1px solid var(--hw-border);
}
.hw-sp-single-sidebar-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--hw-dark);
}

.hw-sp-single-sidebar-content {
    flex: 1;
    overflow-y: auto; /* Scroll Product */
    padding: 1rem 0 4rem;
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
.hw-sp-single-sidebar-content a{
    background: transparent;
    transition: background 0.2s;
}
.hw-sp-single-sidebar-content a:hover{
    background: #ECECE2;
}
.hw-sp-single-sidebar-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    text-decoration: none;
    transition: background 0.2s;
    border-bottom: 1px solid #f5f5f5;
}
.hw-sp-single-sidebar-item:last-child {
    border-bottom: none;
}
.hw-sp-single-sidebar-item:hover {
    background: var(--hw-pill-bg);
}
.hw-sp-single-sidebar-img {
    width: 50px;
    height: 50px;
    background: #f7f5f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.hw-sp-single-sidebar-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.hw-sp-single-sidebar-name {
    font-size: 0.95rem;
    color: var(--hw-text);
    font-weight: 400;
    line-height: 1.4;
}

/* ── Responsive (Mobile / Tablet) ────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* ปรับลดขนาด Sidebar ลงบนจอ iPad */
    .hw-sp-single-sidebar {
        flex: 0 0 280px;
        width: 280px;
    }
}

@media (max-width: 900px) {
    .hw-sp-single-fullscreen {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: auto;
    }
    
    .hw-sp-single-fullscreen .hw-sp-single-img,
    .hw-sp-single-fullscreen .hw-sp-single-detail {
        width: 100%;
        min-height: auto;
    }

    .hw-sp-single-sidebar {
        width: 100%;
        flex: auto;
        height: auto;
        border-right: none;
        border-top: 1px solid var(--hw-border);
    }
    
    .hw-sp-single-sidebar-content {
        overflow-y: visible;
    }

    .hw-sp-single-fullscreen .hw-ps-single-slide-img {
        order: 1;
    }
    .hw-sp-single-fullscreen .hw-ps-single-slide-detail {
        order: 2;
    }
    .hw-sp-single-sidebar {
        order: 3;
    }
}




/* ==========================================================================
   Haewon Club - Single Fullscreen Gallery
   ========================================================================== */

/* ── Container 2 column (Desktop) ── */
.hc-split-container {
    display: grid;
    grid-template-columns: 38% 1fr; 
    min-height: 100vh;
    background: #ffffff;
    align-items: stretch;
    margin-top: 65px;
    border-top: 1px solid var(--hw-border);
}

/* ── Left Column: Information (Title, Excerpt) ── */
.hc-split-info {
    padding-left: max(2rem, calc((100vw - 1220px) / 2));
    padding-right: 3rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
    border-right: 1px solid var(--hw-border);
}

/* Sticky Left Column */
.hc-info-sticky {
    position: sticky;
    top: 6rem; /* Distance from the top of the viewport when locked */
}

.hc-title {
    font-size: clamp(1.6rem, 2.8vw, 2.5rem);
    font-weight: 400;
    color: var(--hw-dark);
    margin: 0;
    margin-bottom: 1rem;
    line-height: 1.2;
    letter-spacing: -.01em;
    transition: color .2s;
}

.hc-excerpt {
    line-height: 1.6;
}

/* ── Right Column: Gallery (Gallery Row & Grid) ── */
.hc-split-gallery {
    padding: 2rem;
    padding-right: max(2rem, calc((100vw - 1220px) / 2));
    display: flex;
    flex-direction: column;
    gap: 1.25rem; 
    background: #fdfdfd; 
}

.hc-gallery-row {
    display: flex;
    width: 100%;
    gap: 1.25rem;
}

.hc-gallery-item {
    position: relative;
    overflow: hidden;
    background: #e9e9e9;
}

.hc-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hc-gallery-item:hover img {
    transform: scale(1.04);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .hc-split-container {
        grid-template-columns: 1fr; /* ยุบเหลือ 1 คอลัมน์ */
    }
    
    .hc-split-info {
        padding: 3rem 1.5rem 1.5rem;
        border-right: none;
        border-bottom: 1px solid var(--hw-border);
    }
    
    /* Disable Sticky on mobile, let it flow naturally */
    .hc-info-sticky {
        position: relative;
        top: 0;
    }

    .hc-split-gallery {
        padding: 1.5rem;
        gap: 0.75rem;
    }
    
    .hc-gallery-row {
        gap: 0.75rem;
    }
}



/* ==========================================================================
   Contact Page - Social Grid
   ========================================================================== */

.hw-social-grid .hw-fg-icon--svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: #446088;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.hw-social-grid .hw-fg-icon--svg:hover { opacity: 0.8; }
.hw-social-grid .hw-fg-icon--svg svg { width: 1.25rem; height: 1.25rem; stroke: none!important; fill: #fff!important; }

.hw-social-grid a {
    color: #446088;
    transition: opacity 0.2s ease;
}
.hw-social-grid a:hover { color: #446088; opacity: 0.8; }
@media (max-width: 540px) {
    .hw-social-grid .hw-fg-card {
        padding: 0.5rem 2rem;
    }
}