
/* Header: explicit grid areas prevent menu visibility from creating implicit rows. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#announcement{font-size:.75rem;line-height:1.5;padding:8px 16px;letter-spacing:.13em}
#header{background:#082c21;border-bottom:1px solid #ad935745;color:#decb9e;isolation:isolate;backdrop-filter:none}
#header:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#082c21 0%,#082c21fc 50%,#082c21df 100%),url("./media-v23/product-wild-premium.jpg") right 40%/440px auto no-repeat;opacity:.8}
#header .masthead{display:grid;grid-template-areas:"brand nav actions";grid-template-columns:152px minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;gap:24px;width:100%;max-width:1600px;margin:0 auto;padding:8px 32px;min-height:0}
#header .mobile-menu{display:none}
#header .brand{grid-area:brand;display:block;position:relative;width:140px;height:98px;overflow:hidden;background:#fff;justify-self:start;border:1px solid #c3a56d70;border-radius:2px}
#header .brand img{display:block;position:absolute;top:0;left:0;margin:0;width:138px;height:138px;max-width:none;object-fit:contain}
#header .desktop-nav{grid-area:nav;display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:clamp(20px,2.6vw,44px);min-width:0;font-family:var(--sans);font-size:.9375rem;line-height:1.4;letter-spacing:.035em;writing-mode:horizontal-tb}
#header .desktop-nav details{flex:0 0 auto;position:relative}
#header .desktop-nav summary{display:flex;align-items:center;white-space:nowrap;word-break:keep-all;writing-mode:horizontal-tb;padding:18px 0;position:relative;cursor:pointer;color:#decb9e;list-style:none;line-height:1.5}
#header .desktop-nav summary::-webkit-details-marker{display:none}
#header .desktop-nav summary:after{content:"";position:absolute;bottom:8px;left:0;right:0;height:1px;background:#c7a963;transform:scaleX(0);transform-origin:left;transition:transform .2s}
#header .desktop-nav summary:hover:after,#header .desktop-nav details[open] summary:after{transform:scaleX(1)}
#header .desktop-nav summary:hover,#header .desktop-nav details[open] summary{color:#fff0c9}
#header .dropdown{top:100%;left:-22px;background:#123a2b;color:#f0e4c8;border:1px solid #b59b5e60;border-top:2px solid #c5a56a;box-shadow:0 18px 35px #0004;min-width:245px;padding:16px 22px;font-size:.9375rem;line-height:1.7}
#header .dropdown a{white-space:nowrap;padding:10px 0;border-bottom:1px solid #dbcca215}
#header .dropdown a:hover{color:white}#header .dropdown a:last-child{border-bottom:0}
#header .actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:12px;min-width:0;white-space:nowrap;line-height:1.4}
#header .actions .currency{font-size:.75rem;color:#b4c1a7;letter-spacing:.025em}
#header .actions .currency select{appearance:none;border:1px solid #c7a96366;border-radius:999px;background:#ffffff08;color:#e2d4ad;font:inherit;letter-spacing:.025em;padding:8px 24px 8px 10px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,#d8b772 50%),linear-gradient(135deg,#d8b772 50%,transparent 50%);background-position:calc(100% - 13px) 50%,calc(100% - 9px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
#header .actions .currency select:focus-visible{outline:2px solid #f1d79c;outline-offset:2px}
#header .actions .currency option{background:#123a2b;color:#fff}
#header .actions .icon{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:42px;margin:0;padding:4px;color:#e2d4ad;flex:0 0 auto;font-size:1.35rem;line-height:1}
#header .actions .count{font-size:.75rem;color:#d1b375}
#header .langs{display:flex;align-items:center;flex-wrap:nowrap;gap:2px;margin-left:4px;padding-left:13px;border-left:1px solid #ccb37d50;flex:0 0 auto}
#header .langs button{font-family:var(--sans);font-size:.8125rem;line-height:1.5;white-space:nowrap;min-width:32px;min-height:38px;padding:6px;color:#c6cbb4;border:0;border-bottom:1px solid transparent}
#header .langs button.active{color:#ffe4a5;border-bottom-color:#d8b772;background:#cdb77d0d}
#header .langs button:hover{color:#fff0c9}
html[lang=th] #header .desktop-nav{letter-spacing:0;font-size:.875rem}
@media(max-width:1120px){
#header .masthead{grid-template-areas:"menu brand actions";grid-template-columns:36px minmax(100px,1fr) auto;gap:14px;padding:8px 24px}
#header .desktop-nav{display:none}
#header .mobile-menu{grid-area:menu;display:inline-flex;align-items:center;justify-content:center;width:36px;height:42px;padding:0;color:#e0ca97;font-size:1.5rem}
#header .brand{width:112px;height:78px}
#header .brand img{width:110px;height:110px}
#header .actions .currency select{max-width:86px;padding-inline:8px 20px}
}
@media(max-width:560px){
#announcement{font-size:.6875rem;letter-spacing:.05em;padding:7px 10px}
#header .masthead{grid-template-columns:28px minmax(90px,1fr) auto;gap:9px;padding:7px 12px}
#header .mobile-menu{width:28px;height:40px;font-size:1.35rem}
#header .brand{width:98px;height:70px}#header .brand img{width:96px;height:96px}
#header .actions{gap:4px}
#header .actions .currency select{max-width:72px;font-size:.6875rem;padding:6px 18px 6px 7px;background-position:calc(100% - 10px) 50%,calc(100% - 6px) 50%}
#header .actions>a.icon{display:none}
#header .actions .icon{min-width:32px;padding:2px}
#header .langs{padding-left:6px;margin-left:2px;gap:0}
#header .langs button{font-size:.75rem;min-width:29px;padding:5px;min-height:38px}
}
@media(max-width:360px){
#header .masthead{gap:5px;padding-inline:8px;grid-template-columns:26px minmax(78px,1fr) auto}
#header .brand{width:86px;height:62px}#header .brand img{width:84px;height:84px}
#header .langs button{min-width:26px;padding:4px}
}
