* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #29463b; font-family: "Noto Sans Thai", "Segoe UI", Tahoma, sans-serif; font-size: 16px; background: #f3f8f5; }
a { color: inherit; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.gallery-header { position: sticky; z-index: 1000; top: 0; height: 72px; border-bottom: 1px solid #dfebe5; background: rgba(255,255,255,.97); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.brand { display: flex; align-items: center; color: #156f50; font-size: 21px; font-weight: 700; text-decoration: none; }
.brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 10px; border-radius: 11px; color: #fff; background: #16865f; }
.back-link { padding: 9px 13px; border-radius: 8px; color: #506c62; font-size: 14px; font-weight: 600; text-decoration: none; }
.back-link:hover, .back-link:focus { color: #126d4d; background: #edf6f1; }
.gallery-hero { padding: 48px 0 40px; color: #fff; background: linear-gradient(135deg,#0b6146,#13835d 64%,#3baa7d); }
.hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; }
.hero-eyebrow { display: inline-block; margin-bottom: 9px; font-size: 13px; font-weight: 600; opacity: .9; }
.gallery-hero h1 { margin: 0 0 7px; font-size: 34px; font-weight: 700; }
.gallery-hero p { margin: 0; color: #dcefe7; font-size: 15px; line-height: 1.75; }
.level-tabs { display: flex; flex: 0 0 auto; gap: 7px; }
.level-tabs a { padding: 9px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 9px; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.level-tabs a:hover, .level-tabs a:focus, .level-tabs a.is-active { color: #146b4e; background: #fff; }
.gallery-main { padding: 35px 0 65px; }
.gown-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.gown-card { display: block; overflow: hidden; border: 1px solid #dce8e2; border-radius: 15px; color: #29463b; background: #fff; box-shadow: 0 5px 18px rgba(38,69,57,.06); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.gown-card:hover, .gown-card:focus { transform: translateY(-3px); color: #147957; box-shadow: 0 11px 27px rgba(38,69,57,.13); text-decoration: none; outline: none; }
.gown-image { display: flex; align-items: center; justify-content: center; height: 355px; overflow: hidden; padding: 10px; background: #fafcfb; }
.gown-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gown-caption { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-top: 1px solid #e4ece8; font-size: 14px; font-weight: 700; }
.gown-caption i { color: #7b958b; }
.gallery-footer { padding: 22px 0; border-top: 1px solid #dfebe5; color: #73867e; background: #fff; font-size: 13px; text-align: center; }
.image-lightbox { position: fixed; z-index: 2000; inset: 0; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(8,24,18,.9); }
.image-lightbox.is-open { display: flex; }
.lightbox-dialog { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.lightbox-image { display: block; max-width: 94vw; max-height: 91vh; border-radius: 10px; background: #fff; box-shadow: 0 20px 55px rgba(0,0,0,.45); object-fit: contain; }
.lightbox-close { position: absolute; z-index: 2; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; background: rgba(0,0,0,.62); font-size: 20px; cursor: pointer; }
.lightbox-close:hover, .lightbox-close:focus { color: #173f32; background: #fff; outline: none; }
body.lightbox-open { overflow: hidden; }
@media (max-width: 850px) {
    .hero-inner { display: block; }
    .level-tabs { margin-top: 20px; }
    .gown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .container { padding: 0 14px; }
    .gallery-header { height: 64px; }
    .brand { font-size: 18px; }
    .brand-icon { width: 35px; height: 35px; }
    .back-link span { display: none; }
    .gallery-hero { padding: 35px 0 31px; }
    .gallery-hero h1 { font-size: 27px; }
    .level-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
    .level-tabs a { padding: 9px 8px; text-align: center; }
    .gallery-main { padding-top: 22px; }
    .gown-grid { grid-template-columns: 1fr; }
    .gown-image { height: 390px; }
    .image-lightbox { padding: 10px; }
    .lightbox-image { max-width: 97vw; max-height: 89vh; }
    .lightbox-close { top: 4px; right: 4px; width: 40px; height: 40px; }
}